InstancedMesh animations, like with SkinnedMesh?

@pailhead It would eventually be great to have animations on instanced meshes (f.e. like with SkinnedMesh when importing GLTF models with animations) so as to avoid multiple render calls.

I wonder how animations with InstancedMesh would work.

1 Like

I believe that there is a pr by takahiro that does that. I sort of abandoned my project now that three has its own.

I’m not aware of such a PR.

Oooh, got links?

It’d be sweet to bring features from yours into Three.js. The one in Three.js is still lacking in comparison. I’m using yours in “production” right now. :smiley: Maybe I can find some time to try porting some concepts from yours to Three sometime, in the infinite amount of time we all have.

The Code published on npm was more or less the same as a PR already made in early 2017. Mrdoob presented it at gdc that year as a feature that will make it into the next release it never did. My time is unfortunately finite. I’ll find the link; maybe you can check why it got stalled and closed and advise for some ideas to be ported…


does that project still exist? do you have link?

In the meanwhile, three.js has it’s own instanced mesh implementation. Check out:

1 Like

Instanced mesh can be used for instancing skinned mesh? Because I have used instanced mesh for simple meshes but when I tried with skinned mesh it didn’t work, also didn’t see any examples.

No, that is not yet possible.

1 Like

So what are the ways to optimize scene which contains multiple skinned meshes?

most likely with some simple hacking you can make them play the same animation, like an army of marching soldiers… but to make them all play different animations is a large piece of work.

Ummm. Your method of rendering the various sets of instancedMeshes and then turning them on/off with the keys was pretty cool. In fact, using the new InstancedMesh implementation I reused that approach and the results are awesome. You indeed hit the nail on the head with keeping the cache full of all of the instances and handling decomposition. I currently have a new version of that, that is not only rendering thousands of instancedMeshes (r132), but with a ton of BatchMeshed text and SVG icons, converted to instances, all over them. I ran into issues setting up event handlers for the various InstancedMesh raycasting but I was able to create a solution for that eats no memory at all. All meshes are clickable and all very fast. A ton of transforms on all of these meshes too with TWEEN. The FPS is a train that does not move from 60 FPS. All of this running with Bloom Post Processing effects to boot. I am right now trying to deploy it from a GitHub project so I can get some more performance tips.

That solution was awesome and thank you for that. I do like the new implementation of InstancedMesh and its much simpler with Raycasting working like a champ. I’m pretty sure I sent someone quite a lot of “Pizza Money” for that.

All of you guys are amazing. Its taken about 3 years total but I’ve become very proficient with Three. InstancedBufferGeometry, various Materials, camera control, composition, post processing, performance optimization, GL shaders, lighting, etc. In fact, all of my lighting is baked in my materials. I rewrote your original solution a few times trying to inject new geometries into the clones, and adding my own indexes for positions, but I failed every time. In the end my skills in Prototype became very good but to the point where I realized that I was trying to do something that as Mugen once told me was not possible with InstancedMesh alone. He was right. But now, it’s done, and although I realize there are limits to the number of the vertices that can be performant, I have the solution that I started out to create. It’s 1 single drawcall. All in a single 3DObject that I can scale at will if I want to. My current scene depth is about 20Su but I have it scaled down to (.1, .1, .1) from that I believe. I am using all basic materials for performance, of course, but I would like to get some tips on being able to use some better materials in this thing.

A big thank you to all of you! @prisoner849 , @Mugen87 , @donmccurdy, @mrdoob, @looeee. I crawled through even the hijacked build discussions learning everything I could. I know I left some people out but man, what Ive learned from you guys, insane. ThreeJS is awesome. I love it. I have another question open on how to deploy everything as I created all my model in the examples folder, using /jsm/, but once I finish that I’m going to show you guys something pretty cool that you helped create. You made a 3D coder out of a standard application developer. I wanted to prove that WebGL site could do everything that a standard DOM site could do with even better performance. I did that. Thank you from the bottom of my heart.


I’m too dumb for that ig, but will have to try. Do you know any examples where skinned mesh is created from scratch with three js’s skinned mesh class? I just wanna understand how skinned mesh works

look into examples/jsm/loaders that support an animation - gltf, dae, fbx

TL;DR iirc it is just a normal mesh where geometry has two extra attributes, skin indices and skin weights. indices say which bones affect the vertex, and weights say how much

1 Like

Hi @Mugen87 - thanks for pointing to Three.js documentation for instanced mesh. I think I’m arriving here with the same question as @bhushan6

I’m working on a flock of birds, where each bird is skinned and animated. Currently, the GPU renders each bird one by one and that really strains the performance. I’ve been investigating Instanced Mesh and Instanced Buffer Geometry to take the route of instantiating a single bird and then rendering the entire flock at once. But I’m unsure if I can achieve that for a Skinned Mesh.

I was also thinking about the approach to group all the bird geometry into a single Buffered Geometry and render it. But I wonder if that’ll really help in optimizing the frame drop.

Would you have a suggestion / any example on how to optimize the flock with so many skinned meshes animating and changing Position and Rotation?

Check this out

1 Like

Thanks for linking that PR for InstancedSkinnedMesh @bhushan6. That’s promising.

The other idea you mentioned @eulphean, merging all birds into a single geometry and animating the vertices, would work but would take more memory (O(N) instead of O(1)).

1 Like

Thanks @trusktr for your response.

I was looking into the Flamingo example on Three.js website that looks like it might work for me.

Using the Flamingo model as reference, I could strip away the armature from my skinned model and convert the Bone animations into Shape Key animations. This way I could export a clean mesh with one flying animation and vertex colors (just like the Flamingo model).

I have already optimized the flock calculations on the CPU using octree. I was wondering if I could use InstancedMesh to render all the geometry and also play the animation on that mesh. Does that seem possible? I guess that loops back to your original question, but now the Mesh isn’t really skinned anymore.