three.js icon indicating copy to clipboard operation
three.js copied to clipboard

Equivalent of gl_FragDepth writing in TSL ? Equivalent of the customDepthMaterial in TSL ?

Open Samsy opened this issue 3 months ago • 5 comments

Description

Hey hello there,

I've tried many things, and looked at the wiki and examples

Been quite confused with the depthNode and what would be a default content for a depthNode

Is the depthNode assigning new value map for the projected shadow calculations ? or it is assigning a new value for a gl_FragDepth ?

If it is assigning a gl_FragDepth, does it handle both webGL and webGPU in their different range ?

Wondering how to do both

Some of the nodes are really confusing because it does not come with a default example of what would be the default content for a node ( I think about normalNode, depthNode, receivedShadowPositionNode, etc.. )

Samsy avatar Sep 24 '25 15:09 Samsy

Equivalent of gl_FragDepth writing in TSL ?

If you want to establish a depth value of the current fragment, it should be:

depth.assign( value );

depth is a TSL object that represents the fragment's depth but it is not read-only. The assign() method is implemented in a way that it writes to gl_FragDepth in GLSL or frag_depth in WGSL. It internally works with the TSL function depthBase(), see:

https://github.com/mrdoob/three.js/blob/05742fefd66518f189f97ee88c514789dfe4a89c/src/nodes/display/ViewportDepthNode.js#L258-L294

If it is assigning a gl_FragDepth, does it handle both webGL and webGPU in their different range ?

No. If you assign a custom value, you have to manage the range by yourself.

Mugen87 avatar Sep 25 '25 08:09 Mugen87

Hey there,

Thanks a lot for the response,

I'm sorry but I feel this is still confusing, is there a practical example of re-writing the frag depth in TSL ?

Where should you put this ? in a depthNode ? but then what would be the return of the depthNode ?

depth.assign( xxx );

I arbitrarily did set this assign in different part of the setup, in mulitple nodes, and had no chance rewriting the gl_FragDepth in the shader => When inspecting with spector using forceWebGL, the shader I'm trying to set was not showing gl_FragDepth once in the fragmentShader

Also, my ask about the customDepthmaterial were mostly to try and find a way to write a custom depth in the shadow pass as well, in legacy webgl we would simply pass a value there in the customDepthMaterial, what would be the equivalent in TSL ?


                       #if DEPTH_PACKING == 3200
                          gl_FragColor = vec4( vec3( 1.0 - value ), opacity );
                      #elif DEPTH_PACKING == 3201
                          gl_FragColor = packDepthToRGBA( value );
                      #endif

Thanks a lot

Samsy avatar Sep 26 '25 10:09 Samsy

The default node of material.depthNode is the depth node itself, so material.depthNode = depth is the default value. https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#basic

Assigning a custom depth in NodeMaterial would be equivalent to material.depthNode = customDepth.

.. find a way to write a custom depth in the shadow

We don’t yet have a way to customize the depth of a shadow per material. If you change the material.depthNode, it will automatically change in the shadow, since it should follow the same logic.

https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#shadows

sunag avatar Sep 26 '25 14:09 sunag

Hi there @Samsy did you figure out a way to update shadows per material, running into the same issue since THREE.DepthMaterial isn't node based like other materials in TSL

Jaay06 avatar Oct 20 '25 00:10 Jaay06

@sunag I've tried this weekend to add support of casting shadow for my Makio-Meshline using .castShadowPositionNode but without success, I just found this .depthNode, but im a little confuse on which one should I modified for casting the custom shadow ?

Thanks !

Makio64 avatar Dec 01 '25 01:12 Makio64