WebGPURenderer: Improve vertex format support and revisions. (#25924)

* EnvironmentNode: Fix flipY after improve positionWorldDirection

* WebGPUBackground: Fix clip background

* WebGPURenderer: Added update from #25913

* WebGPURenderer: Improve vertex format support.

* Example webgpu_backdrop: Fix space

* Added webgpu_loader_gltf_compressed example

* cleanup

Author: sunag

examples/files.json

@@ -340,6 +340,7 @@
 		"webgpu_lights_phong",
 		"webgpu_lights_selective",
 		"webgpu_loader_gltf",
+		"webgpu_loader_gltf_compressed",
 		"webgpu_materials",
 		"webgpu_materials_video",
 		"webgpu_particles",

examples/jsm/nodes/core/AttributeNode.js

@@ -30,7 +30,7 @@ class AttributeNode extends Node {
 
 				const attribute = builder.geometry.getAttribute( attributeName );
 
-				nodeType = builder.getTypeFromLength( attribute.itemSize );
+				nodeType = builder.getTypeFromAttribute( attribute );
 
 			} else {
 
@@ -66,23 +66,26 @@ class AttributeNode extends Node {
 
 		if ( geometryAttribute === true ) {
 
-			const nodeAttribute = builder.getAttribute( attributeName, nodeType );
+			const attribute = builder.geometry.getAttribute( attributeName );
+			const attributeType = builder.getTypeFromAttribute( attribute );
+
+			const nodeAttribute = builder.getAttribute( attributeName, attributeType );
 
 			if ( builder.isShaderStage( 'vertex' ) ) {
 
-				return nodeAttribute.name;
+				return builder.format( nodeAttribute.name, attributeType, nodeType );
 
 			} else {
 
 				const nodeVarying = varying( this );
 
-				return nodeVarying.build( builder, nodeAttribute.type );
+				return nodeVarying.build( builder, nodeType );
 
 			}
 
 		} else {
 
-			console.warn( `Attribute "${ attributeName }" not found.` );
+			console.warn( `AttributeNode: Attribute "${ attributeName }" not found.` );
 
 			return builder.getConst( nodeType );
 

examples/jsm/nodes/core/NodeBuilder.js

@@ -7,17 +7,28 @@ import NodeKeywords from './NodeKeywords.js';
 import NodeCache from './NodeCache.js';
 import { NodeUpdateType, defaultBuildStages, shaderStages } from './constants.js';
 
-import { REVISION, NoColorSpace, LinearEncoding, sRGBEncoding, SRGBColorSpace, Color, Vector2, Vector3, Vector4 } from 'three';
+import { REVISION, NoColorSpace, LinearEncoding, sRGBEncoding, SRGBColorSpace, Color, Vector2, Vector3, Vector4, Float16BufferAttribute } from 'three';
 
 import { stack } from './StackNode.js';
 import { maxMipLevel } from '../utils/MaxMipLevelNode.js';
 
-const typeFromLength = new Map();
-typeFromLength.set( 2, 'vec2' );
-typeFromLength.set( 3, 'vec3' );
-typeFromLength.set( 4, 'vec4' );
-typeFromLength.set( 9, 'mat3' );
-typeFromLength.set( 16, 'mat4' );
+const typeFromLength = new Map( [
+	[ 2, 'vec2' ],
+	[ 3, 'vec3' ],
+	[ 4, 'vec4' ],
+	[ 9, 'mat3' ],
+	[ 16, 'mat4' ]
+] );
+
+const typeFromArray = new Map( [
+	[ Int8Array, 'int' ],
+	[ Int16Array, 'int' ],
+	[ Int32Array, 'int' ],
+	[ Uint8Array, 'uint' ],
+	[ Uint16Array, 'uint' ],
+	[ Uint32Array, 'uint' ],
+	[ Float32Array, 'float' ]
+] );
 
 const toFloat = ( value ) => {
 
@@ -412,12 +423,42 @@ class NodeBuilder {
 	getTypeFromLength( length, componentType = 'float' ) {
 
 		if ( length === 1 ) return componentType;
+
 		const baseType = typeFromLength.get( length );
 		const prefix = componentType === 'float' ? '' : componentType[ 0 ];
+
 		return prefix + baseType;
 
 	}
 
+	getTypeFromArray( array ) {
+
+		return typeFromArray.get( array.constructor );
+
+	}
+
+	getTypeFromAttribute( attribute ) {
+
+		let dataAttribute = attribute;
+
+		if ( attribute.isInterleavedBufferAttribute ) dataAttribute = attribute.data;
+
+		const array = dataAttribute.array;
+		const itemSize = dataAttribute.stride || attribute.itemSize;
+		const normalized = attribute.normalized;
+
+		let arrayType;
+
+		if ( ! ( attribute instanceof Float16BufferAttribute ) && normalized !== true ) {
+
+			arrayType = this.getTypeFromArray( array );
+
+		}
+
+		return this.getTypeFromLength( itemSize, arrayType );
+
+	}
+
 	getTypeLength( type ) {
 
 		const vecType = this.getVectorType( type );
@@ -677,7 +718,7 @@ class NodeBuilder {
 
 		if ( propertyName !== null ) {
 
-			flowData.code += `${propertyName} = ${flowData.result};\n` + this.tab;
+			flowData.code += `${ this.tab + propertyName } = ${ flowData.result };\n`;
 
 		}
 
@@ -864,7 +905,7 @@ class NodeBuilder {
 
 		if ( fromTypeLength > toTypeLength ) {
 
-			return this.format( `${ snippet }.${ 'xyz'.slice( 0, toTypeLength ) }`, this.getTypeFromLength( toTypeLength ), toType );
+			return this.format( `${ snippet }.${ 'xyz'.slice( 0, toTypeLength ) }`, this.getTypeFromLength( toTypeLength, this.getComponentType( fromType ) ), toType );
 
 		}
 

examples/jsm/nodes/lighting/EnvironmentNode.js

@@ -53,7 +53,6 @@ class EnvironmentNode extends LightingNode {
 						// @TODO: Needed PMREM
 
 						radianceTextureUVNode = equirectUV( reflectVec );
-						radianceTextureUVNode = vec2( radianceTextureUVNode.x, radianceTextureUVNode.y.oneMinus() );
 
 					}
 

examples/jsm/renderers/webgpu/WebGPUAttributes.js

@@ -9,15 +9,15 @@ class WebGPUAttributes {
 
 	get( attribute ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		return this.buffers.get( attribute );
 
 	}
 
 	remove( attribute ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		const data = this.buffers.get( attribute );
 
@@ -33,7 +33,7 @@ class WebGPUAttributes {
 
 	update( attribute, isIndex = false, usage = null ) {
 
-		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+		attribute = this._getAttribute( attribute );
 
 		let data = this.buffers.get( attribute );
 
@@ -115,6 +115,14 @@ class WebGPUAttributes {
 
 	}
 
+	_getAttribute( attribute ) {
+
+		if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
+
+		return attribute;
+
+	}
+
 	_createBuffer( attribute, usage ) {
 
 		const array = attribute.array;

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -69,13 +69,16 @@ class WebGPUBackground {
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;
+				nodeMaterial.frustumCulled = false;
 				nodeMaterial.fog = false;
 
 				this.boxMesh = boxMesh = new Mesh( new BoxGeometry( 1, 1, 1 ), nodeMaterial );
 
 				boxMesh.onBeforeRender = function ( renderer, scene, camera ) {
 
-					this.matrixWorld.copyPosition( camera.matrixWorld );
+					const scale = camera.far;
+
+					this.matrixWorld.makeScale( scale, scale, scale ).copyPosition( camera.matrixWorld );
 
 				};