# change shadows after vertex shader

**URL:** <https://discourse.threejs.org/t/change-shadows-after-vertex-shader/58946>\
**Category:** Questions\
**Tags:** shadows, glsl, vertex-shader\
**Created:** [December 6, 2023, 9:02am UTC](https://discourse.threejs.org/t/change-shadows-after-vertex-shader/58946 "2023-12-06T09:02:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![the\_roman\_one](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/the_roman_one/32/41583_2.png) [@the\_roman\_one](https://discourse.threejs.org/u/the_roman_one)\
**Post date:** [December 6, 2023, 9:02am UTC](https://discourse.threejs.org/t/change-shadows-after-vertex-shader/58946/1 "2023-12-06T09:02:11Z")

</div>

I have a vertex shader that moves object’s vertices around, but the shadow the objects cast remain static (as if no vert shader was applied)

The objects are rendered using THREE’s geometries:

`BoxGeometry`, `CylinderGeometry`, `TetrahedronBufferGeometry`, `ConeGeometry`

then to each of them I apply `MeshPhongMaterial` and in `material.onBeforeCompile()` i set my custom vertex shader.

people online suggested to use `customDepthMaterial`, as can be seen in the cloth simulation example [here](https://codesandbox.io/p/sandbox/threejs-cloth-animation-example-sz691?file=%2Fsrc%2Findex.js%3A384%2C19), but that didn’t seem to work.

One difference is that the example also uses `map: clothTexture` in the material params and I don’t… don’t know if it’s relevant

the code is available in [https://codepen.io/the-roman-one/pen/VwgVjdW](https://codepen.io/the-roman-one/pen/VwgVjdW), and for convenience, here’s what my material factory looks like this:

```
make = (shaderUniforms, shader_type) =>
{
    let material
    switch(shader_type)
    {
        case SHADER_TYPES.GRASS:
            material = this.raw_material; break;
        default:
            material = this.phong_material
    }
    material = material.clone()
    material.needsUpdate = true;
    let {uuid} = material
    material.onBeforeCompile = (shader) =>
    {
        shader.uniforms = {
            ...shader.uniforms,
            ...shaderUniforms,
            time: {value: 0},
        }
        
        let shaders = this.shader_maker.make(shader_type)
        shader.vertexShader = shaders.vertex
        shader.fragmentShader = shaders.fragment;

        this.context.shaders[uuid] = shader
    }

    material.customDepthMaterial = new THREE.MeshDepthMaterial({
        depthPacking: THREE.RGBADepthPacking,
        alphaTest: 0.5
      });
    return material
}

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 6, 2023, 9:03am UTC](https://discourse.threejs.org/t/change-shadows-after-vertex-shader/58946/2 "2023-12-06T09:03:14Z")

</div>

/cc

> <https://stackoverflow.com/questions/77603152/threejs-change-shadows-after-vertex-shader>

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 6, 2023, 9:06am UTC](https://discourse.threejs.org/t/change-shadows-after-vertex-shader/58946/3 "2023-12-06T09:06:17Z")

</div>

You can find some elaboration about the patching of `MeshDepthMaterial` here: [Noisy ribbons [instancing, shadows]](https://discourse.threejs.org/t/noisy-ribbons-instancing-shadows/56830)