Node: Add SobelOperatorNode.

[Mugen87]

Related issue: -

Description

This PR adds Sobel edge detection for WebGPURenderer.

[RenaudRohlinger]

Splendid. 👏

[Mugen87]

@RenaudRohlinger @sunag I want to make a DepthOfFieldNode via porting a bokeh shader. For that I need to sample the scene's depth (viewZ) in the pass which will also be required for a series of other effects like AO.

I've tried doing this:

const scenePass = pass( scene, camera );

const scenePassColor = scenePass.getTextureNode();
const scenePassViewZ = scenePass.getViewZNode();

postProcessing.outputNode = scenePassColor.dof( scenePassViewZ, focus, aperture, maxBlur );

In the DOF node, I access the viewZ in the TSL code but unfortunately get a Maximum call stack size exceeded error.

Uncaught RangeError: Maximum call stack size exceeded
at Proxy.build (Node.js:295:7)
at Proxy.generate (OperatorNode.js:156:19)
at Proxy.build (Node.js:375:19)
at Proxy.build (TempNode.js:50:16)
at Proxy.generate (OperatorNode.js:156:19)
at Proxy.build (Node.js:375:19)
at Proxy.build (TempNode.js:50:16)
at Proxy.generate (OperatorNode.js:156:19)
at Proxy.build (Node.js:375:19)
at Proxy.build (TempNode.js:50:16)

Do I perform the setup incorrectly?

[Mugen87]

For reference here is the full code: Mugen87@f117497

If I replace const factor = this.focus.add( this.viewZNode ); with const factor = this.focus.add( 1.0 ); in DepthOfFieldNode, the runtime error disappears.

[RenaudRohlinger]

For this you should use getTextureDepthNode() I think. I made an AO Node a while ago using it.

And then if necessary:

perspectiveDepthToViewZ(
    yourTextureDepth,
    cameraNear,
    cameraFar
 )

Also I'm not sure anymore, with #28720 this logic might have changed.

[Mugen87]

It seems getViewZNode() from PassNode should do the exact same thing. What's great about this method is that I would not need a reference to the camera in the DOF node.

Also I'm not sure anymore, with #28720 this logic might have changed.

Right, let's see what @sunag says about this issue.

Here is a live example demonstrating the error: https://rawcdn.githack.com/mrdoob/three.js/f117497aa28a1326d8fb7fe306a04936718f94c0/examples/webgpu_postprocessing_dof.html

[sunag]

@Mugen87 Maybe it's something else, the use of getViewZNode() seems right. I will clone you code here for check.

[sunag]

Mugen87@f117497#r143473219 This fix the error but even so don't show the dof effect...

[sunag]

@Mugen87 It's cache related try replace sampleTexture to:

const sampleTexture = ( uv ) => this.textureNode.uv( uv );

I think that toVar() will no more be necessary.

[Mugen87]

Now it works! Thanks for the support^^.

Latest commit: Mugen87@0669cf4

Live example: https://rawcdn.githack.com/Mugen87/three.js/0669cf47e3487ee492830f2d85919541c388e773/examples/webgpu_postprocessing_dof.html

I'll file a PR tomorrow!