Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebGPURenderer: PostProcessing + GaussianBlurNode + QuadMesh #27369

Merged
merged 22 commits into from
Dec 15, 2023

Conversation

sunag
Copy link
Collaborator

@sunag sunag commented Dec 13, 2023

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

@sunag sunag added this to the r160 milestone Dec 13, 2023
@Mugen87
Copy link
Collaborator

Mugen87 commented Dec 13, 2023

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
Copy link
Collaborator Author

sunag commented Dec 14, 2023

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 sunag changed the title WebGPURenderer: PostProcessing + GaussianBlurNode WebGPURenderer: PostProcessing + GaussianBlurNode + QuadMesh Dec 15, 2023
@sunag
Copy link
Collaborator Author

sunag commented Dec 15, 2023

Update to QuadMesh

@sunag
Copy link
Collaborator Author

sunag commented Dec 15, 2023

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.

@sunag sunag marked this pull request as ready for review December 15, 2023 03:23
@sunag sunag merged commit 3d65226 into mrdoob:dev Dec 15, 2023
11 checks passed
AdaRoseCannon pushed a commit to AdaRoseCannon/three.js that referenced this pull request Jan 15, 2024
…27369)

* WebGPURenderer: PostProcessing + GaussianBlurNode

* update example

* revision

* revision

* Fix RTT & Framebuffer flipY

* Fix multi-scene backgroundNode

* fixes

* new webgpu_portal example

* fix title

* cleanup

* cleanup

* adjustments

* Added QuadMesh

* PostProcessing just for WebGPUBackend for now

* portal update

* error message

* cleanup

* using quad texture

* Fix flip RTT & DepthNode after QuadMesh

* update to QuadMesh

* Update webgpu_depth_texture.jpg

* update `webgpu_instance_uniform` example

const _geometry = new QuadGeometry();

class QuadMesh {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants