diff --git a/examples/files.json b/examples/files.json
index c984fe0a55f4a3..85dc5dc3d49bd8 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -437,6 +437,7 @@
 		"webgpu_postprocessing_sobel",
 		"webgpu_postprocessing_ssaa",
 		"webgpu_postprocessing_ssgi",
+		"webgpu_postprocessing_ssgi_ballpool",
 		"webgpu_postprocessing_ssr",
 		"webgpu_postprocessing_sss",
 		"webgpu_postprocessing_traa",
diff --git a/examples/screenshots/webgpu_postprocessing_ssgi_ballpool.jpg b/examples/screenshots/webgpu_postprocessing_ssgi_ballpool.jpg
new file mode 100644
index 00000000000000..eaf59410eef349
Binary files /dev/null and b/examples/screenshots/webgpu_postprocessing_ssgi_ballpool.jpg differ
diff --git a/examples/tags.json b/examples/tags.json
index edee62010f7d63..9fa5bb67e48289 100644
--- a/examples/tags.json
+++ b/examples/tags.json
@@ -161,6 +161,7 @@
 	"webgpu_postprocessing_sobel": [ "filter", "edge detection" ],
 	"webgpu_postprocessing_ssaa": [ "msaa", "multisampled" ],
 	"webgpu_postprocessing_ssgi": [ "global illumination", "indirect diffuse" ],
+	"webgpu_postprocessing_ssgi_ballpool": [ "community", "physics" ],
 	"webgpu_postprocessing_sss": [ "shadow" ],
 	"webgpu_refraction": [ "water" ],
 	"webgpu_rtt": [ "renderTarget", "texture" ],
diff --git a/examples/webgpu_postprocessing_ssgi_ballpool.html b/examples/webgpu_postprocessing_ssgi_ballpool.html
new file mode 100644
index 00000000000000..9e2ca4b1a67375
--- /dev/null
+++ b/examples/webgpu_postprocessing_ssgi_ballpool.html
@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgpu - SSGI Ball Pool</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="example.css">
+		<style>
+			canvas {
+				touch-action: none;
+			}
+		</style>
+	</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>SSGI Ball Pool</span>
+			</div>
+
+			<small>Real-time indirect illumination with interactive physics ball pool.</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/",
+					"monomorph": "https://cdn.jsdelivr.net/npm/monomorph@2.3.1/build/monomorph.js",
+					"@perplexdotgg/bounce": "https://cdn.jsdelivr.net/npm/@perplexdotgg/bounce@1.8.0/build/bounce.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three/webgpu';
+			import { pass, mrt, output, normalView, diffuseColor, velocity, add, vec4, directionToColor, colorToDirection, sample } from 'three/tsl';
+			import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
+			import { traa } from 'three/addons/tsl/display/TRAANode.js';
+			import { World } from '@perplexdotgg/bounce';
+
+			const BALL_RADIUS = 0.4;
+			const FILL_RATIO = 0.4;
+			const PACKING = 0.6;
+			const BOX_HEIGHT = 6;
+			const BOX_DEPTH = 8;
+			const WALL_THICKNESS = 0.5;
+			const CAM_FOV = 45;
+			const EASE_SPEED = 8;
+
+			let camera, scene, renderer, renderPipeline;
+			let raycaster, pointer;
+			let mouseLight;
+
+			let world;
+			let ballCount = 0;
+			let bodies = [];
+			let ballsMesh = null;
+			let wallMeshes = [];
+			const boxSize = { w: 8, h: BOX_HEIGHT, d: BOX_DEPTH };
+
+			let mouseRayOrigin = new THREE.Vector3();
+			let mouseRayDir = new THREE.Vector3();
+			let mouseMoving = false;
+			let mouseStopTimer = 0;
+			let pointerDown = false;
+			const activePointers = new Set();
+			const mouseLightTarget = new THREE.Vector3( 0, BOX_HEIGHT / 2, BOX_DEPTH / 2 );
+			const mouseRayOriginTarget = new THREE.Vector3();
+			const mouseRayDirTarget = new THREE.Vector3();
+
+			init();
+
+			async function init() {
+
+				camera = new THREE.PerspectiveCamera( CAM_FOV, window.innerWidth / window.innerHeight, 0.1, 100 );
+
+				scene = new THREE.Scene();
+
+				renderer = new THREE.WebGPURenderer( { antialias: false } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 0.5;
+				renderer.shadowMap.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				renderPipeline = new THREE.RenderPipeline( renderer );
+
+				const scenePass = pass( scene, camera );
+				scenePass.setMRT( mrt( {
+					output: output,
+					diffuseColor: diffuseColor,
+					normal: directionToColor( normalView ),
+					velocity: velocity
+				} ) );
+
+				const scenePassColor = scenePass.getTextureNode( 'output' );
+				const scenePassDiffuse = scenePass.getTextureNode( 'diffuseColor' );
+				const scenePassDepth = scenePass.getTextureNode( 'depth' );
+				const scenePassNormal = scenePass.getTextureNode( 'normal' );
+				const scenePassVelocity = scenePass.getTextureNode( 'velocity' );
+
+				// bandwidth optimization
+
+				const diffuseTexture = scenePass.getTexture( 'diffuseColor' );
+				diffuseTexture.type = THREE.UnsignedByteType;
+
+				const normalTexture = scenePass.getTexture( 'normal' );
+				normalTexture.type = THREE.UnsignedByteType;
+
+				const sceneNormal = sample( ( uv ) => {
+
+					return colorToDirection( scenePassNormal.sample( uv ) );
+
+				} );
+
+				// gi
+
+				const giPass = ssgi( scenePassColor, scenePassDepth, sceneNormal, camera );
+				giPass.sliceCount.value = 2;
+				giPass.stepCount.value = 8;
+
+				// composite
+
+				const gi = giPass.rgb;
+				const ao = giPass.a;
+
+				const compositePass = vec4(
+					add( scenePassColor.rgb.mul( ao ), scenePassDiffuse.rgb.mul( gi ) ),
+					scenePassColor.a
+				);
+
+				// traa
+
+				const traaPass = traa( compositePass, scenePassDepth, scenePassVelocity, camera );
+				renderPipeline.outputNode = traaPass;
+
+				// light
+
+				mouseLight = new THREE.PointLight( 0xffffff, 80 );
+				mouseLight.position.set( 0, BOX_HEIGHT / 2, BOX_DEPTH / 2 );
+				mouseLight.castShadow = true;
+				mouseLight.shadow.mapSize.set( 1024, 1024 );
+				mouseLight.shadow.radius = 20;
+				scene.add( mouseLight );
+
+				//
+
+				raycaster = new THREE.Raycaster();
+				pointer = new THREE.Vector2();
+
+				rebuildScene();
+
+				//
+
+				renderer.domElement.addEventListener( 'pointerdown', onPointerDown );
+				renderer.domElement.addEventListener( 'pointermove', onPointerMove );
+				renderer.domElement.addEventListener( 'pointerup', onPointerUp );
+				renderer.domElement.addEventListener( 'pointercancel', onPointerUp );
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function getBoxWidth() {
+
+				const aspect = window.innerWidth / window.innerHeight;
+				const vFov = THREE.MathUtils.degToRad( CAM_FOV / 2 );
+				const dist = ( BOX_HEIGHT / 2 ) / Math.tan( vFov );
+				return Math.tan( vFov ) * aspect * dist * 2;
+
+			}
+
+			function getBallCount() {
+
+				const roomVolume = boxSize.w * boxSize.h * boxSize.d;
+				const ballVolume = ( 4 / 3 ) * Math.PI * Math.pow( BALL_RADIUS, 3 );
+				return Math.floor( roomVolume * FILL_RATIO * PACKING / ballVolume );
+
+			}
+
+			function rebuildScene() {
+
+				for ( const mesh of wallMeshes ) {
+
+					scene.remove( mesh );
+					mesh.geometry.dispose();
+
+				}
+
+				wallMeshes = [];
+
+				if ( ballsMesh ) {
+
+					scene.remove( ballsMesh );
+					ballsMesh.dispose();
+					ballsMesh = null;
+
+				}
+
+				bodies = [];
+
+				boxSize.w = getBoxWidth();
+				ballCount = getBallCount();
+
+				world = new World( {
+					gravity: [ 0, - 9.81, 0 ],
+					solveVelocityIterations: 6,
+					solvePositionIterations: 2,
+					linearDamping: 0.1,
+					angularDamping: 0.1,
+					restitution: 0.4,
+					friction: 0.5
+				} );
+
+				fitCameraToBox();
+				createBox();
+				createBalls();
+
+			}
+
+			function createBox() {
+
+				const hw = boxSize.w / 2;
+				const hh = boxSize.h / 2;
+				const hd = boxSize.d / 2;
+				const t = WALL_THICKNESS;
+
+				const whiteMaterial = new THREE.MeshPhysicalMaterial( {
+					color: 0xeeeeee,
+					roughness: 0.7,
+					metalness: 0.0
+				} );
+
+				const redMaterial = new THREE.MeshPhysicalMaterial( {
+					color: 0xff2222,
+					roughness: 0.7,
+					metalness: 0.0
+				} );
+
+				const greenMaterial = new THREE.MeshPhysicalMaterial( {
+					color: 0x22ff22,
+					roughness: 0.7,
+					metalness: 0.0
+				} );
+
+				const walls = [
+					{ size: [ boxSize.w, t, boxSize.d ], pos: [ 0, - t / 2, 0 ], mat: whiteMaterial },
+					{ size: [ boxSize.w, t, boxSize.d ], pos: [ 0, boxSize.h + t / 2, 0 ], mat: whiteMaterial },
+					{ size: [ boxSize.w, boxSize.h, t ], pos: [ 0, hh, - hd - t / 2 ], mat: whiteMaterial },
+					{ size: [ boxSize.w, boxSize.h, t ], pos: [ 0, hh, hd + t / 2 ], noMesh: true },
+					{ size: [ t, boxSize.h, boxSize.d ], pos: [ - hw - t / 2, hh, 0 ], mat: redMaterial },
+					{ size: [ t, boxSize.h, boxSize.d ], pos: [ hw + t / 2, hh, 0 ], mat: greenMaterial }
+				];
+
+				for ( const w of walls ) {
+
+					const shape = world.createBox( { width: w.size[ 0 ], height: w.size[ 1 ], depth: w.size[ 2 ] } );
+					world.createStaticBody( { shape, position: w.pos } );
+
+					if ( ! w.noMesh ) {
+
+						const geo = new THREE.BoxGeometry( w.size[ 0 ], w.size[ 1 ], w.size[ 2 ] );
+						const mesh = new THREE.Mesh( geo, w.mat );
+						mesh.position.set( ...w.pos );
+						mesh.receiveShadow = true;
+						scene.add( mesh );
+						wallMeshes.push( mesh );
+
+					}
+
+				}
+
+			}
+
+			function createBalls() {
+
+				const sphereGeo = new THREE.SphereGeometry( BALL_RADIUS, 32, 16 );
+				const sphereShape = world.createSphere( { radius: BALL_RADIUS } );
+
+				const material = new THREE.MeshPhysicalMaterial( {
+					roughness: 0.3,
+					metalness: 0.1
+				} );
+
+				ballsMesh = new THREE.InstancedMesh( sphereGeo, material, ballCount );
+				ballsMesh.castShadow = true;
+				ballsMesh.receiveShadow = true;
+				scene.add( ballsMesh );
+
+				const colors = [
+					0xff4444, 0x44ff44, 0x4488ff, 0xffaa00, 0xff44ff,
+					0x44ffff, 0xffff44, 0xff8844, 0x8844ff, 0x44ff88
+				];
+
+				const color = new THREE.Color();
+				const hw = boxSize.w / 2 - BALL_RADIUS - 0.1;
+				const hd = boxSize.d / 2 - BALL_RADIUS - 0.1;
+
+				for ( let i = 0; i < ballCount; i ++ ) {
+
+					color.set( colors[ i % colors.length ] );
+					ballsMesh.setColorAt( i, color );
+
+					const x = ( Math.random() - 0.5 ) * 2 * hw;
+					const y = BALL_RADIUS + Math.random() * ( boxSize.h - BALL_RADIUS * 2 );
+					const z = ( Math.random() - 0.5 ) * 2 * hd;
+
+					const body = world.createDynamicBody( {
+						shape: sphereShape,
+						position: [ x, y, z ],
+						mass: 1,
+						restitution: 0.5,
+						friction: 0.4
+					} );
+
+					bodies.push( body );
+
+				}
+
+			}
+
+			function onPointerDown( event ) {
+
+				activePointers.add( event.pointerId );
+
+				if ( event.pointerType === 'touch' ) {
+
+					pointerDown = activePointers.size >= 2;
+
+				} else {
+
+					pointerDown = true;
+
+				}
+
+			}
+
+			function onPointerUp( event ) {
+
+				activePointers.delete( event.pointerId );
+
+				if ( event.pointerType === 'touch' ) {
+
+					pointerDown = activePointers.size >= 2;
+
+				} else {
+
+					pointerDown = false;
+
+				}
+
+			}
+
+			function onPointerMove( event ) {
+
+				pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
+				pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
+
+				raycaster.setFromCamera( pointer, camera );
+
+				mouseRayOriginTarget.copy( raycaster.ray.origin );
+				mouseRayDirTarget.copy( raycaster.ray.direction );
+				mouseMoving = true;
+				clearTimeout( mouseStopTimer );
+				mouseStopTimer = setTimeout( () => mouseMoving = false, 50 );
+
+				const frontPlane = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), - boxSize.d / 2 );
+				const hit = new THREE.Vector3();
+				if ( raycaster.ray.intersectPlane( frontPlane, hit ) ) {
+
+					mouseLightTarget.copy( hit );
+
+				}
+
+			}
+
+			function respawnBalls() {
+
+				const hw = boxSize.w / 2 - BALL_RADIUS - 0.1;
+				const hd = boxSize.d / 2 - BALL_RADIUS - 0.1;
+				const count = 5;
+
+				for ( let i = 0; i < count; i ++ ) {
+
+					const body = bodies[ Math.floor( Math.random() * bodies.length ) ];
+
+					body.position.set( [
+						( Math.random() - 0.5 ) * 2 * hw,
+						boxSize.h - BALL_RADIUS - Math.random() * 1,
+						( Math.random() - 0.5 ) * 2 * hd
+					] );
+					body.linearVelocity.set( [ 0, 0, 0 ] );
+					body.angularVelocity.set( [ 0, 0, 0 ] );
+					body.commitChanges();
+
+				}
+
+			}
+
+			function fitCameraToBox() {
+
+				const vFov = THREE.MathUtils.degToRad( CAM_FOV / 2 );
+				const dist = ( boxSize.h / 2 ) / Math.tan( vFov );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.position.set( 0, boxSize.h / 2, dist + boxSize.d / 2 );
+				camera.lookAt( 0, boxSize.h / 2, 0 );
+				camera.updateProjectionMatrix();
+
+			}
+
+			function onWindowResize() {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				rebuildScene();
+
+			}
+
+			const timer = new THREE.Timer();
+			const _dummy = new THREE.Object3D();
+
+			function animate() {
+
+				timer.update();
+				const dt = Math.min( timer.getDelta(), 1 / 30 );
+
+				const easeFactor = 1 - Math.exp( - EASE_SPEED * dt );
+				mouseRayOrigin.lerp( mouseRayOriginTarget, easeFactor );
+				mouseRayDir.lerp( mouseRayDirTarget, easeFactor );
+				mouseLight.position.lerp( mouseLightTarget, easeFactor );
+
+				if ( pointerDown ) {
+
+					respawnBalls();
+
+				}
+
+				if ( mouseMoving ) {
+
+					const pushRadius = 1.5;
+					const pushStrength = 15;
+					const _closest = new THREE.Vector3();
+					const _ballPos = new THREE.Vector3();
+					const _pushDir = new THREE.Vector3();
+
+					for ( const body of bodies ) {
+
+						const bp = body.position;
+						_ballPos.set( bp.x, bp.y, bp.z );
+
+						const ray = new THREE.Ray( mouseRayOrigin, mouseRayDir );
+						ray.closestPointToPoint( _ballPos, _closest );
+
+						const dist = _closest.distanceTo( _ballPos );
+
+						if ( dist < pushRadius ) {
+
+							_pushDir.subVectors( _ballPos, _closest );
+							if ( _pushDir.lengthSq() < 0.001 ) _pushDir.set( 0, 1, 0 );
+							_pushDir.normalize();
+
+							const strength = pushStrength * ( 1 - dist / pushRadius );
+							body.applyLinearImpulse( {
+								x: _pushDir.x * strength,
+								y: _pushDir.y * strength,
+								z: _pushDir.z * strength
+							} );
+
+						}
+
+					}
+
+				}
+
+				if ( world ) {
+
+					world.advanceTime( 1 / 60, dt );
+
+				}
+
+				for ( let i = 0; i < bodies.length; i ++ ) {
+
+					const body = bodies[ i ];
+					const p = body.position;
+					const q = body.orientation;
+
+					_dummy.position.set( p.x, p.y, p.z );
+					_dummy.quaternion.set( q.x, q.y, q.z, q.w );
+					_dummy.updateMatrix();
+
+					ballsMesh.setMatrixAt( i, _dummy.matrix );
+
+				}
+
+				ballsMesh.instanceMatrix.needsUpdate = true;
+
+				renderPipeline.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 350df290e42816..442cf5855de149 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3263,9 +3263,9 @@
       }
     },
     "node_modules/serialize-javascript": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.4.tgz",
-      "integrity": "sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz",
+      "integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js
index 49ab0bf6a2dec1..6445cf1a66c1d4 100644
--- a/test/e2e/puppeteer.js
+++ b/test/e2e/puppeteer.js
@@ -31,6 +31,7 @@ const exceptionList = [
 	'webgpu_postprocessing_ao',
 	'webgpu_postprocessing_dof',
 	'webgpu_postprocessing_ssgi',
+	'webgpu_postprocessing_ssgi_ballpool',
 	'webgpu_postprocessing_sss',
 	'webgpu_postprocessing_traa',
 	'webgpu_volume_lighting_traa',
