code · pull · Aug 7, 2026 · Aug 7, 2026
diff --git a/examples/files.json b/examples/files.json
@@ -460,6 +460,7 @@
 		"webgpu_postprocessing_traa",
 		"webgpu_postprocessing_transition",
 		"webgpu_postprocessing",
+		"webgpu_postprocessing_direct",
 		"webgpu_procedural_texture",
 		"webgpu_reflection",
 		"webgpu_reflection_blurred",

diff --git a/examples/screenshots/webgpu_postprocessing_direct.jpg b/examples/screenshots/webgpu_postprocessing_direct.jpg
diff --git a/examples/screenshots/webgpu_xr_native_layers.jpg b/examples/screenshots/webgpu_xr_native_layers.jpg
diff --git a/examples/screenshots/webgpu_xr_rollercoaster.jpg b/examples/screenshots/webgpu_xr_rollercoaster.jpg
diff --git a/examples/webgpu_postprocessing_direct.html b/examples/webgpu_postprocessing_direct.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - direct post-processing</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<meta property="og:title" content="three.js webgpu - direct post-processing">
+		<meta property="og:type" content="website">
+		<meta property="og:url" content="https://threejs.org/examples/webgpu_postprocessing_direct.html">
+		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgpu_postprocessing_direct.jpg">
+		<link type="text/css" rel="stylesheet" href="example.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
+
+			<div class="title-wrapper">
+				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Direct Post-Processing</span>
+			</div>
+
+			<small>Inline post-processing.</small>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.webgpu.js",
+					"three/webgpu": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.tsl.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three/webgpu';
+			import { output, saturation, uniform, vec4 } from 'three/tsl';
+
+			import { Inspector } from 'three/addons/inspector/Inspector.js';
+
+			let camera, scene, renderer, renderPipeline;
+			let object;
+
+			init();
+
+			function init() {
+
+				renderer = new THREE.WebGPURenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.NeutralToneMapping;
+				renderer.inspector = new Inspector();
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 400;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
+
+				object = new THREE.Object3D();
+				scene.add( object );
+
+				const geometry = new THREE.SphereGeometry( 1, 4, 4 );
+
+				for ( let i = 0; i < 100; i ++ ) {
+
+					const material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff, flatShading: true } );
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					mesh.position.multiplyScalar( Math.random() * 400 );
+					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+					mesh.scale.setScalar( Math.random() * 50 );
+					object.add( mesh );
+
+				}
+
+				scene.add( new THREE.AmbientLight( 0xcccccc ) );
+
+				const light = new THREE.DirectionalLight( 0xffffff, 3 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+				// direct post-processing
+
+				const saturationFactor = uniform( 0 );
+
+				renderPipeline = new THREE.DirectRenderPipeline( renderer );
+				renderPipeline.outputNode = vec4( saturation( output.rgb, saturationFactor ), output.a );
+
+				// GUI
+
+				const gui = renderer.inspector.createParameters( 'Settings' );
+				gui.add( saturationFactor, 'value', 0, 1, 0.01 ).name( 'Saturation' );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				renderPipeline.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/examples/webgpu_xr_cubes.html b/examples/webgpu_xr_cubes.html
@@ -43,7 +43,7 @@
 			const controllerModelFactory = new XRControllerModelFactory();
 
 			let container;
-			let camera, scene, raycaster, renderer;
+			let camera, scene, raycaster, renderer, renderPipeline;
 
 			let room;
 
@@ -152,6 +152,7 @@
 				}
 
 				renderer = newRenderer;
+				renderPipeline = new THREE.DirectRenderPipeline( renderer );
 				setupControllers();
 
 			}
@@ -317,7 +318,7 @@
 
 				}
 
-				renderer.render( scene, camera );
+				renderPipeline.render( scene, camera );
 
 			}
 

diff --git a/examples/webgpu_xr_native_layers.html b/examples/webgpu_xr_native_layers.html
@@ -46,7 +46,7 @@
 			import { HTMLMesh } from 'three/addons/interactive/HTMLMesh.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			let camera, scene, renderer;
+			let camera, scene, renderer, renderPipeline;
 			let controller1, controller2;
 			let controllerGrip1, controllerGrip2;
 
@@ -191,6 +191,7 @@
 				document.body.appendChild( renderer.domElement );
 				renderer.setAnimationLoop( render );
 				renderer.xr.enabled = true;
+				renderPipeline = new THREE.DirectRenderPipeline( renderer );
 
 				//
 
@@ -633,8 +634,6 @@
 
 				timer.update();
 
-				renderer.xr.renderLayers( );
-
 				handleController( controller1 );
 				handleController( controller2 );
 
@@ -712,7 +711,7 @@
 
 				}
 
-				renderer.render( scene, camera );
+				renderPipeline.render( scene, camera );
 
 			}
 

diff --git a/examples/webgpu_xr_rollercoaster.html b/examples/webgpu_xr_rollercoaster.html
@@ -36,7 +36,7 @@
 			import { setupWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js';
 
 			let mesh, material, geometry;
-			let renderer;
+			let renderer, renderPipeline;
 
 			const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: false };
 
@@ -79,6 +79,7 @@
 				}
 
 				renderer = newRenderer;
+				renderPipeline = new THREE.DirectRenderPipeline( renderer );
 
 			}
 
@@ -298,7 +299,7 @@
 
 				//
 
-				renderer.render( scene, camera );
+				renderPipeline.render( scene, camera );
 
 				prevTime = time;
 

diff --git a/src/Three.WebGPU.Nodes.js b/src/Three.WebGPU.Nodes.js
@@ -9,6 +9,7 @@ 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 DirectRenderPipeline } from './renderers/common/DirectRenderPipeline.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';
 export { default as ReadbackBuffer } from './renderers/common/ReadbackBuffer.js';
 import * as RendererUtils from './renderers/common/RendererUtils.js';

diff --git a/src/Three.WebGPU.js b/src/Three.WebGPU.js
@@ -12,6 +12,7 @@ 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 DirectRenderPipeline } from './renderers/common/DirectRenderPipeline.js';
 export { default as PostProcessing } from './renderers/common/PostProcessing.js';
 export { default as ReadbackBuffer } from './renderers/common/ReadbackBuffer.js';
 import * as RendererUtils from './renderers/common/RendererUtils.js';