[Week 3] three.js and performance issues

posted 15 Aug 2013, 07:36 by Kevin Kaiwen Liang   [ updated 5 Oct 2013, 07:21 ]
Last week, I made a block placement test using the three.js Javascript library. While I'm glad that I got something interactive and working, there are a few issues:
  • The crosshair position is off-centre (I should really be using a sprite inside the canvas, not CSS divs over it)
  • There are a few problems in Firefox (such as double clicking selecting the canvas), so it's best to try the demo in Chrome
  • Cubes aren't being properly deleted from the scene (I need to work out how three.js handles deleting geometries)
However, there is one large problem - performance. Rendering something like 40000 cubes takes a horrendously long time, on my computer at least. I'm still not exactly sure what the bottleneck is at this stage though.

Examples like this, this and this make me believe that three.js is capable of rendering large numbers of objects, I just need to figure out how. I've also just found a writeup on this blog post explaining how a procedural city can be generated using three.js - I'll look through it carefully later. 0fps also has some performance tips for voxels engines in general, although I'm not sure how easy it would be to implement some of the tips.

On another note, here are a few relevant links:

To do/Ideas
  • Test on Firefox and fix any problems there
  • Preloading screen
  • Clean up code - e.g. putting code into an init() function, or a different .js file
  • Fix the crosshair, the fps counter and deleting cubes from the scene
  • Create a flag for debugging (on debug mode - display debugging messages and any data from renderstats.js)
  • Work out how to fix the performance problem and decide on a data structure (should be compressed, have fast read/write and have quick access to neighbours if possible)
  • Collision detection (can happen much later)