WebGPURenderer: Rename `PostProcessing` to `RenderPipeline` (#32789)

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();
 
 			}
 

examples/webgpu_hdr.html

@@ -123,11 +123,11 @@
 			brushMat.depthWrite = false;
 			brushMat.blending = THREE.AdditiveBlending; // additive to build HDR energy
 
-			const postProcessing = new THREE.PostProcessing( renderer );
+			const renderPipeline = new THREE.RenderPipeline( renderer );
 			const brushPass = pass( brushScene, camera, { type: THREE.HalfFloatType } );
 			brushPass.renderTarget.texture.colorSpace = ExtendedSRGBColorSpace;
 
-			postProcessing.outputNode = afterImage( brushPass, params.afterImageDecay );
+			renderPipeline.outputNode = afterImage( brushPass, params.afterImageDecay );
 
 			// HDR brush uniforms
 			const uColor = params.intensity;
@@ -193,7 +193,7 @@
 			// Main loop
 			renderer.setAnimationLoop( async () => {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			} );
 

examples/webgpu_lights_tiled.html

@@ -51,7 +51,7 @@
 				compose, tileInfluence,
 				lighting,
 				count,
-				postProcessing;
+				renderPipeline;
 
 			init();
 
@@ -176,7 +176,7 @@
 				compose = scenePass.add( bloomPass );
 				tileInfluence = uniform( 0 );
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				updatePostProcessing();
 
@@ -193,8 +193,8 @@
 
 				const debugBlockIndexes = lighting.getNode( scene ).setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio ).getBlock().toColor().div( count * 2 );
 
-				postProcessing.outputNode = compose.add( debugBlockIndexes.mul( tileInfluence ) );
-				postProcessing.needsUpdate = true;
+				renderPipeline.outputNode = compose.add( debugBlockIndexes.mul( tileInfluence ) );
+				renderPipeline.needsUpdate = true;
 
 			}
 
@@ -227,7 +227,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_materials_alphahash.html

@@ -30,7 +30,7 @@
 
 			import { ssaaPass } from 'three/addons/tsl/display/SSAAPassNode.js';
 
-			let camera, scene, renderer, controls, mesh, material, postProcessing;
+			let camera, scene, renderer, controls, mesh, material, renderPipeline;
 
 			const amount = parseInt( window.location.search.slice( 1 ) ) || 3;
 			const count = Math.pow( amount, 3 );
@@ -111,11 +111,11 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 				const scenePass = ssaaPass( scene, camera );
 				scenePass.sampleLevel = 3;
 
-				postProcessing.outputNode = scenePass;
+				renderPipeline.outputNode = scenePass;
 
 				//
 
@@ -161,7 +161,7 @@
 
 			function animate() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_materials_toon.html

@@ -46,7 +46,7 @@
 
 			let container;
 
-			let camera, scene, renderer, postProcessing;
+			let camera, scene, renderer, renderPipeline;
 			let particleLight;
 
 			const loader = new FontLoader();
@@ -80,9 +80,9 @@
 
 				//
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
-				postProcessing.outputNode = toonOutlinePass( scene, camera );
+				renderPipeline.outputNode = toonOutlinePass( scene, camera );
 
 
 				// Materials
@@ -200,7 +200,7 @@
 				particleLight.position.y = Math.cos( timer * 5 ) * 400;
 				particleLight.position.z = Math.cos( timer * 3 ) * 300;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_mrt.html

@@ -44,7 +44,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -110,9 +110,9 @@
 
 				// post processing - mrt
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
-				postProcessing.outputNode = Fn( () => {
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
+				renderPipeline.outputNode = Fn( () => {
 
 					const output = scenePass.getTextureNode( 'output' ); // output name is optional here
 					const normal = scenePass.getTextureNode( 'normal' );
@@ -153,7 +153,7 @@
 
 			function render() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_mrt_mask.html

@@ -42,7 +42,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 			let spheres, rotate = true;
 			let mixer, timer;
 
@@ -138,9 +138,9 @@
 				const colorPass = scenePass.getTextureNode();
 				const maskPass = scenePass.getTextureNode( 'mask' );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
-				postProcessing.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 20 ).mul( .3 ) ).renderOutput();
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
+				renderPipeline.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 20 ).mul( .3 ) ).renderOutput();
 
 				// controls
 
@@ -173,7 +173,7 @@
 
 				if ( rotate ) spheres.rotation.y += delta * 0.5;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_multiple_rendertargets.html

@@ -39,7 +39,7 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer, torus;
-			let postProcessing, renderTarget;
+			let renderPipeline, renderTarget;
 
 			init();
 
@@ -94,8 +94,8 @@
 
 				// Post Processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.x ) );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.x ) );
 
 				// Controls
 
@@ -127,7 +127,7 @@
 
 				// render post FX
 				renderer.setRenderTarget( null );
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_ocean.html

@@ -46,7 +46,7 @@
 			import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
 
 			let container;
-			let camera, scene, renderer, postProcessing;
+			let camera, scene, renderer, renderPipeline;
 			let controls, water, sun, sky, mesh, bloomPass;
 
 			init();
@@ -75,7 +75,7 @@
 
 				// Post-processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode( 'output' );
@@ -85,7 +85,7 @@
 				bloomPass.strength.value = 0.1;
 				bloomPass.radius.value = 0;
 
-				postProcessing.outputNode = scenePassColor.add( bloomPass );
+				renderPipeline.outputNode = scenePassColor.add( bloomPass );
 
 				//
 
@@ -226,7 +226,7 @@
 				mesh.rotation.x = time * 0.5;
 				mesh.rotation.z = time * 0.51;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing.html

@@ -37,7 +37,7 @@
 			import { rgbShift } from 'three/addons/tsl/display/RGBShiftNode.js';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, renderer, postProcessing;
+			let camera, renderer, renderPipeline;
 			let object;
 
 			init();
@@ -84,7 +84,7 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode().toInspector( 'Scene Color' );
@@ -95,7 +95,7 @@
 				const rgbShiftPass = rgbShift( dotScreenPass );
 				rgbShiftPass.amount.value = 0.001;
 
-				postProcessing.outputNode = rgbShiftPass;
+				renderPipeline.outputNode = rgbShiftPass;
 
 				//
 
@@ -117,7 +117,7 @@
 				object.rotation.x += 0.005;
 				object.rotation.y += 0.01;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_3dlut.html

@@ -63,7 +63,7 @@
 				'NightLUT': null
 			};
 
-			let camera, scene, renderer, postProcessing, controls, lutPass;
+			let camera, scene, renderer, renderPipeline, controls, lutPass;
 
 			init();
 
@@ -207,12 +207,12 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// ignore default output color transform ( toneMapping and outputColorSpace )
 				// use renderOutput() for control the sequence
 
-				postProcessing.outputColorTransform = false;
+				renderPipeline.outputColorTransform = false;
 
 				// scene pass
 
@@ -222,7 +222,7 @@
 				const lut = lutMap[ params.lut ];
 				lutPass = lut3D( outputPass, texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );
 
-				postProcessing.outputNode = lutPass;
+				renderPipeline.outputNode = lutPass;
 
 				// controls
 
@@ -265,7 +265,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_afterimage.html

@@ -41,7 +41,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, particles;
-			let postProcessing, afterImagePass, scenePass;
+			let renderPipeline, afterImagePass, scenePass;
 
 			const params = {
 
@@ -121,13 +121,13 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				scenePass = pass( scene, camera );
 
 				afterImagePass = afterImage( scenePass, params.damp );
 
-				postProcessing.outputNode = afterImagePass;
+				renderPipeline.outputNode = afterImagePass;
 
 				//
 
@@ -143,15 +143,15 @@
 
 				if ( params.enabled === true ) {
 
-					postProcessing.outputNode = afterImagePass;
+					renderPipeline.outputNode = afterImagePass;
 
 				} else {
 
-					postProcessing.outputNode = scenePass;
+					renderPipeline.outputNode = scenePass;
 
 				}
 
-				postProcessing.needsUpdate = true;
+				renderPipeline.needsUpdate = true;
 
 
 			}
@@ -185,7 +185,7 @@
 
 				particles.rotation.z = time * 0.001;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_anamorphic.html

@@ -45,7 +45,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 
 			const params = {
 				resolutionScale: 0.2
@@ -104,9 +104,9 @@
 				const anamorphicPass = anamorphic( scenePass.getTextureNode().toInspector( 'Color' ), threshold, scaleNode, samples ).toInspector( 'Anamorphic' );
 				anamorphicPass.resolutionScale = params.resolutionScale; // 1 = full resolution
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = scenePass.add( anamorphicPass.mul( intensity ) );
-				//postProcessing.outputNode = scenePass.add( anamorphicPass.getTextureNode().gaussianBlur() );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = scenePass.add( anamorphicPass.mul( intensity ) );
+				//renderPipeline.outputNode = scenePass.add( anamorphicPass.getTextureNode().gaussianBlur() );
 
 				// gui
 
@@ -135,7 +135,7 @@
 
 			function render() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_ao.html

@@ -47,7 +47,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls;
+			let camera, scene, renderer, renderPipeline, controls;
 
 			let aoPass, traaPass, transparentMesh;
 
@@ -102,7 +102,7 @@
 
 				// post-processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// pre-pass
 
@@ -150,7 +150,7 @@
 				traaPass = traa( scenePass, prePassDepth, prePassVelocity, camera );
 				traaPass.useSubpixelCorrection = false;
 
-				postProcessing.outputNode = traaPass;
+				renderPipeline.outputNode = traaPass;
 
 				// models
 
@@ -195,16 +195,16 @@
 
 					if ( value === true ) {
 
-						postProcessing.outputNode = vec4( vec3( aoPass.r ), 1 );
+						renderPipeline.outputNode = vec4( vec3( aoPass.r ), 1 );
 
 					} else {
 
 
-						postProcessing.outputNode = traaPass;
+						renderPipeline.outputNode = traaPass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -239,7 +239,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_bloom.html

@@ -46,7 +46,7 @@
 
 
 			let camera;
-			let postProcessing, renderer, mixer, timer;
+			let renderPipeline, renderer, mixer, timer;
 
 			const params = {
 				threshold: 0,
@@ -95,14 +95,14 @@
 
 				//
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' );
 
 				const bloomPass = bloom( scenePassColor ).toInspector( 'Bloom' );
 
-				postProcessing.outputNode = scenePassColor.add( bloomPass );
+				renderPipeline.outputNode = scenePassColor.add( bloomPass );
 
 				//
 
@@ -167,7 +167,7 @@
 
 				mixer.update( delta );
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_bloom_emissive.html

@@ -43,7 +43,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -116,8 +116,8 @@
 
 				const bloomPass = bloom( emissivePass, 2.5, .5 );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = outputPass.add( bloomPass );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = outputPass.add( bloomPass );
 
 				//
 
@@ -155,7 +155,7 @@
 
 			function render() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_bloom_selective.html

@@ -94,9 +94,9 @@
 
 			const bloomPass = bloom( outputPass.mul( bloomIntensityPass ) );
 
-			const postProcessing = new THREE.PostProcessing( renderer );
-			postProcessing.outputColorTransform = false;
-			postProcessing.outputNode = outputPass.add( bloomPass ).renderOutput();
+			const renderPipeline = new THREE.RenderPipeline( renderer );
+			renderPipeline.outputColorTransform = false;
+			renderPipeline.outputNode = outputPass.add( bloomPass ).renderOutput();
 
 			// controls
 
@@ -160,7 +160,7 @@
 
 			function animate() {
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_ca.html

@@ -52,7 +52,7 @@
 			};
 
 			let camera, scene, renderer, timer, mainGroup;
-			let controls, postProcessing;
+			let controls, renderPipeline;
 
 			init();
 
@@ -100,8 +100,8 @@
 				scene.add( gridHelper );
 
 				// post processing
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
 
 				// scene pass
 				const scenePass = pass( scene, camera );
@@ -116,7 +116,7 @@
 				const caPass = chromaticAberration( outputPass, staticStrength, staticCenter, staticScale );
 
 				// Set initial output based on params
-				postProcessing.outputNode = params.enabled ? caPass : outputPass;
+				renderPipeline.outputNode = params.enabled ? caPass : outputPass;
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -126,8 +126,8 @@
 
 				gui.add( params, 'enabled' ).onChange( ( value ) => {
 
-					postProcessing.outputNode = value ? caPass : outputPass;
-					postProcessing.needsUpdate = true;
+					renderPipeline.outputNode = value ? caPass : outputPass;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -336,7 +336,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 			
 			}
 

examples/webgpu_postprocessing_difference.html

@@ -42,7 +42,7 @@
 				speed: 0
 			};
 
-			let camera, renderer, postProcessing;
+			let camera, renderer, renderPipeline;
 			let timer, mesh, controls;
 
 			init();
@@ -80,7 +80,7 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 
@@ -91,7 +91,7 @@
 
 				const saturationAmount = luminance( frameDiff ).mul( 1000 ).clamp( 0, 3 );
 
-				postProcessing.outputNode = saturation( currentTexture, saturationAmount );
+				renderPipeline.outputNode = saturation( currentTexture, saturationAmount );
 
 				//
 
@@ -127,7 +127,7 @@
 
 				mesh.rotation.y += timer.getDelta() * 5 * params.speed;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_dof.html

@@ -45,7 +45,7 @@
 			let width = window.innerWidth;
 			let height = window.innerHeight;
 
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -118,7 +118,7 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 
@@ -127,7 +127,7 @@
 
 				const dofPass = dof( scenePassColor, scenePassViewZ, effectController.focusDistance, effectController.focalLength, effectController.bokehScale );
 
-				postProcessing.outputNode = dofPass;
+				renderPipeline.outputNode = dofPass;
 
 				// controls
 
@@ -161,7 +161,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_dof_basic.html

@@ -48,7 +48,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 			import TWEEN from 'three/addons/libs/tween.module.js';
 
-			let camera, controls, scene, timer, renderer, model, mixer, raycaster, postProcessing;
+			let camera, controls, scene, timer, renderer, model, mixer, raycaster, renderPipeline;
 
 			const pointerCoords = new THREE.Vector2();
 			const focusPoint = new THREE.Vector3( 1, 1.75, - 0.4 );
@@ -107,8 +107,8 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
 
 				// DOF uniforms
 
@@ -133,7 +133,7 @@
 				const outputPass = renderOutput( dofPass );
 				const fxaaPass = fxaa( outputPass );
 
-				postProcessing.outputNode = fxaaPass;
+				renderPipeline.outputNode = fxaaPass;
 
 				// GUI
 
@@ -202,7 +202,7 @@
 				camera.updateMatrixWorld();
 				focusPointView.value.copy( focusPoint ).applyMatrix4( camera.matrixWorldInverse );
 
-				postProcessing.render();
+				renderPipeline.render();
 
 
 			}

examples/webgpu_postprocessing_fxaa.html

@@ -44,7 +44,7 @@
 			};
 
 			let camera, scene, renderer, timer, group;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -108,12 +108,12 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// ignore default output color transform ( toneMapping and outputColorSpace )
 				// use renderOutput() for control the sequence
 
-				postProcessing.outputColorTransform = false;
+				renderPipeline.outputColorTransform = false;
 
 				// scene pass
 
@@ -123,7 +123,7 @@
 				// FXAA must be computed in sRGB color space (so after tone mapping and color space conversion)
 
 				const fxaaPass = fxaa( outputPass );
-				postProcessing.outputNode = fxaaPass;
+				renderPipeline.outputNode = fxaaPass;
 
 				//
 
@@ -136,15 +136,15 @@
 			
 					if ( value === true ) {
 
-						postProcessing.outputNode = fxaaPass;
+						renderPipeline.outputNode = fxaaPass;
 
 					} else {
 
-						postProcessing.outputNode = outputPass;
+						renderPipeline.outputNode = outputPass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 				} );
 				gui.add( params, 'animated' );
@@ -174,7 +174,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_lensflare.html

@@ -50,7 +50,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, controls;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -124,8 +124,8 @@
 
 				const blurPass = gaussianBlur( flarePass, 8 ); // optional (blurring produces better flare quality but also adds some overhead)
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = outputPass.add( bloomPass ).add( blurPass );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = outputPass.add( bloomPass ).add( blurPass );
 
 				//
 
@@ -172,7 +172,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_masking.html

@@ -35,7 +35,7 @@
 			import { pass, texture } from 'three/tsl';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, postProcessing, renderer;
+			let camera, renderPipeline, renderer;
 			let box, torus;
 
 			init();
@@ -91,8 +91,8 @@
 				compose = sceneMask1.mix( compose, texture( texture1 ) );
 				compose = sceneMask2.mix( compose, texture( texture2 ) );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = compose;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = compose;
 
 			}
 
@@ -122,7 +122,7 @@
 				torus.rotation.x = time;
 				torus.rotation.y = time / 2;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_motion_blur.html

@@ -43,7 +43,7 @@
 
 			let camera, scene, renderer;
 			let boxLeft, boxRight, model, mixer, timer;
-			let postProcessing;
+			let renderPipeline;
 			let controls;
 
 			const params = {
@@ -193,8 +193,8 @@
 
 				const vignette = screenUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = mBlur.mul( vignette );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = mBlur.mul( vignette );
 
 				//
 
@@ -236,7 +236,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_outline.html

@@ -41,7 +41,7 @@
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
 			let camera, scene, renderer, controls;
-			let postProcessing, outlinePass;
+			let renderPipeline, outlinePass;
 
 			let selectedObjects = [];
 
@@ -196,8 +196,8 @@
 
 				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = outlinePulse.add( scenePass );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = outlinePulse.add( scenePass );
 
 				// gui
 
@@ -280,7 +280,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_pixel.html

@@ -41,7 +41,7 @@
 		import { uniform } from 'three/tsl';
 		import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js';
 
-		let camera, scene, renderer, postProcessing, crystalMesh, timer;
+		let camera, scene, renderer, renderPipeline, crystalMesh, timer;
 		let effectController;
 
 		init();
@@ -145,9 +145,9 @@
 				pixelAlignedPanning: true
 			};
 
-			postProcessing = new THREE.PostProcessing( renderer );
+			renderPipeline = new THREE.RenderPipeline( renderer );
 			const scenePass = pixelationPass( scene, camera, effectController.pixelSize, effectController.normalEdgeStrength, effectController.depthEdgeStrength );
-			postProcessing.outputNode = scenePass;
+			renderPipeline.outputNode = scenePass;
 
 			window.addEventListener( 'resize', onWindowResize );
 
@@ -206,7 +206,7 @@
 
 			}
 
-			postProcessing.render();
+			renderPipeline.render();
 
 		}
 

examples/webgpu_postprocessing_radial_blur.html

@@ -44,7 +44,7 @@
 			};
 
 			let camera, scene, renderer, timer, group;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -126,7 +126,7 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 
@@ -137,7 +137,7 @@
 
 				const blurPass = radialBlur( scenePass, { weight: weightUniform, decay: decayUniform, count: countUniform, exposure: exposureUniform } );
 
-				postProcessing.outputNode = blurPass;
+				renderPipeline.outputNode = blurPass;
 
 				//
 
@@ -154,15 +154,15 @@
 			
 					if ( value === true ) {
 
-						postProcessing.outputNode = blurPass;
+						renderPipeline.outputNode = blurPass;
 
 					} else {
 
-						postProcessing.outputNode = scenePass;
+						renderPipeline.outputNode = scenePass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 				} );
 				gui.add( params, 'animated' );
@@ -191,7 +191,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_smaa.html

@@ -37,7 +37,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing;
+			let camera, scene, renderer, renderPipeline;
 
 			const params = {
 				enabled: true,
@@ -81,12 +81,12 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera ).toInspector( 'Color' );
 				const smaaPass = smaa( scenePass );
 
-				postProcessing.outputNode = smaaPass;
+				renderPipeline.outputNode = smaaPass;
 
 				//
 
@@ -99,15 +99,15 @@
 			
 					if ( value === true ) {
 
-						postProcessing.outputNode = smaaPass;
+						renderPipeline.outputNode = smaaPass;
 
 					} else {
 
-						postProcessing.outputNode = scenePass;
+						renderPipeline.outputNode = scenePass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -143,7 +143,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_sobel.html

@@ -41,7 +41,7 @@
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
 			let camera, scene, renderer, controls;
-			let postProcessing;
+			let renderPipeline;
 
 			const params = {
 				enabled: true
@@ -94,12 +94,12 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
 
 				const scenePass = pass( scene, camera );
 
-				postProcessing.outputNode = sobel( renderOutput( scenePass ) );
+				renderPipeline.outputNode = sobel( renderOutput( scenePass ) );
 
 				//
 
@@ -128,7 +128,7 @@
 
 				if ( params.enabled === true ) {
 
-					postProcessing.render();
+					renderPipeline.render();
 
 				} else {
 

examples/webgpu_postprocessing_ssaa.html

@@ -36,7 +36,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let scene, mesh, renderer, postProcessing;
+			let scene, mesh, renderer, renderPipeline;
 			let camera, ssaaRenderPass;
 			let timer;
 
@@ -128,12 +128,12 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				ssaaRenderPass = ssaaPass( scene, camera );
 				const scenePassColor = ssaaRenderPass.getTextureNode();
 
-				postProcessing.outputNode = scenePassColor;
+				renderPipeline.outputNode = scenePassColor;
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -201,7 +201,7 @@
 
 				camera.view.offsetX = params.viewOffsetX;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_ssgi.html

@@ -40,7 +40,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls;
+			let camera, scene, renderer, renderPipeline, controls;
 
 			init();
 
@@ -71,7 +71,7 @@
 
 				//
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				scenePass.setMRT( mrt( {
@@ -123,7 +123,7 @@
 				// traa
 
 				const traaPass = traa( compositePass, scenePassDepth, scenePassVelocity, camera );
-				postProcessing.outputNode = traaPass;
+				renderPipeline.outputNode = traaPass;
 
 				// Cornell Box inspired scene
 
@@ -239,23 +239,23 @@
 
 					if ( value === 1 ) {
 
-						postProcessing.outputNode = vec4( vec3( ao ), 1 );
+						renderPipeline.outputNode = vec4( vec3( ao ), 1 );
 
 					} else if ( value === 2 ) {
 
-						postProcessing.outputNode = vec4( gi, 1 );
+						renderPipeline.outputNode = vec4( gi, 1 );
 
 					} else if ( value === 3 ) {
 
-						postProcessing.outputNode = scenePassColor;
+						renderPipeline.outputNode = scenePassColor;
 
 					} else {
 
-						postProcessing.outputNode = giPass.useTemporalFiltering ? traaPass : compositePass;
+						renderPipeline.outputNode = giPass.useTemporalFiltering ? traaPass : compositePass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 
 				}
@@ -279,7 +279,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_ssr.html

@@ -60,7 +60,7 @@
 			enabled: true
 		};
 
-		let camera, scene, model, renderer, postProcessing, ssrPass;
+		let camera, scene, model, renderer, renderPipeline, ssrPass;
 		let controls;
 
 		init();
@@ -126,7 +126,7 @@
 
 			//
 
-			postProcessing = new THREE.PostProcessing( renderer );
+			renderPipeline = new THREE.RenderPipeline( renderer );
 
 			const scenePass = pass( scene, camera );
 			scenePass.setMRT( mrt( {
@@ -170,7 +170,7 @@
 
 			const outputNode = smaa( blendColor( scenePassColor, ssrPass ) );
 
-			postProcessing.outputNode = outputNode;
+			renderPipeline.outputNode = outputNode;
 
 			//
 
@@ -193,15 +193,15 @@
 
 				if ( params.enabled === true ) {
 
-					postProcessing.outputNode = outputNode;
+					renderPipeline.outputNode = outputNode;
 
 				} else {
 
-					postProcessing.outputNode = scenePass;
+					renderPipeline.outputNode = scenePass;
 
 				}
 
-				postProcessing.needsUpdate = true;
+				renderPipeline.needsUpdate = true;
 
 			} );
 			const modelFolder = gui.addFolder( 'Model' );
@@ -246,7 +246,7 @@
 
 			controls.update();
 
-			postProcessing.render();
+			renderPipeline.render();
 		
 		}
 

examples/webgpu_postprocessing_sss.html

@@ -45,7 +45,7 @@
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls;
+			let camera, scene, renderer, renderPipeline, controls;
 
 			init();
 
@@ -130,7 +130,7 @@
 
 				// post-processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// pre-pass
 
@@ -165,7 +165,7 @@
 				// traa
 
 				const traaPass = traa( scenePass, prePassDepth, prePassVelocity, camera );
-				postProcessing.outputNode = traaPass;
+				renderPipeline.outputNode = traaPass;
 
 				//
 
@@ -198,15 +198,15 @@
 
 					if ( params.output === 2 ) {
 
-						postProcessing.outputNode = vec4( vec3( sssPass.r ), 1 );
+						renderPipeline.outputNode = vec4( vec3( sssPass.r ), 1 );
 
 					} else {
 
-						postProcessing.outputNode = sssPass.useTemporalFiltering ? traaPass : scenePass;
+						renderPipeline.outputNode = sssPass.useTemporalFiltering ? traaPass : scenePass;
 
 					}
 
-					postProcessing.needsUpdate = true;
+					renderPipeline.needsUpdate = true;
 
 
 				}
@@ -231,7 +231,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_traa.html

@@ -37,7 +37,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing;
+			let camera, scene, renderer, renderPipeline;
 			let index = 0;
 
 			init();
@@ -77,7 +77,7 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 				const scenePass = pass( scene, camera );
 				scenePass.setMRT( mrt( {
 					output: output,
@@ -94,7 +94,7 @@
 
 				const traaNode = traa( scenePassColor, scenePassDepth, scenePassVelocity, camera );
 			
-				postProcessing.outputNode = traaNode;
+				renderPipeline.outputNode = traaNode;
 
 				//
 
@@ -131,7 +131,7 @@
 
 				}
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_postprocessing_transition.html

@@ -40,7 +40,7 @@
 			import { uniform, pass } from 'three/tsl';
 			import { transition } from 'three/addons/tsl/display/TransitionNode.js';
 
-			let renderer, postProcessing, transitionController, transitionPass;
+			let renderer, renderPipeline, transitionController, transitionPass;
 
 			const textures = [];
 			const timer = new THREE.Timer();
@@ -168,14 +168,14 @@
 				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePassA = pass( fxSceneA.scene, fxSceneA.camera );
 				const scenePassB = pass( fxSceneB.scene, fxSceneB.camera );
 
 				transitionPass = transition( scenePassA, scenePassB, new THREE.TextureNode( textures[ effectController.texture ] ), effectController._transition, effectController.threshold, effectController._useTexture );
 
-				postProcessing.outputNode = transitionPass;
+				renderPipeline.outputNode = transitionPass;
 
 				const gui = renderer.inspector.createParameters( 'Settings' );
 
@@ -265,7 +265,7 @@
 
 				} else {
 
-					postProcessing.render();
+					renderPipeline.render();
 
 				}
 

examples/webgpu_reflection.html

@@ -46,7 +46,7 @@
 			import TWEEN from 'three/addons/libs/tween.module.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 			let controls;
 
 			// below uniforms will be animated via TWEEN.js
@@ -155,8 +155,8 @@
 
 				const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 );
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette );
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = blendOverlay( scenePassColorBlurred, vignette );
 
 				// tweens
 
@@ -194,7 +194,7 @@
 
 				TWEEN.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_skinning_instancing.html

@@ -40,7 +40,7 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			let camera, scene, renderer;
-			let postProcessing;
+			let renderPipeline;
 
 			let mixer, timer;
 
@@ -146,8 +146,8 @@
 				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.directionNode = scenePassDepth;
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputNode = scenePassColorBlurred;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputNode = scenePassColorBlurred;
 
 
 				// events
@@ -173,7 +173,7 @@
 
 				if ( mixer ) mixer.update( delta );
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_test_memory.html

@@ -44,7 +44,7 @@
 			let camera, scene, renderer, light;
 			let generateMeshes = true;
 			let mesh;
-			let postProcessing;
+			let renderPipeline;
 			let aoNode, outlineNode, scenePass, prePass;
 			const selectedObjects = [];
 
@@ -143,10 +143,10 @@
 
 			function updatePostProcessing() {
 
-				if ( postProcessing ) {
+				if ( renderPipeline ) {
 
-					postProcessing.dispose();
-					postProcessing = null;
+					renderPipeline.dispose();
+					renderPipeline = null;
 
 				}
 
@@ -180,7 +180,7 @@
 
 				if ( params.enablePP ) {
 
-					postProcessing = new THREE.PostProcessing( renderer );
+					renderPipeline = new THREE.RenderPipeline( renderer );
 
 					scenePass = pass( scene, camera );
 					let colorNode = scenePass;
@@ -216,7 +216,7 @@
 
 					}
 
-					postProcessing.outputNode = colorNode;
+					renderPipeline.outputNode = colorNode;
 
 				}
 
@@ -283,9 +283,9 @@
 
 				}
 
-				if ( postProcessing ) {
+				if ( renderPipeline ) {
 
-					postProcessing.render();
+					renderPipeline.render();
 
 				} else {
 

examples/webgpu_tsl_vfx_linkedparticles.html

@@ -43,7 +43,7 @@
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
-			let camera, scene, renderer, postProcessing, controls, timer, light;
+			let camera, scene, renderer, renderPipeline, controls, timer, light;
 
 			let updateParticles, spawnParticles; // TSL compute nodes
 			let getInstanceColor; // TSL function
@@ -356,14 +356,14 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode( 'output' );
 
 				const bloomPass = bloom( scenePassColor, 0.75, 0.1, 0.5 );
 
-				postProcessing.outputNode = scenePassColor.add( bloomPass );
+				renderPipeline.outputNode = scenePassColor.add( bloomPass );
 
 				// controls
 
@@ -462,7 +462,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_tsl_vfx_tornado.html

@@ -41,7 +41,7 @@
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
-			let camera, scene, renderer, postProcessing, controls;
+			let camera, scene, renderer, renderPipeline, controls;
 
 			init();
 
@@ -288,14 +288,14 @@
 
 				// post processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode( 'output' );
 
 				const bloomPass = bloom( scenePassColor, 1, 0.1, 1 );
 
-				postProcessing.outputNode = scenePassColor.add( bloomPass );
+				renderPipeline.outputNode = scenePassColor.add( bloomPass );
 
 				// controls
 
@@ -336,7 +336,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_volume_caustics.html

@@ -46,7 +46,7 @@
 			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			let camera, scene, renderer, controls;
-			let postProcessing;
+			let renderPipeline;
 			let gltf;
 
 			init();
@@ -179,7 +179,7 @@
 
 				// Post-Processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// Layers
 
@@ -294,7 +294,7 @@
 
 				const scenePassColor = scenePass.add( bloomPass.mul( volumetricLightingIntensity ) );
 
-				postProcessing.outputNode = scenePassColor;
+				renderPipeline.outputNode = scenePassColor;
 
 				// Controls
 
@@ -326,7 +326,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_volume_lighting.html

@@ -46,7 +46,7 @@
 
 			let renderer, scene, camera;
 			let volumetricMesh, teapot, pointLight, spotLight;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -193,7 +193,7 @@
 
 				// Post-Processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// Layers
 
@@ -227,7 +227,7 @@
 
 				const scenePassColor = scenePass.add( blurredVolumetricPass.mul( volumetricLightingIntensity ) );
 
-				postProcessing.outputNode = scenePassColor;
+				renderPipeline.outputNode = scenePassColor;
 
 				// GUI
 
@@ -252,8 +252,8 @@
 
 					const scenePassColor = scenePass.add( volumetric.mul( volumetricLightingIntensity ) );
 
-					postProcessing.outputNode = scenePassColor;
-					postProcessing.needsUpdate = true;
+					renderPipeline.outputNode = scenePassColor;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -290,7 +290,7 @@
 
 				teapot.rotation.y = time * 0.2;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_volume_lighting_rectarea.html

@@ -48,7 +48,7 @@
 			let volumetricMesh;
 			let rectLight1, rectLight2, rectLight3;
 			let timer;
-			let postProcessing;
+			let renderPipeline;
 
 			init();
 
@@ -216,7 +216,7 @@
 
 				// Post-Processing
 
-				postProcessing = new THREE.PostProcessing( renderer );
+				renderPipeline = new THREE.RenderPipeline( renderer );
 
 				// Layers
 
@@ -249,7 +249,7 @@
 
 				const scenePassColor = scenePass.add( blurredVolumetricPass.mul( volumetricLightingIntensity ) );
 
-				postProcessing.outputNode = scenePassColor;
+				renderPipeline.outputNode = scenePassColor;
 
 				// GUI
 
@@ -274,8 +274,8 @@
 
 					const scenePassColor = scenePass.add( volumetric.mul( volumetricLightingIntensity ) );
 
-					postProcessing.outputNode = scenePassColor;
-					postProcessing.needsUpdate = true;
+					renderPipeline.outputNode = scenePassColor;
+					renderPipeline.needsUpdate = true;
 
 				} );
 
@@ -306,7 +306,7 @@
 				rectLight2.rotation.y += delta * .5;
 				rectLight3.rotation.y += delta;
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

examples/webgpu_water.html

@@ -51,7 +51,7 @@
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			let scene, camera, renderer, water, postProcessing, controls;
+			let scene, camera, renderer, water, renderPipeline, controls;
 
 			const params = {
 				color: '#99e0ff',
@@ -182,8 +182,8 @@
 
 				// postprocessing
 
-				postProcessing = new THREE.PostProcessing( renderer );
-				postProcessing.outputColorTransform = false;
+				renderPipeline = new THREE.RenderPipeline( renderer );
+				renderPipeline.outputColorTransform = false;
 			
 				const scenePass = pass( scene, camera );
 				scenePass.setMRT( mrt( {
@@ -199,7 +199,7 @@
 				const outputPass = renderOutput( beautyPass.add( bloomPass ) );
 
 				const fxaaPass = fxaa( outputPass );
-				postProcessing.outputNode = fxaaPass;
+				renderPipeline.outputNode = fxaaPass;
 
 				// gui
 
@@ -254,7 +254,7 @@
 
 				controls.update();
 
-				postProcessing.render();
+				renderPipeline.render();
 
 			}
 

src/Three.WebGPU.Nodes.js

@@ -6,6 +6,7 @@ export { default as Lighting } from './renderers/common/Lighting.js';
 export { default as BundleGroup } from './renderers/common/BundleGroup.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';
 export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js';
+export { default as RenderPipeline } from './renderers/common/RenderPipeline.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';
 import * as RendererUtils from './renderers/common/RendererUtils.js';
 export { RendererUtils };

src/Three.WebGPU.js

@@ -6,6 +6,7 @@ export { default as Lighting } from './renderers/common/Lighting.js';
 export { default as BundleGroup } from './renderers/common/BundleGroup.js';
 export { default as QuadMesh } from './renderers/common/QuadMesh.js';
 export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js';
+export { default as RenderPipeline } from './renderers/common/RenderPipeline.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';
 import * as RendererUtils from './renderers/common/RendererUtils.js';
 export { RendererUtils };

src/nodes/display/PassNode.js

@@ -150,7 +150,7 @@ class PassMultipleTextureNode extends PassTextureNode {
  * via MRT for further processing.
  *
  * ```js
- * const postProcessing = new PostProcessing( renderer );
+ * const postProcessing = new RenderPipeline( renderer );
  *
  * const scenePass = pass( scene, camera );
  *

src/nodes/display/RenderOutputNode.js

@@ -13,10 +13,10 @@ import { ColorManagement } from '../../math/ColorManagement.js';
  * in the effect chain.
  *
  * When applying tone mapping and color space conversion manually with this node,
- * you have to set {@link PostProcessing#outputColorTransform} to `false`.
+ * you have to set {@link RenderPipeline#outputColorTransform} to `false`.
  *
  * ```js
- * const postProcessing = new PostProcessing( renderer );
+ * const postProcessing = new RenderPipeline( renderer );
  * postProcessing.outputColorTransform = false;
  *
  * const scenePass = pass( scene, camera );

src/nodes/display/ToonOutlinePassNode.js

@@ -14,7 +14,7 @@ import PassNode from './PassNode.js';
  * will receive the outline.
  *
  * ```js
- * const postProcessing = new PostProcessing( renderer );
+ * const postProcessing = new RenderPipeline( renderer );
  *
  * const scenePass = toonOutlinePass( scene, camera );
  *

src/renderers/common/PostProcessing.js

@@ -1,223 +1,25 @@
-import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
-import { ColorManagement } from '../../math/ColorManagement.js';
-import { vec4, renderOutput } from '../../nodes/TSL.js';
-import { NoToneMapping } from '../../constants.js';
-import QuadMesh from '../../renderers/common/QuadMesh.js';
+import RenderPipeline from './RenderPipeline.js';
 import { warnOnce } from '../../utils.js';
 
 /**
- * This module is responsible to manage the post processing setups in apps.
- * You usually create a single instance of this class and use it to define
- * the output of your post processing effect chain.
- * ```js
- * const postProcessing = new PostProcessing( renderer );
+ * @deprecated since r183. Use {@link RenderPipeline} instead. PostProcessing has been renamed to RenderPipeline.
  *
- * const scenePass = pass( scene, camera );
- *
- * postProcessing.outputNode = scenePass;
- * ```
- *
- * Note: This module can only be used with `WebGPURenderer`.
+ * This class is a wrapper for backward compatibility and will be removed in a future version.
  */
-class PostProcessing {
+class PostProcessing extends RenderPipeline {
 
 	/**
 	 * Constructs a new post processing management module.
 	 *
 	 * @param {Renderer} renderer - A reference to the renderer.
 	 * @param {Node<vec4>} outputNode - An optional output node.
+	 * @deprecated since r183. Use {@link RenderPipeline} instead.
 	 */
-	constructor( renderer, outputNode = vec4( 0, 0, 1, 1 ) ) {
-
-		/**
-		 * A reference to the renderer.
-		 *
-		 * @type {Renderer}
-		 */
-		this.renderer = renderer;
-
-		/**
-		 * A node which defines the final output of the post
-		 * processing. This is usually the last node in a chain
-		 * of effect nodes.
-		 *
-		 * @type {Node<vec4>}
-		 */
-		this.outputNode = outputNode;
-
-		/**
-		 * Whether the default output tone mapping and color
-		 * space transformation should be enabled or not.
-		 *
-		 * It is enabled by default by it must be disabled when
-		 * effects must be executed after tone mapping and color
-		 * space conversion. A typical example is FXAA which
-		 * requires sRGB input.
-		 *
-		 * When set to `false`, the app must control the output
-		 * transformation with `RenderOutputNode`.
-		 *
-		 * ```js
-		 * const outputPass = renderOutput( scenePass );
-		 * ```
-		 *
-		 * @type {boolean}
-		 */
-		this.outputColorTransform = true;
-
-		/**
-		 * Must be set to `true` when the output node changes.
-		 *
-		 * @type {Node<vec4>}
-		 */
-		this.needsUpdate = true;
-
-		const material = new NodeMaterial();
-		material.name = 'PostProcessing';
-
-		/**
-		 * The full screen quad that is used to render
-		 * the effects.
-		 *
-		 * @private
-		 * @type {QuadMesh}
-		 */
-		this._quadMesh = new QuadMesh( material );
-		this._quadMesh.name = 'Post-Processing';
-
-		/**
-		 * The context of the post processing stack.
-		 *
-		 * @private
-		 * @type {?Object}
-		 * @default null
-		 */
-		this._context = null;
-
-	}
-
-	/**
-	 * When `PostProcessing` is used to apply post processing effects,
-	 * the application must use this version of `render()` inside
-	 * its animation loop (not the one from the renderer).
-	 */
-	render() {
-
-		const renderer = this.renderer;
-
-		this._update();
-
-		if ( this._context.onBeforePostProcessing !== null ) this._context.onBeforePostProcessing();
-
-		const toneMapping = renderer.toneMapping;
-		const outputColorSpace = renderer.outputColorSpace;
-
-		renderer.toneMapping = NoToneMapping;
-		renderer.outputColorSpace = ColorManagement.workingColorSpace;
-
-		//
-
-		const currentXR = renderer.xr.enabled;
-		renderer.xr.enabled = false;
-
-		this._quadMesh.render( renderer );
-
-		renderer.xr.enabled = currentXR;
-
-		//
-
-		renderer.toneMapping = toneMapping;
-		renderer.outputColorSpace = outputColorSpace;
-
-		if ( this._context.onAfterPostProcessing !== null ) this._context.onAfterPostProcessing();
-
-	}
-
-	/**
-	 * Returns the current context of the post processing stack.
-	 *
-	 * @readonly
-	 * @type {?Object}
-	 */
-	get context() {
-
-		return this._context;
-
-	}
-
-	/**
-	 * Frees internal resources.
-	 */
-	dispose() {
-
-		this._quadMesh.material.dispose();
-
-	}
-
-	/**
-	 * Updates the state of the module.
-	 *
-	 * @private
-	 */
-	_update() {
-
-		if ( this.needsUpdate === true ) {
-
-			const renderer = this.renderer;
-
-			const toneMapping = renderer.toneMapping;
-			const outputColorSpace = renderer.outputColorSpace;
-
-			const context = {
-				postProcessing: this,
-				onBeforePostProcessing: null,
-				onAfterPostProcessing: null
-			};
-
-			let outputNode = this.outputNode;
-
-			if ( this.outputColorTransform === true ) {
-
-				outputNode = outputNode.context( context );
-
-				outputNode = renderOutput( outputNode, toneMapping, outputColorSpace );
-
-			} else {
-
-				context.toneMapping = toneMapping;
-				context.outputColorSpace = outputColorSpace;
-
-				outputNode = outputNode.context( context );
-
-			}
-
-			this._context = context;
-
-			this._quadMesh.material.fragmentNode = outputNode;
-			this._quadMesh.material.needsUpdate = true;
-
-			this.needsUpdate = false;
-
-		}
-
-	}
-
-	/**
-	 * When `PostProcessing` is used to apply post processing effects,
-	 * the application must use this version of `renderAsync()` inside
-	 * its animation loop (not the one from the renderer).
-	 *
-	 * @async
-	 * @deprecated
-	 * @return {Promise} A Promise that resolves when the render has been finished.
-	 */
-	async renderAsync() {
-
-		warnOnce( 'PostProcessing: "renderAsync()" has been deprecated. Use "render()" and "await renderer.init();" when creating the renderer.' ); // @deprecated r181
+	constructor( renderer, outputNode ) {
 
-		await this.renderer.init();
+		warnOnce( 'PostProcessing: "PostProcessing" has been renamed to "RenderPipeline". Please update your code to use "THREE.RenderPipeline" instead.' ); // @deprecated, r183
 
-		this.render();
+		super( renderer, outputNode );
 
 	}
 

src/renderers/common/RenderPipeline.js

@@ -0,0 +1,226 @@
+import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
+import { ColorManagement } from '../../math/ColorManagement.js';
+import { vec4, renderOutput } from '../../nodes/TSL.js';
+import { NoToneMapping } from '../../constants.js';
+import QuadMesh from '../../renderers/common/QuadMesh.js';
+import { warnOnce } from '../../utils.js';
+
+/**
+ * This module is responsible to manage the rendering pipeline setups in apps.
+ * You usually create a single instance of this class and use it to define
+ * the output of your render pipeline and post processing effect chain.
+ * ```js
+ * const renderPipeline = new RenderPipeline( renderer );
+ *
+ * const scenePass = pass( scene, camera );
+ *
+ * renderPipeline.outputNode = scenePass;
+ * ```
+ *
+ * Note: This module can only be used with `WebGPURenderer`.
+ */
+class RenderPipeline {
+
+	/**
+	 * Constructs a new render pipeline management module.
+	 *
+	 * @param {Renderer} renderer - A reference to the renderer.
+	 * @param {Node<vec4>} outputNode - An optional output node.
+	 */
+	constructor( renderer, outputNode = vec4( 0, 0, 1, 1 ) ) {
+
+		/**
+		 * A reference to the renderer.
+		 *
+		 * @type {Renderer}
+		 */
+		this.renderer = renderer;
+
+		/**
+		 * A node which defines the final output of the rendering
+		 * pipeline. This is usually the last node in a chain
+		 * of effect nodes.
+		 *
+		 * @type {Node<vec4>}
+		 */
+		this.outputNode = outputNode;
+
+		/**
+		 * Whether the default output tone mapping and color
+		 * space transformation should be enabled or not.
+		 *
+		 * It is enabled by default by it must be disabled when
+		 * effects must be executed after tone mapping and color
+		 * space conversion. A typical example is FXAA which
+		 * requires sRGB input.
+		 *
+		 * When set to `false`, the app must control the output
+		 * transformation with `RenderOutputNode`.
+		 *
+		 * ```js
+		 * const outputPass = renderOutput( scenePass );
+		 * ```
+		 *
+		 * @type {boolean}
+		 */
+		this.outputColorTransform = true;
+
+		/**
+		 * Must be set to `true` when the output node changes.
+		 *
+		 * @type {Node<vec4>}
+		 */
+		this.needsUpdate = true;
+
+		const material = new NodeMaterial();
+		material.name = 'RenderPipeline';
+
+		/**
+		 * The full screen quad that is used to render
+		 * the effects.
+		 *
+		 * @private
+		 * @type {QuadMesh}
+		 */
+		this._quadMesh = new QuadMesh( material );
+		this._quadMesh.name = 'Render Pipeline';
+
+		/**
+		 * The context of the render pipeline stack.
+		 *
+		 * @private
+		 * @type {?Object}
+		 * @default null
+		 */
+		this._context = null;
+
+	}
+
+	/**
+	 * When `RenderPipeline` is used to apply rendering pipeline and post processing effects,
+	 * the application must use this version of `render()` inside
+	 * its animation loop (not the one from the renderer).
+	 */
+	render() {
+
+		const renderer = this.renderer;
+
+		this._update();
+
+		if ( this._context.onBeforeRenderPipeline !== null ) this._context.onBeforeRenderPipeline();
+
+		const toneMapping = renderer.toneMapping;
+		const outputColorSpace = renderer.outputColorSpace;
+
+		renderer.toneMapping = NoToneMapping;
+		renderer.outputColorSpace = ColorManagement.workingColorSpace;
+
+		//
+
+		const currentXR = renderer.xr.enabled;
+		renderer.xr.enabled = false;
+
+		this._quadMesh.render( renderer );
+
+		renderer.xr.enabled = currentXR;
+
+		//
+
+		renderer.toneMapping = toneMapping;
+		renderer.outputColorSpace = outputColorSpace;
+
+		if ( this._context.onAfterRenderPipeline !== null ) this._context.onAfterRenderPipeline();
+
+	}
+
+	/**
+	 * Returns the current context of the render pipeline stack.
+	 *
+	 * @readonly
+	 * @type {?Object}
+	 */
+	get context() {
+
+		return this._context;
+
+	}
+
+	/**
+	 * Frees internal resources.
+	 */
+	dispose() {
+
+		this._quadMesh.material.dispose();
+
+	}
+
+	/**
+	 * Updates the state of the module.
+	 *
+	 * @private
+	 */
+	_update() {
+
+		if ( this.needsUpdate === true ) {
+
+			const renderer = this.renderer;
+
+			const toneMapping = renderer.toneMapping;
+			const outputColorSpace = renderer.outputColorSpace;
+
+			const context = {
+				renderPipeline: this,
+				onBeforeRenderPipeline: null,
+				onAfterRenderPipeline: null
+			};
+
+			let outputNode = this.outputNode;
+
+			if ( this.outputColorTransform === true ) {
+
+				outputNode = outputNode.context( context );
+
+				outputNode = renderOutput( outputNode, toneMapping, outputColorSpace );
+
+			} else {
+
+				context.toneMapping = toneMapping;
+				context.outputColorSpace = outputColorSpace;
+
+				outputNode = outputNode.context( context );
+
+			}
+
+			this._context = context;
+
+			this._quadMesh.material.fragmentNode = outputNode;
+			this._quadMesh.material.needsUpdate = true;
+
+			this.needsUpdate = false;
+
+		}
+
+	}
+
+	/**
+	 * When `RenderPipeline` is used to apply rendering pipeline and post processing effects,
+	 * the application must use this version of `renderAsync()` inside
+	 * its animation loop (not the one from the renderer).
+	 *
+	 * @async
+	 * @deprecated
+	 * @return {Promise} A Promise that resolves when the render has been finished.
+	 */
+	async renderAsync() {
+
+		warnOnce( 'RenderPipeline: "renderAsync()" has been deprecated. Use "render()" and "await renderer.init();" when creating the renderer.' ); // @deprecated r181
+
+		await this.renderer.init();
+
+		this.render();
+
+	}
+
+}
+
+export default RenderPipeline;