super-three 0.136.0 → 0.141.0

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

@@ -46,7 +46,7 @@ class WebGPURenderPipeline {
 
 			vertexBuffers.push( {
 				arrayStride: attribute.arrayStride,
-				attributes: [ { shaderLocation: attribute.slot, offset: 0, format: attribute.format } ],
+				attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
 				stepMode: stepMode
 			} );
 
@@ -114,24 +114,12 @@ class WebGPURenderPipeline {
 			},
 			multisample: {
 				count: this._sampleCount
-			}
+			},
+			layout: 'auto'
 		} );
 
 	}
 
-	_getArrayStride( type, bytesPerElement ) {
-
-		// @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
-
-		if ( type === 'float' || type === 'int' || type === 'uint' ) return bytesPerElement;
-		if ( type === 'vec2' || type === 'ivec2' || type === 'uvec2' ) return bytesPerElement * 2;
-		if ( type === 'vec3' || type === 'ivec3' || type === 'uvec3' ) return bytesPerElement * 3;
-		if ( type === 'vec4' || type === 'ivec4' || type === 'uvec4' ) return bytesPerElement * 4;
-
-		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
-
-	}
-
 	_getAlphaBlend( material ) {
 
 		const blending = material.blending;
@@ -448,8 +436,8 @@ class WebGPURenderPipeline {
 		switch ( material.side ) {
 
 			case FrontSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
-				descriptor.cullMode = GPUCullMode.Back;
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.Front;
 				break;
 
 			case BackSide:
@@ -458,7 +446,7 @@ class WebGPURenderPipeline {
 				break;
 
 			case DoubleSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = GPUFrontFace.CW;
 				descriptor.cullMode = GPUCullMode.None;
 				break;
 
@@ -714,14 +702,26 @@ class WebGPURenderPipeline {
 			const type = nodeAttribute.type;
 
 			const geometryAttribute = geometry.getAttribute( name );
-			const bytesPerElement = ( geometryAttribute !== undefined ) ? geometryAttribute.array.BYTES_PER_ELEMENT : 4;
+			const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
 
-			const arrayStride = this._getArrayStride( type, bytesPerElement );
 			const format = this._getVertexFormat( type, bytesPerElement );
 
+			let arrayStride = geometryAttribute.itemSize * bytesPerElement;
+			let offset = 0;
+
+			if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
+
+				// @TODO: It can be optimized for "vertexBuffers" on RenderPipeline
+
+				arrayStride = geometryAttribute.data.stride * bytesPerElement;
+				offset = geometryAttribute.offset * bytesPerElement;
+
+			}
+
 			attributes.push( {
 				name,
 				arrayStride,
+				offset,
 				format,
 				slot
 			} );

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

@@ -24,7 +24,6 @@ class WebGPURenderPipelines {
 	get( object ) {
 
 		const device = this.device;
-		const material = object.material;
 
 		const cache = this._getCache( object );
 
@@ -32,6 +31,8 @@ class WebGPURenderPipelines {
 
 		if ( this._needsUpdate( object, cache ) ) {
 
+			const material = object.material;
+
 			// release previous cache
 
 			if ( cache.currentPipeline !== undefined ) {

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

@@ -0,0 +1,66 @@
+import LightsNode from 'three-nodes/lighting/LightsNode.js';
+
+class WebGPURenderState {
+
+	constructor() {
+
+		this.lightsNode = new LightsNode();
+
+		this.lightsArray = [];
+
+	}
+
+	init() {
+
+		this.lightsArray.length = 0;
+
+	}
+
+	pushLight( light ) {
+
+		this.lightsArray.push( light );
+
+	}
+
+	getLightsNode() {
+
+		return this.lightsNode.fromLights( this.lightsArray );
+
+	}
+
+}
+
+class WebGPURenderStates {
+
+	constructor() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+	get( scene, camera ) {
+
+		const renderStates = this.renderStates;
+
+		let renderState = renderStates.get( scene );
+
+		if ( renderState === undefined ) {
+
+			renderState = new WebGPURenderState();
+			renderStates.set( scene, renderState );
+
+		}
+
+		return renderState;
+
+	}
+
+	dispose() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+}
+
+export default WebGPURenderStates;

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

@@ -8,6 +8,7 @@ import WebGPURenderPipelines from './WebGPURenderPipelines.js';
 import WebGPUComputePipelines from './WebGPUComputePipelines.js';
 import WebGPUBindings from './WebGPUBindings.js';
 import WebGPURenderLists from './WebGPURenderLists.js';
+import WebGPURenderStates from './WebGPURenderStates.js';
 import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
@@ -65,6 +66,8 @@ class WebGPURenderer {
 
 	constructor( parameters = {} ) {
 
+		this.isWebGPURenderer = true;
+
 		// public
 
 		this.domElement = ( parameters.canvas !== undefined ) ? parameters.canvas : this._createCanvasElement();
@@ -92,7 +95,6 @@ class WebGPURenderer {
 		this._adapter = null;
 		this._device = null;
 		this._context = null;
-		this._swapChain = null;
 		this._colorBuffer = null;
 		this._depthBuffer = null;
 
@@ -106,11 +108,14 @@ class WebGPURenderer {
 		this._renderPipelines = null;
 		this._computePipelines = null;
 		this._renderLists = null;
+		this._renderStates = null;
 		this._textures = null;
 		this._background = null;
 
 		this._renderPassDescriptor = null;
 
+		this._currentRenderState = null;
+
 		this._currentRenderList = null;
 		this._opaqueSort = null;
 		this._transparentSort = null;
@@ -166,15 +171,15 @@ class WebGPURenderer {
 
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
-		const swapChain = context.configure( {
+		context.configure( {
 			device: device,
-			format: GPUTextureFormat.BGRA8Unorm // this is the only valid swap chain format right now (r121)
+			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
+			compositingAlphaMode: 'premultiplied'
 		} );
 
 		this._adapter = adapter;
 		this._device = device;
 		this._context = context;
-		this._swapChain = swapChain;
 
 		this._info = new WebGPUInfo();
 		this._properties = new WebGPUProperties();
@@ -182,11 +187,12 @@ class WebGPURenderer {
 		this._geometries = new WebGPUGeometries( this._attributes, this._info );
 		this._textures = new WebGPUTextures( device, this._properties, this._info );
 		this._objects = new WebGPUObjects( this._geometries, this._info );
-		this._nodes = new WebGPUNodes( this );
-		this._computePipelines = new WebGPUComputePipelines( device );
+		this._nodes = new WebGPUNodes( this, this._properties );
+		this._computePipelines = new WebGPUComputePipelines( device, this._nodes );
 		this._renderPipelines = new WebGPURenderPipelines( this, device, parameters.sampleCount, this._nodes );
 		this._bindings = this._renderPipelines.bindings = new WebGPUBindings( device, this._info, this._properties, this._textures, this._renderPipelines, this._computePipelines, this._attributes, this._nodes );
 		this._renderLists = new WebGPURenderLists();
+		this._renderStates = new WebGPURenderStates();
 		this._background = new WebGPUBackground( this );
 
 		//
@@ -195,7 +201,7 @@ class WebGPURenderer {
 			colorAttachments: [ {
 				view: null
 			} ],
-			 depthStencilAttachment: {
+			depthStencilAttachment: {
 				view: null,
 				depthStoreOp: GPUStoreOp.Store,
 				stencilStoreOp: GPUStoreOp.Store
@@ -227,6 +233,9 @@ class WebGPURenderer {
 		this._currentRenderList = this._renderLists.get( scene, camera );
 		this._currentRenderList.init();
 
+		this._currentRenderState = this._renderStates.get( scene );
+		this._currentRenderState.init();
+
 		this._projectObject( scene, camera, 0 );
 
 		this._currentRenderList.finish();
@@ -305,17 +314,21 @@ class WebGPURenderer {
 
 		}
 
+		// lights node
+
+		const lightsNode = this._currentRenderState.getLightsNode();
+
 		// process render lists
 
 		const opaqueObjects = this._currentRenderList.opaque;
 		const transparentObjects = this._currentRenderList.transparent;
 
-		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, passEncoder );
-		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, passEncoder );
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, scene, lightsNode, passEncoder );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, scene, lightsNode, passEncoder );
 
 		// finish render pass
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}
@@ -489,7 +502,7 @@ class WebGPURenderer {
 
 		} else {
 
-			format = GPUTextureFormat.BGRA8Unorm; // default swap chain format
+			format = GPUTextureFormat.BGRA8Unorm; // default context format
 
 		}
 
@@ -583,6 +596,7 @@ class WebGPURenderer {
 		this._bindings.dispose();
 		this._info.dispose();
 		this._renderLists.dispose();
+		this._renderStates.dispose();
 		this._textures.dispose();
 
 	}
@@ -599,30 +613,34 @@ class WebGPURenderer {
 
 	}
 
-	compute( computeParams ) {
+	compute( ...computeNodes ) {
 
 		const device = this._device;
 		const cmdEncoder = device.createCommandEncoder( {} );
 		const passEncoder = cmdEncoder.beginComputePass();
 
-		for ( const param of computeParams ) {
+		for ( const computeNode of computeNodes ) {
 
 			// pipeline
 
-			const pipeline = this._computePipelines.get( param );
+			const pipeline = this._computePipelines.get( computeNode );
 			passEncoder.setPipeline( pipeline );
 
+			// node
+
+			//this._nodes.update( computeNode );
+
 			// bind group
 
-			const bindGroup = this._bindings.getForCompute( param ).group;
-			this._bindings.update( param );
+			const bindGroup = this._bindings.get( computeNode ).group;
+			this._bindings.update( computeNode );
 			passEncoder.setBindGroup( 0, bindGroup );
 
-			passEncoder.dispatch( param.num );
+			passEncoder.dispatchWorkgroups( computeNode.dispatchCount );
 
 		}
 
-		passEncoder.endPass();
+		passEncoder.end();
 		device.queue.submit( [ cmdEncoder.finish() ] );
 
 	}
@@ -636,6 +654,7 @@ class WebGPURenderer {
 	_projectObject( object, camera, groupOrder ) {
 
 		const currentRenderList = this._currentRenderList;
+		const currentRenderState = this._currentRenderState;
 
 		if ( object.visible === false ) return;
 
@@ -653,7 +672,7 @@ class WebGPURenderer {
 
 			} else if ( object.isLight ) {
 
-				//currentRenderState.pushLight( object );
+				currentRenderState.pushLight( object );
 
 				if ( object.castShadow ) {
 
@@ -738,7 +757,7 @@ class WebGPURenderer {
 
 	}
 
-	_renderObjects( renderList, camera, passEncoder ) {
+	_renderObjects( renderList, camera, scene, lightsNode, passEncoder ) {
 
 		// process renderable objects
 
@@ -756,6 +775,13 @@ class WebGPURenderer {
 
 			this._objects.update( object );
 
+			// send scene properties to object
+
+			const objectProperties = this._properties.get( object );
+
+			objectProperties.lightsNode = lightsNode;
+			objectProperties.scene = scene;
+
 			if ( camera.isArrayCamera ) {
 
 				const cameras = camera.cameras;
@@ -827,7 +853,8 @@ class WebGPURenderer {
 
 		const drawRange = geometry.drawRange;
 		const firstVertex = drawRange.start;
-		const instanceCount = ( geometry.isInstancedBufferGeometry ) ? geometry.instanceCount : 1;
+
+		const instanceCount = geometry.isInstancedBufferGeometry ? geometry.instanceCount : ( object.isInstancedMesh ? object.count : 1 );
 
 		if ( hasIndex === true ) {
 
@@ -937,11 +964,7 @@ class WebGPURenderer {
 				device: device,
 				format: GPUTextureFormat.BGRA8Unorm,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT,
-				size: {
-					width: Math.floor( this._width * this._pixelRatio ),
-					height: Math.floor( this._height * this._pixelRatio ),
-					depthOrArrayLayers: 1
-				},
+				compositingAlphaMode: 'premultiplied'
 			} );
 
 		}
@@ -958,6 +981,4 @@ class WebGPURenderer {
 
 }
 
-WebGPURenderer.prototype.isWebGPURenderer = true;
-
 export default WebGPURenderer;

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

@@ -7,6 +7,8 @@ class WebGPUSampledTexture extends WebGPUBinding {
 
 		super( name );
 
+		this.isSampledTexture = true;
+
 		this.texture = texture;
 
 		this.dimension = GPUTextureViewDimension.TwoD;
@@ -26,13 +28,13 @@ class WebGPUSampledTexture extends WebGPUBinding {
 
 }
 
-WebGPUSampledTexture.prototype.isSampledTexture = true;
-
 class WebGPUSampledArrayTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
 
-		super( name );
+		super( name, texture );
+
+		this.isSampledArrayTexture = true;
 
 		this.dimension = GPUTextureViewDimension.TwoDArray;
 
@@ -40,13 +42,13 @@ class WebGPUSampledArrayTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampledArrayTexture.prototype.isSampledArrayTexture = true;
-
 class WebGPUSampled3DTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
+
+		super( name, texture );
 
-		super( name );
+		this.isSampled3DTexture = true;
 
 		this.dimension = GPUTextureViewDimension.ThreeD;
 
@@ -54,13 +56,13 @@ class WebGPUSampled3DTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampled3DTexture.prototype.isSampled3DTexture = true;
-
 class WebGPUSampledCubeTexture extends WebGPUSampledTexture {
 
-	constructor( name ) {
+	constructor( name, texture ) {
 
-		super( name );
+		super( name, texture );
+
+		this.isSampledCubeTexture = true;
 
 		this.dimension = GPUTextureViewDimension.Cube;
 
@@ -68,6 +70,4 @@ class WebGPUSampledCubeTexture extends WebGPUSampledTexture {
 
 }
 
-WebGPUSampledCubeTexture.prototype.isSampledCubeTexture = true;
-
 export { WebGPUSampledTexture, WebGPUSampledArrayTexture, WebGPUSampled3DTexture, WebGPUSampledCubeTexture };

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

@@ -7,6 +7,8 @@ class WebGPUSampler extends WebGPUBinding {
 
 		super( name );
 
+		this.isSampler = true;
+
 		this.texture = texture;
 
 		this.type = GPUBindingType.Sampler;
@@ -24,6 +26,4 @@ class WebGPUSampler extends WebGPUBinding {
 
 }
 
-WebGPUSampler.prototype.isSampler = true;
-
 export default WebGPUSampler;

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

@@ -1,23 +1,20 @@
-import WebGPUBinding from './WebGPUBinding.js';
+import WebGPUBuffer from './WebGPUBuffer.js';
 import { GPUBindingType } from './constants.js';
 
-class WebGPUStorageBuffer extends WebGPUBinding {
+class WebGPUStorageBuffer extends WebGPUBuffer {
 
 	constructor( name, attribute ) {
 
-		super( name );
+		super( name, GPUBindingType.StorageBuffer, attribute.array );
 
-		this.type = GPUBindingType.StorageBuffer;
+		this.isStorageBuffer = true;
 
-		this.usage = GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST;
+		this.usage |= GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE;
 
 		this.attribute = attribute;
-		this.bufferGPU = null; // set by the renderer
 
 	}
 
 }
 
-WebGPUStorageBuffer.prototype.isStorageBuffer = true;
-
 export default WebGPUStorageBuffer;

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

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants.js';
+import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
 
 // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
 
@@ -30,16 +30,14 @@ class WebGPUTextureUtils {
 
 		const mipmapVertexSource = `
 struct VarysStruct {
-
-	[[ builtin( position ) ]] Position: vec4<f32>;
-	[[ location( 0 ) ]] vTex : vec2<f32>;
-
+	@builtin( position ) Position: vec4<f32>,
+	@location( 0 ) vTex : vec2<f32>
 };
 
-[[ stage( vertex ) ]]
-fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
+@stage( vertex )
+fn main( @builtin( vertex_index ) vertexIndex : u32 ) -> VarysStruct {
 
-	var Varys: VarysStruct;
+	var Varys : VarysStruct;
 
 	var pos = array< vec2<f32>, 4 >(
 		vec2<f32>( -1.0,  1.0 ),
@@ -64,14 +62,14 @@ fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
 `;
 
 		const mipmapFragmentSource = `
-[[ group( 0 ), binding( 0 ) ]] 
+@group( 0 ) @binding( 0 )
 var imgSampler : sampler;
 
-[[ group( 0 ), binding( 1 ) ]] 
+@group( 0 ) @binding( 1 )
 var img : texture_2d<f32>;
 
-[[ stage( fragment ) ]]
-fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32> {
+@stage( fragment )
+fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 
 	return textureSample( img, imgSampler, vTex );
 
@@ -102,17 +100,18 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 			pipeline = this.device.createRenderPipeline( {
 				vertex: {
 					module: this.mipmapVertexShaderModule,
-					entryPoint: 'main',
+					entryPoint: 'main'
 				},
 				fragment: {
 					module: this.mipmapFragmentShaderModule,
 					entryPoint: 'main',
-					targets: [ { format } ],
+					targets: [ { format } ]
 				},
 				primitive: {
 					topology: GPUPrimitiveTopology.TriangleStrip,
 					stripIndexFormat: GPUIndexFormat.Uint32
-				}
+				},
+				layout: 'auto'
 			} );
 
 			this.pipelines[ format ] = pipeline;
@@ -123,7 +122,7 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 
 	}
 
-	generateMipmaps( textureGPU, textureGPUDescriptor ) {
+	generateMipmaps( textureGPU, textureGPUDescriptor, baseArrayLayer = 0 ) {
 
 		const pipeline = this.getMipmapPipeline( textureGPUDescriptor.format );
 
@@ -132,20 +131,24 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 
 		let srcView = textureGPU.createView( {
 			baseMipLevel: 0,
-			mipLevelCount: 1
+			mipLevelCount: 1,
+			baseArrayLayer
 		} );
 
 		for ( let i = 1; i < textureGPUDescriptor.mipLevelCount; i ++ ) {
 
 			const dstView = textureGPU.createView( {
 				baseMipLevel: i,
-				mipLevelCount: 1
+				mipLevelCount: 1,
+				baseArrayLayer
 			} );
 
 			const passEncoder = commandEncoder.beginRenderPass( {
 				colorAttachments: [ {
 					view: dstView,
-					loadValue: [ 0, 0, 0, 0 ]
+					loadOp: GPULoadOp.Clear,
+					storeOp: GPUStoreOp.Store,
+					clearValue: [ 0, 0, 0, 0 ]
 				} ]
 			} );
 
@@ -163,7 +166,7 @@ fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32>
 			passEncoder.setPipeline( pipeline );
 			passEncoder.setBindGroup( 0, bindGroup );
 			passEncoder.draw( 4, 1, 0, 0 );
-			passEncoder.endPass();
+			passEncoder.end();
 
 			srcView = dstView;