super-three 0.167.0 → 0.169.0

package/src/renderers/webgpu/WebGPUBackend.js

@@ -2,7 +2,7 @@
 import 'https://greggman.github.io/webgpu-avoid-redundant-state-setting/webgpu-check-redundant-state-setting.js';
 //*/
 
-import { GPUFeatureName, GPUTextureFormat, GPULoadOp, GPUStoreOp, GPUIndexFormat, GPUTextureViewDimension } from './utils/WebGPUConstants.js';
+import { GPUFeatureName, GPULoadOp, GPUStoreOp, GPUIndexFormat, GPUTextureViewDimension } from './utils/WebGPUConstants.js';
 
 import WGSLNodeBuilder from './nodes/WGSLNodeBuilder.js';
 import Backend from '../common/Backend.js';
@@ -108,9 +108,11 @@ class WebGPUBackend extends Backend {
 
 		const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
 
+		this.trackTimestamp = this.trackTimestamp && this.hasFeature( GPUFeatureName.TimestampQuery );
+
 		this.context.configure( {
 			device: this.device,
-			format: GPUTextureFormat.BGRA8Unorm,
+			format: this.utils.getPreferredCanvasFormat(),
 			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
 			alphaMode: alphaMode
 		} );
@@ -193,22 +195,16 @@ class WebGPUBackend extends Backend {
 
 		let descriptors = renderTargetData.descriptors;
 
-		if ( descriptors === undefined ) {
-
-			descriptors = [];
-
-			renderTargetData.descriptors = descriptors;
-
-		}
-
-		if ( renderTargetData.width !== renderTarget.width ||
+		if ( descriptors === undefined ||
+			renderTargetData.width !== renderTarget.width ||
 			renderTargetData.height !== renderTarget.height ||
 			renderTargetData.activeMipmapLevel !== renderTarget.activeMipmapLevel ||
-			renderTargetData.samples !== renderTarget.samples ||
-			descriptors.length !== renderTarget.textures.length
+			renderTargetData.samples !== renderTarget.samples
 		) {
 
-			descriptors.length = 0;
+			descriptors = {};
+
+			renderTargetData.descriptors = descriptors;
 
 			// dispose
 
@@ -224,7 +220,9 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		let descriptor = descriptors[ renderContext.activeCubeFace ];
+		const cacheKey = renderContext.getCacheKey();
+
+		let descriptor = descriptors[ cacheKey ];
 
 		if ( descriptor === undefined ) {
 
@@ -276,7 +274,7 @@ class WebGPUBackend extends Backend {
 				depthStencilAttachment
 			};
 
-			descriptors[ renderContext.activeCubeFace ] = descriptor;
+			descriptors[ cacheKey ] = descriptor;
 
 			renderTargetData.width = renderTarget.width;
 			renderTargetData.height = renderTarget.height;
@@ -349,7 +347,7 @@ class WebGPUBackend extends Backend {
 
 				if ( renderContext.clearColor ) {
 
-					colorAttachment.clearValue = renderContext.clearColorValue;
+					colorAttachment.clearValue = i === 0 ? renderContext.clearColorValue : { r: 0, g: 0, b: 0, a: 1 };
 					colorAttachment.loadOp = GPULoadOp.Clear;
 					colorAttachment.storeOp = GPUStoreOp.Store;
 
@@ -427,7 +425,8 @@ class WebGPUBackend extends Backend {
 		renderContextData.descriptor = descriptor;
 		renderContextData.encoder = encoder;
 		renderContextData.currentPass = currentPass;
-		renderContextData.currentSets = { attributes: {} };
+		renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null };
+		renderContextData.renderBundles = [];
 
 		//
 
@@ -441,7 +440,7 @@ class WebGPUBackend extends Backend {
 
 			const { x, y, width, height } = renderContext.scissorValue;
 
-			currentPass.setScissorRect( x, renderContext.height - height - y, width, height );
+			currentPass.setScissorRect( x, y, width, height );
 
 		}
 
@@ -452,9 +451,8 @@ class WebGPUBackend extends Backend {
 		const renderContextData = this.get( renderContext );
 		const occlusionQueryCount = renderContext.occlusionQueryCount;
 
-		if ( renderContextData.renderBundles !== undefined && renderContextData.renderBundles.length > 0 ) {
+		if ( renderContextData.renderBundles.length > 0 ) {
 
-			renderContextData.registerBundlesPhase = false;
 			renderContextData.currentPass.executeBundles( renderContextData.renderBundles );
 
 		}
@@ -587,7 +585,7 @@ class WebGPUBackend extends Backend {
 		const { currentPass } = this.get( renderContext );
 		const { x, y, width, height, minDepth, maxDepth } = renderContext.viewportValue;
 
-		currentPass.setViewport( x, renderContext.height - height - y, width, height, minDepth, maxDepth );
+		currentPass.setViewport( x, y, width, height, minDepth, maxDepth );
 
 	}
 
@@ -608,7 +606,19 @@ class WebGPUBackend extends Backend {
 
 			const clearColor = this.getClearColor();
 
-			clearValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearColor.a };
+			if ( this.renderer.alpha === true ) {
+
+				// premultiply alpha
+
+				const a = clearColor.a;
+
+				clearValue = { r: clearColor.r * a, g: clearColor.g * a, b: clearColor.b * a, a: a };
+
+			} else {
+
+				clearValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearColor.a };
+
+			}
 
 		}
 
@@ -819,27 +829,16 @@ class WebGPUBackend extends Backend {
 
 	draw( renderObject, info ) {
 
-		const { object, geometry, context, pipeline } = renderObject;
-
+		const { object, context, pipeline } = renderObject;
 		const bindings = renderObject.getBindings();
-		const contextData = this.get( context );
-		const pipelineGPU = this.get( pipeline ).pipeline;
-		const currentSets = contextData.currentSets;
-
-		const renderObjectData = this.get( renderObject );
-
-		const { bundleEncoder, renderBundle, lastPipelineGPU } = renderObjectData;
-
 		const renderContextData = this.get( context );
+		const pipelineGPU = this.get( pipeline ).pipeline;
+		const currentSets = renderContextData.currentSets;
+		const passEncoderGPU = renderContextData.currentPass;
 
-		if ( renderContextData.registerBundlesPhase === true && bundleEncoder !== undefined && lastPipelineGPU === pipelineGPU ) {
-
-			renderContextData.renderBundles.push( renderBundle );
-			return;
-
-		}
+		const drawParms = renderObject.getDrawParameters();
 
-		const passEncoderGPU = this.renderer._currentRenderBundle ? this.createBundleEncoder( context, renderObject ) : contextData.currentPass;
+		if ( drawParms === null ) return;
 
 		// pipeline
 
@@ -853,12 +852,19 @@ class WebGPUBackend extends Backend {
 
 		// bind groups
 
+		const currentBindingGroups = currentSets.bindingGroups;
+
 		for ( let i = 0, l = bindings.length; i < l; i ++ ) {
 
 			const bindGroup = bindings[ i ];
 			const bindingsData = this.get( bindGroup );
 
-			passEncoderGPU.setBindGroup( i, bindingsData.group );
+			if ( currentBindingGroups[ bindGroup.index ] !== bindGroup.id ) {
+
+				passEncoderGPU.setBindGroup( bindGroup.index, bindingsData.group );
+				currentBindingGroups[ bindGroup.index ] = bindGroup.id;
+
+			}
 
 		}
 
@@ -906,27 +912,27 @@ class WebGPUBackend extends Backend {
 
 		// occlusion queries - handle multiple consecutive draw calls for an object
 
-		if ( contextData.occlusionQuerySet !== undefined ) {
+		if ( renderContextData.occlusionQuerySet !== undefined ) {
 
-			const lastObject = contextData.lastOcclusionObject;
+			const lastObject = renderContextData.lastOcclusionObject;
 
 			if ( lastObject !== object ) {
 
 				if ( lastObject !== null && lastObject.occlusionTest === true ) {
 
 					passEncoderGPU.endOcclusionQuery();
-					contextData.occlusionQueryIndex ++;
+					renderContextData.occlusionQueryIndex ++;
 
 				}
 
 				if ( object.occlusionTest === true ) {
 
-					passEncoderGPU.beginOcclusionQuery( contextData.occlusionQueryIndex );
-					contextData.occlusionQueryObjects[ contextData.occlusionQueryIndex ] = object;
+					passEncoderGPU.beginOcclusionQuery( renderContextData.occlusionQueryIndex );
+					renderContextData.occlusionQueryObjects[ renderContextData.occlusionQueryIndex ] = object;
 
 				}
 
-				contextData.lastOcclusionObject = object;
+				renderContextData.lastOcclusionObject = object;
 
 			}
 
@@ -934,12 +940,6 @@ class WebGPUBackend extends Backend {
 
 		// draw
 
-		const drawRange = renderObject.drawRange;
-		const firstVertex = drawRange.start;
-
-		const instanceCount = this.getInstanceCount( renderObject );
-		if ( instanceCount === 0 ) return;
-
 		if ( object.isBatchedMesh === true ) {
 
 			const starts = object._multiDrawStarts;
@@ -947,29 +947,28 @@ class WebGPUBackend extends Backend {
 			const drawCount = object._multiDrawCount;
 			const drawInstances = object._multiDrawInstances;
 
-			const bytesPerElement = index.bytesPerElement || 1;
+			const bytesPerElement = hasIndex ? index.array.BYTES_PER_ELEMENT : 1;
 
 			for ( let i = 0; i < drawCount; i ++ ) {
 
 				const count = drawInstances ? drawInstances[ i ] : 1;
 				const firstInstance = count > 1 ? 0 : i;
 
-				passEncoderGPU.drawIndexed( counts[ i ] / bytesPerElement, count, starts[ i ] / 4, 0, firstInstance );
+				passEncoderGPU.drawIndexed( counts[ i ], count, starts[ i ] / bytesPerElement, 0, firstInstance );
 
 			}
 
 		} else if ( hasIndex === true ) {
 
-			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
+			const { vertexCount: indexCount, instanceCount, firstVertex: firstIndex } = drawParms;
 
-			passEncoderGPU.drawIndexed( indexCount, instanceCount, firstVertex, 0, 0 );
+			passEncoderGPU.drawIndexed( indexCount, instanceCount, firstIndex, 0, 0 );
 
 			info.update( object, indexCount, instanceCount );
 
 		} else {
 
-			const positionAttribute = geometry.attributes.position;
-			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
+			const { vertexCount, instanceCount, firstVertex } = drawParms;
 
 			passEncoderGPU.draw( vertexCount, instanceCount, firstVertex, 0 );
 
@@ -977,15 +976,6 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		if ( this.renderer._currentRenderBundle ) {
-
-			const renderBundle = passEncoderGPU.finish();
-			renderObjectData.lastPipelineGPU = pipelineGPU;
-			renderObjectData.renderBundle = renderBundle;
-			renderObjectData.bundleEncoder = passEncoderGPU;
-
-		}
-
 	}
 
 	// cache key
@@ -1018,7 +1008,7 @@ class WebGPUBackend extends Backend {
 			data.sampleCount !== sampleCount || data.colorSpace !== colorSpace ||
 			data.colorFormat !== colorFormat || data.depthStencilFormat !== depthStencilFormat ||
 			data.primitiveTopology !== primitiveTopology ||
-			data.clippingContextVersion !== renderObject.clippingContextVersion
+			data.clippingContextCacheKey !== renderObject.clippingContext.cacheKey
 		) {
 
 			data.material = material; data.materialVersion = material.version;
@@ -1036,7 +1026,7 @@ class WebGPUBackend extends Backend {
 			data.colorFormat = colorFormat;
 			data.depthStencilFormat = depthStencilFormat;
 			data.primitiveTopology = primitiveTopology;
-			data.clippingContextVersion = renderObject.clippingContextVersion;
+			data.clippingContextCacheKey = renderObject.clippingContext.cacheKey;
 
 			needsUpdate = true;
 
@@ -1066,7 +1056,7 @@ class WebGPUBackend extends Backend {
 			utils.getSampleCountRenderContext( renderContext ),
 			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
 			utils.getPrimitiveTopology( object, material ),
-			renderObject.clippingContextVersion
+			renderObject.clippingContext.cacheKey
 		].join();
 
 	}
@@ -1115,16 +1105,16 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	copyTextureToBuffer( texture, x, y, width, height ) {
+	copyTextureToBuffer( texture, x, y, width, height, faceIndex ) {
 
-		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );
+		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height, faceIndex );
 
 	}
 
 
 	initTimestampQuery( renderContext, descriptor ) {
 
-		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+		if ( ! this.trackTimestamp ) return;
 
 		const renderContextData = this.get( renderContext );
 
@@ -1154,10 +1144,11 @@ class WebGPUBackend extends Backend {
 
 	prepareTimestampBuffer( renderContext, encoder ) {
 
-		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+		if ( ! this.trackTimestamp ) return;
 
 		const renderContextData = this.get( renderContext );
 
+
 		const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
 
 		if ( renderContextData.currentTimestampQueryBuffers === undefined ) {
@@ -1189,7 +1180,7 @@ class WebGPUBackend extends Backend {
 
 	async resolveTimestampAsync( renderContext, type = 'render' ) {
 
-		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+		if ( ! this.trackTimestamp ) return;
 
 		const renderContextData = this.get( renderContext );
 
@@ -1258,9 +1249,39 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	createBundleEncoder( renderContext, renderObject ) {
+	beginBundle( renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+
+		renderContextData._currentPass = renderContextData.currentPass;
+		renderContextData._currentSets = renderContextData.currentSets;
+
+		renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null };
+		renderContextData.currentPass = this.pipelineUtils.createBundleEncoder( renderContext );
+
+	}
+
+	finishBundle( renderContext, bundle ) {
+
+		const renderContextData = this.get( renderContext );
+
+		const bundleEncoder = renderContextData.currentPass;
+		const bundleGPU = bundleEncoder.finish();
+
+		this.get( bundle ).bundleGPU = bundleGPU;
+
+		// restore render pass state
+
+		renderContextData.currentSets = renderContextData._currentSets;
+		renderContextData.currentPass = renderContextData._currentPass;
+
+	}
+
+	addBundle( renderContext, bundle ) {
+
+		const renderContextData = this.get( renderContext );
 
-		return this.pipelineUtils.createBundleEncoder( renderContext, renderObject );
+		renderContextData.renderBundles.push( this.get( bundle ).bundleGPU );
 
 	}
 
@@ -1343,9 +1364,11 @@ class WebGPUBackend extends Backend {
 
 		let dstX = 0;
 		let dstY = 0;
+		let dstLayer = 0;
 
 		let srcX = 0;
 		let srcY = 0;
+		let srcLayer = 0;
 
 		let srcWidth = srcTexture.image.width;
 		let srcHeight = srcTexture.image.height;
@@ -1354,6 +1377,7 @@ class WebGPUBackend extends Backend {
 
 			srcX = srcRegion.x;
 			srcY = srcRegion.y;
+			srcLayer = srcRegion.z || 0;
 			srcWidth = srcRegion.width;
 			srcHeight = srcRegion.height;
 
@@ -1363,6 +1387,7 @@ class WebGPUBackend extends Backend {
 
 			dstX = dstPosition.x;
 			dstY = dstPosition.y;
+			dstLayer = dstPosition.z || 0;
 
 		}
 
@@ -1375,16 +1400,17 @@ class WebGPUBackend extends Backend {
 			{
 				texture: sourceGPU,
 				mipLevel: level,
-				origin: { x: srcX, y: srcY, z: 0 }
+				origin: { x: srcX, y: srcY, z: srcLayer }
 			},
 			{
 				texture: destinationGPU,
 				mipLevel: level,
-				origin: { x: dstX, y: dstY, z: 0 }
+				origin: { x: dstX, y: dstY, z: dstLayer }
 			},
 			[
 				srcWidth,
-				srcHeight
+				srcHeight,
+				1
 			]
 		);
 
@@ -1392,7 +1418,7 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	copyFramebufferToTexture( texture, renderContext ) {
+	copyFramebufferToTexture( texture, renderContext, rectangle ) {
 
 		const renderContextData = this.get( renderContext );
 
@@ -1441,14 +1467,14 @@ class WebGPUBackend extends Backend {
 		encoder.copyTextureToTexture(
 			{
 				texture: sourceGPU,
-				origin: { x: 0, y: 0, z: 0 }
+				origin: { x: rectangle.x, y: rectangle.y, z: 0 }
 			},
 			{
 				texture: destinationGPU
 			},
 			[
-				texture.image.width,
-				texture.image.height
+				rectangle.z,
+				rectangle.w
 			]
 		);
 
@@ -1464,7 +1490,7 @@ class WebGPUBackend extends Backend {
 		if ( renderContext.stencil ) descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
-		renderContextData.currentSets = { attributes: {} };
+		renderContextData.currentSets = { attributes: {}, bindingGroups: [], pipeline: null, index: null };
 
 	}
 

package/src/renderers/webgpu/WebGPURenderer.Nodes.js

@@ -0,0 +1,42 @@
+import Renderer from '../common/Renderer.js';
+import WebGLBackend from '../webgl-fallback/WebGLBackend.js';
+import WebGPUBackend from './WebGPUBackend.js';
+import BasicNodeLibrary from './nodes/BasicNodeLibrary.js';
+
+class WebGPURenderer extends Renderer {
+
+	constructor( parameters = {} ) {
+
+		let BackendClass;
+
+		if ( parameters.forceWebGL ) {
+
+			BackendClass = WebGLBackend;
+
+		} else {
+
+			BackendClass = WebGPUBackend;
+
+			parameters.getFallback = () => {
+
+				console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+
+				return new WebGLBackend( parameters );
+
+			};
+
+		}
+
+		const backend = new BackendClass( parameters );
+
+		super( backend, parameters );
+
+		this.nodes.library = new BasicNodeLibrary();
+
+		this.isWebGPURenderer = true;
+
+	}
+
+}
+
+export default WebGPURenderer;

package/src/renderers/webgpu/WebGPURenderer.js

@@ -1,8 +1,7 @@
-import WebGPU from '../../../examples/jsm/capabilities/WebGPU.js';
-
 import Renderer from '../common/Renderer.js';
 import WebGLBackend from '../webgl-fallback/WebGLBackend.js';
 import WebGPUBackend from './WebGPUBackend.js';
+import StandardNodeLibrary from './nodes/StandardNodeLibrary.js';
 /*
 const debugHandler = {
 
@@ -27,15 +26,17 @@ class WebGPURenderer extends Renderer {
 
 			BackendClass = WebGLBackend;
 
-		} else if ( WebGPU.isAvailable() ) {
+		} else {
 
 			BackendClass = WebGPUBackend;
 
-		} else {
+			parameters.getFallback = () => {
 
-			BackendClass = WebGLBackend;
+				console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+
+				return new WebGLBackend( parameters );
 
-			console.warn( 'THREE.WebGPURenderer: WebGPU is not available, running under WebGL2 backend.' );
+			};
 
 		}
 
@@ -44,6 +45,8 @@ class WebGPURenderer extends Renderer {
 		//super( new Proxy( backend, debugHandler ) );
 		super( backend, parameters );
 
+		this.nodes.library = new StandardNodeLibrary();
+
 		this.isWebGPURenderer = true;
 
 	}

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

@@ -0,0 +1,59 @@
+import NodeLibrary from '../../common/nodes/NodeLibrary.js';
+
+// Lights
+import { PointLight } from '../../../lights/PointLight.js';
+import { PointLightNode } from '../../../nodes/Nodes.js';
+import { DirectionalLight } from '../../../lights/DirectionalLight.js';
+import { DirectionalLightNode } from '../../../nodes/Nodes.js';
+import { RectAreaLight } from '../../../lights/RectAreaLight.js';
+import { RectAreaLightNode } from '../../../nodes/Nodes.js';
+import { SpotLight } from '../../../lights/SpotLight.js';
+import { SpotLightNode } from '../../../nodes/Nodes.js';
+import { AmbientLight } from '../../../lights/AmbientLight.js';
+import { AmbientLightNode } from '../../../nodes/Nodes.js';
+import { HemisphereLight } from '../../../lights/HemisphereLight.js';
+import { HemisphereLightNode } from '../../../nodes/Nodes.js';
+import { LightProbe } from '../../../lights/LightProbe.js';
+import { LightProbeNode } from '../../../nodes/Nodes.js';
+import IESSpotLight from '../../../lights/webgpu/IESSpotLight.js';
+import { IESSpotLightNode } from '../../../nodes/Nodes.js';
+
+// Tone Mapping
+import { LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping } from '../../../constants.js';
+import { linearToneMapping, reinhardToneMapping, cineonToneMapping, acesFilmicToneMapping, agxToneMapping, neutralToneMapping } from '../../../nodes/display/ToneMappingFunctions.js';
+
+// Color Space
+import { LinearSRGBColorSpace, SRGBColorSpace } from '../../../constants.js';
+import { linearSRGBTosRGB, sRGBToLinearSRGB } from '../../../nodes/display/ColorSpaceFunctions.js';
+import { getColorSpaceMethod } from '../../../nodes/display/ColorSpaceNode.js';
+
+class BasicNodeLibrary extends NodeLibrary {
+
+	constructor() {
+
+		super();
+
+		this.addLight( PointLightNode, PointLight );
+		this.addLight( DirectionalLightNode, DirectionalLight );
+		this.addLight( RectAreaLightNode, RectAreaLight );
+		this.addLight( SpotLightNode, SpotLight );
+		this.addLight( AmbientLightNode, AmbientLight );
+		this.addLight( HemisphereLightNode, HemisphereLight );
+		this.addLight( LightProbeNode, LightProbe );
+		this.addLight( IESSpotLightNode, IESSpotLight );
+
+		this.addToneMapping( linearToneMapping, LinearToneMapping );
+		this.addToneMapping( reinhardToneMapping, ReinhardToneMapping );
+		this.addToneMapping( cineonToneMapping, CineonToneMapping );
+		this.addToneMapping( acesFilmicToneMapping, ACESFilmicToneMapping );
+		this.addToneMapping( agxToneMapping, AgXToneMapping );
+		this.addToneMapping( neutralToneMapping, NeutralToneMapping );
+
+		this.addColorSpace( linearSRGBTosRGB, getColorSpaceMethod( LinearSRGBColorSpace, SRGBColorSpace ) );
+		this.addColorSpace( sRGBToLinearSRGB, getColorSpaceMethod( SRGBColorSpace, LinearSRGBColorSpace ) );
+
+	}
+
+}
+
+export default BasicNodeLibrary;