Shader material with morph targets

Questions
1

I tried to use shadermaterial with morph targets, with shadermaterial I just want to change the look of the object,not its geometry. I have not been successful in doing that. The morph targets stop working if I use shadermaterial . Is this a bug? how can I get away with this …

I have not found any solution or question asked about this

2

I used this vertex shader before

'varying vec2 vUv;\
		uniform float morphTargetInfluences[ 8 ];\
		void main() {\
			vUv = uv;\
			vec3 morphed = vec3( 0.0 );\
			\n#ifdef USE_MORPHTARGETS\n\
			morphed += ( morphTarget0 - position ) * morphTargetInfluences[ 0 ];\
			morphed += ( morphTarget1 - position ) * morphTargetInfluences[ 1 ];\
			morphed += ( morphTarget2 - position ) * morphTargetInfluences[ 2 ];\
			morphed += ( morphTarget3 - position ) * morphTargetInfluences[ 3 ];\
			morphed += ( morphTarget4 - position ) * morphTargetInfluences[ 4 ];\
			morphed += ( morphTarget5 - position ) * morphTargetInfluences[ 5 ];\
			morphed += ( morphTarget6 - position ) * morphTargetInfluences[ 6 ];\
			morphed += ( morphTarget7 - position ) * morphTargetInfluences[ 7 ];\
			\n#endif\n\
			morphed += position;\
			gl_Position = projectionMatrix * (modelViewMatrix * vec4( morphed, 1.0 ));\
		}'

these days it might need few tweaks (edit: specifically, after this pull request)

3

can you share the whole code?

4

if you do jsfiddle with MeshBasicMaterial, I could edit it

5

Actually, someon posted this:
Edit fiddle - JSFiddle - Code Playground

Fixed my shader issue, but i cannot use the Morphtargetinfluences for some reason, it seems a recurrent issue

6

Been trying using morphTargetinfluences, to no avail, what am i getting wrong?


const vShader = `
      attribute float size;
      varying vec3 vColor;
      uniform float morphTargetInfluences[ 5 ];
       #include <morphtarget_pars_vertex>

      void main() {
         #include <begin_vertex>
        #include <morphtarget_vertex>
        vec3 morphed = vec3( 0.0 );
    #ifdef USE_MORPHTARGETS
      transformed  += morphTarget0  * morphTargetInfluences[ 0 ];
      transformed  += morphTarget1  * morphTargetInfluences[ 1 ];
      transformed  +=  morphTarget2   * morphTargetInfluences[ 2 ];
      transformed  +=  morphTarget3   * morphTargetInfluences[ 3 ];

      #endif

      vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
      gl_PointSize = size   ;
      gl_Position = projectionMatrix * mvPosition;

          // gl_Position = vec4( transformed, 1.0 );

   }`

const fShader = `
      uniform vec3 color;
      uniform float alphaTest;
      uniform vec2 u_resolution;
      varying vec3 vColor;

      void main() {
      vec2 xy = gl_PointCoord.xy - vec2(0.5);
      float ll = length(xy);
      gl_FragColor = vec4(color * 10.0 , step(ll, 0.5 ) * alphaTest);
       
   }`


    const shaderMat = new ShaderMaterial( {

        uniforms: {
            color: { value: new Color( 0xffffff ) }, // pointTexture: { value: new THREE.TextureLoader().load( 'textures/sprites/disc.png' ) },
            alphaTest: { value: 0.025 } ,
            size: { value: minScale   },
            scale: { value: 1 },
            morphTargetInfluences: {value: [1.0, 0.0, 0.0, 0.0, 0.0]}

          },
            vertexShader: vShader,
            fragmentShader: fShader,
            blending: AdditiveBlending,
            depthTest: false,
            transparent: true,
             morphTargets: true
            //, lighting : true

        } );

      shaderMat.morphTargets = true;
        

 shaderMat.uniforms.morphTargetInfluences  =  group.children[0].morphTargetInfluences
7

from your shader you seem to have Points not Mesh, and I dont think morph targets are supported there. if so, you have to declare attributes manually and morph them by hand as well. scratch that, they are supported

8

yes, they are. My issue laid in the geometry :sweat_smile:, I have posted the code here:

9

you can include the following headers to make things work:

	<script type="x-shader/x-fragment" id="vertexShaderWhiteFluff">
		#include <common>
		#include <uv_pars_vertex>
		#include <uv2_pars_vertex>
		#include <displacementmap_pars_vertex>
		#include <color_pars_vertex>
		#include <fog_pars_vertex>
		#include <morphtarget_pars_vertex>
		#include <skinning_pars_vertex>
		#include <shadowmap_pars_vertex>
		#include <specularmap_pars_fragment>
		#include <logdepthbuf_pars_vertex>
		#include <clipping_planes_pars_vertex>		
	varying vec2 vUv;
	void main() {
		#include <beginnormal_vertex>
		#include <morphnormal_vertex>
		#include <begin_vertex>
		#include <morphtarget_vertex>
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( transformed, 1.0 );
	}
	</script>