diff --git a/examples/files.json b/examples/files.json
index bd549c1a22bf01..6fc19da4a791cb 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -312,6 +312,7 @@
 		"webgpu_compute_particles_rain",
 		"webgpu_compute_particles_snow",
 		"webgpu_compute_points",
+		"webgpu_compute_prefix_sums",
 		"webgpu_compute_sort_bitonic",
 		"webgpu_compute_texture",
 		"webgpu_compute_texture_pingpong",
diff --git a/examples/screenshots/webgpu_compute_prefix_sums.jpg b/examples/screenshots/webgpu_compute_prefix_sums.jpg
new file mode 100644
index 00000000000000..feabfb2f71420d
Binary files /dev/null and b/examples/screenshots/webgpu_compute_prefix_sums.jpg differ
diff --git a/examples/webgpu_compute_prefix_sums.html b/examples/webgpu_compute_prefix_sums.html
new file mode 100644
index 00000000000000..019c3d0f7b7d43
--- /dev/null
+++ b/examples/webgpu_compute_prefix_sums.html
@@ -0,0 +1,517 @@
+<html lang="en">
+	<head>
+		<title>three.js webgpu - storage pbo external element</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 /> Three.js TSL implemtations of multiple prefix sum algorithms.
+			<br /> Each display loops through an initialization, sum, and validation step.
+			<br /> Reference implementations and resources by <a href="https://github.com/b0nes164/GPUPrefixSums/">b0nes164</a>
+			<br/>
+			<div id="left_side" 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" 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 { If, vec3, Loop, uniform, instancedArray, uv, uint, float, modInt, Fn, vec2, uvec2, floor, instanceIndex, invocationLocalIndex, workgroupBarrier } from 'three/tsl';
+
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+			// Max number of elements in each display.
+			const maxElements = 16384;
+			const WORKGROUP_SIZE = 64;
+
+			const effectController = {
+				// Sqr root of 16834
+				leftGridDim: uniform( Math.sqrt( maxElements ) ),
+				rightGridDim: uniform( Math.sqrt( maxElements ) ),
+				validate: uniform( 0 ),
+				// Algorithm being displayed
+				'Left Method Name': 'Fake',
+				'Right Method Name': 'Kogge-Stone',
+			};
+
+			const algorithms = [
+				'Sklansky (No Partition)',
+				'Sklansky',
+				'Kogge-Stone',
+				'Fake',
+				'Incorrect'
+			];
+
+			const gui = new GUI();
+			gui.add( effectController, 'Left Method Name', algorithms );
+			gui.add( effectController, 'Right Method Name', algorithms );
+
+			const timestamps = {
+				left_side: document.getElementById( 'left_side' ),
+				right_side: document.getElementById( 'right_side' )
+			};
+
+			// Initialize Two Views
+			init( false );
+			init( true );
+
+			// When forceGlobalSwap is true, force all valid local swaps to be global swaps.
+			async function init( rightSide ) {
+
+				// Create prefix sort data
+				const array = new Uint32Array( Array.from( { length: maxElements }, ( _, i ) => {
+
+					return i;
+
+				} ) );
+
+				const infoArray = new Uint32Array( 5 ).fill( 1 );
+
+				const currentElementsBuffer = instancedArray( array );
+				const infoBuffer = instancedArray( infoArray );
+
+				const genericInitMethod = ( currentElements ) => {
+
+					currentElements.element( instanceIndex ).assign( 1 );
+			
+				};
+
+				// Useful loops
+
+				const LoopThroughWorkgroup = ( startValue, callback ) => {
+
+					Loop( {
+						start: uint( startValue ),
+						type: 'uint',
+						end: uint( maxElements ),
+						condition: '<',
+						update: `+= ${WORKGROUP_SIZE}`,
+						name: 'workloadIndex'
+					}, callback );
+
+				};
+
+				const LoopThroughBinary = ( startValue, callback ) => {
+
+					Loop( {
+						start: uint( startValue ),
+						type: 'uint',
+						end: uint( maxElements ),
+						condition: '<',
+						update: '<<= 1',
+						name: 'shiftIndex'
+					}, callback );
+
+				};
+
+
+				// Define and compile prefix sum methods.
+				const prefixSumMethods = {
+					// VALIDATION METHODS: Methods to test whether the prefix sum validation is working as expected.
+					//
+					// Emulates a prefix sum by manually assigning the instanceIndex to the storage buffer.
+					// This method should only be used to validate the correctness of new algorithms, and not as
+					// a yardstick for performance.
+					'Fake': {
+						threads: [ maxElements ],
+						runMethod: ( currentElements ) => {
+
+							currentElements.element( instanceIndex ).assign( instanceIndex.add( 1 ) );
+			
+						},
+					},
+					// Emulates an incorrect prefix sum by manually assigning the instanceIndex's inverse value.
+					// Used to demonstrate a completely incorrect algorithm
+					'Incorrect': {
+						threads: [ maxElements ],
+						runMethod: ( currentElements ) => {
+
+							currentElements.element( instanceIndex ).assign( uint( maxElements ).sub( instanceIndex ) );
+
+						},
+					},
+					// BASIC SCANS
+					// https://github.com/b0nes164/GPUPrefixSums/discussions/15#discussioncomment-11332960
+					'Sklansky (No Partition)': {
+						threads: [ 32 ],
+						runMethod: ( currentElements ) => {
+
+							const offset = uint( 0 ).toVar( 'offset' );
+							LoopThroughBinary( 1, ( { shiftIndex } ) => {
+
+								LoopThroughWorkgroup( invocationLocalIndex, ( { workloadIndex } ) => {
+
+									If( ( shiftIndex.bitAnd( workloadIndex ) ), () => {
+
+										const offsetIndex = workloadIndex.shiftRight( offset );
+										const offsetOffset = offsetIndex.shiftLeft( offset );
+										const acquireIndex = offsetOffset.sub( 1 );
+
+										currentElements.element( workloadIndex ).addAssign( currentElements.element( acquireIndex ) );
+
+			
+									} );
+
+			
+								} );
+								workgroupBarrier();
+								offset.addAssign( 1 );
+
+							} );
+
+						}
+
+					},
+					'Sklansky': {
+						threads: [ 32 ],
+						runMethod: ( currentElements ) => {
+
+							const WORKGROUP_SIZE = uint( 64 ).toVar( 'WORKGROUP_SIZE' );
+							const prevReduction = uint( 0 ).toVar( 'prevReduction' );
+
+							LoopThroughWorkgroup( 0, ( { workloadIndex } ) => {
+
+								const effectiveIndex = invocationLocalIndex.add( workloadIndex );
+
+								Loop( {
+									start: uint( 0 ),
+									type: 'uint',
+									end: uint( Math.log2( 64 ) ),
+									condition: '<',
+									update: '+= 1',
+									name: 'iteration'
+								}, ( { iteration } ) => {
+
+									const step = uint( 1 ).shiftLeft( iteration.add( 1 ) ).toVar( 'step' );
+
+									// Alternative (Way I would like to use)
+
+									const jStart = ( uint( 1 ).shiftLeft( iteration ) ).sub( 1 ).toVar( 'jStart' );
+									const kIters = uint( 1 ).shiftLeft( iteration ).toVar( 'kIters' );
+
+									// Emulate iteration through and k
+									const accessIndex = jStart.add( step.mul( effectiveIndex.div( kIters ) ) ).toVar( 'accessIndex' );
+									const assignIndex = accessIndex.add( modInt( effectiveIndex, kIters ) ).add( 1 ).toVar( 'assignIndex' );
+
+									currentElements.element( assignIndex ).addAssign( currentElements.element( accessIndex ) );
+
+									workgroupBarrier();
+
+								} );
+
+								currentElements.element( effectiveIndex ).addAssign( prevReduction );
+								workgroupBarrier();
+
+								prevReduction.assign( currentElements.element( workloadIndex.add( WORKGROUP_SIZE ).sub( 1 ) ) );
+
+							} );
+
+
+						},
+					},
+					'Kogge-Stone': {
+						threads: [ 64 ],
+						initMethod: ( currentElements, info ) => {
+
+							genericInitMethod( currentElements );
+							info.element( 0 ).assign( 1 );
+
+						},
+						runMethod: ( currentElements ) => {
+
+							const WORKGROUP_SIZE = uint( 64 ).toVar( 'WORKGROUP_SIZE' );
+							const prevReduction = uint( 0 ).toVar( 'prevReduction' );
+
+							LoopThroughWorkgroup( 0, ( { workloadIndex } ) => {
+
+								Loop( {
+									start: uint( 1 ),
+									end: WORKGROUP_SIZE,
+									type: 'uint',
+									condition: '<=',
+									update: '<<= 1',
+									name: 'j',
+								}, ( { j } ) => {
+
+									const t = uint( 0 ).toVar( 't' );
+
+									If( invocationLocalIndex.greaterThanEqual( j ), () => {
+
+										t.assign( currentElements.element( invocationLocalIndex.sub( j ).add( workloadIndex ) ) );
+
+
+									} );
+			
+									workgroupBarrier();
+
+									If( invocationLocalIndex.greaterThanEqual( j ), () => {
+
+										currentElements.element( invocationLocalIndex.add( workloadIndex ) ).addAssign( t );
+
+									} );
+
+									workgroupBarrier();
+
+
+								} );
+
+								currentElements.element( invocationLocalIndex.add( workloadIndex ) ).addAssign( prevReduction );
+								workgroupBarrier();
+
+								prevReduction.assign( currentElements.element( workloadIndex.add( WORKGROUP_SIZE ).sub( 1 ) ) );
+
+							} );
+
+						}
+					}
+				};
+
+
+				for ( const methodName in prefixSumMethods ) {
+
+					const method = prefixSumMethods[ methodName ];
+
+					if ( method.initMethod ) {
+
+						// Check if the current method requires additional initialization steps
+
+						method.initFunction = Fn( () => {
+
+							method.initMethod( currentElementsBuffer, infoBuffer );
+
+						} )().compute( maxElements );
+
+
+
+					} else {
+
+						// Otherwise, simply run the generic initialization method.
+
+						method.initFunction = Fn( () => {
+
+							genericInitMethod( currentElementsBuffer );
+
+						} )().compute( maxElements );
+
+					}
+
+					method.runFunctions = [];
+
+					const runFunctionTemplate = Fn( ( ) => {
+
+						method.runMethod( currentElementsBuffer, infoBuffer );
+
+					} );
+
+					for ( let i = 0; i < method.threads.length; i ++ ) {
+
+						method.runFunctions.push( runFunctionTemplate().compute( method.threads[ i ] ) );
+
+					}
+			
+				}
+
+				// Create standard scene
+				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 material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
+
+				const display = Fn( () => {
+
+					const gridDim = rightSide ? effectController.rightGridDim : effectController.leftGridDim;
+					const newUV = uv().mul( vec2( gridDim ) );
+					const pixel = uvec2( uint( floor( newUV.x ) ), uint( floor( newUV.y ) ) );
+					const elementIndex = uint( gridDim ).mul( pixel.y ).add( pixel.x );
+					const colorChanger = currentElementsBuffer.element( elementIndex );
+					const subtracter = float( colorChanger ).div( gridDim.mul( gridDim ) );
+					const color = vec3( subtracter.oneMinus() ).toVar();
+					If( effectController.validate.equal( 1 ), () => {
+
+						If( colorChanger.equal( elementIndex.add( 1 ) ), () => {
+
+							color.g.assign( 255.0 );
+
+						} ).Else( () => {
+
+							color.r.assign( 255.0 );
+
+						} );
+
+
+					} );
+
+					return color;
+
+				} );
+
+				material.colorNode = display();
+
+				const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
+				scene.add( plane );
+
+				const renderer = new THREE.WebGPURenderer( { antialias: false, trackTimestamp: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth / 2, window.innerHeight );
+
+				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 ( rightSide ) {
+
+					renderer.domElement.style.left = '50%';
+
+					scene.background = new THREE.Color( 0x212121 );
+			
+				} else {
+
+					scene.background = new THREE.Color( 0x313131 );
+
+				}
+
+				let currentStep = 'Init';
+				let lastStep = '';
+				renderer.info.autoReset = false;
+
+				 const stepAnimation = async function () {
+
+					renderer.info.reset();
+
+					const methodName = rightSide ?
+						effectController[ 'Right Method Name' ] :
+						effectController[ 'Left Method Name' ];
+
+					const method = prefixSumMethods[ methodName ];
+
+					switch ( currentStep ) {
+
+						case 'Sum': {
+			
+
+							// Execute each dispatch
+							for ( let i = 0; i < method.threads.length; i ++ ) {
+
+								await renderer.computeAsync( method.runFunctions[ i ] );
+
+							}
+
+							lastStep = 'Sum';
+							currentStep = 'Validate';
+
+			
+						}
+
+							break;
+
+						case 'Validate': {
+
+							effectController.validate.value = 1;
+			
+							lastStep = 'Validate';
+							currentStep = 'Init';
+
+						}
+
+							break;
+
+						case 'Init': {
+
+							effectController.validate.value = 0;
+
+							await renderer.computeAsync( method.initFunction );
+							lastStep = 'Init';
+							currentStep = 'Sum';
+
+			
+						}
+
+							break;
+
+
+					}
+
+					await renderer.renderAsync( scene, camera );
+
+					timestamps[ rightSide ? 'right_side' : 'left_side' ].innerHTML = `
+
+							Compute ${rightSide ? effectController[ 'Right Method Name' ] : effectController[ 'Left Method Name' ]} Prefix Sum<br>
+							${lastStep} pass in ${lastStep === 'Validate' ? 0 : renderer.info.compute.timestamp.toFixed( 6 )}ms<br>
+
+					`;
+
+
+					setTimeout( stepAnimation, 1000 );
+			
+				};
+
+				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
diff --git a/examples/webgpu_compute_sort_bitonic.html b/examples/webgpu_compute_sort_bitonic.html
index c3204f5ed03765..d68fdf9c9a73da 100644
--- a/examples/webgpu_compute_sort_bitonic.html
+++ b/examples/webgpu_compute_sort_bitonic.html
@@ -494,22 +494,22 @@
 
 					if ( currentStep !== MAX_STEPS ) {
 
-						renderer.compute( computeBitonicStep );
+						await renderer.computeAsync( computeBitonicStep );
 
 						if ( nextStepGlobal ) {
 
-							renderer.compute( computeAlignCurrent );
+							await renderer.computeAsync( computeAlignCurrent );
 			
 						}
 			
-						renderer.compute( computeSetAlgo );
+						await renderer.computeAsync( computeSetAlgo );
 
 						currentStep ++;
 
 					} else {
 
-						renderer.compute( computeResetBuffers );
-						renderer.compute( computeResetAlgo );
+						await renderer.computeAsync( computeResetBuffers );
+						await renderer.computeAsync( computeResetAlgo );
 
 						currentStep = 0;
 			
