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

[Samsy]

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.. )

[Mugen87]

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:

three.js/src/nodes/display/ViewportDepthNode.js

Lines 258 to 294 in 05742fe

	/**
	* TSL function for defining a value for the current fragment's depth.
	*
	* @tsl
	* @function
	* @param {Node<float>} value - The depth value to set.
	* @returns {ViewportDepthNode<float>}
	*/
	const depthBase = /*@__PURE__*/ nodeProxy( ViewportDepthNode, ViewportDepthNode.DEPTH_BASE );
	/**
	* TSL object that represents the depth value for the current fragment.
	*
	* @tsl
	* @type {ViewportDepthNode}
	*/
	export const depth = /*@__PURE__*/ nodeImmutable( ViewportDepthNode, ViewportDepthNode.DEPTH );
	/**
	* TSL function for converting a perspective depth value to linear depth.
	*
	* @tsl
	* @function
	* @param {?Node<float>} [value=null] - The perspective depth. If `null` is provided, the current fragment's depth is used.
	* @returns {ViewportDepthNode<float>}
	*/
	export const linearDepth = /*@__PURE__*/ nodeProxy( ViewportDepthNode, ViewportDepthNode.LINEAR_DEPTH ).setParameterLength( 0, 1 );
	/**
	* TSL object that represents the linear (orthographic) depth value of the current fragment
	*
	* @tsl
	* @type {ViewportDepthNode}
	*/
	export const viewportLinearDepth = /*@__PURE__*/ linearDepth( viewportDepthTexture() );
	depth.assign = ( value ) => depthBase( value );

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.

[Samsy]

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

[sunag]

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