Nodes: Issue with Using Depth Textures in Post Process Output

[cmhhelgeson]

Description

When attempting to port OutlinePassNode, I came across this issue when trying to conditionally set the color of the outline depending on the depth of the fragment within the scene.

This code properly creates the outline:

constructor() {
     this._sceneColor = texture( this._sceneRT.texture );
     this._selectedColor = texture( this._selectedRT.texture );
     this._selectedDepth = texture( this._selectedRT.depthTexture );
     this._sceneDepth = texture( this._sceneRT.depthTexture );

}

updateBefore() {

// Render scenePass, then selectedPass to create edge, then apply edge to scenePass renderTarget

}

setup() {

     const uvNode = uv();
     const edgeOverlay = Fn( () => {
          // Creates the edge
	  const edgePass = sobel( this._selectedColor.uv( uvNode ).a );

          const edgeColor = vec3( 1.0, 0.0, 0.0 ).toVar()

          //const sceneViewZ = perspectiveDepthToViewZ( this._sceneDepth, this._cameraNear, this._cameraFar );
          //const selectedViewZ = perspectiveDepthToViewZ( this._selectedDepth, this._cameraNear, this._cameraFar );

	  // Sets color dependent on edge depth
	  //edgeColor.assign( sceneViewZ.greaterThan( selectedViewZ ).select( this.visibleEdgeColor, this.hiddenEdgeColor ) );

	  // Mixes color in
	  const coloredEdgePass = edgePass.r.mix( vec3( 0.0 ), edgeColor );

	  return coloredEdgePass;

     } );

     const overlayMaterial = this._overlayMaterial || ( this._overlayMaterial = new NodeMaterial() );
     overlayMaterial.fragmentNode = edgeOverlay().context( builder.getSharedContext() );
     overlayMaterial.name = 'Overlay';
     overlayMaterial.blending = AdditiveBlending;
     overlayMaterial.depthTest = false,
     overlayMaterial.depthWrite = false,
     overlayMaterial.transparent = true;

     return this._sceneColor;

}

However, uncommenting the viewZ related code, produces this error in the console.

Reproduction steps

Reproducing this entails replicating the code added to this branch of Three.js:
https://github.com/cmhhelgeson/three.js/tree/outline_pass_node

Particularly the OutlinePassNode logic: https://github.com/cmhhelgeson/three.js/blob/outline_pass_node/src/nodes/display/OutlinePassNode.js

And the corresponding example:
https://github.com/cmhhelgeson/three.js/blob/outline_pass_node/examples/webgpu_postprocessing_outline.html

Code

.

Live example

.

Screenshots

No response

Version

r168

Device

Desktop

Browser

Chrome

OS

Windows

[Spiri0]

Hi cmhhelgeson,
I remember this problem well too. I had initially solved it with a workaround but there is a more elegant way.
Does this codePen help you?

https://codepen.io/Spiri0/pen/MWMpzGd

In it you can see how you can use the scene depth texture and also the scene texture in post-processing.

[cmhhelgeson]

Hi cmhhelgeson, I remember this problem well too. I had initially solved it with a workaround but there is a more elegant way. Does this codePen help you?

https://codepen.io/Spiri0/pen/MWMpzGd

In it you can see how you can use the scene depth texture and also the scene texture in post-processing.

Hi Spir0, I'll have to look more closely at the code later, but I'm not sure if it helps me solve my issue. I'm explicitly not writing the depth to the renderTarget, so I can't access it with a call to getTextureNode('depth'). I'm doing this so that I can more easily apply blending to the renderTarget that renders the scene. Irrespective of whether I render to renderTarget or not, I still need to access the depth from two separate depth texture passes.

[Mugen87]

In the meanwhile, OutlinePass has been ported via #29575 and I did not encounter this issue. It would be great if you could demonstrate the issue with a fiddle independently of your outline pass implementation. In this way, the issue is more isolated and we can easier investigate it.