super-three 0.147.0 → 0.152.0

package/examples/jsm/renderers/webgpu/WebGPUGeometries.js

@@ -1,34 +1,160 @@
+import { Uint32BufferAttribute, Uint16BufferAttribute } from 'three';
+
+function arrayNeedsUint32( array ) {
+
+	// assumes larger values usually on last
+
+	for ( let i = array.length - 1; i >= 0; -- i ) {
+
+		if ( array[ i ] >= 65535 ) return true; // account for PRIMITIVE_RESTART_FIXED_INDEX, #24565
+
+	}
+
+	return false;
+
+}
+
+function getWireframeVersion( geometry ) {
+
+	return ( geometry.index !== null ) ? geometry.index.version : geometry.attributes.position.version;
+
+}
+
+function getWireframeIndex( geometry ) {
+
+	const indices = [];
+
+	const geometryIndex = geometry.index;
+	const geometryPosition = geometry.attributes.position;
+
+	if ( geometryIndex !== null ) {
+
+		const array = geometryIndex.array;
+
+		for ( let i = 0, l = array.length; i < l; i += 3 ) {
+
+			const a = array[ i + 0 ];
+			const b = array[ i + 1 ];
+			const c = array[ i + 2 ];
+
+			indices.push( a, b, b, c, c, a );
+
+		}
+
+	} else {
+
+		const array = geometryPosition.array;
+
+		for ( let i = 0, l = ( array.length / 3 ) - 1; i < l; i += 3 ) {
+
+			const a = i + 0;
+			const b = i + 1;
+			const c = i + 2;
+
+			indices.push( a, b, b, c, c, a );
+
+		}
+
+	}
+
+	const attribute = new ( arrayNeedsUint32( indices ) ? Uint32BufferAttribute : Uint16BufferAttribute )( indices, 1 );
+	attribute.version = getWireframeVersion( geometry );
+
+	return attribute;
+
+}
+
 class WebGPUGeometries {
 
-	constructor( attributes, info ) {
+	constructor( attributes, properties, info ) {
 
 		this.attributes = attributes;
+		this.properties = properties;
 		this.info = info;
 
-		this.geometries = new WeakMap();
+		this.wireframes = new WeakMap();
+		this.geometryFrame = new WeakMap();
 
 	}
 
-	has( geometry ) {
+	has( renderObject ) {
 
-		return this.geometries.has( geometry );
+		const geometry = renderObject.geometry;
+
+		return this.properties.has( geometry ) && this.properties.get( geometry ).initialized === true;
+
+	}
+
+	update( renderObject ) {
+
+		if ( this.has( renderObject ) === false ) this.initGeometry( renderObject );
+
+		this.updateFrameAttributes( renderObject );
 
 	}
 
-	update( geometry ) {
+	initGeometry( renderObject ) {
+
+		const geometry = renderObject.geometry;
+		const geometryProperties = this.properties.get( geometry );
+
+		geometryProperties.initialized = true;
+
+		const dispose = () => {
+
+			this.info.memory.geometries --;
+
+			const index = geometry.index;
+			const geometryAttributes = geometry.attributes;
+
+			if ( index !== null ) {
+
+				this.attributes.remove( index );
+
+			}
+
+			for ( const name in geometryAttributes ) {
+
+				this.attributes.remove( geometryAttributes[ name ] );
+
+			}
+
+			const wireframeAttribute = this.wireframes.get( geometry );
+
+			if ( wireframeAttribute !== undefined ) {
 
-		if ( this.geometries.has( geometry ) === false ) {
+				this.attributes.remove( wireframeAttribute );
 
-			const disposeCallback = onGeometryDispose.bind( this );
+			}
 
-			this.geometries.set( geometry, disposeCallback );
+			geometry.removeEventListener( 'dispose', dispose );
 
-			this.info.memory.geometries ++;
+		};
 
-			geometry.addEventListener( 'dispose', disposeCallback );
+		this.info.memory.geometries ++;
+
+		geometry.addEventListener( 'dispose', dispose );
+
+	}
+
+	updateFrameAttributes( renderObject ) {
+
+		const frame = this.info.render.frame;
+		const geometry = renderObject.geometry;
+
+		if ( this.geometryFrame.get( geometry ) !== frame ) {
+
+			this.updateAttributes( renderObject );
+
+			this.geometryFrame.set( geometry, frame );
 
 		}
 
+	}
+
+	updateAttributes( renderObject ) {
+
+		const geometry = renderObject.geometry;
 		const geometryAttributes = geometry.attributes;
 
 		for ( const name in geometryAttributes ) {
@@ -37,7 +163,7 @@ class WebGPUGeometries {
 
 		}
 
-		const index = geometry.index;
+		const index = this.getIndex( renderObject );
 
 		if ( index !== null ) {
 
@@ -47,33 +173,39 @@ class WebGPUGeometries {
 
 	}
 
-}
+	getIndex( renderObject ) {
 
-function onGeometryDispose( event ) {
+		const { geometry, material } = renderObject;
 
-	const geometry = event.target;
-	const disposeCallback = this.geometries.get( geometry );
+		let index = geometry.index;
 
-	this.geometries.delete( geometry );
+		if ( material.wireframe === true ) {
 
-	this.info.memory.geometries --;
+			const wireframes = this.wireframes;
 
-	geometry.removeEventListener( 'dispose', disposeCallback );
+			let wireframeAttribute = wireframes.get( geometry );
 
-	//
+			if ( wireframeAttribute === undefined ) {
 
-	const index = geometry.index;
-	const geometryAttributes = geometry.attributes;
+				wireframeAttribute = getWireframeIndex( geometry );
 
-	if ( index !== null ) {
+				wireframes.set( geometry, wireframeAttribute );
 
-		this.attributes.remove( index );
+			} else if ( wireframeAttribute.version !== getWireframeVersion( geometry ) ) {
 
-	}
+				this.attributes.remove( wireframeAttribute );
+
+				wireframeAttribute = getWireframeIndex( geometry );
 
-	for ( const name in geometryAttributes ) {
+				wireframes.set( geometry, wireframeAttribute );
+
+			}
+
+			index = wireframeAttribute;
+
+		}
 
-		this.attributes.remove( geometryAttributes[ name ] );
+		return index;
 
 	}
 

package/examples/jsm/renderers/webgpu/WebGPUProgrammableStage.js

@@ -11,7 +11,7 @@ class WebGPUProgrammableStage {
 		this.usedTimes = 0;
 
 		this.stage = {
-			module: device.createShaderModule( { code } ),
+			module: device.createShaderModule( { code, label: type } ),
 			entryPoint: 'main'
 		};
 

package/examples/jsm/renderers/webgpu/WebGPUProperties.js

@@ -27,6 +27,12 @@ class WebGPUProperties {
 
 	}
 
+	has( object ) {
+
+		return this.properties.has( object );
+
+	}
+
 	dispose() {
 
 		this.properties = new WeakMap();

package/examples/jsm/renderers/webgpu/WebGPURenderLists.js

@@ -1,3 +1,6 @@
+import WebGPUWeakMap from './WebGPUWeakMap.js';
+import { lights } from '../../nodes/Nodes.js';
+
 function painterSortStable( a, b ) {
 
 	if ( a.groupOrder !== b.groupOrder ) {
@@ -56,6 +59,9 @@ class WebGPURenderList {
 		this.opaque = [];
 		this.transparent = [];
 
+		this.lightsNode = lights( [] );
+		this.lightsArray = [];
+
 	}
 
 	init() {
@@ -64,6 +70,9 @@ class WebGPURenderList {
 
 		this.opaque.length = 0;
 		this.transparent.length = 0;
+		this.lightsArray.length = 0;
+
+		return this;
 
 	}
 
@@ -121,6 +130,18 @@ class WebGPURenderList {
 
 	}
 
+	pushLight( light ) {
+
+		this.lightsArray.push( light );
+
+	}
+
+	getLightsNode() {
+
+		return this.lightsNode.fromLights( this.lightsArray );
+
+	}
+
 	sort( customOpaqueSort, customTransparentSort ) {
 
 		if ( this.opaque.length > 1 ) this.opaque.sort( customOpaqueSort || painterSortStable );
@@ -130,6 +151,10 @@ class WebGPURenderList {
 
 	finish() {
 
+		// update lights
+
+		this.lightsNode.fromLights( this.lightsArray );
+
 		// Clear references from inactive renderItems in the list
 
 		for ( let i = this.renderItemsIndex, il = this.renderItems.length; i < il; i ++ ) {
@@ -156,31 +181,22 @@ class WebGPURenderLists {
 	constructor() {
 
 		this.lists = new WeakMap();
+		this.lists = new WebGPUWeakMap();
 
 	}
 
 	get( scene, camera ) {
 
 		const lists = this.lists;
+		const keys = [ scene, camera ];
 
-		const cameras = lists.get( scene );
-		let list;
+		let list = lists.get( keys );
 
-		if ( cameras === undefined ) {
+		if ( list === undefined ) {
 
 			list = new WebGPURenderList();
-			lists.set( scene, new WeakMap() );
-			lists.get( scene ).set( camera, list );
-
-		} else {
-
-			list = cameras.get( camera );
-			if ( list === undefined ) {
-
-				list = new WebGPURenderList();
-				cameras.set( camera, list );
+			lists.set( keys, list );
 
-			}
 
 		}
 

package/examples/jsm/renderers/webgpu/WebGPURenderObject.js

@@ -0,0 +1,40 @@
+export default class WebGPURenderObject {
+
+	constructor( renderer, nodes, object, material, scene, camera, lightsNode ) {
+
+		this.renderer = renderer;
+		this.nodes = nodes;
+		this.object = object;
+		this.material = material;
+		this.scene = scene;
+		this.camera = camera;
+		this.lightsNode = lightsNode;
+
+		this.geometry = object.geometry;
+
+		this._materialVersion = - 1;
+		this._materialCacheKey = '';
+
+	}
+
+	getCacheKey() {
+
+		const { material, scene, lightsNode } = this;
+
+		if ( material.version !== this._materialVersion ) {
+
+			this._materialVersion = material.version;
+			this._materialCacheKey = material.customProgramCacheKey();
+
+		}
+
+		const cacheKey = [];
+
+		cacheKey.push( 'material:' + this._materialCacheKey );
+		cacheKey.push( 'nodes:' + this.nodes.getCacheKey( scene, lightsNode ) );
+
+		return '{' + cacheKey.join( ',' ) + '}';
+
+	}
+
+}

package/examples/jsm/renderers/webgpu/WebGPURenderObjects.js

@@ -0,0 +1,50 @@
+import WebGPUWeakMap from './WebGPUWeakMap.js';
+import WebGPURenderObject from './WebGPURenderObject.js';
+
+class WebGPURenderObjects {
+
+	constructor( renderer, nodes, geometries, info ) {
+
+		this.renderer = renderer;
+		this.nodes = nodes;
+		this.geometries = geometries;
+		this.info = info;
+
+		this.cache = new WebGPUWeakMap();
+
+	}
+
+	get( object, material, scene, camera, lightsNode ) {
+
+		const chainKey = [ object, material, scene, camera, lightsNode ];
+
+		let renderObject = this.cache.get( chainKey );
+
+		if ( renderObject === undefined ) {
+
+			renderObject = new WebGPURenderObject( this.renderer, this.nodes, object, material, scene, camera, lightsNode );
+
+			this.cache.set( chainKey, renderObject );
+
+		}
+
+		return renderObject;
+
+	}
+
+	remove( object, material, scene, camera, lightsNode ) {
+
+		this.cache.delete( [ object, material, scene, camera, lightsNode ] );
+
+	}
+
+	dispose() {
+
+		this.cache = new WebGPUWeakMap();
+		this.updateMap = new WeakMap();
+
+	}
+
+}
+
+export default WebGPURenderObjects;

package/examples/jsm/renderers/webgpu/WebGPURenderPipeline.js

@@ -1,5 +1,6 @@
-import { GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
+import { GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
 import {
+	Float16BufferAttribute,
 	FrontSide, BackSide, DoubleSide,
 	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
 	NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc,
@@ -9,6 +10,26 @@ import {
 	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor
 } from 'three';
 
+const typedArraysToVertexFormatPrefix = new Map( [
+	[ Int8Array, [ 'sint8', 'snorm8' ]],
+	[ Uint8Array, [ 'uint8', 'unorm8' ]],
+	[ Int16Array, [ 'sint16', 'snorm16' ]],
+	[ Uint16Array, [ 'uint16', 'unorm16' ]],
+	[ Int32Array, [ 'sint32', 'snorm32' ]],
+	[ Uint32Array, [ 'uint32', 'unorm32' ]],
+	[ Float32Array, [ 'float32', ]],
+] );
+
+const typedAttributeToVertexFormatPrefix = new Map( [
+	[ Float16BufferAttribute, [ 'float16', ]],
+] );
+
+const typeArraysToVertexFormatPrefixForItemSize1 = new Map( [
+	[ Int32Array, 'sint32' ],
+	[ Uint32Array, 'uint32' ],
+	[ Float32Array, 'float32' ]
+] );
+
 class WebGPURenderPipeline {
 
 	constructor( device, utils ) {
@@ -24,10 +45,9 @@ class WebGPURenderPipeline {
 
 	}
 
-	init( cacheKey, stageVertex, stageFragment, object, nodeBuilder ) {
+	init( cacheKey, stageVertex, stageFragment, renderObject, nodeBuilder ) {
 
-		const material = object.material;
-		const geometry = object.geometry;
+		const { object, material, geometry } = renderObject;
 
 		// determine shader attributes
 
@@ -85,7 +105,7 @@ class WebGPURenderPipeline {
 
 		//
 
-		const primitiveState = this._getPrimitiveState( object, material );
+		const primitiveState = this._getPrimitiveState( object, geometry, material );
 		const colorWriteMask = this._getColorWriteMask( material );
 		const depthCompare = this._getDepthCompare( material );
 		const colorFormat = this._utils.getCurrentColorFormat();
@@ -426,15 +446,14 @@ class WebGPURenderPipeline {
 
 	}
 
-	_getPrimitiveState( object, material ) {
+	_getPrimitiveState( object, geometry, material ) {
 
 		const descriptor = {};
 
-		descriptor.topology = this._utils.getPrimitiveTopology( object );
+		descriptor.topology = this._utils.getPrimitiveTopology( object, material );
 
 		if ( object.isLine === true && object.isLineSegments !== true ) {
 
-			const geometry = object.geometry;
 			const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;
 			descriptor.stripIndexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
 
@@ -563,127 +582,48 @@ class WebGPURenderPipeline {
 
 	}
 
-	_getVertexFormat( type, bytesPerElement ) {
-
-		// float
-
-		if ( type === 'float' ) return GPUVertexFormat.Float32;
-
-		if ( type === 'vec2' ) {
-
-			if ( bytesPerElement === 2 ) {
-
-				return GPUVertexFormat.Float16x2;
-
-			} else {
-
-				return GPUVertexFormat.Float32x2;
-
-			}
-
-		}
-
-		if ( type === 'vec3' ) return GPUVertexFormat.Float32x3;
-
-		if ( type === 'vec4' ) {
+	_getVertexFormat( geometryAttribute ) {
 
-			if ( bytesPerElement === 2 ) {
+		const { itemSize, normalized } = geometryAttribute;
+		const ArrayType = geometryAttribute.array.constructor;
+		const AttributeType = geometryAttribute.constructor;
 
-				return GPUVertexFormat.Float16x4;
+		let format;
 
-			} else {
+		if ( itemSize == 1 ) {
 
-				return GPUVertexFormat.Float32x4;
+			format = typeArraysToVertexFormatPrefixForItemSize1.get( ArrayType );
 
-			}
-
-		}
-
-		// int
-
-		if ( type === 'int' ) return GPUVertexFormat.Sint32;
-
-		if ( type === 'ivec2' ) {
-
-			if ( bytesPerElement === 1 ) {
-
-				return GPUVertexFormat.Sint8x2;
-
-			} else if ( bytesPerElement === 2 ) {
-
-				return GPUVertexFormat.Sint16x2;
-
-			} else {
-
-				return GPUVertexFormat.Sint32x2;
-
-			}
-
-		}
-
-		if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;
-
-		if ( type === 'ivec4' ) {
-
-			if ( bytesPerElement === 1 ) {
-
-				return GPUVertexFormat.Sint8x4;
-
-			} else if ( bytesPerElement === 2 ) {
-
-				return GPUVertexFormat.Sint16x4;
-
-			} else {
-
-				return GPUVertexFormat.Sint32x4;
-
-			}
-
-		}
-
-		// uint
-
-		if ( type === 'uint' ) return GPUVertexFormat.Uint32;
+		} else {
 
-		if ( type === 'uvec2' ) {
+			const prefixOptions = typedAttributeToVertexFormatPrefix.get( AttributeType ) || typedArraysToVertexFormatPrefix.get( ArrayType );
+			const prefix = prefixOptions[ normalized ? 1 : 0 ];
 
-			if ( bytesPerElement === 1 ) {
+			if ( prefix ) {
 
-				return GPUVertexFormat.Uint8x2;
+				const bytesPerUnit = ArrayType.BYTES_PER_ELEMENT * itemSize;
+				const paddedBytesPerUnit = Math.floor( ( bytesPerUnit + 3 ) / 4 ) * 4;
+				const paddedItemSize = paddedBytesPerUnit / ArrayType.BYTES_PER_ELEMENT;
 
-			} else if ( bytesPerElement === 2 ) {
+				if ( paddedItemSize % 1 ) {
 
-				return GPUVertexFormat.Uint16x2;
+					throw new Error( 'THREE.WebGPURenderer: Bad vertex format item size.' );
 
-			} else {
+				}
 
-				return GPUVertexFormat.Uint32x2;
+				format = `${prefix}x${paddedItemSize}`;
 
 			}
 
 		}
 
-		if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;
-
-		if ( type === 'uvec4' ) {
-
-			if ( bytesPerElement === 1 ) {
-
-				return GPUVertexFormat.Uint8x4;
+		if ( ! format ) {
 
-			} else if ( bytesPerElement === 2 ) {
-
-				return GPUVertexFormat.Uint16x4;
-
-			} else {
-
-				return GPUVertexFormat.Uint32x4;
-
-			}
+			console.error( 'THREE.WebGPURenderer: Vertex format not supported yet.' );
 
 		}
 
-		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
+		return format;
 
 	}
 
@@ -695,14 +635,12 @@ class WebGPURenderPipeline {
 		for ( let slot = 0; slot < nodeAttributes.length; slot ++ ) {
 
 			const nodeAttribute = nodeAttributes[ slot ];
-
 			const name = nodeAttribute.name;
-			const type = nodeAttribute.type;
 
 			const geometryAttribute = geometry.getAttribute( name );
 			const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
 
-			const format = this._getVertexFormat( type, bytesPerElement );
+			const format = this._getVertexFormat( geometryAttribute );
 
 			let arrayStride = geometryAttribute.itemSize * bytesPerElement;
 			let offset = 0;