WebGPURenderer: Remove deprecated WGSL syntax. (#23393)

* fix matrix.lookAt parameter document

* Use [[decoration]] style decorations  replaced to @decoration style

Co-authored-by: webglzhang <[email protected]>

examples/jsm/renderers/webgpu/WebGPUTextureUtils.js

@@ -31,13 +31,13 @@ class WebGPUTextureUtils {
 		const mipmapVertexSource = `
 struct VarysStruct {
 
-	[[ builtin( position ) ]] Position: vec4<f32>;
-	[[ location( 0 ) ]] vTex : vec2<f32>;
+	@builtin( position ) Position: vec4<f32>;
+	@location( 0 ) vTex : vec2<f32>;
 
 };
 
-[[ stage( vertex ) ]]
-fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
+@stage( vertex )
+fn main( @builtin( vertex_index ) vertexIndex : u32 ) -> VarysStruct {
 
 	var Varys: VarysStruct;
 
@@ -64,14 +64,14 @@ fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
 `;
 
 		const mipmapFragmentSource = `
-[[ group( 0 ), binding( 0 ) ]] 
+@group( 0 ) @binding( 0 ) 
 var imgSampler : sampler;
 
-[[ group( 0 ), binding( 1 ) ]] 
+@group( 0 ) @binding( 1 )
 var img : texture_2d<f32>;
 
-[[ stage( fragment ) ]]
-fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32> {
+@stage( fragment )
+fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 
 	return textureSample( img, imgSampler, vTex );
 

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

@@ -481,7 +481,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 				const name = attribute.name;
 				const type = this.getType( attribute.type );
 
-				snippet += `\t[[ location( ${index} ) ]] ${ name } : ${ type }`;
+				snippet += `\t@location( ${index} ) ${ name } : ${ type }`;
 
 				if ( index + 1 < length ) {
 
@@ -526,7 +526,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		if ( shaderStage === 'vertex' ) {
 
-			snippet += '\t[[ builtin( position ) ]] Vertex: vec4<f32>;\n';
+			snippet += '\t@builtin( position ) Vertex: vec4<f32>;\n';
 
 			const varys = this.varys;
 
@@ -534,7 +534,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				const vary = varys[ index ];
 
-				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) };\n`;
+				snippet += `\t@location( ${index} ) ${ vary.name } : ${ this.getType( vary.type ) };\n`;
 
 			}
 
@@ -550,7 +550,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				const vary = varys[ index ];
 
-				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) }`;
+				snippet += `\t@location( ${index} ) ${ vary.name } : ${ this.getType( vary.type ) }`;
 
 				if ( index + 1 < varys.length ) {
 
@@ -583,11 +583,11 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				if ( shaderStage === 'fragment' ) {
 
-					snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name}_sampler : sampler; `;
+					snippet += `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler; `;
 
 				}
 
-				snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name} : texture_2d<f32>; `;
+				snippet += `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_2d<f32>; `;
 
 			} else if ( uniform.type === 'buffer' ) {
 
@@ -744,7 +744,7 @@ ${shaderData.varys}
 // codes
 ${shaderData.codes}
 
-[[ stage( vertex ) ]]
+@stage( vertex )
 fn main( ${shaderData.attributes} ) -> NodeVarysStruct {
 
 	// system
@@ -773,8 +773,8 @@ ${shaderData.uniforms}
 // codes
 ${shaderData.codes}
 
-[[ stage( fragment ) ]]
-fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {
+@stage( fragment )
+fn main( ${shaderData.varys} ) -> @location( 0 ) vec4<f32> {
 
 	// vars
 	${shaderData.vars}
@@ -802,7 +802,7 @@ struct ${name} {
 		const structSnippet = this._getWGSLStruct( structName, vars );
 
 		return `${structSnippet}
-[[ binding( ${binding} ), group( ${group} ) ]]
+@binding( ${binding} ) @group( ${group} )
 var<uniform> ${name} : ${structName};`;
 
 	}