# Morphtargetinfluences undefined

**URL:** <https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704>\
**Category:** Questions\
**Tags:** morph-targets\
**Created:** [September 19, 2022, 8:43pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704 "2022-09-19T20:43:25Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ventoline](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ventoline/32/29642_2.png) [@ventoline](https://discourse.threejs.org/u/ventoline)\
**Post date:** [September 19, 2022, 8:43pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/1 "2022-09-19T20:43:25Z")

</div>

I am trying to implement a particle system morph in between geometries, for some reason morphtargetinfluences stays undefined . I am using three r 143

```javascript
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 }
            
          },
            vertexShader: vShader,
            fragmentShader: fShader,
            blending: AdditiveBlending,
            depthTest: false,
            transparent: true,
        } );

      shaderMat.morphTargets = true;
 const particles = new Points( geometry, shaderMat);
//...

for (let i = 0; i < harmonySamplers.length; i++) 
{ 
let vertices = [];
var tempPosition = new Vector3();
const tempBufferGeometry = new BufferGeometry();

for (let j = 0; j < maxParticles; j++)
   {
    harmonySamplers[i].sample(tempPosition);  
    vertices.push(tempPosition.x, tempPosition.y, tempPosition.z);
    tempBufferGeometry.setAttribute("position", new Float32BufferAttribute(vertices, 3) );
  }
    geometry.morphAttributes.position[i] = tempBufferGeometry.attributes.position.array 
}

//....

group.children[0].morphTargetInfluences[0] = 0
 group.children[0].morphTargetInfluences[1] = 0.5
console.log("child " + group.children[0].morphTargetInfluences) //0 0.5
 console.log("child " + group.children[0].material.morphTargets) // true

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 20, 2022, 8:04am UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/2 "2022-09-20T08:04:40Z")

</div>

You have to setup `BufferGeometry.morphAttributes` before creating the instance of `Points`. Otherwise you have to call `Points.updateMorphTargets()` manually so `morphTargetInfluences` and `morphTargetDictionary` are defined.

---

<div class="post-metadata">

**Author:** ![ventoline](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ventoline/32/29642_2.png) [@ventoline](https://discourse.threejs.org/u/ventoline)\
**Post date:** [September 20, 2022, 2:49pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/3 "2022-09-20T14:49:52Z")

</div>

> [@Mugen87](#):
>
> call `Points.updateMorphTargets()`

I added both, that fixed the undefined error however the shader doesnt do much (see below), what is “transformed”, should the morph work as well on Points as with Mesh ?

```javascript
const geometry = new BufferGeometry( );
geometry.morphAttributes.position = [];

```

```javascript
        const particles = new Points( geometry, shaderMat);
        particles.updateMorphTargets ()
        particles.morphTargetInfluences = testMesh.morphTargetInfluences 
        particles.morphTargetDictionary = testMesh.morphTargetDictionary;
 particles.morphTargetInfluences[0] = 1;

```

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

      void main() {
         #include <begin_vertex>
        #include <morphtarget_vertex>

    #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
          
        } );

      shaderMat.morphTargets = true;

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 20, 2022, 3:03pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/4 "2022-09-20T15:03:48Z")

</div>

> [@ventoline](#):
>
> ```javascript
> #ifdef USE_MORPHTARGETS
> transformed += morphTarget0 * morphTargetInfluences[0];
> transformed += morphTarget1 * morphTargetInfluences[1];
> transformed += morphTarget2 * morphTargetInfluences[2];
> transformed += morphTarget3 * morphTargetInfluences[3];
> 
> #endif
> 
> ```

If you are using WebGL 2, the above shader code does not work since the renderer assume morph data are defined in a texture.

If you do not fully understand the morph target implementation in the renderer and shaders, I suggest you enhance a built-in material via `onBeforeCompile()` instead of writing a shader from scratch.

---

<div class="post-metadata">

**Author:** ![ventoline](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ventoline/32/29642_2.png) [@ventoline](https://discourse.threejs.org/u/ventoline)\
**Post date:** [September 20, 2022, 3:12pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/5 "2022-09-20T15:12:35Z")

</div>

Should I simply remove the conditional instead, like so:

```javascript
 transformed += morphTarget0 * morphTargetInfluences[0];
      transformed += morphTarget1 * morphTargetInfluences[1];
      transformed += morphTarget2 * morphTargetInfluences[2];
      transformed += morphTarget3 * morphTargetInfluences[3];

```

I looked up this example: [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/cr8x4305/)  
But the morphTargetInfluences dont seem to come through  
Unfortunately I have to use a shader on this particular project, however I would welcome any example, or documentation.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 20, 2022, 3:21pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/6 "2022-09-20T15:21:24Z")

</div>

> [@ventoline](#):
>
> Should I simply remove the conditional instead, like so:

Yes, I don’t think the code make sense if you include `morphtarget_vertex`.

> [@ventoline](#):
>
> But the morphTargetInfluences dont seem to come through

What do you mean by that?

---

<div class="post-metadata">

**Author:** ![ventoline](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ventoline/32/29642_2.png) [@ventoline](https://discourse.threejs.org/u/ventoline)\
**Post date:** [September 20, 2022, 3:38pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/7 "2022-09-20T15:38:49Z")

</div>

the following shader doesnt seem to react to morphTargetInfluences changfe of value

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

      void main() {
         #include <begin_vertex>
        #include <morphtarget_vertex>

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

   }`
`

```

```javascript
group.children[0].morphTargetInfluences[0] = 0.0
 group.children[0].morphTargetInfluences[1] = 1.0
  group.children[0].geometry.attributes.position.array = positions;
  group.children[0].geometry.attributes.size.array = scales;
  group.children[0].geometry.attributes.position.needsUpdate = true;
  group.children[0].geometry.attributes.size.needsUpdate = true;

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 20, 2022, 4:30pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/8 "2022-09-20T16:30:28Z")

</div>

> [@ventoline](#):
>
> ```javascript
> group.children[0].geometry.attributes.position.array = positions;
> group.children[0].geometry.attributes.size.array = scales;
> 
> ```

Try to not overwrite `position.array` and `size.array`. Set values to the existing arrays via `BufferAttribute.set()`. Maybe this helps.

---

<div class="post-metadata">

**Author:** ![ventoline](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ventoline/32/29642_2.png) [@ventoline](https://discourse.threejs.org/u/ventoline)\
**Post date:** [September 26, 2022, 1:46pm UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/9 "2022-09-26T13:46:36Z")

</div>

Indeed, the geometry was empty. Here is the code should anyone need it:

```javascript
//geometry
const sphereMesh = new Mesh(new SphereGeometry(2), polyMat)
const tetraGeo = new TetrahedronGeometry(2, 0) //const tetraGeo = new DecalGeometry( mesh, position, orientation, size );
const tetraMesh = new Mesh(tetraGeo, polyMat)
tetraMesh.rotation.y = Math.PI / 4
tetraMesh.rotation.x = (Math.PI / 4) * 3
const cubeMesh = new Mesh(new BoxGeometry(2, 2, 2), polyMat)
const icoMesh = new Mesh(new IcosahedronGeometry(2, 0), polyMat)
const octoMesh = new Mesh(new TorusKnotGeometry(1.5, 0.5, 80, 15, 2, 3), polyMat)

const sphereSampler = new MeshSurfaceSampler(sphereMesh).build()
const tetraSampler = new MeshSurfaceSampler(tetraMesh).build()
const cubeSampler = new MeshSurfaceSampler(cubeMesh).build()
const icoSampler = new MeshSurfaceSampler(icoMesh).build()
const octoSampler = new MeshSurfaceSampler(octoMesh).build()

const harmonySamplers = [sphereSampler, tetraSampler, cubeSampler, icoSampler, octoSampler]
const harmonyBuffers = []

//console.log( harmonySamplers[0])

for (let i = 0; i < harmonySamplers.length; i++) {
  const vertices = []
  const tempPosition = new Vector3()
  const tempBufferGeometry = new BufferGeometry()

  for (let j = 0; j < maxParticles; j++) {
    harmonySamplers[i].sample(tempPosition)
    vertices.push(tempPosition.x, tempPosition.y, tempPosition.z)

  }

  geometry.morphAttributes.position[i] = new Float32BufferAttribute(vertices, 3)
  harmonyBuffers[i] = tempBufferGeometry

}

const systemGeom = new BufferGeometry()

    systemGeom.setAttribute('size', new BufferAttribute(OGscales, 1))
    systemGeom.setAttribute('position', new Float32BufferAttribute(OGPos, 3))
    systemGeom.morphAttributes.position = geometry.morphAttributes.position

    const particles = new Points(systemGeom, shaderMat) //mat_P);
    particles.updateMorphTargets()
    particles.morphTargetInfluences[0] = 0

```

```javascript
//shader 

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

      void main() {
         #include <begin_vertex>
        #include <morphtarget_vertex>

      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 }
  },
  vertexShader: vShader,
  fragmentShader: fShader,
  blending: AdditiveBlending,
  depthTest: false,
  transparent: true
  //, lighting : true
})

```

```javascript
//Updating morph targets
          group.children[0].morphTargetInfluences[i] += 0.001

```

---

<div class="post-metadata">

**Author:** ![Murugan](https://avatars.discourse-cdn.com/v4/letter/m/a9a28c/32.png) [@Murugan](https://discourse.threejs.org/u/Murugan)\
**Post date:** [March 3, 2023, 9:36am UTC](https://discourse.threejs.org/t/morphtargetinfluences-undefined/42704/10 "2023-03-03T09:36:57Z")

</div>

It would be very helpful, if you upload this into the fiddle. Thanks