super-three 0.147.1 → 0.154.0

package/examples/jsm/renderers/webgpu/{WebGPURenderPipeline.js → utils/WebGPUPipelineUtils.js}

@@ -1,37 +1,42 @@
-import { GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
+import { BlendColorFactor, OneMinusBlendColorFactor, } from '../../common/Constants.js';
+
+import {
+	GPUFrontFace, GPUCullMode, GPUColorWriteFlags, GPUCompareFunction, GPUBlendFactor, GPUBlendOperation, GPUIndexFormat, GPUStencilOperation
+} from './WebGPUConstants.js';
+
 import {
 	FrontSide, BackSide, DoubleSide,
 	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
-	NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc,
-	KeepStencilOp, ZeroStencilOp, ReplaceStencilOp, InvertStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp,
 	NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending,
+	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstColorFactor,
+	OneMinusDstColorFactor, DstAlphaFactor, OneMinusDstAlphaFactor, SrcAlphaSaturateFactor,
 	AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation,
-	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor
+	KeepStencilOp, ZeroStencilOp, ReplaceStencilOp, InvertStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp,
+	NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc
 } from 'three';
 
-class WebGPURenderPipeline {
+class WebGPUPipelineUtils {
 
-	constructor( device, utils ) {
+	constructor( backend ) {
 
-		this.cacheKey = null;
-		this.shaderAttributes = null;
-		this.stageVertex = null;
-		this.stageFragment = null;
-		this.usedTimes = 0;
-
-		this._device = device;
-		this._utils = utils;
+		this.backend = backend;
 
 	}
 
-	init( cacheKey, stageVertex, stageFragment, object, nodeBuilder ) {
+	createRenderPipeline( renderObject ) {
+
+		const { object, material, geometry, pipeline } = renderObject;
+		const { vertexProgram, fragmentProgram } = pipeline;
 
-		const material = object.material;
-		const geometry = object.geometry;
+		const backend = this.backend;
+		const device = backend.device;
+		const utils = backend.utils;
+
+		const pipelineData = backend.get( pipeline );
 
 		// determine shader attributes
 
-		const shaderAttributes = this._getShaderAttributes( nodeBuilder, geometry );
+		const shaderAttributes = backend.attributeUtils.createShaderAttributes( renderObject );
 
 		// vertex buffers
 
@@ -39,32 +44,24 @@ class WebGPURenderPipeline {
 
 		for ( const attribute of shaderAttributes ) {
 
-			const name = attribute.name;
-			const geometryAttribute = geometry.getAttribute( name );
-			const stepMode = ( geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ) ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
-
 			vertexBuffers.push( {
 				arrayStride: attribute.arrayStride,
 				attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
-				stepMode: stepMode
+				stepMode: attribute.stepMode
 			} );
 
 		}
 
-		this.cacheKey = cacheKey;
-		this.shaderAttributes = shaderAttributes;
-		this.stageVertex = stageVertex;
-		this.stageFragment = stageFragment;
-
 		// blending
 
-		let alphaBlend = {};
-		let colorBlend = {};
+		let blending;
 
 		if ( material.transparent === true && material.blending !== NoBlending ) {
 
-			alphaBlend = this._getAlphaBlend( material );
-			colorBlend = this._getColorBlend( material );
+			blending = {
+				alpha: this._getAlphaBlend( material ),
+				color: this._getColorBlend( material )
+			};
 
 		}
 
@@ -85,21 +82,21 @@ class WebGPURenderPipeline {
 
 		//
 
-		const primitiveState = this._getPrimitiveState( object, material );
+		const vertexModule = backend.get( vertexProgram ).module;
+		const fragmentModule = backend.get( fragmentProgram ).module;
+
+		const primitiveState = this._getPrimitiveState( object, geometry, material );
 		const colorWriteMask = this._getColorWriteMask( material );
 		const depthCompare = this._getDepthCompare( material );
-		const colorFormat = this._utils.getCurrentColorFormat();
-		const depthStencilFormat = this._utils.getCurrentDepthStencilFormat();
-		const sampleCount = this._utils.getSampleCount();
+		const colorFormat = utils.getCurrentColorFormat( renderObject.context );
+		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderObject.context );
+		const sampleCount = utils.getSampleCount( renderObject.context );
 
-		this.pipeline = this._device.createRenderPipeline( {
-			vertex: Object.assign( {}, stageVertex.stage, { buffers: vertexBuffers } ),
-			fragment: Object.assign( {}, stageFragment.stage, { targets: [ {
+		pipelineData.pipeline = device.createRenderPipeline( {
+			vertex: Object.assign( {}, vertexModule, { buffers: vertexBuffers } ),
+			fragment: Object.assign( {}, fragmentModule, { targets: [ {
 				format: colorFormat,
-				blend: {
-					alpha: alphaBlend,
-					color: colorBlend
-				},
+				blend: blending,
 				writeMask: colorWriteMask
 			} ] } ),
 			primitive: primitiveState,
@@ -120,6 +117,22 @@ class WebGPURenderPipeline {
 
 	}
 
+	createComputePipeline( pipeline ) {
+
+		const backend = this.backend;
+		const device = backend.device;
+
+		const computeProgram = backend.get( pipeline.computeProgram ).module;
+
+		const pipelineGPU = backend.get( pipeline );
+
+		pipelineGPU.pipeline = device.createComputePipeline( {
+			compute: computeProgram,
+			layout: 'auto'
+		} );
+
+	}
+
 	_getAlphaBlend( material ) {
 
 		const blending = material.blending;
@@ -266,7 +279,6 @@ class WebGPURenderPipeline {
 				blendFactor = GPUBlendFactor.OneMinusBlendColor;
 				break;
 
-
 			default:
 				console.error( 'THREE.WebGPURenderer: Blend factor not supported.', blend );
 
@@ -276,41 +288,6 @@ class WebGPURenderPipeline {
 
 	}
 
-	_getBlendOperation( blendEquation ) {
-
-		let blendOperation;
-
-		switch ( blendEquation ) {
-
-			case AddEquation:
-				blendOperation = GPUBlendOperation.Add;
-				break;
-
-			case SubtractEquation:
-				blendOperation = GPUBlendOperation.Subtract;
-				break;
-
-			case ReverseSubtractEquation:
-				blendOperation = GPUBlendOperation.ReverseSubtract;
-				break;
-
-			case MinEquation:
-				blendOperation = GPUBlendOperation.Min;
-				break;
-
-			case MaxEquation:
-				blendOperation = GPUBlendOperation.Max;
-				break;
-
-			default:
-				console.error( 'THREE.WebGPURenderer: Blend equation not supported.', blendEquation );
-
-		}
-
-		return blendOperation;
-
-	}
-
 	_getColorBlend( material ) {
 
 		const blending = material.blending;
@@ -363,110 +340,6 @@ class WebGPURenderPipeline {
 
 	}
 
-	_getColorWriteMask( material ) {
-
-		return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
-
-	}
-
-	_getDepthCompare( material ) {
-
-		let depthCompare;
-
-		if ( material.depthTest === false ) {
-
-			depthCompare = GPUCompareFunction.Always;
-
-		} else {
-
-			const depthFunc = material.depthFunc;
-
-			switch ( depthFunc ) {
-
-				case NeverDepth:
-					depthCompare = GPUCompareFunction.Never;
-					break;
-
-				case AlwaysDepth:
-					depthCompare = GPUCompareFunction.Always;
-					break;
-
-				case LessDepth:
-					depthCompare = GPUCompareFunction.Less;
-					break;
-
-				case LessEqualDepth:
-					depthCompare = GPUCompareFunction.LessEqual;
-					break;
-
-				case EqualDepth:
-					depthCompare = GPUCompareFunction.Equal;
-					break;
-
-				case GreaterEqualDepth:
-					depthCompare = GPUCompareFunction.GreaterEqual;
-					break;
-
-				case GreaterDepth:
-					depthCompare = GPUCompareFunction.Greater;
-					break;
-
-				case NotEqualDepth:
-					depthCompare = GPUCompareFunction.NotEqual;
-					break;
-
-				default:
-					console.error( 'THREE.WebGPURenderer: Invalid depth function.', depthFunc );
-
-			}
-
-		}
-
-		return depthCompare;
-
-	}
-
-	_getPrimitiveState( object, material ) {
-
-		const descriptor = {};
-
-		descriptor.topology = this._utils.getPrimitiveTopology( object );
-
-		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
-
-		}
-
-		switch ( material.side ) {
-
-			case FrontSide:
-				descriptor.frontFace = GPUFrontFace.CW;
-				descriptor.cullMode = GPUCullMode.Front;
-				break;
-
-			case BackSide:
-				descriptor.frontFace = GPUFrontFace.CW;
-				descriptor.cullMode = GPUCullMode.Back;
-				break;
-
-			case DoubleSide:
-				descriptor.frontFace = GPUFrontFace.CW;
-				descriptor.cullMode = GPUCullMode.None;
-				break;
-
-			default:
-				console.error( 'THREE.WebGPURenderer: Unknown Material.side value.', material.side );
-				break;
-
-		}
-
-		return descriptor;
-
-	}
-
 	_getStencilCompare( material ) {
 
 		let stencilCompare;
@@ -563,173 +436,145 @@ 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' ) {
-
-			if ( bytesPerElement === 2 ) {
-
-				return GPUVertexFormat.Float16x4;
-
-			} else {
-
-				return GPUVertexFormat.Float32x4;
-
-			}
-
-		}
-
-		// int
-
-		if ( type === 'int' ) return GPUVertexFormat.Sint32;
+	_getBlendOperation( blendEquation ) {
 
-		if ( type === 'ivec2' ) {
+		let blendOperation;
 
-			if ( bytesPerElement === 1 ) {
+		switch ( blendEquation ) {
 
-				return GPUVertexFormat.Sint8x2;
+			case AddEquation:
+				blendOperation = GPUBlendOperation.Add;
+				break;
 
-			} else if ( bytesPerElement === 2 ) {
+			case SubtractEquation:
+				blendOperation = GPUBlendOperation.Subtract;
+				break;
 
-				return GPUVertexFormat.Sint16x2;
+			case ReverseSubtractEquation:
+				blendOperation = GPUBlendOperation.ReverseSubtract;
+				break;
 
-			} else {
+			case MinEquation:
+				blendOperation = GPUBlendOperation.Min;
+				break;
 
-				return GPUVertexFormat.Sint32x2;
+			case MaxEquation:
+				blendOperation = GPUBlendOperation.Max;
+				break;
 
-			}
+			default:
+				console.error( 'THREE.WebGPUPipelineUtils: Blend equation not supported.', blendEquation );
 
 		}
 
-		if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;
-
-		if ( type === 'ivec4' ) {
-
-			if ( bytesPerElement === 1 ) {
+		return blendOperation;
 
-				return GPUVertexFormat.Sint8x4;
+	}
 
-			} else if ( bytesPerElement === 2 ) {
+	_getPrimitiveState( object, geometry, material ) {
 
-				return GPUVertexFormat.Sint16x4;
+		const descriptor = {};
+		const utils = this.backend.utils;
 
-			} else {
+		descriptor.topology = utils.getPrimitiveTopology( object, material );
 
-				return GPUVertexFormat.Sint32x4;
+		if ( object.isLine === true && object.isLineSegments !== true ) {
 
-			}
+			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
 
 		}
 
-		// uint
-
-		if ( type === 'uint' ) return GPUVertexFormat.Uint32;
-
-		if ( type === 'uvec2' ) {
-
-			if ( bytesPerElement === 1 ) {
-
-				return GPUVertexFormat.Uint8x2;
-
-			} else if ( bytesPerElement === 2 ) {
+		switch ( material.side ) {
 
-				return GPUVertexFormat.Uint16x2;
+			case FrontSide:
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.Front;
+				break;
 
-			} else {
+			case BackSide:
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.Back;
+				break;
 
-				return GPUVertexFormat.Uint32x2;
+			case DoubleSide:
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.None;
+				break;
 
-			}
+			default:
+				console.error( 'THREE.WebGPUPipelineUtils: Unknown material.side value.', material.side );
+				break;
 
 		}
 
-		if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;
-
-		if ( type === 'uvec4' ) {
-
-			if ( bytesPerElement === 1 ) {
+		return descriptor;
 
-				return GPUVertexFormat.Uint8x4;
+	}
 
-			} else if ( bytesPerElement === 2 ) {
+	_getColorWriteMask( material ) {
 
-				return GPUVertexFormat.Uint16x4;
+		return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
 
-			} else {
+	}
 
-				return GPUVertexFormat.Uint32x4;
+	_getDepthCompare( material ) {
 
-			}
+		let depthCompare;
 
-		}
+		if ( material.depthTest === false ) {
 
-		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
+			depthCompare = GPUCompareFunction.Always;
 
-	}
+		} else {
 
-	_getShaderAttributes( nodeBuilder, geometry ) {
+			const depthFunc = material.depthFunc;
 
-		const nodeAttributes = nodeBuilder.attributes;
-		const attributes = [];
+			switch ( depthFunc ) {
 
-		for ( let slot = 0; slot < nodeAttributes.length; slot ++ ) {
+				case NeverDepth:
+					depthCompare = GPUCompareFunction.Never;
+					break;
 
-			const nodeAttribute = nodeAttributes[ slot ];
+				case AlwaysDepth:
+					depthCompare = GPUCompareFunction.Always;
+					break;
 
-			const name = nodeAttribute.name;
-			const type = nodeAttribute.type;
+				case LessDepth:
+					depthCompare = GPUCompareFunction.Less;
+					break;
 
-			const geometryAttribute = geometry.getAttribute( name );
-			const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
+				case LessEqualDepth:
+					depthCompare = GPUCompareFunction.LessEqual;
+					break;
 
-			const format = this._getVertexFormat( type, bytesPerElement );
+				case EqualDepth:
+					depthCompare = GPUCompareFunction.Equal;
+					break;
 
-			let arrayStride = geometryAttribute.itemSize * bytesPerElement;
-			let offset = 0;
+				case GreaterEqualDepth:
+					depthCompare = GPUCompareFunction.GreaterEqual;
+					break;
 
-			if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
+				case GreaterDepth:
+					depthCompare = GPUCompareFunction.Greater;
+					break;
 
-				// @TODO: It can be optimized for "vertexBuffers" on RenderPipeline
+				case NotEqualDepth:
+					depthCompare = GPUCompareFunction.NotEqual;
+					break;
 
-				arrayStride = geometryAttribute.data.stride * bytesPerElement;
-				offset = geometryAttribute.offset * bytesPerElement;
+				default:
+					console.error( 'THREE.WebGPUPipelineUtils: Invalid depth function.', depthFunc );
 
 			}
 
-			attributes.push( {
-				name,
-				arrayStride,
-				offset,
-				format,
-				slot
-			} );
-
 		}
 
-		return attributes;
+		return depthCompare;
 
 	}
 
 }
 
-export default WebGPURenderPipeline;
+export default WebGPUPipelineUtils;

package/examples/jsm/renderers/webgpu/{WebGPUTextureUtils.js → utils/WebGPUTextureMipmapUtils.js}

@@ -1,28 +1,6 @@
-// Copyright 2020 Brandon Jones
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
+import { GPUTextureViewDimension, GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './WebGPUConstants.js';
 
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-import { GPUTextureViewDimension, GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
-
-// ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
-
-class WebGPUTextureUtils {
+class WebGPUTextureMipmapUtils {
 
 	constructor( device ) {
 
@@ -82,10 +60,12 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 		this.pipelines = {};
 
 		this.mipmapVertexShaderModule = device.createShaderModule( {
+			label: 'mipmapVertex',
 			code: mipmapVertexSource
 		} );
 
 		this.mipmapFragmentShaderModule = device.createShaderModule( {
+			label: 'mipmapFragment',
 			code: mipmapFragmentSource
 		} );
 
@@ -180,4 +160,4 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 
 }
 
-export default WebGPUTextureUtils;
+export default WebGPUTextureMipmapUtils;