super-three 0.167.0 → 0.169.0

package/src/renderers/webgpu/nodes/StandardNodeLibrary.js

@@ -0,0 +1,105 @@
+import NodeLibrary from '../../common/nodes/NodeLibrary.js';
+
+// Materials
+import { MeshPhongMaterial } from '../../../materials/MeshPhongMaterial.js';
+import MeshPhongNodeMaterial from '../../../materials/nodes/MeshPhongNodeMaterial.js';
+import { MeshStandardMaterial } from '../../../materials/MeshStandardMaterial.js';
+import MeshStandardNodeMaterial from '../../../materials/nodes/MeshStandardNodeMaterial.js';
+import { MeshPhysicalMaterial } from '../../../materials/MeshPhysicalMaterial.js';
+import MeshPhysicalNodeMaterial from '../../../materials/nodes/MeshPhysicalNodeMaterial.js';
+import { MeshToonMaterial } from '../../../materials/MeshToonMaterial.js';
+import MeshToonNodeMaterial from '../../../materials/nodes/MeshToonNodeMaterial.js';
+import { MeshBasicMaterial } from '../../../materials/MeshBasicMaterial.js';
+import MeshBasicNodeMaterial from '../../../materials/nodes/MeshBasicNodeMaterial.js';
+import { MeshLambertMaterial } from '../../../materials/MeshLambertMaterial.js';
+import MeshLambertNodeMaterial from '../../../materials/nodes/MeshLambertNodeMaterial.js';
+import { MeshNormalMaterial } from '../../../materials/MeshNormalMaterial.js';
+import MeshNormalNodeMaterial from '../../../materials/nodes/MeshNormalNodeMaterial.js';
+import { MeshMatcapMaterial } from '../../../materials/MeshMatcapMaterial.js';
+import MeshMatcapNodeMaterial from '../../../materials/nodes/MeshMatcapNodeMaterial.js';
+import { LineBasicMaterial } from '../../../materials/LineBasicMaterial.js';
+import LineBasicNodeMaterial from '../../../materials/nodes/LineBasicNodeMaterial.js';
+import { LineDashedMaterial } from '../../../materials/LineDashedMaterial.js';
+import LineDashedNodeMaterial from '../../../materials/nodes/LineDashedNodeMaterial.js';
+import { PointsMaterial } from '../../../materials/PointsMaterial.js';
+import PointsNodeMaterial from '../../../materials/nodes/PointsNodeMaterial.js';
+import { SpriteMaterial } from '../../../materials/SpriteMaterial.js';
+import SpriteNodeMaterial from '../../../materials/nodes/SpriteNodeMaterial.js';
+import { ShadowMaterial } from '../../../materials/ShadowMaterial.js';
+import ShadowNodeMaterial from '../../../materials/nodes/ShadowNodeMaterial.js';
+//import { MeshDepthMaterial } from '../../../materials/MeshDepthMaterial.js';
+//import MeshDepthNodeMaterial from '../../../materials/nodes/MeshDepthNodeMaterial.js';
+//import { MeshDistanceMaterial } from '../../../materials/MeshDistanceMaterial.js';
+//import MeshDistanceNodeMaterial from '../../../materials/nodes/MeshDistanceNodeMaterial.js';
+
+// Lights
+import { PointLight } from '../../../lights/PointLight.js';
+import { PointLightNode } from '../../../nodes/Nodes.js';
+import { DirectionalLight } from '../../../lights/DirectionalLight.js';
+import { DirectionalLightNode } from '../../../nodes/Nodes.js';
+import { RectAreaLight } from '../../../lights/RectAreaLight.js';
+import { RectAreaLightNode } from '../../../nodes/Nodes.js';
+import { SpotLight } from '../../../lights/SpotLight.js';
+import { SpotLightNode } from '../../../nodes/Nodes.js';
+import { AmbientLight } from '../../../lights/AmbientLight.js';
+import { AmbientLightNode } from '../../../nodes/Nodes.js';
+import { HemisphereLight } from '../../../lights/HemisphereLight.js';
+import { HemisphereLightNode } from '../../../nodes/Nodes.js';
+import { LightProbe } from '../../../lights/LightProbe.js';
+import { LightProbeNode } from '../../../nodes/Nodes.js';
+import IESSpotLight from '../../../lights/webgpu/IESSpotLight.js';
+import { IESSpotLightNode } from '../../../nodes/Nodes.js';
+
+// Tone Mapping
+import { LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping } from '../../../constants.js';
+import { linearToneMapping, reinhardToneMapping, cineonToneMapping, acesFilmicToneMapping, agxToneMapping, neutralToneMapping } from '../../../nodes/display/ToneMappingFunctions.js';
+
+// Color Space
+import { LinearSRGBColorSpace, SRGBColorSpace } from '../../../constants.js';
+import { linearSRGBTosRGB, sRGBToLinearSRGB } from '../../../nodes/display/ColorSpaceFunctions.js';
+import { getColorSpaceMethod } from '../../../nodes/display/ColorSpaceNode.js';
+
+class StandardNodeLibrary extends NodeLibrary {
+
+	constructor() {
+
+		super();
+
+		this.addMaterial( MeshPhongNodeMaterial, MeshPhongMaterial );
+		this.addMaterial( MeshStandardNodeMaterial, MeshStandardMaterial );
+		this.addMaterial( MeshPhysicalNodeMaterial, MeshPhysicalMaterial );
+		this.addMaterial( MeshToonNodeMaterial, MeshToonMaterial );
+		this.addMaterial( MeshBasicNodeMaterial, MeshBasicMaterial );
+		this.addMaterial( MeshLambertNodeMaterial, MeshLambertMaterial );
+		this.addMaterial( MeshNormalNodeMaterial, MeshNormalMaterial );
+		this.addMaterial( MeshMatcapNodeMaterial, MeshMatcapMaterial );
+		this.addMaterial( LineBasicNodeMaterial, LineBasicMaterial );
+		this.addMaterial( LineDashedNodeMaterial, LineDashedMaterial );
+		this.addMaterial( PointsNodeMaterial, PointsMaterial );
+		this.addMaterial( SpriteNodeMaterial, SpriteMaterial );
+		this.addMaterial( ShadowNodeMaterial, ShadowMaterial );
+
+		this.addLight( PointLightNode, PointLight );
+		this.addLight( DirectionalLightNode, DirectionalLight );
+		this.addLight( RectAreaLightNode, RectAreaLight );
+		this.addLight( SpotLightNode, SpotLight );
+		this.addLight( AmbientLightNode, AmbientLight );
+		this.addLight( HemisphereLightNode, HemisphereLight );
+		this.addLight( LightProbeNode, LightProbe );
+		this.addLight( IESSpotLightNode, IESSpotLight );
+
+		this.addToneMapping( linearToneMapping, LinearToneMapping );
+		this.addToneMapping( reinhardToneMapping, ReinhardToneMapping );
+		this.addToneMapping( cineonToneMapping, CineonToneMapping );
+		this.addToneMapping( acesFilmicToneMapping, ACESFilmicToneMapping );
+		this.addToneMapping( agxToneMapping, AgXToneMapping );
+		this.addToneMapping( neutralToneMapping, NeutralToneMapping );
+
+		this.addColorSpace( linearSRGBTosRGB, getColorSpaceMethod( LinearSRGBColorSpace, SRGBColorSpace ) );
+		this.addColorSpace( sRGBToLinearSRGB, getColorSpaceMethod( SRGBColorSpace, LinearSRGBColorSpace ) );
+
+	}
+
+}
+
+export default StandardNodeLibrary;

package/src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -31,7 +31,7 @@ const supports = {
 };
 
 const wgslFnOpLib = {
-	'^^': 'threejs_xor'
+	'^^': 'tsl_xor'
 };
 
 const wgslTypeLib = {
@@ -72,55 +72,18 @@ const wgslTypeLib = {
 	bmat4: 'mat4x4<bool>'
 };
 
-const wgslMethods = {
-	dFdx: 'dpdx',
-	dFdy: '- dpdy',
-	mod_float: 'threejs_mod_float',
-	mod_vec2: 'threejs_mod_vec2',
-	mod_vec3: 'threejs_mod_vec3',
-	mod_vec4: 'threejs_mod_vec4',
-	equals_bool: 'threejs_equals_bool',
-	equals_bvec2: 'threejs_equals_bvec2',
-	equals_bvec3: 'threejs_equals_bvec3',
-	equals_bvec4: 'threejs_equals_bvec4',
-	lessThanEqual: 'threejs_lessThanEqual',
-	greaterThan: 'threejs_greaterThan',
-	inversesqrt: 'inverseSqrt',
-	bitcast: 'bitcast<f32>'
-};
-
 const wgslPolyfill = {
-	threejs_xor: new CodeNode( `
-fn threejs_xor( a : bool, b : bool ) -> bool {
-
-	return ( a || b ) && !( a && b );
-
-}
-` ),
-	lessThanEqual: new CodeNode( `
-fn threejs_lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
-
-	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
-
-}
-` ),
-	greaterThan: new CodeNode( `
-fn threejs_greaterThan( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
-
-	return vec3<bool>( a.x > b.x, a.y > b.y, a.z > b.z );
-
-}
-` ),
-	mod_float: new CodeNode( 'fn threejs_mod_float( x : f32, y : f32 ) -> f32 { return x - y * floor( x / y ); }' ),
-	mod_vec2: new CodeNode( 'fn threejs_mod_vec2( x : vec2f, y : vec2f ) -> vec2f { return x - y * floor( x / y ); }' ),
-	mod_vec3: new CodeNode( 'fn threejs_mod_vec3( x : vec3f, y : vec3f ) -> vec3f { return x - y * floor( x / y ); }' ),
-	mod_vec4: new CodeNode( 'fn threejs_mod_vec4( x : vec4f, y : vec4f ) -> vec4f { return x - y * floor( x / y ); }' ),
-	equals_bool: new CodeNode( 'fn threejs_equals_bool( a : bool, b : bool ) -> bool { return a == b; }' ),
-	equals_bvec2: new CodeNode( 'fn threejs_equals_bvec2( a : vec2f, b : vec2f ) -> vec2<bool> { return vec2<bool>( a.x == b.x, a.y == b.y ); }' ),
-	equals_bvec3: new CodeNode( 'fn threejs_equals_bvec3( a : vec3f, b : vec3f ) -> vec3<bool> { return vec3<bool>( a.x == b.x, a.y == b.y, a.z == b.z ); }' ),
-	equals_bvec4: new CodeNode( 'fn threejs_equals_bvec4( a : vec4f, b : vec4f ) -> vec4<bool> { return vec4<bool>( a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w ); }' ),
+	tsl_xor: new CodeNode( 'fn tsl_xor( a : bool, b : bool ) -> bool { return ( a || b ) && !( a && b ); }' ),
+	mod_float: new CodeNode( 'fn tsl_mod_float( x : f32, y : f32 ) -> f32 { return x - y * floor( x / y ); }' ),
+	mod_vec2: new CodeNode( 'fn tsl_mod_vec2( x : vec2f, y : vec2f ) -> vec2f { return x - y * floor( x / y ); }' ),
+	mod_vec3: new CodeNode( 'fn tsl_mod_vec3( x : vec3f, y : vec3f ) -> vec3f { return x - y * floor( x / y ); }' ),
+	mod_vec4: new CodeNode( 'fn tsl_mod_vec4( x : vec4f, y : vec4f ) -> vec4f { return x - y * floor( x / y ); }' ),
+	equals_bool: new CodeNode( 'fn tsl_equals_bool( a : bool, b : bool ) -> bool { return a == b; }' ),
+	equals_bvec2: new CodeNode( 'fn tsl_equals_bvec2( a : vec2f, b : vec2f ) -> vec2<bool> { return vec2<bool>( a.x == b.x, a.y == b.y ); }' ),
+	equals_bvec3: new CodeNode( 'fn tsl_equals_bvec3( a : vec3f, b : vec3f ) -> vec3<bool> { return vec3<bool>( a.x == b.x, a.y == b.y, a.z == b.z ); }' ),
+	equals_bvec4: new CodeNode( 'fn tsl_equals_bvec4( a : vec4f, b : vec4f ) -> vec4<bool> { return vec4<bool>( a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w ); }' ),
 	repeatWrapping: new CodeNode( `
-fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
+fn tsl_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
 	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
 
@@ -129,9 +92,10 @@ fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32>
 }
 ` ),
 	biquadraticTexture: new CodeNode( `
-fn threejs_biquadraticTexture( map : texture_2d<f32>, coord : vec2f, level : i32 ) -> vec4f {
+fn tsl_biquadraticTexture( map : texture_2d<f32>, coord : vec2f, level : i32 ) -> vec4f {
 
-	let res = vec2f( textureDimensions( map, level ) );
+	let iRes = vec2i( textureDimensions( map, level ) );
+	let res = vec2f( iRes );
 
 	let uvScaled = coord * res;
 	let uvWrapping = ( ( uvScaled % res ) + res ) % res;
@@ -142,10 +106,10 @@ fn threejs_biquadraticTexture( map : texture_2d<f32>, coord : vec2f, level : i32
 	let iuv = floor( uv );
 	let f = fract( uv );
 
-	let rg1 = textureLoad( map, vec2i( iuv + vec2( 0.5, 0.5 ) ), level );
-	let rg2 = textureLoad( map, vec2i( iuv + vec2( 1.5, 0.5 ) ), level );
-	let rg3 = textureLoad( map, vec2i( iuv + vec2( 0.5, 1.5 ) ), level );
-	let rg4 = textureLoad( map, vec2i( iuv + vec2( 1.5, 1.5 ) ), level );
+	let rg1 = textureLoad( map, vec2i( iuv + vec2( 0.5, 0.5 ) ) % iRes, level );
+	let rg2 = textureLoad( map, vec2i( iuv + vec2( 1.5, 0.5 ) ) % iRes, level );
+	let rg3 = textureLoad( map, vec2i( iuv + vec2( 0.5, 1.5 ) ) % iRes, level );
+	let rg4 = textureLoad( map, vec2i( iuv + vec2( 1.5, 1.5 ) ) % iRes, level );
 
 	return mix( mix( rg1, rg2, f.x ), mix( rg3, rg4, f.x ), f.y );
 
@@ -153,6 +117,49 @@ fn threejs_biquadraticTexture( map : texture_2d<f32>, coord : vec2f, level : i32
 ` )
 };
 
+const wgslMethods = {
+	dFdx: 'dpdx',
+	dFdy: '- dpdy',
+	mod_float: 'tsl_mod_float',
+	mod_vec2: 'tsl_mod_vec2',
+	mod_vec3: 'tsl_mod_vec3',
+	mod_vec4: 'tsl_mod_vec4',
+	equals_bool: 'tsl_equals_bool',
+	equals_bvec2: 'tsl_equals_bvec2',
+	equals_bvec3: 'tsl_equals_bvec3',
+	equals_bvec4: 'tsl_equals_bvec4',
+	inversesqrt: 'inverseSqrt',
+	bitcast: 'bitcast<f32>'
+};
+
+// WebGPU issue: does not support pow() with negative base on Windows
+
+if ( /Windows/g.test( navigator.userAgent ) ) {
+
+	wgslPolyfill.pow_float = new CodeNode( 'fn tsl_pow_float( a : f32, b : f32 ) -> f32 { return select( -pow( -a, b ), pow( a, b ), a > 0.0 ); }' );
+	wgslPolyfill.pow_vec2 = new CodeNode( 'fn tsl_pow_vec2( a : vec2f, b : vec2f ) -> vec2f { return vec2f( tsl_pow_float( a.x, b.x ), tsl_pow_float( a.y, b.y ) ); }', [ wgslPolyfill.pow_float ] );
+	wgslPolyfill.pow_vec3 = new CodeNode( 'fn tsl_pow_vec3( a : vec3f, b : vec3f ) -> vec3f { return vec3f( tsl_pow_float( a.x, b.x ), tsl_pow_float( a.y, b.y ), tsl_pow_float( a.z, b.z ) ); }', [ wgslPolyfill.pow_float ] );
+	wgslPolyfill.pow_vec4 = new CodeNode( 'fn tsl_pow_vec4( a : vec4f, b : vec4f ) -> vec4f { return vec4f( tsl_pow_float( a.x, b.x ), tsl_pow_float( a.y, b.y ), tsl_pow_float( a.z, b.z ), tsl_pow_float( a.w, b.w ) ); }', [ wgslPolyfill.pow_float ] );
+
+	wgslMethods.pow_float = 'tsl_pow_float';
+	wgslMethods.pow_vec2 = 'tsl_pow_vec2';
+	wgslMethods.pow_vec3 = 'tsl_pow_vec3';
+	wgslMethods.pow_vec4 = 'tsl_pow_vec4';
+
+}
+
+//
+
+let diagnostics = '';
+
+if ( /Firefox/g.test( navigator.userAgent ) !== true ) {
+
+	diagnostics += 'diagnostic( off, derivative_uniformity );\n';
+
+}
+
+//
+
 class WGSLNodeBuilder extends NodeBuilder {
 
 	constructor( object, renderer ) {
@@ -165,9 +172,11 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 		this.directives = {};
 
+		this.scopedArrays = new Map();
+
 	}
 
-	needsColorSpaceToLinear( texture ) {
+	needsToWorkingColorSpace( texture ) {
 
 		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
 
@@ -235,7 +244,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 		this._include( 'biquadraticTexture' );
 
-		return `threejs_biquadraticTexture( ${ textureProperty }, ${ uvSnippet }, i32( ${ levelSnippet } ) )`;
+		return `tsl_biquadraticTexture( ${ textureProperty }, ${ uvSnippet }, i32( ${ levelSnippet } ) )`;
 
 	}
 
@@ -245,7 +254,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 		const dimension = texture.isMultisampleRenderTargetTexture === true ? `textureDimensions( ${ textureProperty } )` : `textureDimensions( ${ textureProperty }, 0 )`;
 
-		return `textureLoad( ${ textureProperty }, threejs_repeatWrapping( ${ uvSnippet }, ${ dimension } ), i32( ${ levelSnippet } ) )`;
+		return `textureLoad( ${ textureProperty }, tsl_repeatWrapping( ${ uvSnippet }, ${ dimension } ), i32( ${ levelSnippet } ) )`;
 
 	}
 
@@ -271,7 +280,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 	isUnfilterable( texture ) {
 
-		return this.getComponentTypeFromTexture( texture ) !== 'float' || ( texture.isDataTexture === true && texture.type === FloatType ) || texture.isMultisampleRenderTargetTexture === true;
+		return this.getComponentTypeFromTexture( texture ) !== 'float' || ( ! this.isAvailable( 'float32Filterable' ) && texture.isDataTexture === true && texture.type === FloatType ) || texture.isMultisampleRenderTargetTexture === true;
 
 	}
 
@@ -575,6 +584,12 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 	}
 
+	hasBuiltin( name, shaderStage = this.shaderStage ) {
+
+		return ( this.builtins[ shaderStage ] !== undefined && this.builtins[ shaderStage ].has( name ) );
+
+	}
+
 	getVertexIndex() {
 
 		if ( this.shaderStage === 'vertex' ) {
@@ -602,12 +617,18 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 		//
 
-		const code = `fn ${ layout.name }( ${ parameters.join( ', ' ) } ) -> ${ this.getType( layout.type ) } {
+		let code = `fn ${ layout.name }( ${ parameters.join( ', ' ) } ) -> ${ this.getType( layout.type ) } {
 ${ flowData.vars }
 ${ flowData.code }
-	return ${ flowData.result };
+`;
+
+		if ( flowData.result ) {
+
+			code += `\treturn ${ flowData.result };\n`;
+
+		}
 
-}`;
+		code += '\n}\n';
 
 		//
 
@@ -627,6 +648,36 @@ ${ flowData.code }
 
 	}
 
+	getInvocationLocalIndex() {
+
+		return this.getBuiltin( 'local_invocation_index', 'invocationLocalIndex', 'u32', 'attribute' );
+
+	}
+
+	getSubgroupSize() {
+
+		this.enableSubGroups();
+
+		return this.getBuiltin( 'subgroup_size', 'subgroupSize', 'u32', 'attribute' );
+
+	}
+
+	getInvocationSubgroupIndex() {
+
+		this.enableSubGroups();
+
+		return this.getBuiltin( 'subgroup_invocation_id', 'invocationSubgroupIndex', 'u32', 'attribute' );
+
+	}
+
+	getSubgroupIndex() {
+
+		this.enableSubGroups();
+
+		return this.getBuiltin( 'subgroup_id', 'subgroupIndex', 'u32', 'attribute' );
+
+	}
+
 	getDrawIndex() {
 
 		return null;
@@ -641,7 +692,7 @@ ${ flowData.code }
 
 	getFragCoord() {
 
-		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xyz';
+		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xy';
 
 	}
 
@@ -659,8 +710,8 @@ ${ flowData.code }
 
 	enableDirective( name, shaderStage = this.shaderStage ) {
 
-		const stage = this.directives[ shaderStage ] || ( this.directives[ shaderStage ] = [] );
-		stage.push( name );
+		const stage = this.directives[ shaderStage ] || ( this.directives[ shaderStage ] = new Set() );
+		stage.add( name );
 
 	}
 
@@ -673,7 +724,7 @@ ${ flowData.code }
 
 			for ( const directive of directives ) {
 
-				snippets.push( `enable ${directive}` );
+				snippets.push( `enable ${directive};` );
 
 			}
 
@@ -683,6 +734,18 @@ ${ flowData.code }
 
 	}
 
+	enableSubGroups() {
+
+		this.enableDirective( 'subgroups' );
+
+	}
+
+	enableSubgroupsF16() {
+
+		this.enableDirective( 'subgroups-f16' );
+
+	}
+
 	enableClipDistances() {
 
 		this.enableDirective( 'clip_distances' );
@@ -720,6 +783,45 @@ ${ flowData.code }
 
 	}
 
+	getScopedArray( name, scope, bufferType, bufferCount ) {
+
+		if ( this.scopedArrays.has( name ) === false ) {
+
+			this.scopedArrays.set( name, {
+				name,
+				scope,
+				bufferType,
+				bufferCount
+			} );
+
+		}
+
+		return name;
+
+	}
+
+	getScopedArrays( shaderStage ) {
+
+		if ( shaderStage !== 'compute' ) {
+
+			return;
+
+		}
+
+		const snippets = [];
+
+		for ( const { name, scope, bufferType, bufferCount } of this.scopedArrays.values() ) {
+
+			const type = this.getType( bufferType );
+
+			snippets.push( `var<${scope}> ${name}: array< ${type}, ${bufferCount} >;` );
+
+		}
+
+		return snippets.join( '\n' );
+
+	}
+
 	getAttributes( shaderStage ) {
 
 		const snippets = [];
@@ -731,6 +833,13 @@ ${ flowData.code }
 			this.getBuiltin( 'local_invocation_id', 'localId', 'vec3<u32>', 'attribute' );
 			this.getBuiltin( 'num_workgroups', 'numWorkgroups', 'vec3<u32>', 'attribute' );
 
+			if ( this.renderer.hasFeature( 'subgroups' ) ) {
+
+				this.enableDirective( 'subgroups', shaderStage );
+				this.getBuiltin( 'subgroup_size', 'subgroupSize', 'u32', 'attribute' );
+
+			}
+
 		}
 
 		if ( shaderStage === 'vertex' || shaderStage === 'compute' ) {
@@ -771,7 +880,7 @@ ${ flowData.code }
 
 		const builtins = this.getBuiltins( 'output' );
 
-		if ( builtins ) snippets.push( builtins );
+		if ( builtins ) snippets.push( '\t' + builtins );
 
 		return snippets.join( ',\n' );
 
@@ -890,8 +999,8 @@ ${ flowData.code }
 
 		for ( const uniform of uniforms ) {
 
-			const groundName = uniform.groupNode.name;
-			const uniformIndexes = this.bindingsIndexes[ groundName ];
+			const groupName = uniform.groupNode.name;
+			const uniformIndexes = this.bindingsIndexes[ groupName ];
 
 			if ( uniform.type === 'texture' || uniform.type === 'cubeTexture' || uniform.type === 'storageTexture' || uniform.type === 'texture3D' ) {
 
@@ -925,7 +1034,7 @@ ${ flowData.code }
 
 					textureType = 'texture_cube<f32>';
 
-				} else if ( texture.isDataArrayTexture === true ) {
+				} else if ( texture.isDataArrayTexture === true || texture.isCompressedArrayTexture === true ) {
 
 					textureType = 'texture_2d_array<f32>';
 
@@ -965,7 +1074,8 @@ ${ flowData.code }
 				const bufferCount = bufferNode.bufferCount;
 
 				const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
-				const bufferSnippet = `\t${ uniform.name } : array< ${ bufferType }${ bufferCountSnippet } >\n`;
+				const bufferTypeSnippet = bufferNode.isAtomic ? `atomic<${bufferType}>` : `${bufferType}`;
+				const bufferSnippet = `\t${ uniform.name } : array< ${ bufferTypeSnippet }${ bufferCountSnippet } >\n`;
 				const bufferAccessMode = bufferNode.isStorageBufferNode ? `storage, ${ this.getStorageAccess( bufferNode ) }` : 'uniform';
 
 				bufferSnippets.push( this._getWGSLStructBinding( 'NodeBuffer_' + bufferNode.id, bufferSnippet, bufferAccessMode, uniformIndexes.binding ++, uniformIndexes.group ) );
@@ -1007,6 +1117,8 @@ ${ flowData.code }
 
 		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
 
+		this.sortBindingGroups();
+
 		for ( const shaderStage in shadersData ) {
 
 			const stageData = shadersData[ shaderStage ];
@@ -1017,6 +1129,7 @@ ${ flowData.code }
 			stageData.vars = this.getVars( shaderStage );
 			stageData.codes = this.getCodes( shaderStage );
 			stageData.directives = this.getDirectives( shaderStage );
+			stageData.scopedArrays = this.getScopedArrays( shaderStage );
 
 			//
 
@@ -1177,7 +1290,7 @@ ${ flowData.code }
 
 		return `${ this.getSignature() }
 // directives
-${shaderData.directives};
+${shaderData.directives}
 
 // uniforms
 ${shaderData.uniforms}
@@ -1208,8 +1321,8 @@ fn main( ${shaderData.attributes} ) -> VaryingsStruct {
 	_getWGSLFragmentCode( shaderData ) {
 
 		return `${ this.getSignature() }
-
-diagnostic( off, derivative_uniformity );
+// global
+${ diagnostics }
 
 // uniforms
 ${shaderData.uniforms}
@@ -1243,6 +1356,9 @@ ${shaderData.directives}
 // system
 var<private> instanceIndex : u32;
 
+// locals
+${shaderData.scopedArrays}
+
 // uniforms
 ${shaderData.uniforms}
 

package/src/renderers/webgpu/utils/WebGPUAttributeUtils.js

@@ -224,22 +224,12 @@ class WebGPUAttributeUtils {
 		const bufferGPU = data.buffer;
 		const size = bufferGPU.size;
 
-		let readBufferGPU = data.readBuffer;
-		let needsUnmap = true;
+		const readBufferGPU = device.createBuffer( {
+			label: attribute.name,
+			size,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+		} );
 
-		if ( readBufferGPU === undefined ) {
-
-			readBufferGPU = device.createBuffer( {
-				label: attribute.name,
-				size,
-				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-			} );
-
-			needsUnmap = false;
-
-			data.readBuffer = readBufferGPU;
-
-		}
 
 		const cmdEncoder = device.createCommandEncoder( {} );
 
@@ -251,7 +241,7 @@ class WebGPUAttributeUtils {
 			size
 		);
 
-		if ( needsUnmap ) readBufferGPU.unmap();
+		readBufferGPU.unmap();
 
 		const gpuCommands = cmdEncoder.finish();
 		device.queue.submit( [ gpuCommands ] );