Play same animation on two objects using a single mixer

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;

Issue: https://cdn.discordapp.com/attachments/686304808994340865/687612921894797320/bandicam_2020-03-12_16-29-07-837.mp4

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

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

2 Likes