From 7aab2a34342ce27ddb6400e4720b6eff4b51e94c Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Sun, 6 Jul 2025 16:54:21 -0700
Subject: [PATCH 1/6] init branch

---
 examples/webgpu_compute_reduce.html | 741 ++++++++++++++++++++++++++++
 1 file changed, 741 insertions(+)
 create mode 100644 examples/webgpu_compute_reduce.html
diff --git a/examples/webgpu_compute_reduce.html b/examples/webgpu_compute_reduce.html
new file mode 100644
index 00000000000000..c691777996f2d9
--- /dev/null
+++ b/examples/webgpu_compute_reduce.html
@@ -0,0 +1,741 @@
+<html lang="en">
+	<head>
+		<title>three.js webgpu - compute reduction</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="main.css">
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
+			<br /> This example demonstrates the performance of various simple parallel reduction kernels.
+			<br /> Reference implementations are translated from the CUDA code present in the following books/repos:
+			<br /> <a href="https://www.cambridge.org/core/books/programming-in-parallel-with-cuda/C43652A69033C25AD6933368CDBE084C"><i>Programming in Parallel with CUDA</i></a> by <a href="https://people.bss.phy.cam.ac.uk/~rea1/">Richard Ansorge</a>
+			<br />
+			<div id="left_side_display" style="
+				position: absolute;
+				top: 150px;
+				left: 0;
+				padding: 10px;
+				background: rgba( 0, 0, 0, 0.5 );
+				color: #fff;
+				font-family: monospace;
+				font-size: 12px;
+				line-height: 1.5;
+				pointer-events: none;
+				text-align: left;
+			"></div>
+			<div id="right_side_display" style="
+			position: absolute;
+			top: 150px;
+			right: 0;
+			padding: 10px;
+			background: rgba( 0, 0, 0, 0.5 );
+			color: #fff;
+			font-family: monospace;
+			font-size: 12px;
+			line-height: 1.5;
+			pointer-events: none;
+			text-align: left;
+		"></div>
+		</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';
+			import { storage, Loop, If, vec3, uniform, uv, uint, float, Fn, vec2, invocationLocalIndex, uvec2, floor, instanceIndex, workgroupId, workgroupBarrier, workgroupArray } from 'three/tsl';
+
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			const timestamps = {
+				left_side_display: document.getElementById( 'left_side_display' ),
+				right_side_display: document.getElementById( 'right_side_display' )
+			};
+
+			// Total number of elements and the dimensions of the display grid.
+			const size = 262144;
+			const gridDim = Math.sqrt( size );
+			let maxWorkgroupSize = 64;
+
+			// Algorithm speed increase as you iterate through algorithms array
+			const algorithms = [
+				'CPU (Serial)',
+				'CPU (Reduce)',
+				'Reduce 0 (N/2)',
+				'Reduce 1 (Naive Accumulate)',
+				'Reduce 2 (Workgroup Reduction)',
+				'Reduce 2x (NumWorkgroups % 2 != 0)'
+			];
+			const displayModes = [ 'Entire Grid', 'Workgroup 0' ];
+
+			const unifiedEffectController = {
+				// Number of elements in the grid
+				gridElementWidth: uniform( gridDim ),
+				gridElementHeight: uniform( gridDim ),
+				// Number of elements in the grid being displayed
+				gridDisplayWidth: uniform( gridDim ),
+				gridDisplayHeight: uniform( gridDim ),
+				'Display Mode': 'Workgroup 0'
+			};
+
+			const leftEffectController = {
+				algo: 'Reduce 0 (N/2)',
+				highlight: uniform( 0 ),
+				state: 'Run Algo',
+				numThreadsDispatched: uniform( size / 2 ),
+			};
+
+			const rightEffectController = {
+				algo: 'Reduce 2 (Workgroup Reduction)',
+				highlight: uniform( 0 ),
+				state: 'Run Algo',
+				numThreadsDispatched: uniform( size / 2 )
+			};
+			
+			// https://medium.com/@rimikadhara/7-step-optimization-of-parallel-reduction-with-cuda-33a3b2feafd8
+			// https://superjomn.github.io/posts/reduce-cuda/
+
+			const gui = new GUI();
+
+			let lastValidLeftValue = leftEffectController.algo;
+			let lastValidRightValue = rightEffectController.algo;
+			let isSyncingAlgos = false;
+
+			const leftSideAlgoController = gui.add( leftEffectController, 'algo', algorithms ).onChange( () => {
+
+				if ( isSyncingAlgos ) return;
+
+				if ( leftEffectController.algo === rightEffectController.algo ) {
+
+					isSyncingAlgos = true;
+					leftSideAlgoController.setValue( lastValidLeftValue );
+					isSyncingAlgos = false;
+
+				} else {
+
+					lastValidLeftValue = leftEffectController.algo;
+
+				}
+
+			} );
+
+			const rightSideAlgoController = gui.add( rightEffectController, 'algo', algorithms ).onChange( () => {
+
+				if ( isSyncingAlgos ) return;
+
+				if ( rightEffectController.algo === leftEffectController.algo ) {
+
+					isSyncingAlgos = true;
+					rightSideAlgoController.setValue( lastValidRightValue );
+
+				} else {
+
+					lastValidRightValue = rightEffectController.algo;
+
+				}
+			
+			} );
+
+			gui.add( unifiedEffectController, 'Display Mode', displayModes ).onChange( () => {
+
+				console.log( unifiedEffectController[ 'Display Mode' ] );
+
+				switch ( unifiedEffectController[ 'Display Mode' ] ) {
+
+					case 'Entire Grid': {
+
+						unifiedEffectController.gridDisplayWidth.value = gridDim;
+						unifiedEffectController.gridDisplayHeight.value = gridDim;
+
+						break;
+
+					}
+
+					case 'Workgroup 0': {
+
+						console.log( maxWorkgroupSize );
+
+						unifiedEffectController.gridDisplayWidth.value = Math.sqrt( maxWorkgroupSize );
+						unifiedEffectController.gridDisplayHeight.value = Math.sqrt( maxWorkgroupSize );
+
+						break;
+
+			
+					}
+
+				}
+			
+			} );
+
+			const stateLeftController = gui.add( leftEffectController, 'state' ).name( 'Left Display State' );
+			stateLeftController.domElement.style.pointerEvents = 'none';
+			const stateRightController = gui.add( rightEffectController, 'state' ).name( 'Right Display State' );
+			stateRightController.domElement.style.pointerEvents = 'none';
+
+			if ( WebGPU.isAvailable() === false ) {
+
+				document.body.appendChild( WebGPU.getErrorMessage() );
+
+				throw new Error( 'No WebGPU support' );
+
+			}
+
+			// Pros: absurdly simple
+			// Cons: Unperformant, especially at higher element counts
+			const serialAlgorithm = ( arr ) => {
+
+				const t0 = performance.now();
+			
+				for ( let i = 0; i < size - 1; i ++ ) {
+
+					arr[ i + 1 ] += i;
+
+				}
+
+				const t1 = performance.now();
+
+				return ( t1 - t0 ).toFixed( 2 );
+
+			};
+
+			const serialAlgorithmNativeReduce = ( arr ) => {
+
+				const t0 = performance.now();
+			
+				const sum = arr.reduce( ( acc, val ) => acc + val, 0 );
+
+				const t1 = performance.now();
+
+				return ( t1 - t0 ).toFixed( 2 );
+
+			
+			};
+
+			// Allow Workgroup Array Swaps
+			init();
+
+			init( false );
+
+			// When forceGlobalSwap is true, force all valid local swaps to be global swaps.
+			async function init( leftSideDisplay = true ) {
+
+				const effectController = leftSideDisplay ? leftEffectController : rightEffectController;
+
+				const aspect = ( window.innerWidth / 2 ) / window.innerHeight;
+				const camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 2 );
+				camera.position.z = 1;
+
+				const scene = new THREE.Scene();
+
+				const array = new Uint32Array( Array.from( { length: size }, ( _, i ) => {
+
+					return i + 1;
+
+				} ) );
+
+				const resultArray = new Uint32Array( size );
+
+				//const infoArray = new Uint32Array( [ size / 2 ] );
+
+				// Ping-Pong Buffers
+				const currentBuffer = new THREE.StorageInstancedBufferAttribute( array, 1 );
+				const resultBuffer = new THREE.StorageInstancedBufferAttribute( resultArray, 1 );
+				const currentStorage = storage( currentBuffer, 'uint', size ).setPBO( true ).label( 'Current' );
+				const resultStorage = storage( resultBuffer, 'uint', size ).setPBO( true ).label( 'Result' );
+
+				const computeResetBufferFn = Fn( () => {
+
+					currentStorage.element( instanceIndex ).assign( 1 );
+			
+				} );
+
+				// Re-initialize compute buffer
+				const computeResetBuffer = computeResetBufferFn().compute( size );
+
+				const renderer = new THREE.WebGPURenderer( { antialias: false, trackTimestamp: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth / 2, window.innerHeight );
+
+				await renderer.computeAsync( computeResetBuffer );
+
+				if ( renderer.backend.device !== null ) {
+
+					maxWorkgroupSize = renderer.backend.device.limits.maxComputeWorkgroupSizeX;
+
+				}
+
+				const computeReduce0Fn = Fn( () => {
+
+					const { numThreadsDispatched } = effectController;
+
+					currentStorage.element( instanceIndex ).addAssign( currentStorage.element( instanceIndex.add( numThreadsDispatched ) ) );
+
+				} )();
+
+				// Cache reduce0 calls
+
+				const reduce0Calls = [];
+
+				for ( let i = size / 2; i >= 1; i /= 2 ) {
+
+					const reduce0 = computeReduce0Fn.compute( i, [ maxWorkgroupSize ] );
+					reduce0Calls.push( reduce0 );
+
+				}
+
+				// Thanks to Sam0oneau of Graphics Programming Discord for the explanation.
+				// (Graphics Programming Discord Message Link): https://discord.com/channels/318590007881236480/374061825454768129/1391248956171882597
+
+				const createReduce1Fn = ( dispatch, numElements ) => {
+
+					const fnDef = Fn( () => {
+
+						//const dispatchSize = uint( dispatch ).toVar( 'dispatchSize' );
+						const tSum = uint( 0 ).toVar();
+						const k = instanceIndex.toVar( 'k' );
+
+						Loop( k.lessThan( uint( numElements ) ), ( ) => {
+
+							tSum.addAssign( currentStorage.element( k ) );
+							k.addAssign( uint( dispatch ) );
+
+						} );
+
+						currentStorage.element( instanceIndex ).assign( tSum );
+
+
+					} )();
+
+					return fnDef;
+			
+				};
+
+				// Reduce 1 Explanation:
+				// Example (Assume Workgroup Size 256, numElements: 262144)
+				// 	Initial Buffer Values: | 1, 1, 1, 1, ... |
+				// Kernel 1:
+				//	Executes 256 threads by 256 workgroups. Each thread loops 4 times and accesses elements
+				// 	at the indices below.
+				//         	Thread 1                        Thread 2                         Thread 3
+				// 	| 0, 65536, ..., n * 65536 | 1, 65537, .... (n * 65536) + 1 | 1, 65538, .... (n * 65536) + 2 | etc
+				//	Buffer Values: | 4, 4, 4, 4, ...|
+				// Kernel 2:
+				//	Executes 256 threads by one workgroup. Each thread loops 1024 times
+				//         	Thread 1                        Thread 2                         Thread 3
+				// 	| 0, 256, ...., n * 256    | 1, 257, ... (n * 256) + 1      | 2, 258, ... (n * 256) + 3      | etc
+				// 	Buffer Values: | 1024, 1024, 1024, 1024, ... |
+				// Kernel 3:
+				//	Executes 1 thread by one workgroup. Single thread loops 256 times
+				//         	Thread 1
+				// 	| 0, 1, 2, 3, 4, 5, 6 ... etc|
+				//	Buffer Values: [262144, 1024, 1024]
+
+				const reduce1Calls = [
+					// Accumulation
+					createReduce1Fn( maxWorkgroupSize * maxWorkgroupSize, size ).compute( maxWorkgroupSize * maxWorkgroupSize, [ maxWorkgroupSize ] ),
+					// 1 Block accumulation
+					createReduce1Fn( maxWorkgroupSize, maxWorkgroupSize * maxWorkgroupSize ).compute( maxWorkgroupSize, [ maxWorkgroupSize ] ),
+					// Final result
+					createReduce1Fn( 1, maxWorkgroupSize ).compute( 1, [ 1 ] ),
+				];
+
+				const createReduce2Fn = ( workgroupSize, dispatch, numElements ) => {
+
+					const fnDef = Fn( () => {
+
+						const tSum = workgroupArray( 'uint', workgroupSize );
+
+						const k = instanceIndex.toVar( 'k' );
+						tSum.element( invocationLocalIndex ).assign( uint( 0 ) );
+
+						// Each workgroup populates its workgroup array with accumulated values from across dispatch blocks
+						Loop( k.lessThan( uint( numElements ) ), () => {
+
+							tSum.element( invocationLocalIndex ).addAssign( currentStorage.element( k ) );
+
+							k.addAssign( uint( dispatch ) );
+
+						} );
+
+						// Ensure that each thread within a workgroup has finished populating it's share of the
+						// workgroup array
+						workgroupBarrier();
+
+						// Reset the loop condition
+						k.assign( uint( workgroupSize / 2 ) );
+
+						Loop( k.greaterThan( 0 ), () => {
+
+							// Reduce power of 2 times
+							// Therefore ensure we only access elements under current power of 2
+							If( invocationLocalIndex.lessThan( k ), () => {
+
+								// Add the element 2^n up to current element (similar to reduce0)
+								// First iteration:
+								//	128 -> 255 added to 0 - 127
+								//  Ensure threads in workgroup completed
+								// Second iteration:
+								// 	64 -> 127 added to 0 -> 63
+								//	Ensure threads completed, etc.
+								tSum.element( invocationLocalIndex ).addAssign( tSum.element( invocationLocalIndex.add( k ) ) );
+
+							} );
+							workgroupBarrier();
+							k.divAssign( 2 );
+
+						} );
+
+						// Each workgroup has completed its own individual reduction, which lies in
+						// element 0. Each workgroup now passed on its reduction value to currentStorage
+						// for the next pass
+						If( invocationLocalIndex.equal( uint( 0 ) ), () => {
+			
+							currentStorage.element( workgroupId.x ).assign( tSum.element( uint( 0 ) ) );
+			
+						} );
+			
+					} )();
+
+					return fnDef;
+			
+				};
+
+				const reduce2Calls = [
+					// Accumulate within workgroups
+					createReduce2Fn( maxWorkgroupSize, maxWorkgroupSize * maxWorkgroupSize, size ).compute( maxWorkgroupSize * maxWorkgroupSize, [ maxWorkgroupSize ] ),
+					// 1 Block accumulation
+					createReduce2Fn( maxWorkgroupSize, maxWorkgroupSize, maxWorkgroupSize ).compute( maxWorkgroupSize, [ maxWorkgroupSize ] ),
+				];
+
+				const pow2Ceil = ( x ) => {
+
+					If( x.equal( uint( 0 ) ), () => {
+
+						return uint( 1 );
+
+					} );
+
+					const val = x.sub( 1 ).toVar( 'val' );
+					val.assign( val.bitOr( val.shiftRight( 1 ) ) );
+					val.assign( val.bitOr( val.shiftRight( 2 ) ) );
+					val.assign( val.bitOr( val.shiftRight( 4 ) ) );
+					val.assign( val.bitOr( val.shiftRight( 8 ) ) );
+					val.assign( val.bitOr( val.shiftRight( 16 ) ) );
+					return val.add( 1 );
+
+				};
+
+				// For non power of 2 # of workgroups
+				const createReduce2xFn = ( workgroupSize, dispatch, numElements ) => {
+
+					const fnDef = Fn( () => {
+
+						const tSum = workgroupArray( 'uint', workgroupSize );
+
+						const k = instanceIndex.toVar( 'k' );
+						tSum.element( invocationLocalIndex ).assign( uint( 0 ) );
+
+						// Each workgroup populates its workgroup array with accumulated values from across dispatch blocks
+						Loop( k.lessThan( uint( numElements ) ), () => {
+
+							tSum.element( invocationLocalIndex ).addAssign( currentStorage.element( k ) );
+
+							k.addAssign( uint( dispatch ) );
+
+						} );
+
+						workgroupBarrier();
+
+						// Reset the loop condition (account for numWorkgroups % 2 != 0)
+						k.assign( pow2Ceil( uint( workgroupSize ) ).div( 2 ) );
+
+						Loop( k.greaterThan( 0 ), () => {
+
+							// Reduce power of 2 times
+							// Therefore ensure we only access elements under current power of 2
+							If( invocationLocalIndex.lessThan( k ).and( invocationLocalIndex.add( k ).lessThan( workgroupSize ) ), () => {
+
+								tSum.element( invocationLocalIndex ).addAssign( tSum.element( invocationLocalIndex.add( k ) ) );
+
+							} );
+							workgroupBarrier();
+							k.divAssign( 2 );
+
+						} );
+
+						If( invocationLocalIndex.equal( uint( 0 ) ), () => {
+			
+							currentStorage.element( workgroupId.x ).assign( tSum.element( uint( 0 ) ) );
+			
+						} );
+			
+					} )();
+
+					return fnDef;
+			
+				};
+
+				const reduce2xCalls = [
+
+					// Accumulate within workgroups
+					createReduce2xFn( maxWorkgroupSize, maxWorkgroupSize * maxWorkgroupSize, size ).compute( maxWorkgroupSize * maxWorkgroupSize, [ maxWorkgroupSize ] ),
+					// 1 Block accumulation
+					createReduce2xFn( maxWorkgroupSize, maxWorkgroupSize, maxWorkgroupSize ).compute( maxWorkgroupSize, [ maxWorkgroupSize ] ),
+			
+				];
+
+				const calls = {
+					'Reduce 0 (N/2)': reduce0Calls,
+					'Reduce 1 (Naive Accumulate)': reduce1Calls,
+					'Reduce 2 (Workgroup Reduction)': reduce2Calls,
+					'Reduce 2x (NumWorkgroups % 2 != 0)': reduce2xCalls
+				};
+
+				const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
+
+				const display = Fn( () => {
+
+					const { gridElementWidth, gridElementHeight, gridDisplayWidth, gridDisplayHeight } = unifiedEffectController;
+					const { highlight } = effectController;
+
+					const newUV = uv().mul( vec2( gridDisplayWidth, gridDisplayHeight ) );
+
+					const pixel = uvec2( uint( floor( newUV.x ) ), uint( floor( newUV.y ) ) );
+
+					const elementIndex = uint( gridDisplayWidth ).mul( pixel.y ).add( pixel.x );
+
+					const colorChanger = currentStorage.element( elementIndex );
+
+					const subtracter = float( colorChanger ).div( gridElementWidth.mul( gridElementHeight ) );
+
+					const color = vec3( subtracter.oneMinus() ).toVar();
+
+					// Validate that element 0 is equal to expected result of reduction
+					If( highlight.equal( 1 ), () => {
+
+						If( ( currentStorage.element( 0 ) ).equal( size ), () => {
+
+							color.assign( vec3( 0.0, subtracter.oneMinus(), 0.0 ) );
+
+						} ).Else( () => {
+
+							color.assign( vec3( subtracter.oneMinus(), 0.0, 0.0 ) );
+
+						} );
+
+					} );
+
+					return color;
+
+				} );
+
+				material.colorNode = display();
+				material.needsUpdate = true;
+
+				const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
+				scene.add( plane );
+
+				const animate = () => {
+
+					renderer.render( scene, camera );
+
+				};
+
+				renderer.setAnimationLoop( animate );
+
+				document.body.appendChild( renderer.domElement );
+				renderer.domElement.style.position = 'absolute';
+				renderer.domElement.style.top = '0';
+				renderer.domElement.style.left = '0';
+				renderer.domElement.style.width = '50%';
+				renderer.domElement.style.height = '100%';
+
+				if ( ! leftSideDisplay ) {
+
+					renderer.domElement.style.left = '50%';
+
+					scene.background = new THREE.Color( 0x212121 );
+
+				} else {
+
+					scene.background = new THREE.Color( 0x313131 );
+
+				}
+
+				renderer.info.autoReset = false;
+
+				const stepAnimation = async function () {
+
+					const currentAlgorithm = effectController.algo;
+					const state = effectController.state;
+					const stateController = leftSideDisplay ? stateLeftController : stateRightController;
+
+					if ( state === 'Reset' ) {
+
+						if ( currentAlgorithm.substring( 0, 3 ) === 'CPU' ) {
+
+							array.fill( 1 );
+			
+						} else {
+
+							renderer.compute( computeResetBuffer );
+
+						}
+
+						//renderer.compute( computeResetBuffer );
+						renderer.render( scene, camera );
+
+					} else if ( state === 'Run Algo' ) {
+
+						renderer.info.reset();
+
+						let cpuTime = 0;
+
+						switch ( currentAlgorithm ) {
+
+							case 'CPU (Serial)': {
+
+								cpuTime = serialAlgorithm( array );
+
+								break;
+
+							}
+
+							case 'CPU (Reduce)': {
+
+								cpuTime = serialAlgorithmNativeReduce( array );
+
+								break;
+
+							}
+			
+							case 'Reduce 0 (N/2)': {
+
+								let m = size / 2;
+
+								for ( let i = 0; i < reduce0Calls.length; i ++ ) {
+
+									effectController.numThreadsDispatched.value = m;
+
+									const reduce0 = reduce0Calls[ i ];
+									// Do a reduction step
+									renderer.compute( reduce0 );
+									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
+
+									m /= 2;
+
+								}
+
+
+								break;
+
+							}
+
+							default: {
+
+								const currentAlgoCalls = calls[ currentAlgorithm ];
+
+								//console.log( currentAlgoCalls.length );
+
+								for ( let i = 0; i < currentAlgoCalls.length; i ++ ) {
+
+									renderer.compute( currentAlgoCalls[ i ] );
+									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
+
+								}
+
+								break;
+
+							}
+
+						}
+
+						const reduceArray = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) );
+
+						let passInfoString = '';
+
+						if ( effectController.algo.substring( 0, 3 ) === 'CPU' ) {
+
+							passInfoString = `Ran in ${cpuTime}ms<br>`;
+
+						} else {
+
+							passInfoString = `${renderer.info.compute.frameCalls} pass in ${renderer.info.compute.timestamp.toFixed( 6 )}ms<br>`;
+
+						}
+
+
+						timestamps[ leftSideDisplay ? 'left_side_display' : 'right_side_display' ].innerHTML = `
+
+							Compute ${effectController.algo}: ${passInfoString}`;
+
+					}
+
+					renderer.render( scene, camera );
+					renderer.resolveTimestampsAsync( THREE.TimestampQuery.RENDER );
+
+					// Validate next state
+
+					if ( state === 'Run Algo' ) {
+
+						stateController.setValue( 'Validate' );
+
+						effectController.highlight.value = 1;
+
+					} else if ( state === 'Validate' ) {
+
+						stateController.setValue( 'Reset' );
+
+						effectController.highlight.value = 0;
+
+					} else if ( state === 'Reset' ) {
+
+						stateController.setValue( 'Run Algo' );
+
+					}
+
+					setTimeout( stepAnimation, 500 );
+
+				};
+
+			
+				stepAnimation();
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				function onWindowResize() {
+
+					renderer.setSize( window.innerWidth / 2, window.innerHeight );
+
+					const aspect = ( window.innerWidth / 2 ) / window.innerHeight;
+
+					const frustumHeight = camera.top - camera.bottom;
+
+					camera.left = - frustumHeight * aspect / 2;
+					camera.right = frustumHeight * aspect / 2;
+
+					camera.updateProjectionMatrix();
+
+					renderer.render( scene, camera );
+
+				}
+
+			}
+
+		</script>
+	</body>
+</html>
\ No newline at end of file

From e5792f2dc2e8283e133244cfdb3cab2cfef935b6 Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Sun, 6 Jul 2025 16:57:16 -0700
Subject: [PATCH 2/6] add example meta data

---
 examples/files.json                            |   1 +
 examples/screenshots/webgpu_compute_reduce.jpg | Bin 0 -> 11445 bytes
 examples/tags.json                             |   1 +
 3 files changed, 2 insertions(+)
 create mode 100644 examples/screenshots/webgpu_compute_reduce.jpg

diff --git a/examples/files.json b/examples/files.json
index 3a51bc11df9da8..c10a9cc96deb2d 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -313,6 +313,7 @@
 		"webgpu_compute_particles_rain",
 		"webgpu_compute_particles_snow",
 		"webgpu_compute_points",
+		"webgpu_compute_reduce",
 		"webgpu_compute_sort_bitonic",
 		"webgpu_compute_texture",
 		"webgpu_compute_texture_3d",
diff --git a/examples/screenshots/webgpu_compute_reduce.jpg b/examples/screenshots/webgpu_compute_reduce.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6664b13dd131dfefa222fe93d6342333386057e5
GIT binary patch
literal 11445
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
MJ^jI*D}g-v9YrSA%m4rY

literal 0
HcmV?d00001

diff --git a/examples/tags.json b/examples/tags.json
index 01c2dbbd681b00..b1b9ba0c5dafba 100644
--- a/examples/tags.json
+++ b/examples/tags.json
@@ -126,6 +126,7 @@
 	"webgpu_compute_particles_rain": [ "gpgpu" ],
 	"webgpu_compute_particles_snow_external": [ "gpgpu" ],
 	"webgpu_compute_points": [ "gpgpu" ],
+	"webgpu_compute_reduce": [ "gpgpu" ],
 	"webgpu_compute_sort_bitonic": [ "gpgpu" ],
 	"webgpu_compute_texture": [ "gpgpu" ],
 	"webgpu_compute_texture_pingpong": [ "gpgpu" ],

From 753bc01046310ff391e90489b872c0ea9a3f7525 Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 7 Jul 2025 19:24:31 -0700
Subject: [PATCH 3/6] remove logs, simplify comments, use more appropriate
 syntax (instancedArray instead of storage)

---
 examples/webgpu_compute_reduce.html | 97 ++++++++++++-----------------
 1 file changed, 40 insertions(+), 57 deletions(-)

diff --git a/examples/webgpu_compute_reduce.html b/examples/webgpu_compute_reduce.html
index c691777996f2d9..fb05e568153a54 100644
--- a/examples/webgpu_compute_reduce.html
+++ b/examples/webgpu_compute_reduce.html
@@ -55,7 +55,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { storage, Loop, If, vec3, uniform, uv, uint, float, Fn, vec2, invocationLocalIndex, uvec2, floor, instanceIndex, workgroupId, workgroupBarrier, workgroupArray } from 'three/tsl';
+			import { instancedArray, Loop, If, vec3, uniform, uv, uint, float, Fn, vec2, invocationLocalIndex, uvec2, floor, instanceIndex, workgroupId, workgroupBarrier, workgroupArray } from 'three/tsl';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
@@ -152,8 +152,6 @@
 
 			gui.add( unifiedEffectController, 'Display Mode', displayModes ).onChange( () => {
 
-				console.log( unifiedEffectController[ 'Display Mode' ] );
-
 				switch ( unifiedEffectController[ 'Display Mode' ] ) {
 
 					case 'Entire Grid': {
@@ -167,8 +165,6 @@
 
 					case 'Workgroup 0': {
 
-						console.log( maxWorkgroupSize );
-
 						unifiedEffectController.gridDisplayWidth.value = Math.sqrt( maxWorkgroupSize );
 						unifiedEffectController.gridDisplayHeight.value = Math.sqrt( maxWorkgroupSize );
 
@@ -194,8 +190,6 @@
 
 			}
 
-			// Pros: absurdly simple
-			// Cons: Unperformant, especially at higher element counts
 			const serialAlgorithm = ( arr ) => {
 
 				const t0 = performance.now();
@@ -216,7 +210,7 @@
 
 				const t0 = performance.now();
 			
-				const sum = arr.reduce( ( acc, val ) => acc + val, 0 );
+				arr.reduce( ( acc, val ) => acc + val, 0 );
 
 				const t1 = performance.now();
 
@@ -225,12 +219,10 @@
 			
 			};
 
-			// Allow Workgroup Array Swaps
 			init();
 
 			init( false );
 
-			// When forceGlobalSwap is true, force all valid local swaps to be global swaps.
 			async function init( leftSideDisplay = true ) {
 
 				const effectController = leftSideDisplay ? leftEffectController : rightEffectController;
@@ -247,15 +239,12 @@
 
 				} ) );
 
-				const resultArray = new Uint32Array( size );
 
-				//const infoArray = new Uint32Array( [ size / 2 ] );
+				const currentStorage = instancedArray( array, 'uint', size ).setPBO( true ).label( 'Current' );
+				// Result array for future two buffer/ping-pong buffer approach
+				// const resultStorage = instancedArray( new Uint32Array( size ), 'uint' ).setPBO( true ).label( 'Result' );
 
-				// Ping-Pong Buffers
-				const currentBuffer = new THREE.StorageInstancedBufferAttribute( array, 1 );
-				const resultBuffer = new THREE.StorageInstancedBufferAttribute( resultArray, 1 );
-				const currentStorage = storage( currentBuffer, 'uint', size ).setPBO( true ).label( 'Current' );
-				const resultStorage = storage( resultBuffer, 'uint', size ).setPBO( true ).label( 'Result' );
+			
 
 				const computeResetBufferFn = Fn( () => {
 
@@ -278,6 +267,8 @@
 
 				}
 
+				// Create and store dispatches of reduction of certain size. Map each set of dispatches to algorithm name.
+
 				const computeReduce0Fn = Fn( () => {
 
 					const { numThreadsDispatched } = effectController;
@@ -286,8 +277,6 @@
 
 				} )();
 
-				// Cache reduce0 calls
-
 				const reduce0Calls = [];
 
 				for ( let i = size / 2; i >= 1; i /= 2 ) {
@@ -324,25 +313,27 @@
 			
 				};
 
-				// Reduce 1 Explanation:
-				// Example (Assume Workgroup Size 256, numElements: 262144)
-				// 	Initial Buffer Values: | 1, 1, 1, 1, ... |
-				// Kernel 1:
-				//	Executes 256 threads by 256 workgroups. Each thread loops 4 times and accesses elements
-				// 	at the indices below.
-				//         	Thread 1                        Thread 2                         Thread 3
-				// 	| 0, 65536, ..., n * 65536 | 1, 65537, .... (n * 65536) + 1 | 1, 65538, .... (n * 65536) + 2 | etc
-				//	Buffer Values: | 4, 4, 4, 4, ...|
-				// Kernel 2:
-				//	Executes 256 threads by one workgroup. Each thread loops 1024 times
-				//         	Thread 1                        Thread 2                         Thread 3
-				// 	| 0, 256, ...., n * 256    | 1, 257, ... (n * 256) + 1      | 2, 258, ... (n * 256) + 3      | etc
-				// 	Buffer Values: | 1024, 1024, 1024, 1024, ... |
-				// Kernel 3:
-				//	Executes 1 thread by one workgroup. Single thread loops 256 times
-				//         	Thread 1
-				// 	| 0, 1, 2, 3, 4, 5, 6 ... etc|
-				//	Buffer Values: [262144, 1024, 1024]
+				/* Reduce 1 Example (Assume Workgroup Size 256, numElements: 262144) -> Initial currentBuffer State: | 1, 1, 1, 1, ... |
+				 *
+				 * KERNEL 1:
+				 * Executes 256 threads by 256 workgroups. Each thread loops 4 times and accesses elements
+				 * at the indices below.
+				 *          Thread 1                        Thread 2                         Thread 3
+				 * | 0, 65536, ..., n * 65536 | 1, 65537, .... (n * 65536) + 1 | 1, 65538, .... (n * 65536) + 2 | etc
+				 * Buffer Values: | 4, 4, 4, 4, ...|
+				 *
+				 * KERNEL 2:
+				 * Executes 256 threads by one workgroup. Each thread loops 1024 times
+				 *          Thread 1                     Thread 2                     Thread 3
+				 * | 0, 256, ...., n * 256    | 1, 257, ... (n * 256) + 1 | 2, 258, ... (n * 256) + 3 | etc
+				 * Buffer Values: | 1024, 1024, 1024, 1024, ... |
+				 *
+				 * KERNEL 3:
+				 * Executes 1 thread by one workgroup. Single thread loops 256 times
+				 *          Thread 1
+				 * | 0, 1, 2, 3, 4, 5, 6 ... etc|
+				 * Buffer Values: [262144, 1024, 1024]
+				 */
 
 				const reduce1Calls = [
 					// Accumulation
@@ -362,7 +353,7 @@
 						const k = instanceIndex.toVar( 'k' );
 						tSum.element( invocationLocalIndex ).assign( uint( 0 ) );
 
-						// Each workgroup populates its workgroup array with accumulated values from across dispatch blocks
+						// Each workgroup populates its workgroup array with accumulated values from across dispatch blocks.
 						Loop( k.lessThan( uint( numElements ) ), () => {
 
 							tSum.element( invocationLocalIndex ).addAssign( currentStorage.element( k ) );
@@ -371,8 +362,7 @@
 
 						} );
 
-						// Ensure that each thread within a workgroup has finished populating it's share of the
-						// workgroup array
+						// Ensure that each thread within a workgroup has finished populating it's share of the workgroup array.
 						workgroupBarrier();
 
 						// Reset the loop condition
@@ -380,20 +370,18 @@
 
 						Loop( k.greaterThan( 0 ), () => {
 
-							// Reduce power of 2 times
-							// Therefore ensure we only access elements under current power of 2
+							// Only access elements under current power of 2
 							If( invocationLocalIndex.lessThan( k ), () => {
 
-								// Add the element 2^n up to current element (similar to reduce0)
-								// First iteration:
-								//	128 -> 255 added to 0 - 127
-								//  Ensure threads in workgroup completed
-								// Second iteration:
-								// 	64 -> 127 added to 0 -> 63
-								//	Ensure threads completed, etc.
+								/* Add the element 2^n up to current element (similar to reduce0).
+								 * 1st iteration: 128 -> 255 added to 0 - 127.
+								 * 2nd iteration: 64 -> 127 added to 0 -> 63.
+								 */
 								tSum.element( invocationLocalIndex ).addAssign( tSum.element( invocationLocalIndex.add( k ) ) );
 
 							} );
+			
+							// Ensure each iteration's threads complete.
 							workgroupBarrier();
 							k.divAssign( 2 );
 
@@ -449,7 +437,6 @@
 						const k = instanceIndex.toVar( 'k' );
 						tSum.element( invocationLocalIndex ).assign( uint( 0 ) );
 
-						// Each workgroup populates its workgroup array with accumulated values from across dispatch blocks
 						Loop( k.lessThan( uint( numElements ) ), () => {
 
 							tSum.element( invocationLocalIndex ).addAssign( currentStorage.element( k ) );
@@ -465,8 +452,6 @@
 
 						Loop( k.greaterThan( 0 ), () => {
 
-							// Reduce power of 2 times
-							// Therefore ensure we only access elements under current power of 2
 							If( invocationLocalIndex.lessThan( k ).and( invocationLocalIndex.add( k ).lessThan( workgroupSize ) ), () => {
 
 								tSum.element( invocationLocalIndex ).addAssign( tSum.element( invocationLocalIndex.add( k ) ) );
@@ -596,7 +581,6 @@
 
 						}
 
-						//renderer.compute( computeResetBuffer );
 						renderer.render( scene, camera );
 
 					} else if ( state === 'Run Algo' ) {
@@ -649,8 +633,6 @@
 
 								const currentAlgoCalls = calls[ currentAlgorithm ];
 
-								//console.log( currentAlgoCalls.length );
-
 								for ( let i = 0; i < currentAlgoCalls.length; i ++ ) {
 
 									renderer.compute( currentAlgoCalls[ i ] );
@@ -664,7 +646,8 @@
 
 						}
 
-						const reduceArray = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) );
+						// Debug buffer:
+						// const reductionResult = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) )[0];
 
 						let passInfoString = '';
 

From cb64c7454fea77c56f86436781d0b48d470944c5 Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:47:02 -0700
Subject: [PATCH 4/6] new screenshot

---
 .../screenshots/webgpu_compute_reduce.jpg     | Bin 11445 -> 6557 bytes
 examples/webgpu_compute_reduce.html           |  15 ++++++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/examples/screenshots/webgpu_compute_reduce.jpg b/examples/screenshots/webgpu_compute_reduce.jpg
index 6664b13dd131dfefa222fe93d6342333386057e5..feabfb2f71420d0d585610444771779c0d216c6e 100644
GIT binary patch
literal 6557
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

literal 11445
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
MJ^jI*D}g-v9YrSA%m4rY

diff --git a/examples/webgpu_compute_reduce.html b/examples/webgpu_compute_reduce.html
index fb05e568153a54..c9ca22a97eb577 100644
--- a/examples/webgpu_compute_reduce.html
+++ b/examples/webgpu_compute_reduce.html
@@ -89,7 +89,7 @@
 				// Number of elements in the grid being displayed
 				gridDisplayWidth: uniform( gridDim ),
 				gridDisplayHeight: uniform( gridDim ),
-				'Display Mode': 'Workgroup 0'
+				'Display Mode': 'Entire Grid'
 			};
 
 			const leftEffectController = {
@@ -483,6 +483,12 @@
 			
 				];
 
+				const createReduce4Fn = ( workgroupSize, dispatch, numElements ) => {
+
+
+			
+				};
+
 				const calls = {
 					'Reduce 0 (N/2)': reduce0Calls,
 					'Reduce 1 (Naive Accumulate)': reduce1Calls,
@@ -646,8 +652,7 @@
 
 						}
 
-						// Debug buffer:
-						// const reductionResult = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) )[0];
+						// DEBUG: const reductionResult = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) )[0];
 
 						let passInfoString = '';
 
@@ -695,8 +700,6 @@
 
 				};
 
-			
-				stepAnimation();
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -717,6 +720,8 @@
 
 				}
 
+				setTimeout( stepAnimation, 500 );
+
 			}
 
 		</script>

From d0fec846485c95bf16f965cf20873f14f446340c Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:47:48 -0700
Subject: [PATCH 5/6] remove unused function

---
 examples/webgpu_compute_reduce.html | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/examples/webgpu_compute_reduce.html b/examples/webgpu_compute_reduce.html
index c9ca22a97eb577..ee064435367ead 100644
--- a/examples/webgpu_compute_reduce.html
+++ b/examples/webgpu_compute_reduce.html
@@ -483,12 +483,6 @@
 			
 				];
 
-				const createReduce4Fn = ( workgroupSize, dispatch, numElements ) => {
-
-
-			
-				};
-
 				const calls = {
 					'Reduce 0 (N/2)': reduce0Calls,
 					'Reduce 1 (Naive Accumulate)': reduce1Calls,

From ba57a26d0b0ea07f2b0e6e9d5842ce5bcaa8336f Mon Sep 17 00:00:00 2001
From: Christian Helgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Mon, 7 Jul 2025 21:58:53 -0700
Subject: [PATCH 6/6] add screenshot to puppeteer exceptions

---
 test/e2e/puppeteer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/e2e/puppeteer.js b/test/e2e/puppeteer.js
index a4b2784928f7a6..2ee266c9fd96ce 100644
--- a/test/e2e/puppeteer.js
+++ b/test/e2e/puppeteer.js
@@ -140,6 +140,7 @@ const exceptionList = [
 	// Awaiting for WebGPU Backend support in Puppeteer
 	'webgpu_storage_buffer',
 	'webgpu_compute_sort_bitonic',
+	'webgpu_compute_reduce',
 	'webgpu_struct_drawindirect',
 
 	// WebGPURenderer: Unknown problem
