Three.js instancing equivalent

Question

I've recently started playing with three.js. Noticed that even with a few thousand simple cubes, the performance starts to drop.

So this brings my main question: is there any way to instance using three.js? I'm pretty sure this drop in performance is related to the drawcalls, therefore if instancing is possible with three.js somehow, it can help support the performance.

I'm aware of buffers but at this point it's impossible for me to create a geometry buffer that will give me the power to modify individual objects during runtime. If there is a library to handle all this, this also counts as a solution.

Shortly, I'm looking for an equivalent of object instancing in three.js. Any suggestions are appreciated.

Answer 1

I've understood that instancing can be emulated / reimplemented with a shader. Am not sure and have not tried though.

This old demo has 150k individually animated cubes on the GPU btw, but the source is minified so was hard to see what's going on. Perhaps not a proper instancing solution that would work for any mesh, am not sure, might even be. http://alteredqualia.com/three/examples/webgl_cubes.html

Will keep an eye open for this as we'd need it too I think.. (have added trees to vizicities in a demo now)

Answer 2

I have only thought up a solution and have not tried it yet. I want to instance very complex meshes and have them animated using a skeleton. It seems the JSON loader only loads as Geometry G. I want to convert to BufferGeometry BG1, than make another BufferGeometry BG2. Then assign references of vertex attributes, etc from BG2 to BG1

//load mesh
...
var mesh = loadMesh();

//convert to buffer geometry
var BG1 = new BufferGeometry();
BG1.fromGeometry(mesh);

var BG2 = new BufferGeometry();
BG2.addAttribute('position', G1.attributes['position']);
BG2.addAttribute('normal', G1.attributes['normal']);
BG2.addAttribute('uv', G1.attributes['uv']);
BG2.addAttribute('color', G1.attributes['color']);

BG2.drawcalls = BG1.drawcalls;
BG2.boundingBox = BG1.boundingBox;
BG2.boundingSphere = BG1.boundingSphere;

Its my understanding that webgl will share these buffers and not duplicate the memory used in VRAM. Any comments are welcome.