Performance

How to maximize performance from voodoo.js?

Disable layers you don't need

Voodoo creates two fullscreen WebGL canvases by default, one above your 2D page (Z > 0), and one below your 2D page (Z < 0). If you are sure you won't have any content above, then set Options.aboveLayer to false when creating your engine. Similarly, set Options.belowLayer to false if all your 3D content will be above the page.

Disable antialiasing and the seam layer

Antialiasing is expensive and disabling it will improve performance. Just set Options.antialias to false. However, if you do want antialiasing, you can also turn off the seam layer which eliminates the small seam between objects crossing the above and below layers. Set Options.seamLayer to false. Disabling the seam layer should give a large performance boost.

Disable stencils if they're not being used

The stencil layer is expensive, and if there are no custom stencil views, it is not needed. Set Options.stencils to false.

Disable real-time rendering and updates

By default, Voodoo will redraw your scene on every scroll and browser resize event, and will also raycast your mouse with every mousemove. However, by setting Options.realtime to false, you tell Voodoo to only redraw and raycast when the requestAnimationFrame runs which is less frequent. Many times this will be good enough.

Enable performance scaling

Performance scaling lowers the resolution of the canvases down once the frames per second drops below a certain threshold for a few frames. Set Options.performanceScaling to true to enable.

Make sure your Views have above and below set

Individual models often only exist above or below the page, and when that is the case, you should set View.above or View.below to false because both are true by default. See the documentation for details.

Use the cache to reuse geometry in your View

Using the cache to reuse geometry will speed up creating multiple instances of your models. See Example 4 in the samples for a demo of using the cache.

Do as much work as possible in the Model

Since there are multiple instance of your Views and only ever a single Model, it makes sense to do as much work as you can in the Model and pass the results to functions in the View. This does not apply to creating Three.js objects since they are unique to each View, but any initialization of data or settings should happen in the Model.

Dispose of Three.js objects and other memory during View.unload

Memory leaks can impact performance, especially when you create and destroy components often. You can discover memory leaks in your components by creating and destroying them in a loop while watching to see if your browser's memory usage goes up. Here are a couple tips. During View.unload, be sure to call dispose on all geometry, materials, and textures you are no longer using. (It is not necessary to remove meshes from the scene; this happens automatically). Also, during Model.cleanUp, be sure to remove objects in the cache that are no longer needed and unsubscribe from non-Voodoo events.