WebGPURenderer: Rename PostProcessing to RenderPipeline (mrdoob#32789)

Author: sunag

examples/jsm/tsl/display/BloomNode.js

@@ -12,20 +12,20 @@ let _rendererState;
 /**
  * Post processing node for creating a bloom effect.
  * ```js
- * const postProcessing = new THREE.PostProcessing( renderer );
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  * const scenePassColor = scenePass.getTextureNode( 'output' );
  *
  * const bloomPass = bloom( scenePassColor );
  *
- * postProcessing.outputNode = scenePassColor.add( bloomPass );
+ * renderPipeline.outputNode = scenePassColor.add( bloomPass );
  * ```
  * By default, the node affects the entire image. For a selective bloom,
  * use the `emissive` material property to control which objects should
  * contribute to bloom or not. This can be achieved via MRT.
  * ```js
- * const postProcessing = new THREE.PostProcessing( renderer );
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  * scenePass.setMRT( mrt( {
@@ -37,7 +37,7 @@ let _rendererState;
  * const emissivePass = scenePass.getTextureNode( 'emissive' );
  *
  * const bloomPass = bloom( emissivePass );
- * postProcessing.outputNode = scenePassColor.add( bloomPass );
+ * renderPipeline.outputNode = scenePassColor.add( bloomPass );
  * ```
  * @augments TempNode
  * @three_import import { bloom } from 'three/addons/tsl/display/BloomNode.js';

examples/jsm/tsl/display/GTAONode.js

@@ -12,7 +12,7 @@ let _rendererState;
 /**
  * Post processing node for applying Ground Truth Ambient Occlusion (GTAO) to a scene.
  * ```js
- * const postProcessing = new THREE.PostProcessing( renderer );
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  * scenePass.setMRT( mrt( {
@@ -26,7 +26,7 @@ let _rendererState;
  *
  * const aoPass = ao( scenePassDepth, scenePassNormal, camera );
  *
- * postProcessing.outputNod = aoPass.getTextureNode().mul( scenePassColor );
+ * renderPipeline.outputNode = aoPass.getTextureNode().mul( scenePassColor );
  * ```
  *
  * Reference: [Practical Real-Time Strategies for Accurate Indirect Occlusion](https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf).

examples/jsm/tsl/display/OutlineNode.js

@@ -13,7 +13,7 @@ let _rendererState;
  * gives you great flexibility in composing the final outline look depending on
  * your requirements.
  * ```js
- * const postProcessing = new THREE.PostProcessing( renderer );
+ * const renderPipeline = new THREE.RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  *
@@ -36,7 +36,7 @@ let _rendererState;
  * const { visibleEdge, hiddenEdge } = outlinePass;
  * const outlineColor = visibleEdge.mul( visibleEdgeColor ).add( hiddenEdge.mul( hiddenEdgeColor ) ).mul( edgeStrength );
  *
- * postProcessing.outputNode = outlineColor.add( scenePass );
+ * renderPipeline.outputNode = outlineColor.add( scenePass );
  * ```
  *
  * @augments TempNode

examples/jsm/tsl/display/TRAANode.js

@@ -434,20 +434,20 @@ class TRAANode extends TempNode {
 	 */
 	setup( builder ) {
 
-		const postProcessing = builder.context.postProcessing;
+		const renderPipeline = builder.context.renderPipeline;
 
-		if ( postProcessing ) {
+		if ( renderPipeline ) {
 
 			this._needsPostProcessingSync = true;
 
-			postProcessing.context.onBeforePostProcessing = () => {
+			renderPipeline.context.onBeforeRenderPipeline = () => {
 
 				const size = builder.renderer.getDrawingBufferSize( _size );
 				this.setViewOffset( size.width, size.height );
 
 			};
 
-			postProcessing.context.onAfterPostProcessing = () => {
+			renderPipeline.context.onAfterRenderPipeline = () => {
 
 				this.clearViewOffset();
 

examples/misc_controls_fly.html

@@ -62,7 +62,7 @@
 			let geometry, meshPlanet, meshClouds, meshMoon;
 			let dirLight;
 
-			let postProcessing;
+			let renderPipeline;
 
 			const textureLoader = new THREE.TextureLoader();
 
@@ -219,12 +219,12 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();
 
-				postProcessing.outputNode = film( scenePassColor );
+				renderPipeline.outputNode = film( scenePassColor );
 
 			}
 
@@ -278,7 +278,7 @@
 				controls.movementSpeed = 0.33 * d;
 				controls.update( delta );
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_backdrop_water.html

@@ -44,7 +44,7 @@
 			let camera, scene, renderer;
 			let mixer, objects, timer;
 			let model, floor, floorPosition;
-			let postProcessing;
+			let renderPipeline;
 			let controls;
 
 			init();
@@ -221,8 +221,8 @@
 
 				const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus().toInspector( 'Post-Processing / Vignette' );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignette ) );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignette ) );
 
 				//
 
@@ -264,7 +264,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_compute_particles_snow.html

@@ -49,7 +49,7 @@
 			let camera, scene, renderer;
 			let controls;
 			let computeParticles;
-			let postProcessing;
+			let renderPipeline;
 
 			let collisionCamera, collisionPosRT, collisionPosMaterial;
 
@@ -309,8 +309,8 @@
 				totalPass = totalPass.mul( vignette );
 				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ).toInspector( 'Teapot Blur' ) );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = totalPass;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = totalPass;
 
 				//
 
@@ -354,7 +354,7 @@
 				scene.overrideMaterial = null;
 				renderer.setRenderTarget( null );
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_custom_fog_background.html

@@ -44,7 +44,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -81,9 +81,9 @@
 				// mix fog using fog factor and fog color
 				const compose = fogFactor.mix( scenePassTM, fogColor );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform
-				postProcessing.outputNode = compose;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform
+				renderPipeline.outputNode = compose;
 
 				//
 
@@ -130,7 +130,7 @@
 
 			function animate() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_custom_fog_scattering.html

@@ -40,7 +40,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls;
+			let camera, scene, renderer, renderPipeline, controls;
 
 			const params = {
 				scatteringEnabled: true
@@ -134,7 +134,7 @@
 
 				//
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// uniforms
 
@@ -158,7 +158,7 @@
 
 				const compositeNode = mix( scenePassColor, sceneColorBlurred, fogFactor );
 
-				postProcessing.outputNode = compositeNode;
+				renderPipeline.outputNode = compositeNode;
 
 				// gui
 
@@ -173,15 +173,15 @@
 
 					if ( value === true ) {
 
-						postProcessing.outputNode = compositeNode;
+						renderPipeline.outputNode = compositeNode;
 
 					} else {
 
-						postProcessing.outputNode = scenePassColor;
+						renderPipeline.outputNode = scenePassColor;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -202,7 +202,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_display_stereo.html

@@ -41,7 +41,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing;
+			let camera, scene, renderer, renderPipeline;
 
 			let stereo, anaglyph, parallaxBarrier;
 
@@ -108,12 +108,12 @@
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 				stereo = stereoPass( scene, camera );
 				anaglyph = anaglyphPass( scene, camera );
 				parallaxBarrier = parallaxBarrierPass( scene, camera );
 
-				postProcessing.outputNode = stereo;
+				renderPipeline.outputNode = stereo;
 
 				const gui = renderer.inspector.createParameters( 'Stereo Settings' );
 				gui.add( params, 'effect', effects ).onChange( update );
@@ -138,19 +138,19 @@
 
 				if ( value === 'stereo' ) {
 
-					postProcessing.outputNode = stereo;
+					renderPipeline.outputNode = stereo;
 
 				} else if ( value === 'anaglyph' ) {
 
-					postProcessing.outputNode = anaglyph;
+					renderPipeline.outputNode = anaglyph;
 
 				} else if ( value === 'parallaxBarrier' ) {
 
-					postProcessing.outputNode = parallaxBarrier;
+					renderPipeline.outputNode = parallaxBarrier;
 
 				}
 
-				postProcessing.needsUpdate = true;
+				renderPipeline.needsUpdate = true;
 
 			}
 
@@ -194,7 +194,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}