Using morphs with a material

Sarge · November 19, 2019, 8:45pm

Hello,

I load an FBX model that has blendshapes (morphs) on it and was able to reach them and play around using dat.gui sliders. Then I tried loading a texture on the model, but the I lost the control of the morphs, they were zeroed out. Without material it works fine but with it I can not seem to get morph value changes working.

donmccurdy · November 19, 2019, 9:53pm

Are you replacing mesh.material, or just modifying mesh.material.map? If you replace a material, you’ll have to enable morph targets on the new one with .morphTargets=true and (perhaps) .morphNormals=true. https://threejs.org/docs/#api/en/materials/MeshStandardMaterial

Sarge · November 20, 2019, 7:05am

I replaced mesh.material, also tried setting morphTargets and morphNormals set to true in my ShaderMaterial. Still didn’t work, I havent try the material map tho.

donmccurdy · November 20, 2019, 7:20am

Ah, important to mention if you’re using ShaderMaterial. By using ShaderMaterial instead of the default materials, you’re going to have to implement the morph targets in the shader yourself. For an example of how it’s implement in the builtin materials, see:

github.com

zeux/three.js/blob/18593e6cc1a2861f9e66b3e51957c1ccc8d4917f/src/renderers/shaders/ShaderChunk/morphtarget_vertex.glsl.js

export default /* glsl */`
#ifdef USE_MORPHTARGETS

	// morphTargetBaseInfluence is set based on BufferGeometry.morphTargetsRelative value:
	// When morphTargetsRelative is false, this is set to 1 - sum(influences); this results in position = sum((target - base) * influence)
	// When morphTargetsRelative is true, this is set to 1; as a result, all morph targets are simply added to the base after weighting
	transformed *= morphTargetBaseInfluence;
	transformed += morphTarget0 * morphTargetInfluences[ 0 ];
	transformed += morphTarget1 * morphTargetInfluences[ 1 ];
	transformed += morphTarget2 * morphTargetInfluences[ 2 ];
	transformed += morphTarget3 * morphTargetInfluences[ 3 ];

	#ifndef USE_MORPHNORMALS

	transformed += morphTarget4 * morphTargetInfluences[ 4 ];
	transformed += morphTarget5 * morphTargetInfluences[ 5 ];
	transformed += morphTarget6 * morphTargetInfluences[ 6 ];
	transformed += morphTarget7 * morphTargetInfluences[ 7 ];

	#endif

This file has been truncated. show original

If you’re having trouble getting this to work, you’ll need to share your code or a demo for others to help further.

Sarge · November 20, 2019, 8:21am

Thank you, i’ll try this and come back :0)

Mugen87 · November 20, 2019, 10:51am

We lately discussed a similar issue here at github:

Check out the fiddle from this comment. It shows how you integrate the necessary code for morph targets into an instance of ShaderMaterial.

DolphinIQ · November 20, 2019, 11:37am

@Mugen87 Are there currently any plans regarding node material or shader chunks documentation? Is it coming soon or still far away? Maybe hopefully this year?

Mugen87 · November 20, 2019, 11:42am

Sorry, I’m afraid the respective documentation does not have a high priority right now. You have to wait for 2020.

DolphinIQ · November 20, 2019, 11:51am

Thats okay, we appreciate the hard work of all the contributors

Sarge · November 20, 2019, 1:52pm

Thank you @Mugen87 your shader example from the fiddle worked for me!

donmccurdy · November 20, 2019, 6:35pm

Are there currently any plans regarding node material [documentation]?

I’d be willing to write this, but there are some open questions that make it too early just yet. NodeMaterial documentation · Issue #17971 · mrdoob/three.js · GitHub

Topic		Replies	Views
Shader material with morph targets Questions morph-targets	10	2159	August 29, 2023
morphTargetInfluences With MeshRefractionMaterial from @react-three/drei Questions shaders , morph-targets , react-threedrei , meshrefractionmaterial	0	416	August 30, 2023
FBX Blend Shape Questions fbx-loader , animation , morph-targets	5	4948	September 11, 2018
FBX animation don't work with custom shader Questions shaders , fbx-loader , animation	3	1238	September 28, 2018
Lambert Material Morph Option Threejs Docs Questions animation , morph-targets	5	1781	January 1, 2019

Using morphs with a material

Related topics