Play same animation on two objects using a single mixer

Questions
1

I have an animation of an origami bowl. I want the model to have different colors on it front and back side. I tried doing it with a custom shader that would set the color on gl_FrontFacing. It works but there was some z-fighting issues. I modified the vertex shader to offset the back polygons’ z component. It doesn’t work right.
I think I would be better to just use multiple materials and use the polygonOffsetFactor to offset the back polygons and prevent z-fighting to some degree.
I tried using an array of materials, but it didn’t work. It works when I put two objects with materials with side set to THREE.Front and THREE.Back. But this requires me to use two AnimationMixers to get the ball rolling. Is there anyway to use just one mixer and play the animation on both the objects simultaneously? Or maybe is there any other way of fixing the z-fighting issue using the custom shader approach?

var material = new THREE.MeshLambertMaterial({

	side: THREE.DoubleSide,
	
});

material.onBeforeCompile = function(shader) {

	shader.vertexShader = shader.vertexShader.replace(
		'#include <fog_vertex>', 
		'#include <fog_vertex>\n' +
		'if ( dot(transformed, transformedNormal) < 0.0) gl_Position.z -= 0.1;\n'
	);

	shader.fragmentShader = shader.fragmentShader.replace(

		'gl_FragColor = vec4( outgoingLight, diffuseColor.a );',

		'gl_FragColor = gl_FrontFacing ? vec4(1.0, 1.0, 1.0, 0.5) : vec4(0.13, 0.13, 1.0, 0.5);' 

	);

}

material.morphNormals = true;
material.morphTargets = true;
2

Well, there is AnimationObjectGroup that can be used to share an animation state for multiple objects. There is also an example that demonstrate the usage of this class:

https://threejs.org/examples/misc_animation_groups

3 Likes
3

Thanks a lot, this forum is the BEST!!! :smile:

2 Likes
4

Sorry for the necro, but I’m digging into this stuff, and this thread is relevant (to me it seems better to use the same thread, but let me know if next time I should post a new thread instead).

It seems that another way to play animation for multiple object is to simply pass a root object in the tree that is an ancestor of all the objects that need to be animated. I tested it, and it works (of course then be careful no other objects with same-bones are in that subtree, and organizing this way may not always be feasible).

But what is different about using a common root node in the scene is that Object3D.add does not have all the logic that AnimationObjectGroup.add does. So that makes me wonder if something is missing? Why is all that extra stuff in AnimationObjectGroup needed when using a common ancestor node seems to work just the same? What is the difference (putting aside organizational considerations like it possibly not being feasible to use a shared ancestor when it could unintentionally animate other objects)?

2 Likes
5

I’d also like to know this.

Currently on a hunt for a good ‘setting up complicated three.js scenes with many objects/armatures/animations at once’ guide.