WebGPURenderer: PostProcessing + GaussianBlurNode + QuadMesh

[sunag]

Description

Simple Depth of Field

Example

Simple Depth of Field Example

const scenePass = pass( scene, camera );
const scenePassColor = scenePass.getTextureNode();
const scenePassDepth = scenePass.getDepthNode().remapClamp( .1, .3 );

const scenePassColorBlurred = scenePassColor.gaussianBlur();
scenePassColorBlurred.directionNode = scenePassDepth;

const postProcessing = new PostProcessing( renderer );
postProcessing.outputNode = scenePassColorBlurred;

... loop ...

postProcessing.render();

The scene consists of a RenderPass that will store the Color and Depth in that can be used as Nodes for the composition.
The use of remapClamp() is to adjust the DepthNode range as the strength of blur used in scenePassColorBlurred.directionNode.

We could easily connect any other node, or other RenderPass, for example to the grayscale effect, we don't need to add another Pass, we can just add the node in the same flow, try for example:

postProcessing.outputNode = scenePassColorBlurred.saturation( 0 );

// or

postProcessing.outputNode = pass( scene, camera ).saturation( 0 );

I adapted GaussianBlur from UnrealBloomPass to create a GaussianBlurNode, so we can use it for various purposes.

Backends

• WebGPU
• WebGL

[Mugen87]

This is just awesome and shows the potential of the node material system! The new approach will make FX so much more flexible! Really love it!

[sunag]

Potal using PassNode Example

const material = new MeshBasicNodeMaterial();

// portal
material.colorNode = pass( scenePortal, camera ).context( { getUV: () => viewportTopLeft } );

// opacity effect
material.opacityNode = uv().distance( .5 ).remapClamp( .3, .5 ).oneMinus();

[sunag]

Update to QuadMesh

[sunag]

Sorry for the problems with flipY this last month, backends + framebuffers are sometimes confusing in this sense, but with QuadMesh the problem was clear, thanks @Mugen87 for adding flipY to webgpu_sandbox.

[LeviPesin]

Don't we already have FullscreenQuad class? /ping @sunag

[sunag]

It was inspired by this class, but has a few modifications simplifying it to WebGPURenderer.