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.