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 00000000000000..feabfb2f71420d
Binary files /dev/null and b/examples/screenshots/webgpu_compute_reduce.jpg differ
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" ],
diff --git a/examples/webgpu_compute_reduce.html b/examples/webgpu_compute_reduce.html
new file mode 100644
index 00000000000000..ee064435367ead
--- /dev/null
+++ b/examples/webgpu_compute_reduce.html
@@ -0,0 +1,723 @@
+<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 { 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';
+
+			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': 'Entire Grid'
+			};
+
+			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( () => {
+
+				switch ( unifiedEffectController[ 'Display Mode' ] ) {
+
+					case 'Entire Grid': {
+
+						unifiedEffectController.gridDisplayWidth.value = gridDim;
+						unifiedEffectController.gridDisplayHeight.value = gridDim;
+
+						break;
+
+					}
+
+					case 'Workgroup 0': {
+
+						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' );
+
+			}
+
+			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();
+			
+				arr.reduce( ( acc, val ) => acc + val, 0 );
+
+				const t1 = performance.now();
+
+				return ( t1 - t0 ).toFixed( 2 );
+
+			
+			};
+
+			init();
+
+			init( false );
+
+			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 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' );
+
+			
+
+				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;
+
+				}
+
+				// Create and store dispatches of reduction of certain size. Map each set of dispatches to algorithm name.
+
+				const computeReduce0Fn = Fn( () => {
+
+					const { numThreadsDispatched } = effectController;
+
+					currentStorage.element( instanceIndex ).addAssign( currentStorage.element( instanceIndex.add( numThreadsDispatched ) ) );
+
+				} )();
+
+				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 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
+					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 ), () => {
+
+							// Only access elements under current power of 2
+							If( invocationLocalIndex.lessThan( k ), () => {
+
+								/* 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 );
+
+						} );
+
+						// 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 ) );
+
+						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 ), () => {
+
+							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.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 ];
+
+								for ( let i = 0; i < currentAlgoCalls.length; i ++ ) {
+
+									renderer.compute( currentAlgoCalls[ i ] );
+									renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
+
+								}
+
+								break;
+
+							}
+
+						}
+
+						// DEBUG: const reductionResult = new Uint32Array( await renderer.getArrayBufferAsync( currentBuffer ) )[0];
+
+						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 );
+
+				};
+
+
+				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 );
+
+				}
+
+				setTimeout( stepAnimation, 500 );
+
+			}
+
+		</script>
+	</body>
+</html>
\ No newline at end of file
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
