4 ms·

> Unfortunately, in our efforts for global domination we quickly discovered the performance limitations of the project as it stood, as well as my personal knowl

by chime 14y ago

> Unfortunately, in our efforts for global domination we quickly discovered the performance limitations of the project as it stood, as well as my personal knowledge with Three.js and WebGL. In short, the expanded version of London ran at a horrible 20–40fps depending on the system you viewed it on. You got a lot farther than me when I tried Three.js before hitting performance problems. I was trying to make a WebGL 3d warehouse visualization app: http://chir.ag/projects/wh/ http://chir.ag/projects/wh/ and stopped because it was too slow once I loaded 1000 bins. I also never quite figured how to handle rotation/panning nicely (src: http://chir.ag/projects/wh/main.js http://chir.ag/projects/wh/main.js). I came up with a shorthand http://chir.ag/projects/wh/bins/wh.txt http://chir.ag/projects/wh/bins/wh.txt that expands to http://chir.ag/projects/wh/bins/bins.php http://chir.ag/projects/wh/bins/bins.php - I was going to make it an easy to use app where you could describe how the warehouse was organized with 20-30 lines of bin#s and positions and let the system generate the rest. Then it could parse APIs containing various properties per bin (full/empty, inventory amount, frequency of usage, days-since-last-used etc.) Clicking on any bin would open up a panel with more information and you'd have filtering/highlighting capability for the whole warehouse. I made good progress initially but got busy with life and never got around to solving the too-many-bins problem. I still don't know how to improve the performance. Even when entire objects are outside the view, they still take up resources and time. I see you mentioned LOD support in Three.js - no idea if it would help me or not because each object is already as simple as it can be - just a box. If someone wants to hack on this and make it functional, I'll help however I can.

robhawkes 14y ago
Any chance you could put that up / a version of it up on jsFiddle or something so I can edit it online and see how I can help? There's a few techniques that I could play with. 1000 objects should be silky smooth…
- chime 14y ago
  Absolutely! Give me a few hours and I'll have it up. Thanks for the offer. Also it ended up being 6000 objects because a box is 6 planes. I wanted to reduce that to only visible planes but because boxes could be partially translucent depending on some property and be selectable when clicked, it would look weird if inside sides were missing.
  - robhawkes 14y ago
    Cool, I'll keep an eye open for the link. Even 6,000 objects would be fine, especially if they're cuboids. There are demos with 120,000 cubes running at 40fps+, or even 500,000 cubes if you want to use fancy buffer geometry techniques.
- chime 14y ago
  Here you go: http://jsfiddle.net/chime/xs4MK/3/ http://jsfiddle.net/chime/xs4MK/3/ Thanks so much! Everyone is welcome to share/extend this. If the 3D part works better, I can make a JS function to convert: 1-WH-[001:011]{A:D}, 30,{0},[20] into: {"1-WH-001A":[30,0,20,1,1,1,10329599],"1-WH-001B":[30,1,20,1,1,1,10198015],"1-WH-001C":[30,2,20,1,1,1,10987519]} The data is in the format bin:[x,y,z,sx,sy,sz,color] - the color will obviously be dependent on the data. Position and size are fixed in most warehouse simulations.
  - bhickey 14y ago
    Have you tried merging geometry? http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/ http://learningthreejs.com/blog/2011/10/05/performance-mergi...
  - robhawkes 14y ago
    I haven't had a chance to look yet, but yes, try merging the geometry first.
superqd 14y ago
Not sure if this is feasible for you, unless you are comfortable with getting your hands dirty, but I decided to forgo the use of a 3rd party library and write the WebGL code myself for my latest project. Other folks mentioned geometry merging, and for me, that has been the single biggest performance booster on my current project. We were hitting a wall with some models that had 30,000 individual objects (several million verts, 10 million indices). But since we were writing the WebGL ourselves, I just added a bit of code to batch up all the objects into as big a bucket as WebGL could handle (up to 65k verts per draw call), thereby reducing the number of draw calls (drawElements). For our larger models, we went from 1100 ms per frame, down to 1-5ms per frame. We've done other things as well, but none had so large an impact as merging the geometry into larger chunks. But I can't speak to doing that in Three.js, since I didn't use it. But you should easily be able to handle the geometry you've got at 60 fps.
- dirkk0 14y ago
  This is exactly what you do in ThreeJS. THREE.GeometryUtils.merge does that.
batgaijin 14y ago
I feel like webgl is an advertisement for nacl

by chime 14y ago

robhawkes 14y ago

Any chance you could put that up / a version of it up on jsFiddle or something so I can edit it online and see how I can help? There's a few techniques that I could play with. 1000 objects should be silky smooth…

chime 14y ago
Absolutely! Give me a few hours and I'll have it up. Thanks for the offer. Also it ended up being 6000 objects because a box is 6 planes. I wanted to reduce that to only visible planes but because boxes could be partially translucent depending on some property and be selectable when clicked, it would look weird if inside sides were missing.
- robhawkes 14y ago
  Cool, I'll keep an eye open for the link. Even 6,000 objects would be fine, especially if they're cuboids. There are demos with 120,000 cubes running at 40fps+, or even 500,000 cubes if you want to use fancy buffer geometry techniques.
chime 14y ago
Here you go: http://jsfiddle.net/chime/xs4MK/3/ http://jsfiddle.net/chime/xs4MK/3/ Thanks so much! Everyone is welcome to share/extend this. If the 3D part works better, I can make a JS function to convert: 1-WH-[001:011]{A:D}, 30,{0},[20] into: {"1-WH-001A":[30,0,20,1,1,1,10329599],"1-WH-001B":[30,1,20,1,1,1,10198015],"1-WH-001C":[30,2,20,1,1,1,10987519]} The data is in the format bin:[x,y,z,sx,sy,sz,color] - the color will obviously be dependent on the data. Position and size are fixed in most warehouse simulations.
- bhickey 14y ago
  Have you tried merging geometry? http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/ http://learningthreejs.com/blog/2011/10/05/performance-mergi...
- robhawkes 14y ago
  I haven't had a chance to look yet, but yes, try merging the geometry first.

superqd 14y ago

Not sure if this is feasible for you, unless you are comfortable with getting your hands dirty, but I decided to forgo the use of a 3rd party library and write the WebGL code myself for my latest project. Other folks mentioned geometry merging, and for me, that has been the single biggest performance booster on my current project. We were hitting a wall with some models that had 30,000 individual objects (several million verts, 10 million indices). But since we were writing the WebGL ourselves, I just added a bit of code to batch up all the objects into as big a bucket as WebGL could handle (up to 65k verts per draw call), thereby reducing the number of draw calls (drawElements). For our larger models, we went from 1100 ms per frame, down to 1-5ms per frame. We've done other things as well, but none had so large an impact as merging the geometry into larger chunks. But I can't speak to doing that in Three.js, since I didn't use it. But you should easily be able to handle the geometry you've got at 60 fps.

dirkk0 14y ago
This is exactly what you do in ThreeJS. THREE.GeometryUtils.merge does that.

batgaijin 14y ago

I feel like webgl is an advertisement for nacl