Instancing tutorial

Resources
1

I wrapped up my instancing tutorial and ended up breaking it into three parts.

Part 1 tackles the introduction and a theoretical overview, there’s code but it’s mostly illustrative:

Part 2 takes an existing three.js example that looked suitable for instancing and rebuilds it with instancing. There’s raycasting going on in the demo, this is kept as is ie. we don’t opt for gpu picking, we keep the cpu mesh raycasting. This completely decouples the rendering and scene graph concerns, i think most examples i’ve seen stop when they enable instancing.

Part 3 tries to further optimize the demo, it actually fails at that since brute forcing the cubes seems to still work better, but it outlines the idea with code, and leaves some ideas for the reader. It also shows how all of this can be done with a few lines using an abstracted class.

7 Likes
2

Added another chapter to part3.

There’s a demo but i need to expose the instance count. This chapter talks about bottle necks. If you hit space you should see the cull cells. If you hit W you should switch to the instance call. Because it binds the attributes, it’s much slower despite having the same count. However, it can push much more geometry through it, so it doesn’t make a difference if each cell is only one box or 100.

https://rawgit.com/pailhead/three.js/instancing-part3-toggle/examples/webgl_interactive_cubes.html