WebGPURenderer: StorageBufferNode Support reading external elements in the WebGL Backend

examples/files.json

@@ -373,7 +373,8 @@
 		"webgpu_postprocessing_anamorphic",
 		"webgpu_mirror",
 		"webgpu_multisampled_renderbuffers",
-		"webgpu_materials_texture_anisotropy"
+		"webgpu_materials_texture_anisotropy",
+		"webgpu_storage_pbo"
 	],
 	"webaudio": [
 		"webaudio_orientation",

examples/jsm/nodes/core/AssignNode.js

@@ -32,7 +32,7 @@ class AssignNode extends TempNode {
 
 		const targetType = targetNode.getNodeType( builder );
 
-		const target = targetNode.build( builder );
+		const target = targetNode.build( builder, 'assign' );
 		const source = sourceNode.build( builder, targetType );
 
 		const snippet = `${ target } = ${ source }`;

examples/jsm/nodes/utils/ArrayElementNode.js

@@ -1,4 +1,6 @@
+import { texture } from '../Nodes.js';
 import Node, { addNodeClass } from '../core/Node.js';
+import { DataTexture, RGBAFormat, FloatType } from 'three';
 
 class ArrayElementNode extends Node { // @TODO: If extending from TempNode it breaks webgpu_compute
 
@@ -19,13 +21,75 @@ class ArrayElementNode extends Node { // @TODO: If extending from TempNode it br
 
 	}
 
-	generate( builder ) {
+	setup( builder ) {
+
+		if ( this.node.isStorageBufferNode && ! builder.isAvailable( 'storageBuffer' ) ) {
+
+			if ( ! this.node.instanceIndex ) {
+
+				const attribute = this.node.value;
+
+				if ( attribute.pbo === undefined ) {
+
+					const square = Math.sqrt( attribute.array.length / 4 );
+					const width = Math.floor( square );
+					const height = Math.ceil( square );
+
+					const pboTexture = new DataTexture( attribute.array, width, height, RGBAFormat, FloatType );
+					pboTexture.needsUpdate = true;
+					pboTexture.isPBOTexture = true;
+					const pbo = texture( pboTexture );
+					pbo.setPrecision( 'high' );
+
+					attribute.pboNode = pbo;
+					attribute.pbo = pbo.value;
+
+
+				}
+
+			}
+
+
+		}
+
+		super.setup( builder );
+
+
+	}
+
+	generate( builder, output ) {
 
 		const nodeSnippet = this.node.build( builder );
 		const indexSnippet = this.indexNode.build( builder, 'uint' );
 
 		if ( this.node.isStorageBufferNode && ! builder.isAvailable( 'storageBuffer' ) ) {
 
+
+			const attribute = this.node.value;
+
+			if ( attribute.pboNode ) {
+
+				const nodeUniform = builder.getUniformFromNode( attribute.pboNode, 'texture', builder.shaderStage, builder.context.label );
+
+				const propertyNameTexture = builder.getPropertyName( nodeUniform );
+
+				const snippet = /* glsl */`
+					texelFetch(
+						${propertyNameTexture}, 
+						ivec2(
+							${indexSnippet} / uint(4) % uint(textureSize(${propertyNameTexture}, 0).x),
+							${indexSnippet} / (uint(4) * uint(textureSize(${propertyNameTexture}, 0).x))
+						),
+						0
+					)[${indexSnippet} % uint(4)]`;
+
+				return output !== 'assign' ? snippet : nodeSnippet;
+
+			}
+
+
+
+
 			return nodeSnippet;
 
 		}

examples/jsm/renderers/webgl/WebGLBackend.js

@@ -430,7 +430,15 @@ class WebGLBackend extends Backend {
 		// switch active buffers
 		for ( let i = 0; i < transformBuffers.length; i ++ ) {
 
-			transformBuffers[ i ].switchBuffers();
+			if ( transformBuffers[ i ].pbo ) {
+
+				this.textureUtils.transferBufferToTexture( transformBuffers[ i ].bufferGPU, transformBuffers[ i ].pbo );
+
+			} else {
+
+				transformBuffers[ i ].switchBuffers();
+
+			}
 
 		}
 
@@ -1219,8 +1227,12 @@ class WebGLBackend extends Backend {
 
 			key += ':' + attributeData.id;
 
-			gl.bindBuffer( gl.ARRAY_BUFFER, attributeData.bufferGPU );
-			gl.enableVertexAttribArray( i );
+			if ( attribute.pbo === undefined ) {
+
+				gl.bindBuffer( gl.ARRAY_BUFFER, attributeData.bufferGPU );
+				gl.enableVertexAttribArray( i );
+
+			}
 
 			if ( attribute.isStorageBufferAttribute ) staticVao = false;
 
@@ -1296,7 +1308,10 @@ class WebGLBackend extends Backend {
 
 			const attributeData = transformBuffers[ i ];
 
-			gl.bindBufferBase( gl.TRANSFORM_FEEDBACK_BUFFER, i, attributeData.transformBuffer );
+			let buffer = attributeData.bufferGPU;
+			if ( attributeData.pbo !== undefined ) buffer = attributeData.bufferGPU;
+
+			gl.bindBufferBase( gl.TRANSFORM_FEEDBACK_BUFFER, i, buffer );
 
 		}
 

examples/jsm/renderers/webgl/utils/WebGLAttributeUtils.js

@@ -8,6 +8,7 @@ class DualAttributeData {
 
 		this.buffers = [ attributeData.bufferGPU, dualBuffer ];
 		this.type = attributeData.type;
+		this.pbo = attributeData.pbo;
 		this.bytesPerElement = attributeData.BYTES_PER_ELEMENT;
 		this.version = attributeData.version;
 		this.isInteger = attributeData.isInteger;
@@ -129,11 +130,12 @@ class WebGLAttributeUtils {
 			type,
 			bytesPerElement: array.BYTES_PER_ELEMENT,
 			version: attribute.version,
+			pbo: attribute.pbo,
 			isInteger: type === gl.INT || type === gl.UNSIGNED_INT || attribute.gpuType === IntType,
 			id: _id ++
 		};
 
-		if ( attribute.isStorageBufferAttribute ) {
+		if ( attribute.isStorageBufferAttribute && attribute.pbo === undefined ) {
 
 			// create buffer for tranform feedback use
 			const bufferGPUDual = this._createBuffer( gl, bufferType, array, usage );

examples/jsm/renderers/webgl/utils/WebGLTextureUtils.js

@@ -207,6 +207,7 @@ class WebGLTextureUtils {
 			if ( texture.type === FloatType && extensions.has( 'OES_texture_float_linear' ) === false ) return; // verify extension for WebGL 1 and WebGL 2
 
 			if ( texture.anisotropy > 1 || currentAnisotropy !== texture.anisotropy ) {
+
 				const extension = extensions.get( 'EXT_texture_filter_anisotropic' );
 				gl.texParameterf( textureType, extension.TEXTURE_MAX_ANISOTROPY_EXT, Math.min( texture.anisotropy, backend.getMaxAnisotropy() ) );
 				backend.get( texture ).currentAnisotropy = texture.anisotropy;
@@ -289,6 +290,40 @@ class WebGLTextureUtils {
 
 	}
 
+	async transferBufferToTexture( buffer, texture ) {
+
+		const { gl, backend } = this;
+
+		const { textureGPU, glTextureType, glFormat, glType } = backend.get( texture );
+
+		const { width, height } = texture.source.data;
+
+
+		gl.bindBuffer( gl.PIXEL_UNPACK_BUFFER, buffer );
+
+		backend.state.bindTexture( glTextureType, textureGPU );
+
+		gl.texSubImage2D( glTextureType, 0, 0, 0, width, height, glFormat, glType, 0 );
+
+		gl.bindBuffer( gl.PIXEL_UNPACK_BUFFER, null );
+
+
+		// debug
+		const framebuffer = gl.createFramebuffer();
+		gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer );
+		gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, glTextureType, textureGPU, 0 );
+
+		const readout = new Float32Array( width * height * 4 );
+
+		const altFormat = gl.getParameter( gl.IMPLEMENTATION_COLOR_READ_FORMAT );
+		const altType = gl.getParameter( gl.IMPLEMENTATION_COLOR_READ_TYPE );
+
+		gl.readPixels( 0, 0, width, height, altFormat, altType, readout );
+		gl.bindFramebuffer( gl.FRAMEBUFFER, null );
+		console.log( readout );
+
+	}
+
 	updateTexture( texture, options ) {
 
 		const { gl } = this;