WebGPU: Audio Processing using ShaderNode (mrdoob#24918)

* WebGPURenderer: add .getArrayFromBuffer()

* Added webgpu_audio_processing example

* test if unmap() is really necessary

* improve example

* example update

* fix .isViewportNode

* added visual feedback

* optimize a bit

Author: sunag

examples/files.json

@@ -324,6 +324,7 @@
 		"webgl2_volume_perlin"
 	],
 	"webgpu": [
+		"webgpu_audio_processing",
 		"webgpu_compute",
 		"webgpu_cubemap_adjustments",
 		"webgpu_cubemap_mix",

examples/jsm/nodes/display/ViewportNode.js

@@ -20,7 +20,7 @@ class ViewportNode extends Node {
 
 		this.scope = scope;
 
-		this.isScreenNode = true;
+		this.isViewportNode = true;
 
 	}
 

examples/jsm/renderers/webgpu/WebGPUAttributes.js

@@ -23,7 +23,7 @@ class WebGPUAttributes {
 
 		if ( data ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			this.buffers.delete( attribute );
 
@@ -51,7 +51,7 @@ class WebGPUAttributes {
 
 		} else if ( usage && usage !== data.usage ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			data = this._createBuffer( attribute, usage );
 
@@ -67,14 +67,61 @@ class WebGPUAttributes {
 
 	}
 
+	async getArrayBuffer( attribute ) {
+
+		const data = this.get( attribute );
+		const device = this.device;
+
+		const gpuBuffer = data.buffer;
+		const size = gpuBuffer.size;
+
+		let gpuReadBuffer = data.readBuffer;
+		let needsUnmap = true;
+
+		if ( gpuReadBuffer === null ) {
+
+			gpuReadBuffer = device.createBuffer( {
+				size,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			} );
+
+			needsUnmap = false;
+
+			data.readBuffer = gpuReadBuffer;
+
+		}
+
+		const cmdEncoder = device.createCommandEncoder( {} );
+
+		cmdEncoder.copyBufferToBuffer(
+			gpuBuffer,
+			0,
+			gpuReadBuffer,
+			0,
+			size
+		);
+
+		if ( needsUnmap ) gpuReadBuffer.unmap();
+
+		const gpuCommands = cmdEncoder.finish();
+		device.queue.submit( [ gpuCommands ] );
+
+		await gpuReadBuffer.mapAsync( GPUMapMode.READ );
+
+		const arrayBuffer = gpuReadBuffer.getMappedRange();
+
+		return new Float32Array( arrayBuffer );
+
+	}
+
 	_createBuffer( attribute, usage ) {
 
 		const array = attribute.array;
 		const size = array.byteLength + ( ( 4 - ( array.byteLength % 4 ) ) % 4 ); // ensure 4 byte alignment, see #20441
 
 		const buffer = this.device.createBuffer( {
 			size,
-			usage: usage | GPUBufferUsage.COPY_DST,
+			usage: usage | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		} );
 
@@ -87,21 +134,24 @@ class WebGPUAttributes {
 		return {
 			version: attribute.version,
 			buffer,
+			readBuffer: null,
 			usage
 		};
 
 	}
 
 	_writeBuffer( buffer, attribute ) {
 
+		const device = this.device;
+
 		const array = attribute.array;
 		const updateRange = attribute.updateRange;
 
 		if ( updateRange.count === - 1 ) {
 
 			// Not using update ranges
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -110,7 +160,7 @@ class WebGPUAttributes {
 
 		} else {
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -124,6 +174,14 @@ class WebGPUAttributes {
 
 	}
 
+	_destroyBuffers( { buffer, readBuffer } ) {
+
+		buffer.destroy();
+
+		if ( readBuffer !== null ) readBuffer.destroy();
+
+	}
+
 }
 
 export default WebGPUAttributes;

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -384,6 +384,12 @@ class WebGPURenderer {
 
 	}
 
+	async getArrayFromBuffer( attribute ) {
+
+		return await this._attributes.getArrayBuffer( attribute );
+
+	}
+
 	getContext() {
 
 		return this._context;