# Setting up shadermaterial for use in instanced mesh

**URL:** <https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010>\
**Category:** Questions\
**Created:** [May 21, 2021, 1:35pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010 "2021-05-21T13:35:37Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 1:35pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/1 "2021-05-21T13:35:37Z")

</div>

So I created a shader for setting up curtain like effects on a plane drape but some instanced meshes.

I am already using defines: [’#define INSTANCES’] when setting up the material and

#include in the shader and #include in the main of the vertex shader.

What’s interesting is the meshes render at the correct postion. It it the instanced meshes that are out of postion. They render fine and wave like they are supposed to. They are just out of place for some reason.

```
export const drape_vertex = `
precision highp float;

attribute vec3 position;
attribute vec2 uv;
attribute vec2 uv2;
#include<instancesDeclaration>
// Uniforms
uniform mat4 worldViewProjection;
uniform mat4 worldView;
uniform bool vertexFogEnabled;
uniform float time;
uniform float frequency;
uniform float amplitude;
uniform float rate;

varying vec2 vUV0;
varying float fogFactor;

void main(void) {
  #include<instancesVertex>
  vec3 v = position;
  v.z += uv.x * sin(time*rate+uv.x*frequency) * amplitude;
  if(vertexFogEnabled){
float start = 47.0;
float end = 50.0;
float vDistance = length(worldView * vec4(v,1.0));
fogFactor = clamp((vDistance - start) / (end - start), 0.0, 1.0);
  }
  gl_Position = worldViewProjection * vec4(v, 1.0);
vUV0 = uv;

}
`;

```

Material Setup Code

```
this._drapeMaterial = new ShaderMaterial('drape_material', this._scene, drapeShader, {
  attributes: ['position', 'uv', 'uv2'],
  uniforms: ['worldview', 'time', 'frequency', 'worldViewProjection', 'amplitude', 'rate'],
  needAlphaBlending: true,
  needAlphaTesting: false,
  defines: ['#define INSTANCES'],
});
const albedo = new Texture('assets/textures/drapes.jpg', this._scene);
this._drapeMaterial.setTexture('albedo', albedo);
//this._drapeMaterial.setInt('vertexFogEnabled', 0);
this._drapeMaterial.setFloat('frequency', -3);
this._drapeMaterial.setFloat('amplitude', 0.7);
this._drapeMaterial.setFloat('rate', 0.9);
this._drapeMaterial.backFaceCulling = true;
this._drapeMaterial.forceDepthWrite = true;

```

Am I doing something wrong or missing something? I am on babylon v 4.1.0

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 21, 2021, 2:36pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/2 "2021-05-21T14:36:48Z")

</div>

Hi @Manas_Gangwani

Can you check if this thread helps? [createInstance with ShaderMaterial does not render](https://forum.babylonjs.com/t/createinstance-with-shadermaterial-does-not-render/17536)

I think the main difference is instead of using worldViewProjection, you should use finalWorld from `#include<instancesVertex>`

So  
gl\_Position = worldViewProjection \* vec4(v, 1.0);  
should be  
gl\_Position = viewProjection \* finalWorld \* vec4(v, 1.0);

In your JS code, make sure you have viewProjection declared in the uniforms.  
uniforms: [‘worldview’, ‘time’, ‘frequency’, ‘worldViewProjection’, ‘amplitude’, ‘rate’],

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 2:40pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/3 "2021-05-21T14:40:44Z")

</div>

They show up on the screen and wave too. They are just out of place. The bounding box of the mesh when I check in the inspector is at the right position. But the actual mesh looks out of place

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 21, 2021, 2:45pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/4 "2021-05-21T14:45:29Z")

</div>

I updated my answer above. Can you check if it helps?

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 2:55pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/5 "2021-05-21T14:55:26Z")

</div>

Tried it did not work. The screen is going crazy triangles all over the screen.

```
this._drapeMaterial = new ShaderMaterial('drape_material', this._scene, drapeShader, {

      attributes: ['position', 'uv', 'uv2'],

      uniforms: ['worldview', 'time', 'frequency', 'worldViewProjection', 'amplitude', 'rate', 'viewProjection'],

      needAlphaBlending: true,

      needAlphaTesting: false,

      defines: ['#define INSTANCES'],

    });

```

Shader code

```
precision highp float;

// Attributes

attribute vec3 position;

attribute vec2 uv;

attribute vec2 uv2;

#include<instancesDeclaration>

// Uniforms

uniform mat4 worldViewProjection;

uniform mat4 viewProjection;

uniform mat4 worldView;

uniform bool vertexFogEnabled;

uniform float time;

uniform float frequency;

uniform float amplitude;

uniform float rate;

// Varying

varying vec2 vUV0;

varying float fogFactor;

void main(void) {

  #include<instancesVertex>

  vec3 v = position;

  v.z += uv.x * sin(time*rate+uv.x*frequency) * amplitude;

  if(vertexFogEnabled){

    float start = 47.0;

    float end = 50.0;

    float vDistance = length(worldView * vec4(v,1.0));

    fogFactor = clamp((vDistance - start) / (end - start), 0.0, 1.0);

  }

  gl_Position = viewProjection * finalWorld * vec4(v, 1.0);

    vUV0 = uv;

    

}
```

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 21, 2021, 3:04pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/6 "2021-05-21T15:04:33Z")

</div>

Can you create the issue in a playground?

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 3:08pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/7 "2021-05-21T15:08:20Z")

</div>

Sure. There you go. You can move the camera around check

[https://playground.babylonjs.com/#WS42QV#6](https://playground.babylonjs.com/#WS42QV#6)

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 3:10pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/8 "2021-05-21T15:10:09Z")

</div>

And this is the original shader

[https://playground.babylonjs.com/#WS42QV#5](https://playground.babylonjs.com/#WS42QV#5)

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 21, 2021, 3:21pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/9 "2021-05-21T15:21:38Z")

</div>

I removed this line: defines: [’#define INSTANCES’],

And the crazy triangles are removed.  
[https://playground.babylonjs.com/#WS42QV#7](https://playground.babylonjs.com/#WS42QV#7)

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 3:23pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/10 "2021-05-21T15:23:52Z")

</div>

I need to have it in my project because of the way the assets are setup. Also the sphere disappears. There are three spheres.

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 3:30pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/11 "2021-05-21T15:30:02Z")

</div>

Looks like the cloned sphere is the problem. The instanced sphere renders fine.

[https://playground.babylonjs.com/#WS42QV#10](https://playground.babylonjs.com/#WS42QV#10)

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 21, 2021, 3:56pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/12 "2021-05-21T15:56:26Z")

</div>

I can get the cloned instance shown by adding uniform ‘world’, and rename [’#define INSTANCES’] to something else. I guess INSTANCES has already been used in babylon.js. Can you use a different name?

[https://playground.babylonjs.com/#WS42QV#11](https://playground.babylonjs.com/#WS42QV#11)

---

<div class="post-metadata">

**Author:** ![Manas\_Gangwani](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/manas_gangwani/32/14448_2.png) [@Manas\_Gangwani](https://forum.babylonjs.com/u/Manas_Gangwani)\
**Post date:** [May 21, 2021, 4:01pm UTC](https://forum.babylonjs.com/t/setting-up-shadermaterial-for-use-in-instanced-mesh/21010/13 "2021-05-21T16:01:15Z")

</div>

Yessss. That worked. I almost wasted my entire day over this. Thanks a lot