WebGPURenderer: Introduce PostProcessingUtils (#29595)

mrdoob · Oct 8, 2024 · aedf298 · aedf298
1 parent 1ae4fce
commit aedf298
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 103 deletions.
diff --git a/examples/jsm/tsl/display/AfterImageNode.js b/examples/jsm/tsl/display/AfterImageNode.js
@@ -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() {
@@ -50,6 +51,10 @@ class AfterImageNode extends TempNode {
 
 		const { renderer } = frame;
 
+		_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
 		const textureNode = this.textureNode;
 		const map = textureNode.value;
 
@@ -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 ) {

diff --git a/examples/jsm/tsl/display/AnamorphicNode.js b/examples/jsm/tsl/display/AnamorphicNode.js
@@ -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() {
@@ -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;
@@ -74,9 +79,10 @@ class AnamorphicNode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
 		textureNode.value = currentTexture;
 
+		PostProcessingUtils.setRendererState( renderer, _rendererState );
+
 	}
 
 	setup( builder ) {

diff --git a/examples/jsm/tsl/display/BloomNode.js b/examples/jsm/tsl/display/BloomNode.js
@@ -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() {
@@ -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 );
@@ -163,9 +156,7 @@ class BloomNode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
-		renderer.setClearColor( _currentClearColor, currentClearAlpha );
+		PostProcessingUtils.setRendererState( renderer, _rendererState );
 
 	}
 

diff --git a/examples/jsm/tsl/display/GTAONode.js b/examples/jsm/tsl/display/GTAONode.js
@@ -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() {
@@ -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
@@ -83,9 +81,7 @@ class GTAONode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
-		renderer.setClearColor( _currentClearColor, currentClearAlpha );
+		PostProcessingUtils.setRendererState( renderer, _rendererState );
 
 	}
 

diff --git a/examples/jsm/tsl/display/GaussianBlurNode.js b/examples/jsm/tsl/display/GaussianBlurNode.js
@@ -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
@@ -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() {
@@ -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;
@@ -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 );
@@ -95,10 +94,10 @@ class GaussianBlurNode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
 		textureNode.value = currentTexture;
 
+		PostProcessingUtils.setRendererState( renderer, _rendererState );
+
 	}
 
 	getTextureNode() {

diff --git a/examples/jsm/tsl/display/OutlineNode.js b/examples/jsm/tsl/display/OutlineNode.js
@@ -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() {
@@ -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 ) => {
 
@@ -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 ) => {
 
@@ -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();
 
@@ -256,9 +255,7 @@ class OutlineNode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
-		renderer.setClearColor( _currentClearColor, currentClearAlpha );
+		PostProcessingUtils.setRendererAndSceneState( renderer, scene, _rendererState );
 
 	}
 

diff --git a/examples/jsm/tsl/display/SMAANode.js b/examples/jsm/tsl/display/SMAANode.js
@@ -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)
@@ -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
 
@@ -153,9 +151,7 @@ class SMAANode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
-		renderer.setClearColor( _currentClearColor, currentClearAlpha );
+		PostProcessingUtils.setRendererState( renderer, _rendererState );
 
 	}