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.

Sign up for GitHub

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

Jump to bottom

WebGPURenderer: Introduce PostProcessingUtils #29595

Merged
merged 1 commit into from
Oct 8, 2024
Merged

WebGPURenderer: Introduce PostProcessingUtils #29595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions examples/jsm/tsl/display/AfterImageNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { RenderTarget, Vector2 } from 'three';
import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
import { TempNode, nodeObject, Fn, float, vec4, NodeUpdateType, uv, texture, passTexture, uniform, sign, max, convertToTexture, QuadMesh, NodeMaterial } from 'three/tsl';

const _size = /*@__PURE__*/ new Vector2();

const _quadMeshComp = /*@__PURE__*/ new QuadMesh();

let _rendererState;

class AfterImageNode extends TempNode {

static get type() {
Expand Down Expand Up @@ -50,6 +51,10 @@ class AfterImageNode extends TempNode {

const { renderer } = frame;

_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
Copy link
Collaborator

@Mugen87 Mugen87 Oct 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Regarding the name: I would expect something like saveRendererState() since what we doing here is essentially saving a snapshot of the current render state which is later restored. So how about:

const rendererState = PostProcessingUtils.saveRendererState( renderer );
PostProcessingUtils.restoreRendererState( renderer, rendererState );


//

const textureNode = this.textureNode;
const map = textureNode.value;

Expand All @@ -62,23 +67,27 @@ class AfterImageNode extends TempNode {

this.setSize( _size.x, _size.y );

const currentRenderTarget = renderer.getRenderTarget();
const currentTexture = textureNode.value;

this.textureNodeOld.value = this._oldRT.texture;

// comp

renderer.setRenderTarget( this._compRT );
_quadMeshComp.render( renderer );

// Swap the textures

const temp = this._oldRT;
this._oldRT = this._compRT;
this._compRT = temp;

renderer.setRenderTarget( currentRenderTarget );
//

textureNode.value = currentTexture;

PostProcessingUtils.setRendererState( renderer, _rendererState );

}

setup( builder ) {
Expand Down
12 changes: 9 additions & 3 deletions examples/jsm/tsl/display/AnamorphicNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { RenderTarget, Vector2 } from 'three';
import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, convertToTexture, QuadMesh, NodeMaterial, vec2, vec3, Loop, threshold } from 'three/tsl';

const _quadMesh = /*@__PURE__*/ new QuadMesh();

let _rendererState;

class AnamorphicNode extends TempNode {

static get type() {
Expand Down Expand Up @@ -54,12 +56,15 @@ class AnamorphicNode extends TempNode {

const { renderer } = frame;

_rendererState = PostProcessingUtils.getRendererState( renderer, _rendererState );

//

const textureNode = this.textureNode;
const map = textureNode.value;

this._renderTarget.texture.type = map.type;

const currentRenderTarget = renderer.getRenderTarget();
const currentTexture = textureNode.value;

_quadMesh.material = this._material;
Expand All @@ -74,9 +79,10 @@ class AnamorphicNode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
textureNode.value = currentTexture;

PostProcessingUtils.setRendererState( renderer, _rendererState );

}

setup( builder ) {
Expand Down
23 changes: 7 additions & 16 deletions examples/jsm/tsl/display/BloomNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { Color, HalfFloatType, RenderTarget, Vector2, Vector3 } from 'three';
import { HalfFloatType, RenderTarget, Vector2, Vector3, PostProcessingUtils } from 'three';
import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, QuadMesh, NodeMaterial, Loop, texture, luminance, smoothstep, mix, vec4, uniformArray, add, int } from 'three/tsl';

const _quadMesh = /*@__PURE__*/ new QuadMesh();

const _clearColor = /*@__PURE__*/ new Color( 0, 0, 0 );
const _currentClearColor = /*@__PURE__*/ new Color();
const _size = /*@__PURE__*/ new Vector2();

const _BlurDirectionX = /*@__PURE__*/ new Vector2( 1.0, 0.0 );
const _BlurDirectionY = /*@__PURE__*/ new Vector2( 0.0, 1.0 );

let _rendererState;

class BloomNode extends TempNode {

static get type() {
Expand Down Expand Up @@ -111,19 +110,13 @@ class BloomNode extends TempNode {

const { renderer } = frame;

const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );
_rendererState = PostProcessingUtils.getRendererState( renderer, _rendererState );

const currentRenderTarget = renderer.getRenderTarget();
const currentMRT = renderer.getMRT();
renderer.getClearColor( _currentClearColor );
const currentClearAlpha = renderer.getClearAlpha();
//

const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );

renderer.setMRT( null );
renderer.setClearColor( _clearColor, 0 );

// 1. Extract Bright Areas

renderer.setRenderTarget( this._renderTargetBright );
Expand Down Expand Up @@ -163,9 +156,7 @@ class BloomNode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
renderer.setMRT( currentMRT );
renderer.setClearColor( _currentClearColor, currentClearAlpha );
PostProcessingUtils.setRendererState( renderer, _rendererState );

}

Expand Down
22 changes: 9 additions & 13 deletions examples/jsm/tsl/display/GTAONode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Color, DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3 } from 'three';
import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, PostProcessingUtils } from 'three';
import { getViewPosition, QuadMesh, TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, add, normalize, mul, cross, div, mix, sqrt, sub, acos, clamp, NodeMaterial } from 'three/tsl';

const _quadMesh = /*@__PURE__*/ new QuadMesh();
const _currentClearColor = /*@__PURE__*/ new Color();
const _size = /*@__PURE__*/ new Vector2();

let _rendererState;

class GTAONode extends TempNode {

static get type() {
Expand Down Expand Up @@ -60,20 +61,17 @@ class GTAONode extends TempNode {

const { renderer } = frame;

const size = renderer.getDrawingBufferSize( _size );

const currentRenderTarget = renderer.getRenderTarget();
const currentMRT = renderer.getMRT();
renderer.getClearColor( _currentClearColor );
const currentClearAlpha = renderer.getClearAlpha();
_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );

_quadMesh.material = this._material;
//

const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );

_quadMesh.material = this._material;

// clear

renderer.setMRT( null );
renderer.setClearColor( 0xffffff, 1 );

// ao
Expand All @@ -83,9 +81,7 @@ class GTAONode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
renderer.setMRT( currentMRT );
renderer.setClearColor( _currentClearColor, currentClearAlpha );
PostProcessingUtils.setRendererState( renderer, _rendererState );

}

Expand Down
19 changes: 9 additions & 10 deletions examples/jsm/tsl/display/GaussianBlurNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { RenderTarget, Vector2 } from 'three';
import { RenderTarget, Vector2, PostProcessingUtils } from 'three';
import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, convertToTexture, vec2, vec4, QuadMesh, passTexture, mul, NodeMaterial } from 'three/tsl';

// WebGPU: The use of a single QuadMesh for both gaussian blur passes results in a single RenderObject with a SampledTexture binding that
Expand All @@ -7,6 +7,8 @@ import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, convertTo
const _quadMesh1 = /*@__PURE__*/ new QuadMesh();
const _quadMesh2 = /*@__PURE__*/ new QuadMesh();

let _rendererState;

class GaussianBlurNode extends TempNode {

static get type() {
Expand Down Expand Up @@ -54,12 +56,13 @@ class GaussianBlurNode extends TempNode {

const { renderer } = frame;

_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );

//

const textureNode = this.textureNode;
const map = textureNode.value;

const currentRenderTarget = renderer.getRenderTarget();
const currentMRT = renderer.getMRT();

const currentTexture = textureNode.value;

_quadMesh1.material = this._material;
Expand All @@ -72,10 +75,6 @@ class GaussianBlurNode extends TempNode {
this._horizontalRT.texture.type = textureType;
this._verticalRT.texture.type = textureType;

// clear

renderer.setMRT( null );

// horizontal

renderer.setRenderTarget( this._horizontalRT );
Expand All @@ -95,10 +94,10 @@ class GaussianBlurNode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
renderer.setMRT( currentMRT );
textureNode.value = currentTexture;

PostProcessingUtils.setRendererState( renderer, _rendererState );

}

getTextureNode() {
Expand Down
33 changes: 15 additions & 18 deletions examples/jsm/tsl/display/OutlineNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Color, DepthTexture, FloatType, RenderTarget, Vector2 } from 'three';
import { Color, DepthTexture, FloatType, RenderTarget, Vector2, PostProcessingUtils } from 'three';
import { Loop, int, exp, min, float, mul, uv, vec2, vec3, Fn, textureSize, orthographicDepthToViewZ, QuadMesh, screenUV, TempNode, nodeObject, NodeUpdateType, uniform, vec4, NodeMaterial, passTexture, texture, perspectiveDepthToViewZ, positionView } from 'three/tsl';

const _quadMesh = /*@__PURE__*/ new QuadMesh();
const _currentClearColor = /*@__PURE__*/ new Color();
const _size = /*@__PURE__*/ new Vector2();
const _BLUR_DIRECTION_X = /*@__PURE__*/ new Vector2( 1.0, 0.0 );
const _BLUR_DIRECTION_Y = /*@__PURE__*/ new Vector2( 0.0, 1.0 );

let _rendererState;

class OutlineNode extends TempNode {

static get type() {
Expand Down Expand Up @@ -151,28 +152,23 @@ class OutlineNode extends TempNode {
const { renderer } = frame;
const { camera, scene } = this;

_rendererState = PostProcessingUtils.resetRendererAndSceneState( renderer, scene, _rendererState );

//

const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );

renderer.getClearColor( _currentClearColor );
const currentClearAlpha = renderer.getClearAlpha();
const currentRenderTarget = renderer.getRenderTarget();
const currentMRT = renderer.getMRT();
const currentBackground = scene.background;
const currentRenderObjectFunction = renderer.getRenderObjectFunction();

//

renderer.setClearColor( 0xffffff, 1 );
renderer.setMRT( null );

this._updateSelectionCache();

scene.background = null;

// 1. Draw non-selected objects in the depth buffer

scene.overrideMaterial = this._depthMaterial;

renderer.setRenderTarget( this._renderTargetDepthBuffer );
renderer.setRenderObjectFunction( ( object, ...params ) => {

Expand All @@ -183,11 +179,13 @@ class OutlineNode extends TempNode {
}

} );

renderer.render( scene, camera );

// 2. Draw only the selected objects by comparing the depth buffer of non-selected objects

scene.overrideMaterial = this._prepareMaskMaterial;

renderer.setRenderTarget( this._renderTargetMaskBuffer );
renderer.setRenderObjectFunction( ( object, ...params ) => {

Expand All @@ -198,11 +196,12 @@ class OutlineNode extends TempNode {
}

} );

renderer.render( scene, camera );

scene.overrideMaterial = null;
scene.background = currentBackground;
renderer.setRenderObjectFunction( currentRenderObjectFunction );
//

renderer.setRenderObjectFunction( _rendererState.renderObjectFunction );

this._selectionCache.clear();

Expand Down Expand Up @@ -256,9 +255,7 @@ class OutlineNode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
renderer.setMRT( currentMRT );
renderer.setClearColor( _currentClearColor, currentClearAlpha );
PostProcessingUtils.setRendererAndSceneState( renderer, scene, _rendererState );

}

Expand Down
20 changes: 8 additions & 12 deletions examples/jsm/tsl/display/SMAANode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Color, HalfFloatType, LinearFilter, NearestFilter, RenderTarget, Texture, Vector2 } from 'three';
import { HalfFloatType, LinearFilter, NearestFilter, RenderTarget, Texture, Vector2, PostProcessingUtils } from 'three';
import { abs, QuadMesh, NodeMaterial, TempNode, nodeObject, Fn, NodeUpdateType, uv, uniform, convertToTexture, varyingProperty, vec2, vec4, modelViewProjection, passTexture, max, step, dot, float, texture, If, Loop, int, Break, sqrt, sign, mix } from 'three/tsl';

const _quadMesh = /*@__PURE__*/ new QuadMesh();
const _currentClearColor = /*@__PURE__*/ new Color();
const _size = /*@__PURE__*/ new Vector2();

let _rendererState;

/**
* Port of Subpixel Morphological Antialiasing (SMAA) v2.8
* Preset: SMAA 1x Medium (with color edge detection)
Expand Down Expand Up @@ -120,15 +121,12 @@ class SMAANode extends TempNode {

const { renderer } = frame;

const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );
_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );

const currentRenderTarget = renderer.getRenderTarget();
const currentMRT = renderer.getMRT();
renderer.getClearColor( _currentClearColor );
const currentClearAlpha = renderer.getClearAlpha();
//

renderer.setMRT( null );
const size = renderer.getDrawingBufferSize( _size );
this.setSize( size.width, size.height );

// edges

Expand All @@ -153,9 +151,7 @@ class SMAANode extends TempNode {

// restore

renderer.setRenderTarget( currentRenderTarget );
renderer.setMRT( currentMRT );
renderer.setClearColor( _currentClearColor, currentClearAlpha );
PostProcessingUtils.setRendererState( renderer, _rendererState );

}

Expand Down
Loading