Shadow with Vertex Shader

Questions
,
1

Hello,

i have a scene with a ParametricBufferGeometry. I use as init function (u,v,vertex)=>vertex to create a base geometry. I have modified MeshPhongMaterial to position vertices and normals in the shader which works as expected.

If i enable shadows I got no shadows created. I noticed if i cange the init function to something usefull i got the shadow from the shape described by the init function. If the vertex shader is changing position of vertices this is not reflected by the shadow.

My Question: Is a different material used for the shadow pass? It seems to me that the MeshPhongMaterial Shader I used is not used during shader pass but a different rendering using only vertex positions. As said before - if i init the geometry with meaningfull positions that then altered in the vertex shader, shadows aren’t affected.

I just to get an idea if i have to search the error in the way i modified the vertex shader or in the material in general

Thanks in advance!

2

Yes, there are special depth materials intended for shadow maps.

To fix this, you have to define a custom depth material that also has the vertex displacement code. You then apply it to Object3D.customDepthMaterial.

Consider to develop this custom material based on MeshDepthMaterial.

3

Hey,

I understand but don’t get it to work. Below the relevant code snipped.
this.custom Depth is a copy of the original depth Vertex ShaderVertex where I inserted some code directly after #define<begin_vertex> to change transformed.
I saw, that MeshDepthMaterial set in its prototype the isMeshDepthMaterial and hoped that i need to set that true to cover my Shader as DepthMaterial
What makes me nervous is that the onBeforeCompile of the depth is never called.

I will retry it in the next days, but i think i miss here something very basic. Thanks for your help because this topic is quite expert. Regular search does not help

    var depthShader = THREE.ShaderLib['depth'];
    var uniforms = THREE.UniformsUtils.clone(depthShader.uniforms);

    let material = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: this.customDepth,
      fragmentShader: depthShader.fragmentShader
    });
    (<any>material).isMeshDepthMaterial = true;

    if (this.mesh.customDepthMaterial)
      this.mesh.customDepthMaterial.dispose();
    this.mesh.customDepthMaterial = material;
    

    material.onBeforeCompile = (shader)=>{
      console.log("Depth: " +  shader);
    };
4

Sorry disturbing, but i am not able to set the customDepthMaterial.
I made a setup where Shader worked and try to replace the customDepthMaterial with different parameters. Even this is not visible. I currently read the threejs sources but i did not find a clue currently.

this.mesh.customDepthMaterial = new THREE.MeshDepthMaterial({wireframe: true});
this.mesh.customDepth = true;
5

Check out the following example: three.js webgl - cloth simulation

The cloth is rendered with an alpha map. In order to render shadows correctly, it is necessary apply a custom depth material to the respective mesh. The code for this is:

object.customDepthMaterial = new THREE.MeshDepthMaterial( {
    depthPacking: THREE.RGBADepthPacking,
    map: clothTexture,
    alphaTest: 0.5
} );

The customDepth property does not exist. Setting it to true has no effect.

Do you mind sharing your current work with a live example? That would make it easier to investigate the issue.

1 Like
6

Hey,

it finally worked. So first - Thank you very much.

My implementation was not wrong, but i didn’t noticed, that the MeshDepthMaterial does not work with PointLight and I had to override MeshDistanceMaterial.
You can find a prototype currently at https://www.cg-effects.de/~adler/paramgeo but it is the version without shadow. I am integrating it now (just remaining fine tuning) and will upload it soon.
I am collecting parametric functions and try to show them with the possibility to play with the parameters. In this version there are eight shapes, but i transfer the list from Parametrische Flächen und Körper

I use only one parametric surface and use vertex shaders to apply the functions. This enables me to blend/morph between shapes just by replacing the material.

1 Like