super-three 0.136.1 → 0.144.0

package/examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -1,48 +1,63 @@
-import { LinearEncoding } from 'three';
-
-import WebGPUNodeUniformsGroup from './WebGPUNodeUniformsGroup.js';
+import WebGPUUniformsGroup from '../WebGPUUniformsGroup.js';
 import {
 	FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,
 	ColorNodeUniform, Matrix3NodeUniform, Matrix4NodeUniform
 } from './WebGPUNodeUniform.js';
 import WebGPUNodeSampler from './WebGPUNodeSampler.js';
-import { WebGPUNodeSampledTexture } from './WebGPUNodeSampledTexture.js';
+import { WebGPUNodeSampledTexture, WebGPUNodeSampledCubeTexture } from './WebGPUNodeSampledTexture.js';
 
 import WebGPUUniformBuffer from '../WebGPUUniformBuffer.js';
+import WebGPUStorageBuffer from '../WebGPUStorageBuffer.js';
 import { getVectorLength, getStrideLength } from '../WebGPUBufferUtils.js';
 
-import VarNode from '../../nodes/core/VarNode.js';
-import CodeNode from '../../nodes/core/CodeNode.js';
-import BypassNode from '../../nodes/core/BypassNode.js';
-import ExpressionNode from '../../nodes/core/ExpressionNode.js';
-import NodeBuilder from '../../nodes/core/NodeBuilder.js';
-import MaterialNode from '../../nodes/accessors/MaterialNode.js';
-import PositionNode from '../../nodes/accessors/PositionNode.js';
-import NormalNode from '../../nodes/accessors/NormalNode.js';
-import ModelViewProjectionNode from '../../nodes/accessors/ModelViewProjectionNode.js';
-import SkinningNode from '../../nodes/accessors/SkinningNode.js';
-import ColorSpaceNode from '../../nodes/display/ColorSpaceNode.js';
-import LightContextNode from '../../nodes/lights/LightContextNode.js';
-import OperatorNode from '../../nodes/math/OperatorNode.js';
-import WGSLNodeParser from '../../nodes/parsers/WGSLNodeParser.js';
-import { vec4, join, nodeObject } from '../../nodes/ShaderNode.js';
-import { getRoughness } from '../../nodes/functions/PhysicalMaterialFunctions.js';
+import { NodeBuilder, WGSLNodeParser, CodeNode, NodeMaterial } from 'three/nodes';
+
+const gpuShaderStageLib = {
+	'vertex': GPUShaderStage.VERTEX,
+	'fragment': GPUShaderStage.FRAGMENT,
+	'compute': GPUShaderStage.COMPUTE
+};
+
+const supports = {
+	instance: true
+};
 
 const wgslTypeLib = {
 	float: 'f32',
 	int: 'i32',
+	uint: 'u32',
+	bool: 'bool',
+
 	vec2: 'vec2<f32>',
+	ivec2: 'vec2<i32>',
+	uvec2: 'vec2<u32>',
+	bvec2: 'vec2<bool>',
+
 	vec3: 'vec3<f32>',
+	ivec3: 'vec3<i32>',
+	uvec3: 'vec3<u32>',
+	bvec3: 'vec3<bool>',
+
 	vec4: 'vec4<f32>',
+	ivec4: 'vec4<i32>',
 	uvec4: 'vec4<u32>',
-	bvec3: 'vec3<bool>',
+	bvec4: 'vec4<bool>',
+
 	mat3: 'mat3x3<f32>',
-	mat4: 'mat4x4<f32>'
+	imat3: 'mat3x3<i32>',
+	umat3: 'mat3x3<u32>',
+	bmat3: 'mat3x3<bool>',
+
+	mat4: 'mat4x4<f32>',
+	imat4: 'mat4x4<i32>',
+	umat4: 'mat4x4<u32>',
+	bmat4: 'mat4x4<bool>'
 };
 
 const wgslMethods = {
 	dFdx: 'dpdx',
-	dFdy: 'dpdy'
+	dFdy: 'dpdy',
+	inversesqrt: 'inverseSqrt'
 };
 
 const wgslPolyfill = {
@@ -67,263 +82,127 @@ fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
 
 	return ( ( uvScaled % dimension ) + dimension ) % dimension;
 
-}
-` ),
-	inversesqrt: new CodeNode( `
-fn inversesqrt( x : f32 ) -> f32 {
-
-	return 1.0 / sqrt( x );
-
 }
 ` )
 };
 
 class WebGPUNodeBuilder extends NodeBuilder {
 
-	constructor( object, renderer, lightNode = null ) {
+	constructor( object, renderer ) {
 
 		super( object, renderer, new WGSLNodeParser() );
 
-		this.lightNode = lightNode;
-
-		this.bindings = { vertex: [], fragment: [] };
-		this.bindingsOffset = { vertex: 0, fragment: 0 };
+		this.bindings = { vertex: [], fragment: [], compute: [] };
+		this.bindingsOffset = { vertex: 0, fragment: 0, compute: 0 };
 
 		this.uniformsGroup = {};
 
-		this._parseObject();
+		this.builtins = {
+			vertex: new Map(),
+			fragment: new Map(),
+			compute: new Map(),
+			attribute: new Map()
+		};
 
 	}
 
-	_parseObject() {
-
-		const object = this.object;
-		const material = this.material;
-
-		// parse inputs
-
-		if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
-
-			let lightNode = material.lightNode;
-
-			// VERTEX STAGE
-
-			let vertex = new PositionNode( PositionNode.GEOMETRY );
-
-			if ( lightNode === null && this.lightNode && this.lightNode.hasLights === true ) {
-
-				lightNode = this.lightNode;
-
-			}
-
-			if ( material.positionNode && material.positionNode.isNode ) {
-
-				const assignPositionNode = new OperatorNode( '=', new PositionNode( PositionNode.LOCAL ), material.positionNode );
-
-				vertex = new BypassNode( vertex, assignPositionNode );
-
-			}
-
-			if ( object.isSkinnedMesh === true ) {
-
-				vertex = new BypassNode( vertex, new SkinningNode( object ) );
-
-			}
-
-			this.context.vertex = vertex;
-
-			this.addFlow( 'vertex', new VarNode( new ModelViewProjectionNode(), 'MVP', 'vec4' ) );
-
-			// COLOR
-
-			let colorNode = null;
-
-			if ( material.colorNode && material.colorNode.isNode ) {
-
-				colorNode = material.colorNode;
-
-			} else {
-
-				colorNode = new MaterialNode( MaterialNode.COLOR );
-
-			}
-
-			colorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'Color', 'vec4' ) );
-
-			const diffuseColorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );
-
-			// OPACITY
-
-			let opacityNode = null;
-
-			if ( material.opacityNode && material.opacityNode.isNode ) {
-
-				opacityNode = material.opacityNode;
-
-			} else {
-
-				opacityNode = new VarNode( new MaterialNode( MaterialNode.OPACITY ) );
-
-			}
-
-			this.addFlow( 'fragment', new VarNode( opacityNode, 'OPACITY', 'float' ) );
-
-			this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor.a = DiffuseColor.a * OPACITY;' ) );
+	build() {
 
-			// ALPHA TEST
+		const { object, material } = this;
 
-			let alphaTest = null;
+		if ( material !== null ) {
 
-			if ( material.alphaTestNode && material.alphaTestNode.isNode ) {
+			NodeMaterial.fromMaterial( material ).build( this );
 
-				alphaTest = material.alphaTestNode;
-
-			} else if ( material.alphaTest > 0 ) {
-
-				alphaTest = new MaterialNode( MaterialNode.ALPHA_TEST );
-
-			}
-
-			if ( alphaTest !== null ) {
-
-				this.addFlow( 'fragment', new VarNode( alphaTest, 'AlphaTest', 'float' ) );
-
-				this.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );
-
-			}
-
-			if ( material.isMeshStandardMaterial ) {
-
-				// METALNESS
-
-				let metalnessNode = null;
-
-				if ( material.metalnessNode && material.metalnessNode.isNode ) {
-
-					metalnessNode = material.metalnessNode;
-
-				} else {
-
-					metalnessNode = new MaterialNode( MaterialNode.METALNESS );
-
-				}
-
-				this.addFlow( 'fragment', new VarNode( metalnessNode, 'Metalness', 'float' ) );
-
-				this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor = vec4<f32>( DiffuseColor.rgb * ( 1.0 - Metalness ), DiffuseColor.a );' ) );
-
-				// ROUGHNESS
-
-				let roughnessNode = null;
-
-				if ( material.roughnessNode && material.roughnessNode.isNode ) {
-
-					roughnessNode = material.roughnessNode;
-
-				} else {
-
-					roughnessNode = new MaterialNode( MaterialNode.ROUGHNESS );
-
-				}
-
-				roughnessNode = getRoughness( { roughness: roughnessNode } );
-
-				this.addFlow( 'fragment', new VarNode( roughnessNode, 'Roughness', 'float' ) );
+		} else {
 
-				// SPECULAR_TINT
+			this.addFlow( 'compute', object );
 
-				this.addFlow( 'fragment', new VarNode( new ExpressionNode( 'mix( vec3<f32>( 0.04 ), Color.rgb, Metalness )', 'vec3' ), 'SpecularColor', 'color' ) );
+		}
 
-				// NORMAL_VIEW
+		return super.build();
 
-				let normalNode = null;
+	}
 
-				if ( material.normalNode && material.normalNode.isNode ) {
+	addFlowCode( code ) {
 
-					normalNode = material.normalNode;
+		if ( ! /;\s*$/.test( code ) ) {
 
-				} else {
+			code += ';';
 
-					normalNode = new NormalNode( NormalNode.VIEW );
+		}
 
-				}
+		super.addFlowCode( code + '\n\t' );
 
-				this.addFlow( 'fragment', new VarNode( normalNode, 'TransformedNormalView', 'vec3' ) );
+	}
 
-			}
+	getSampler( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
-			// LIGHT
+		if ( shaderStage === 'fragment' ) {
 
-			let outputNode = diffuseColorNode;
+			return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;
 
-			if ( lightNode && lightNode.isNode ) {
+		} else {
 
-				const lightContextNode = new LightContextNode( lightNode );
+			this._include( 'repeatWrapping' );
 
-				outputNode = this.addFlow( 'fragment', new VarNode( lightContextNode, 'Light', 'vec3' ) );
+			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			}
+			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
 
-			// RESULT
+		}
 
-			const outputNodeObj = nodeObject( outputNode );
+	}
 
-			outputNode = join( outputNodeObj.x, outputNodeObj.y, outputNodeObj.z, nodeObject( diffuseColorNode ).w );
+	getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
-			//
+		if ( shaderStage === 'fragment' ) {
 
-			const outputEncoding = this.renderer.outputEncoding;
+			return `textureSampleLevel( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet}, ${biasSnippet} )`;
 
-			if ( outputEncoding !== LinearEncoding ) {
+		} else {
 
-				outputNode = new ColorSpaceNode( ColorSpaceNode.LINEAR_TO_LINEAR, outputNode );
-				outputNode.fromEncoding( outputEncoding );
+			this._include( 'repeatWrapping' );
 
-			}
+			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			this.addFlow( 'fragment', new VarNode( outputNode, 'Output', 'vec4' ) );
+			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
 
 		}
 
 	}
 
-	addFlowCode( code ) {
-
-		if ( ! /;\s*$/.test( code ) ) {
-
-			code += ';';
-
-		}
+	getTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
-		super.addFlowCode( code + '\n\t' );
+		return this.getSampler( textureProperty, uvSnippet, shaderStage );
 
 	}
 
-	getTexture( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
+	getTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
-		if ( shaderStage === 'fragment' ) {
+		return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
 
-			return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;
+	}
 
-		} else {
+	getCubeTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
 
-			this._include( 'repeatWrapping' );
+		return this.getSampler( textureProperty, uvSnippet, shaderStage );
 
-			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
+	}
 
-			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
+	getCubeTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
-		}
+		return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
 
 	}
 
 	getPropertyName( node, shaderStage = this.shaderStage ) {
 
-		if ( node.isNodeVary === true ) {
+		if ( node.isNodeVarying === true ) {
 
 			if ( shaderStage === 'vertex' ) {
 
-				return `NodeVarys.${ node.name }`;
+				return `NodeVaryings.${ node.name }`;
 
 			}
 
@@ -332,13 +211,13 @@ class WebGPUNodeBuilder extends NodeBuilder {
 			const name = node.name;
 			const type = node.type;
 
-			if ( type === 'texture' ) {
+			if ( type === 'texture' || type === 'cubeTexture' ) {
 
 				return name;
 
-			} else if ( type === 'buffer' ) {
+			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
 
-				return `NodeBuffer.${name}`;
+				return `NodeBuffer_${node.node.id}.${name}`;
 
 			} else {
 
@@ -356,7 +235,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		const bindings = this.bindings;
 
-		return [ ...bindings.vertex, ...bindings.fragment ];
+		return this.material !== null ? [ ...bindings.vertex, ...bindings.fragment ] : bindings.compute;
 
 	}
 
@@ -371,10 +250,21 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			const bindings = this.bindings[ shaderStage ];
 
-			if ( type === 'texture' ) {
+			if ( type === 'texture' || type === 'cubeTexture' ) {
 
 				const sampler = new WebGPUNodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
-				const texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );
+
+				let texture = null;
+
+				if ( type === 'texture' ) {
+
+					texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );
+
+				} else if ( type === 'cubeTexture' ) {
+
+					texture = new WebGPUNodeSampledCubeTexture( uniformNode.name, uniformNode.node );
+
+				}
 
 				// add first textures in sequence and group for last
 				const lastBinding = bindings[ bindings.length - 1 ];
@@ -392,13 +282,13 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					uniformGPU = [ texture ];
 
-
 				}
 
+			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
 
-			} else if ( type === 'buffer' ) {
-
-				const buffer = new WebGPUUniformBuffer( 'NodeBuffer', node.value );
+				const bufferClass = type === 'storageBuffer' ? WebGPUStorageBuffer : WebGPUUniformBuffer;
+				const buffer = new bufferClass( 'NodeBuffer_' + node.id, node.value );
+				buffer.setVisibility( gpuShaderStageLib[ shaderStage ] );
 
 				// add first textures in sequence and group for last
 				const lastBinding = bindings[ bindings.length - 1 ];
@@ -414,7 +304,8 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				if ( uniformsGroup === undefined ) {
 
-					uniformsGroup = new WebGPUNodeUniformsGroup( shaderStage );
+					uniformsGroup = new WebGPUUniformsGroup( 'nodeUniforms' );
+					uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
 
 					this.uniformsGroup[ shaderStage ] = uniformsGroup;
 
@@ -422,13 +313,13 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				if ( node.isArrayInputNode === true ) {
+				if ( node.isArrayUniformNode === true ) {
 
 					uniformGPU = [];
 
-					for ( const inputNode of node.nodes ) {
+					for ( const uniformNode of node.nodes ) {
 
-						const uniformNodeGPU = this._getNodeUniform( inputNode, type );
+						const uniformNodeGPU = this._getNodeUniform( uniformNode, type );
 
 						// fit bounds to buffer
 						uniformNodeGPU.boundary = getVectorLength( uniformNodeGPU.itemSize );
@@ -464,107 +355,144 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	isReference( type ) {
+
+		return super.isReference( type ) || type === 'texture_2d' || type === 'texture_cube';
+
+	}
+
+	getBuiltin( name, property, type, shaderStage = this.shaderStage ) {
+
+		const map = this.builtins[ shaderStage ];
+
+		if ( map.has( name ) === false ) {
+
+			map.set( name, {
+				name,
+				property,
+				type
+			} );
+
+		}
+
+		return property;
+
+	}
+
+	getInstanceIndex() {
+
+		if ( this.shaderStage === 'vertex' ) {
+
+			return this.getBuiltin( 'instance_index', 'instanceIndex', 'u32', 'attribute' );
+
+		}
+
+		return 'instanceIndex';
+
+	}
+
+	getFrontFacing() {
+
+		return this.getBuiltin( 'front_facing', 'isFront', 'bool' );
+
+	}
+
 	getAttributes( shaderStage ) {
 
-		let snippet = '';
+		const snippets = [];
 
-		if ( shaderStage === 'vertex' ) {
+		if ( shaderStage === 'vertex' || shaderStage === 'compute' ) {
+
+			if ( shaderStage === 'compute' ) {
+
+				this.getBuiltin( 'global_invocation_id', 'id', 'vec3<u32>', 'attribute' );
+
+			}
+
+			for ( const { name, property, type } of this.builtins.attribute.values() ) {
+
+				snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
+
+			}
 
 			const attributes = this.attributes;
 			const length = attributes.length;
 
-			snippet += '\n';
-
 			for ( let index = 0; index < length; index ++ ) {
 
 				const attribute = attributes[ index ];
 				const name = attribute.name;
 				const type = this.getType( attribute.type );
 
-				snippet += `\t[[ location( ${index} ) ]] ${ name } : ${ type }`;
-
-				if ( index + 1 < length ) {
-
-					snippet += ',\n';
-
-				}
+				snippets.push( `@location( ${index} ) ${ name } : ${ type }` );
 
 			}
 
-			snippet += '\n';
-
 		}
 
-		return snippet;
+		return snippets.join( ',\n\t' );
 
 	}
 
 	getVars( shaderStage ) {
 
-		let snippet = '';
-
+		const snippets = [];
 		const vars = this.vars[ shaderStage ];
 
-		for ( let index = 0; index < vars.length; index ++ ) {
-
-			const variable = vars[ index ];
+		for ( const variable of vars ) {
 
 			const name = variable.name;
 			const type = this.getType( variable.type );
 
-			snippet += `var ${name} : ${type}; `;
+			snippets.push( `\tvar ${name} : ${type};` );
 
 		}
 
-		return snippet;
+		return `\n${ snippets.join( '\n' ) }\n`;
 
 	}
 
-	getVarys( shaderStage ) {
+	getVaryings( shaderStage ) {
 
-		let snippet = '';
+		const snippets = [];
 
 		if ( shaderStage === 'vertex' ) {
 
-			snippet += '\t[[ builtin( position ) ]] Vertex: vec4<f32>;\n';
+			this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
 
-			const varys = this.varys;
+			const varyings = this.varyings;
 
-			for ( let index = 0; index < varys.length; index ++ ) {
+			for ( let index = 0; index < varyings.length; index ++ ) {
 
-				const vary = varys[ index ];
+				const varying = varyings[ index ];
 
-				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) };\n`;
+				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
 
 			}
 
-			snippet = this._getWGSLStruct( 'NodeVarysStruct', snippet );
-
 		} else if ( shaderStage === 'fragment' ) {
 
-			const varys = this.varys;
+			const varyings = this.varyings;
 
-			snippet += '\n';
+			for ( let index = 0; index < varyings.length; index ++ ) {
 
-			for ( let index = 0; index < varys.length; index ++ ) {
+				const varying = varyings[ index ];
 
-				const vary = varys[ index ];
+				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
 
-				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) }`;
-
-				if ( index + 1 < varys.length ) {
+			}
 
-					snippet += ',\n';
+		}
 
-				}
+		for ( const { name, property, type } of this.builtins[ shaderStage ].values() ) {
 
-			}
-
-			snippet += '\n';
+			snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
 
 		}
 
-		return snippet;
+		const code = snippets.join( ',\n\t' );
+
+		return shaderStage === 'vertex' ? this._getWGSLStruct( 'NodeVaryingsStruct', '\t' + code ) : code;
 
 	}
 
@@ -572,8 +500,9 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		const uniforms = this.uniforms[ shaderStage ];
 
-		let snippet = '';
-		let groupSnippet = '';
+		const bindingSnippets = [];
+		const bufferSnippets = [];
+		const groupSnippets = [];
 
 		let index = this.bindingsOffset[ shaderStage ];
 
@@ -583,21 +512,33 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				if ( shaderStage === 'fragment' ) {
 
-					snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name}_sampler : sampler; `;
+					bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler;` );
+
+				}
+
+				bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_2d<f32>;` );
+
+			} else if ( uniform.type === 'cubeTexture' ) {
+
+				if ( shaderStage === 'fragment' ) {
+
+					bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler;` );
 
 				}
 
-				snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name} : texture_2d<f32>; `;
+				bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_cube<f32>;` );
 
-			} else if ( uniform.type === 'buffer' ) {
+			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
 
 				const bufferNode = uniform.node;
 				const bufferType = this.getType( bufferNode.bufferType );
 				const bufferCount = bufferNode.bufferCount;
 
-				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}, ${bufferCount} >;\n`;
+				const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
+				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}${bufferCountSnippet} >\n`;
+				const bufferAccessMode = bufferNode.isStorageBufferNode ? 'storage,read_write' : 'uniform';
 
-				snippet += this._getWGSLUniforms( 'NodeBuffer', bufferSnippet, index ++ ) + '\n\n';
+				bufferSnippets.push( this._getWGSLStructBinding( 'NodeBuffer_' + bufferNode.id, bufferSnippet, bufferAccessMode, index ++ ) );
 
 			} else {
 
@@ -607,11 +548,11 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					const length = uniform.value.length;
 
-					groupSnippet += `uniform ${vectorType}[ ${length} ] ${uniform.name}; `;
+					groupSnippets.push( `uniform ${vectorType}[ ${length} ] ${uniform.name}` );
 
 				} else {
 
-					groupSnippet += `\t${uniform.name} : ${ vectorType};\n`;
+					groupSnippets.push( `\t${uniform.name} : ${ vectorType}` );
 
 				}
 
@@ -619,32 +560,35 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		}
 
-		if ( groupSnippet ) {
+		let code = bindingSnippets.join( '\n' );
+		code += bufferSnippets.join( '\n' );
 
-			snippet += this._getWGSLUniforms( 'NodeUniforms', groupSnippet, index ++ );
+		if ( groupSnippets.length > 0 ) {
+
+			code += this._getWGSLStructBinding( 'NodeUniforms', groupSnippets.join( ',\n' ), 'uniform', index ++ );
 
 		}
 
-		return snippet;
+		return code;
 
 	}
 
 	buildCode() {
 
-		const shadersData = { fragment: {}, vertex: {} };
+		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
 
 		for ( const shaderStage in shadersData ) {
 
 			let flow = '// code\n';
 			flow += `\t${ this.flowCode[ shaderStage ] }`;
-			flow += '\n';
+			flow += '\n\t';
 
 			const flowNodes = this.flowNodes[ shaderStage ];
 			const mainNode = flowNodes[ flowNodes.length - 1 ];
 
 			for ( const node of flowNodes ) {
 
-				const flowSlotData = this.getFlowData( shaderStage, node );
+				const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
 				const slotName = node.name;
 
 				if ( slotName ) {
@@ -657,13 +601,13 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				flow += `${ flowSlotData.code }\n\t`;
 
-				if ( node === mainNode ) {
+				if ( node === mainNode && shaderStage !== 'compute' ) {
 
 					flow += '// FLOW RESULT\n\t';
 
 					if ( shaderStage === 'vertex' ) {
 
-						flow += 'NodeVarys.Vertex = ';
+						flow += 'NodeVaryings.Vertex = ';
 
 					} else if ( shaderStage === 'fragment' ) {
 
@@ -681,15 +625,23 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			stageData.uniforms = this.getUniforms( shaderStage );
 			stageData.attributes = this.getAttributes( shaderStage );
-			stageData.varys = this.getVarys( shaderStage );
+			stageData.varyings = this.getVaryings( shaderStage );
 			stageData.vars = this.getVars( shaderStage );
 			stageData.codes = this.getCodes( shaderStage );
 			stageData.flow = flow;
 
 		}
 
-		this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
-		this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
+		if ( this.material !== null ) {
+
+			this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
+			this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
+
+		} else {
+
+			this.computeShader = this._getWGSLComputeCode( shadersData.compute, ( this.object.workgroupSize || [ 64 ] ).join( ', ' ) );
+
+		}
 
 	}
 
@@ -711,6 +663,12 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	isAvailable( name ) {
+
+		return supports[ name ] === true;
+
+	}
+
 	_include( name ) {
 
 		wgslPolyfill[ name ].build( this );
@@ -738,17 +696,17 @@ class WebGPUNodeBuilder extends NodeBuilder {
 // uniforms
 ${shaderData.uniforms}
 
-// varys
-${shaderData.varys}
+// varyings
+${shaderData.varyings}
 
 // codes
 ${shaderData.codes}
 
-[[ stage( vertex ) ]]
-fn main( ${shaderData.attributes} ) -> NodeVarysStruct {
+@vertex
+fn main( ${shaderData.attributes} ) -> NodeVaryingsStruct {
 
 	// system
-	var NodeVarys: NodeVarysStruct;
+	var NodeVaryings: NodeVaryingsStruct;
 
 	// vars
 	${shaderData.vars}
@@ -756,7 +714,7 @@ fn main( ${shaderData.attributes} ) -> NodeVarysStruct {
 	// flow
 	${shaderData.flow}
 
-	return NodeVarys;
+	return NodeVaryings;
 
 }
 `;
@@ -773,8 +731,37 @@ ${shaderData.uniforms}
 // codes
 ${shaderData.codes}
 
-[[ stage( fragment ) ]]
-fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {
+@fragment
+fn main( ${shaderData.varyings} ) -> @location( 0 ) vec4<f32> {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	_getWGSLComputeCode( shaderData, workgroupSize ) {
+
+		return `${ this.getSignature() }
+// system
+var<private> instanceIndex : u32;
+
+// uniforms
+${shaderData.uniforms}
+
+// codes
+${shaderData.codes}
+
+@compute @workgroup_size( ${workgroupSize} )
+fn main( ${shaderData.attributes} ) {
+
+	// system
+	instanceIndex = id.x;
 
 	// vars
 	${shaderData.vars}
@@ -791,19 +778,19 @@ fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {
 
 		return `
 struct ${name} {
-\n${vars}
+${vars}
 };`;
 
 	}
 
-	_getWGSLUniforms( name, vars, binding = 0, group = 0 ) {
+	_getWGSLStructBinding( name, vars, access, binding = 0, group = 0 ) {
 
 		const structName = name + 'Struct';
 		const structSnippet = this._getWGSLStruct( structName, vars );
 
 		return `${structSnippet}
-[[ binding( ${binding} ), group( ${group} ) ]]
-var<uniform> ${name} : ${structName};`;
+@binding( ${binding} ) @group( ${group} )
+var<${access}> ${name} : ${structName};`;
 
 	}