super-three 0.170.0 → 0.171.0

package/src/renderers/webgl/WebGLGeometries.js

@@ -22,18 +22,6 @@ function WebGLGeometries( gl, attributes, info, bindingStates ) {
 
 		}
 
-		for ( const name in geometry.morphAttributes ) {
-
-			const array = geometry.morphAttributes[ name ];
-
-			for ( let i = 0, l = array.length; i < l; i ++ ) {
-
-				attributes.remove( array[ i ] );
-
-			}
-
-		}
-
 		geometry.removeEventListener( 'dispose', onGeometryDispose );
 
 		delete geometries[ geometry.id ];
@@ -87,22 +75,6 @@ function WebGLGeometries( gl, attributes, info, bindingStates ) {
 
 		}
 
-		// morph targets
-
-		const morphAttributes = geometry.morphAttributes;
-
-		for ( const name in morphAttributes ) {
-
-			const array = morphAttributes[ name ];
-
-			for ( let i = 0, l = array.length; i < l; i ++ ) {
-
-				attributes.update( array[ i ], gl.ARRAY_BUFFER );
-
-			}
-
-		}
-
 	}
 
 	function updateWireframeAttribute( geometry ) {

package/src/renderers/webgl-fallback/WebGLBackend.js

@@ -166,7 +166,7 @@ class WebGLBackend extends Backend {
 
 	}
 
-	  async resolveTimestampAsync( renderContext, type = 'render' ) {
+	async resolveTimestampAsync( renderContext, type = 'render' ) {
 
 		if ( ! this.disjoint || ! this.trackTimestamp ) return;
 
@@ -641,7 +641,7 @@ class WebGLBackend extends Backend {
 
 	draw( renderObject/*, info*/ ) {
 
-		const { object, pipeline, material, context } = renderObject;
+		const { object, pipeline, material, context, hardwareClippingPlanes } = renderObject;
 		const { programGPU } = this.get( pipeline );
 
 		const { gl, state } = this;
@@ -658,15 +658,17 @@ class WebGLBackend extends Backend {
 
 		const frontFaceCW = ( object.isMesh && object.matrixWorld.determinant() < 0 );
 
-		state.setMaterial( material, frontFaceCW );
+		state.setMaterial( material, frontFaceCW, hardwareClippingPlanes );
 
 		state.useProgram( programGPU );
 
 		//
 
-		let vaoGPU = renderObject.staticVao;
+		const renderObjectData = this.get( renderObject );
 
-		if ( vaoGPU === undefined ) {
+		let vaoGPU = renderObjectData.staticVao;
+
+		if ( vaoGPU === undefined || renderObjectData.geometryId !== renderObject.geometry.id ) {
 
 			const vaoKey = this._getVaoKey( renderObject.getIndex(), renderObject.getAttributes() );
 
@@ -678,7 +680,12 @@ class WebGLBackend extends Backend {
 
 				( { vaoGPU, staticVao } = this._createVao( renderObject.getIndex(), renderObject.getAttributes() ) );
 
-				if ( staticVao ) renderObject.staticVao = vaoGPU;
+				if ( staticVao ) {
+
+					renderObjectData.staticVao = vaoGPU;
+					renderObjectData.geometryId = renderObject.geometry.id;
+
+				}
 
 			}
 

package/src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js

@@ -55,12 +55,13 @@ class GLSLNodeBuilder extends NodeBuilder {
 		this.uniformGroups = {};
 		this.transforms = [];
 		this.extensions = {};
+		this.builtins = { vertex: [], fragment: [], compute: [] };
 
 		this.useComparisonMethod = true;
 
 	}
 
-	needsColorSpaceToLinearSRGB( texture ) {
+	needsToWorkingColorSpace( texture ) {
 
 		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
 
@@ -123,7 +124,6 @@ ${ flowData.code }
 
 			let format = isInteger ? RedIntegerFormat : RedFormat;
 
-
 			if ( itemSize === 2 ) {
 
 				format = isInteger ? RGIntegerFormat : RGFormat;
@@ -201,7 +201,6 @@ ${ flowData.code }
 
 		}
 
-
 		const nodeUniform = this.getUniformFromNode( attribute.pboNode, 'texture', this.shaderStage, this.context.label );
 		const textureName = this.getPropertyName( nodeUniform );
 
@@ -571,7 +570,7 @@ ${ flowData.code }
 			for ( const varying of varyings ) {
 
 				if ( shaderStage === 'compute' ) varying.needsInterpolation = true;
-				const type = varying.type;
+				const type = this.getType( varying.type );
 				const flat = type.includes( 'int' ) || type.includes( 'uv' ) || type.includes( 'iv' ) ? 'flat ' : '';
 
 				snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`;
@@ -584,7 +583,7 @@ ${ flowData.code }
 
 				if ( varying.needsInterpolation ) {
 
-					const type = varying.type;
+					const type = this.getType( varying.type );
 					const flat = type.includes( 'int' ) || type.includes( 'uv' ) || type.includes( 'iv' ) ? 'flat ' : '';
 
 					snippet += `${flat}in ${type} ${varying.name};\n`;
@@ -595,6 +594,12 @@ ${ flowData.code }
 
 		}
 
+		for ( const builtin of this.builtins[ shaderStage ] ) {
+
+			snippet += `${builtin};\n`;
+
+		}
+
 		return snippet;
 
 	}
@@ -701,24 +706,42 @@ ${ flowData.code }
 
 	}
 
+	getClipDistance() {
+
+		return 'gl_ClipDistance';
+
+	}
+
 	isAvailable( name ) {
 
 		let result = supports[ name ];
 
 		if ( result === undefined ) {
 
-			if ( name === 'float32Filterable' ) {
+			let extensionName;
 
-				const extensions = this.renderer.backend.extensions;
+			result = false;
 
-				if ( extensions.has( 'OES_texture_float_linear' ) ) {
+			switch ( name ) {
 
-					extensions.get( 'OES_texture_float_linear' );
-					result = true;
+				case 'float32Filterable':
+					extensionName = 'OES_texture_float_linear';
+					break;
 
-				} else {
+				case 'clipDistance':
+					extensionName = 'WEBGL_clip_cull_distance';
+					break;
 
-					result = false;
+			}
+
+			if ( extensionName !== undefined ) {
+
+				const extensions = this.renderer.backend.extensions;
+
+				if ( extensions.has( extensionName ) ) {
+
+					extensions.get( extensionName );
+					result = true;
 
 				}
 
@@ -738,6 +761,14 @@ ${ flowData.code }
 
 	}
 
+	enableHardwareClipping( planeCount ) {
+
+		this.enableExtension( 'GL_ANGLE_clip_cull_distance', 'require' );
+
+		this.builtins[ 'vertex' ].push( `out float gl_ClipDistance[ ${ planeCount } ]` );
+
+	}
+
 	registerTransform( varyingName, attributeNode ) {
 
 		this.transforms.push( { varyingName, attributeNode } );

package/src/renderers/webgl-fallback/utils/WebGLState.js

@@ -41,6 +41,7 @@ class WebGLState {
 		this.currentStencilZPass = null;
 		this.currentStencilMask = null;
 		this.currentLineWidth = null;
+		this.currentClippingPlanes = 0;
 
 		this.currentBoundFramebuffers = {};
 		this.currentDrawbuffers = new WeakMap();
@@ -478,7 +479,7 @@ class WebGLState {
 
 	}
 
-	setMaterial( material, frontFaceCW ) {
+	setMaterial( material, frontFaceCW, hardwareClippingPlanes ) {
 
 		const { gl } = this;
 
@@ -516,6 +517,30 @@ class WebGLState {
 			? this.enable( gl.SAMPLE_ALPHA_TO_COVERAGE )
 			: this.disable( gl.SAMPLE_ALPHA_TO_COVERAGE );
 
+		if ( hardwareClippingPlanes > 0 ) {
+
+			if ( this.currentClippingPlanes !== hardwareClippingPlanes ) {
+
+				const CLIP_DISTANCE0_WEBGL = 0x3000;
+
+				for ( let i = 0; i < 8; i ++ ) {
+
+					if ( i < hardwareClippingPlanes ) {
+
+						this.enable( CLIP_DISTANCE0_WEBGL + i );
+
+					} else {
+
+						this.disable( CLIP_DISTANCE0_WEBGL + i );
+
+					}
+
+				}
+
+			}
+
+		}
+
 	}
 
 	setPolygonOffset( polygonOffset, factor, units ) {

package/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js

@@ -415,7 +415,10 @@ class WebGLTextureUtils {
 
 				return source.image.data;
 
-			} else if ( source instanceof ImageBitmap || source instanceof OffscreenCanvas || source instanceof HTMLImageElement || source instanceof HTMLCanvasElement ) {
+			} else if ( ( typeof HTMLImageElement !== 'undefined' && source instanceof HTMLImageElement ) ||
+				( typeof HTMLCanvasElement !== 'undefined' && source instanceof HTMLCanvasElement ) ||
+				( typeof ImageBitmap !== 'undefined' && source instanceof ImageBitmap ) ||
+				source instanceof OffscreenCanvas ) {
 
 				return source;
 

package/src/renderers/webgpu/WebGPUBackend.js

@@ -64,7 +64,7 @@ class WebGPUBackend extends Backend {
 				powerPreference: parameters.powerPreference
 			};
 
-			const adapter = await navigator.gpu.requestAdapter( adapterOptions );
+			const adapter = ( typeof navigator !== 'undefined' ) ? await navigator.gpu.requestAdapter( adapterOptions ) : null;
 
 			if ( adapter === null ) {
 
@@ -332,7 +332,7 @@ class WebGPUBackend extends Backend {
 
 			//
 
-			occlusionQuerySet = device.createQuerySet( { type: 'occlusion', count: occlusionQueryCount } );
+			occlusionQuerySet = device.createQuerySet( { type: 'occlusion', count: occlusionQueryCount, label: `occlusionQuerySet_${ renderContext.id }` } );
 
 			renderContextData.occlusionQuerySet = occlusionQuerySet;
 			renderContextData.occlusionQueryIndex = 0;
@@ -1061,7 +1061,7 @@ class WebGPUBackend extends Backend {
 			data.sampleCount !== sampleCount || data.colorSpace !== colorSpace ||
 			data.colorFormat !== colorFormat || data.depthStencilFormat !== depthStencilFormat ||
 			data.primitiveTopology !== primitiveTopology ||
-			data.clippingContextCacheKey !== renderObject.clippingContext.cacheKey
+			data.clippingContextCacheKey !== renderObject.clippingContextCacheKey
 		) {
 
 			data.material = material; data.materialVersion = material.version;
@@ -1079,7 +1079,7 @@ class WebGPUBackend extends Backend {
 			data.colorFormat = colorFormat;
 			data.depthStencilFormat = depthStencilFormat;
 			data.primitiveTopology = primitiveTopology;
-			data.clippingContextCacheKey = renderObject.clippingContext.cacheKey;
+			data.clippingContextCacheKey = renderObject.clippingContextCacheKey;
 
 			needsUpdate = true;
 
@@ -1110,7 +1110,7 @@ class WebGPUBackend extends Backend {
 			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
 			utils.getPrimitiveTopology( object, material ),
 			renderObject.getGeometryCacheKey(),
-			renderObject.clippingContext.cacheKey
+			renderObject.clippingContextCacheKey
 		].join();
 
 	}
@@ -1174,9 +1174,9 @@ class WebGPUBackend extends Backend {
 
 		if ( ! renderContextData.timeStampQuerySet ) {
 
-			// Create a GPUQuerySet which holds 2 timestamp query results: one for the
-			// beginning and one for the end of compute pass execution.
-			const timeStampQuerySet = this.device.createQuerySet( { type: 'timestamp', count: 2 } );
+
+			const type = renderContext.isComputeNode ? 'compute' : 'render';
+			const timeStampQuerySet = this.device.createQuerySet( { type: 'timestamp', count: 2, label: `timestamp_${type}_${renderContext.id}` } );
 
 			const timestampWrites = {
 				querySet: timeStampQuerySet,
@@ -1184,9 +1184,7 @@ class WebGPUBackend extends Backend {
 				endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
 			};
 
-			Object.assign( descriptor, {
-				timestampWrites,
-			} );
+			Object.assign( descriptor, { timestampWrites } );
 
 			renderContextData.timeStampQuerySet = timeStampQuerySet;
 
@@ -1217,18 +1215,21 @@ class WebGPUBackend extends Backend {
 					label: 'timestamp result buffer',
 					size: size,
 					usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
-				} ),
-				isMappingPending: false,
+				} )
 			};
 
 		}
 
-		const { resolveBuffer, resultBuffer, isMappingPending } = renderContextData.currentTimestampQueryBuffers;
+		const { resolveBuffer, resultBuffer } = renderContextData.currentTimestampQueryBuffers;
 
-		if ( isMappingPending === true ) return;
 
 		encoder.resolveQuerySet( renderContextData.timeStampQuerySet, 0, 2, resolveBuffer, 0 );
-		encoder.copyBufferToBuffer( resolveBuffer, 0, resultBuffer, 0, size );
+
+		if ( resultBuffer.mapState === 'unmapped' ) {
+
+			encoder.copyBufferToBuffer( resolveBuffer, 0, resultBuffer, 0, size );
+
+		}
 
 	}
 
@@ -1240,25 +1241,26 @@ class WebGPUBackend extends Backend {
 
 		if ( renderContextData.currentTimestampQueryBuffers === undefined ) return;
 
-		const { resultBuffer, isMappingPending } = renderContextData.currentTimestampQueryBuffers;
+		const { resultBuffer } = renderContextData.currentTimestampQueryBuffers;
 
-		if ( isMappingPending === true ) return;
+		await this.device.queue.onSubmittedWorkDone();
 
-		renderContextData.currentTimestampQueryBuffers.isMappingPending = true;
+		if ( resultBuffer.mapState === 'unmapped' ) {
 
-		resultBuffer.mapAsync( GPUMapMode.READ ).then( () => {
+			resultBuffer.mapAsync( GPUMapMode.READ ).then( () => {
 
-			const times = new BigUint64Array( resultBuffer.getMappedRange() );
-			const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
+				const times = new BigUint64Array( resultBuffer.getMappedRange() );
+				const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
 
 
-			this.renderer.info.updateTimestamp( type, duration );
+				this.renderer.info.updateTimestamp( type, duration );
 
-			resultBuffer.unmap();
+				resultBuffer.unmap();
 
-			renderContextData.currentTimestampQueryBuffers.isMappingPending = false;
 
-		} );
+			} );
+
+		}
 
 	}
 
@@ -1341,15 +1343,15 @@ class WebGPUBackend extends Backend {
 
 	// bindings
 
-	createBindings( bindGroup ) {
+	createBindings( bindGroup, bindings, cacheIndex, version ) {
 
-		this.bindingUtils.createBindings( bindGroup );
+		this.bindingUtils.createBindings( bindGroup, bindings, cacheIndex, version );
 
 	}
 
-	updateBindings( bindGroup ) {
+	updateBindings( bindGroup, bindings, cacheIndex, version ) {
 
-		this.bindingUtils.createBindings( bindGroup );
+		this.bindingUtils.createBindings( bindGroup, bindings, cacheIndex, version );
 
 	}
 
@@ -1537,7 +1539,7 @@ class WebGPUBackend extends Backend {
 		encoder.copyTextureToTexture(
 			{
 				texture: sourceGPU,
-				origin: { x: rectangle.x, y: rectangle.y, z: 0 }
+				origin: [ rectangle.x, rectangle.y, 0 ],
 			},
 			{
 				texture: destinationGPU
@@ -1566,6 +1568,20 @@ class WebGPUBackend extends Backend {
 			renderContextData.currentPass = encoder.beginRenderPass( descriptor );
 			renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null };
 
+			if ( renderContext.viewport ) {
+
+				this.updateViewport( renderContext );
+
+			}
+
+			if ( renderContext.scissor ) {
+
+				const { x, y, width, height } = renderContext.scissorValue;
+
+				renderContextData.currentPass.setScissorRect( x, y, width, height );
+
+			}
+
 		} else {
 
 			this.device.queue.submit( [ encoder.finish() ] );

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

@@ -1,31 +1,18 @@
 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';
@@ -60,19 +47,19 @@ class StandardNodeLibrary extends NodeLibrary {
 
 		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.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 );