fix storage buffer example with workgroupBarrier()

examples/webgpu_storage_buffer.html

@@ -9,8 +9,8 @@
 
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
-			<br />This example demonstrate the fetch of external element from a StorageBuffer.
-			<br /> Left canvas is using WebGPU Backend, right canvas is WebGL Backend.
+			<br />This example demonstrates fetching an external element from a StorageBuffer.
+			<br /> The left canvas uses the WebGPU Backend, while the right uses the WebGL Backend.
 			<div id="timestamps" style="
 				position: absolute;
 				top: 60px;
@@ -52,7 +52,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { storageObject, If, vec3, uv, uint, float, Fn, instanceIndex } from 'three/tsl';
+			import { storageObject, If, vec3, uv, uint, float, Fn, instanceIndex, workgroupBarrier } from 'three/tsl';
 
 			const timestamps = {
 				webgpu: document.getElementById( 'timestamps' ),
@@ -107,7 +107,8 @@
 
 					for ( let i = 0; i < type.length; i ++ ) {
 
-						const invertIndex = arrayBufferNodes[ i ].element( uint( size - 1 ).sub( instanceIndex ) );
+						const invertIndex = arrayBufferNodes[ i ].element( uint( size - 1 ).sub( instanceIndex ) ).toVar();
+						workgroupBarrier();
 						arrayBufferNodes[ i ].element( instanceIndex ).assign( invertIndex );
 
 					}

src/nodes/Nodes.js

@@ -132,13 +132,8 @@ export { default as FogExp2Node } from './fog/FogExp2Node.js';
 export { default as RangeNode } from './geometry/RangeNode.js';
 
 // gpgpu
-<<<<<<< HEAD
 export { default as ComputeNode } from './gpgpu/ComputeNode.js';
-=======
-export { default as ComputeNode, compute } from './gpgpu/ComputeNode.js';
-export { default as WorkgroupInfoNode, workgroupArray } from './gpgpu/WorkgroupInfoNode.js';
-export { workgroupBarrier, textureBarrier, storageBarrier } from './gpgpu/BarrierNode.js';
->>>>>>> 2880e0fe5b (barrier, private array, workgroup array support)
+export { workgroupBarrier } from './gpgpu/BarrierNode.js';
 
 // lighting
 export { default as LightNode } from './lighting/LightNode.js';

src/nodes/gpgpu/BarrierNode.js

@@ -1,5 +1,40 @@
-import { expression } from '../code/ExpressionNode';
+import Node, { registerNodeClass } from '../core/Node.js';
+import { nodeProxy } from '../tsl/TSLCore.js';
+
+class BarrierNode extends Node {
+
+	constructor( scope ) {
+
+		super();
+
+		this.scope = scope;
+
+	}
+
+	generate( builder ) {
+
+		const { scope } = this;
+		const { renderer } = builder;
+
+		if ( renderer.backend.isWebGLBackend === true ) {
+
+			builder.addFlowCode( `\t// ${scope}Barrier \n` );
+
+		} else {
+
+			builder.addLineFlowCode( `${scope}Barrier()` );
+
+		}
+
+	}
+
+}
+
+export default BarrierNode;
+
+registerNodeClass( 'Barrier', BarrierNode );
+
+export const barrier = nodeProxy( BarrierNode );
+
+export const workgroupBarrier = () => barrier( 'workgroup' ).append();
 
-export const workgroupBarrier = () => expression( 'workgroupBarrier();' ).append();
-export const storageBarrier = () => expression( 'storageBarrier();' ).append();
-export const textureBarrier = () => expression( 'textureBarrier();' ).append();

src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -1173,6 +1173,7 @@ ${ flowData.code }
 		} else {
 
 			this.computeShader = this._getWGSLComputeCode( shadersData.compute, ( this.object.workgroupSize || [ 64 ] ).join( ', ' ) );
+			console.log( this.computeShader );
 
 		}