super-three 0.133.4 → 0.136.1

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

@@ -3,14 +3,13 @@ import WebGPUProgrammableStage from './WebGPUProgrammableStage.js';
 
 class WebGPURenderPipelines {
 
-	constructor( renderer, properties, device, glslang, sampleCount, nodes ) {
+	constructor( renderer, device, sampleCount, nodes, bindings = null ) {
 
 		this.renderer = renderer;
-		this.properties = properties;
 		this.device = device;
-		this.glslang = glslang;
 		this.sampleCount = sampleCount;
 		this.nodes = nodes;
+		this.bindings = bindings;
 
 		this.pipelines = [];
 		this.objectCache = new WeakMap();
@@ -25,11 +24,7 @@ class WebGPURenderPipelines {
 	get( object ) {
 
 		const device = this.device;
-		const glslang = this.glslang;
-		const properties = this.properties;
-
 		const material = object.material;
-		const materialProperties = properties.get( material );
 
 		const cache = this._getCache( object );
 
@@ -37,6 +32,14 @@ class WebGPURenderPipelines {
 
 		if ( this._needsUpdate( object, cache ) ) {
 
+			// release previous cache
+
+			if ( cache.currentPipeline !== undefined ) {
+
+				this._releaseObject( object );
+
+			}
+
 			// get shader
 
 			const nodeBuilder = this.nodes.get( object );
@@ -47,7 +50,7 @@ class WebGPURenderPipelines {
 
 			if ( stageVertex === undefined ) {
 
-				stageVertex = new WebGPUProgrammableStage( device, glslang, nodeBuilder.vertexShader, 'vertex' );
+				stageVertex = new WebGPUProgrammableStage( device, nodeBuilder.vertexShader, 'vertex' );
 				this.stages.vertex.set( nodeBuilder.vertexShader, stageVertex );
 
 			}
@@ -56,7 +59,7 @@ class WebGPURenderPipelines {
 
 			if ( stageFragment === undefined ) {
 
-				stageFragment = new WebGPUProgrammableStage( device, glslang, nodeBuilder.fragmentShader, 'fragment' );
+				stageFragment = new WebGPUProgrammableStage( device, nodeBuilder.fragmentShader, 'fragment' );
 				this.stages.fragment.set( nodeBuilder.fragmentShader, stageFragment );
 
 			}
@@ -66,37 +69,15 @@ class WebGPURenderPipelines {
 			currentPipeline = this._acquirePipeline( stageVertex, stageFragment, object, nodeBuilder );
 			cache.currentPipeline = currentPipeline;
 
-			// keep track of all pipelines which are used by a material
-
-			let materialPipelines = materialProperties.pipelines;
-
-			if ( materialPipelines === undefined ) {
-
-				materialPipelines = new Set();
-				materialProperties.pipelines = materialPipelines;
-
-			}
-
-			if ( materialPipelines.has( currentPipeline ) === false ) {
+			// keep track of all used times
 
-				materialPipelines.add( currentPipeline );
+			currentPipeline.usedTimes ++;
+			stageVertex.usedTimes ++;
+			stageFragment.usedTimes ++;
 
-				currentPipeline.usedTimes ++;
-				stageVertex.usedTimes ++;
-				stageFragment.usedTimes ++;
+			// events
 
-			}
-
-			// dispose
-
-			if ( materialProperties.disposeCallback === undefined ) {
-
-				const disposeCallback = onMaterialDispose.bind( this );
-				materialProperties.disposeCallback = disposeCallback;
-
-				material.addEventListener( 'dispose', disposeCallback );
-
-			}
+			material.addEventListener( 'dispose', cache.dispose );
 
 		} else {
 
@@ -184,7 +165,20 @@ class WebGPURenderPipelines {
 
 		if ( cache === undefined ) {
 
-			cache = {};
+			cache = {
+
+				dispose: () => {
+
+					this._releaseObject( object );
+
+					this.objectCache.delete( object );
+
+					object.material.removeEventListener( 'dispose', cache.dispose );
+
+				}
+
+			};
+
 			this.objectCache.set( object, cache );
 
 		}
@@ -193,6 +187,18 @@ class WebGPURenderPipelines {
 
 	}
 
+	_releaseObject( object ) {
+
+		const cache = this.objectCache.get( object );
+
+		this._releasePipeline( cache.currentPipeline );
+		delete cache.currentPipeline;
+
+		this.nodes.remove( object );
+		this.bindings.remove( object );
+
+	}
+
 	_releasePipeline( pipeline ) {
 
 		if ( -- pipeline.usedTimes === 0 ) {
@@ -284,31 +290,4 @@ class WebGPURenderPipelines {
 
 }
 
-function onMaterialDispose( event ) {
-
-	const properties = this.properties;
-
-	const material = event.target;
-	const materialProperties = properties.get( material );
-
-	material.removeEventListener( 'dispose', materialProperties.disposeCallback );
-
-	properties.remove( material );
-
-	// remove references to pipelines
-
-	const pipelines = materialProperties.pipelines;
-
-	if ( pipelines !== undefined ) {
-
-		for ( const pipeline of pipelines ) {
-
-			this._releasePipeline( pipeline );
-
-		}
-
-	}
-
-}
-
 export default WebGPURenderPipelines;

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

@@ -12,8 +12,6 @@ import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
 
-import glslang from '../../libs/glslang.js';
-
 import { Frustum, Matrix4, Vector3, Color, LinearEncoding } from 'three';
 
 console.info( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.' );
@@ -94,7 +92,6 @@ class WebGPURenderer {
 		this._adapter = null;
 		this._device = null;
 		this._context = null;
-		this._swapChain = null;
 		this._colorBuffer = null;
 		this._depthBuffer = null;
 
@@ -166,30 +163,27 @@ class WebGPURenderer {
 
 		const device = await adapter.requestDevice( deviceDescriptor );
 
-		const compiler = await glslang();
-
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
-		const swapChain = context.configure( {
+		context.configure( {
 			device: device,
-			format: GPUTextureFormat.BRGA8Unorm // this is the only valid swap chain format right now (r121)
+			format: GPUTextureFormat.BGRA8Unorm // this is the only valid context format right now (r121)
 		} );
 
 		this._adapter = adapter;
 		this._device = device;
 		this._context = context;
-		this._swapChain = swapChain;
 
 		this._info = new WebGPUInfo();
 		this._properties = new WebGPUProperties();
 		this._attributes = new WebGPUAttributes( device );
 		this._geometries = new WebGPUGeometries( this._attributes, this._info );
-		this._textures = new WebGPUTextures( device, this._properties, this._info, compiler );
+		this._textures = new WebGPUTextures( device, this._properties, this._info );
 		this._objects = new WebGPUObjects( this._geometries, this._info );
 		this._nodes = new WebGPUNodes( this );
-		this._renderPipelines = new WebGPURenderPipelines( this, this._properties, device, compiler, parameters.sampleCount, this._nodes );
-		this._computePipelines = new WebGPUComputePipelines( device, compiler );
-		this._bindings = new WebGPUBindings( device, this._info, this._properties, this._textures, this._renderPipelines, this._computePipelines, this._attributes, this._nodes );
+		this._computePipelines = new WebGPUComputePipelines( device );
+		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._background = new WebGPUBackground( this );
 
@@ -493,7 +487,7 @@ class WebGPURenderer {
 
 		} else {
 
-			format = GPUTextureFormat.BRGA8Unorm; // default swap chain format
+			format = GPUTextureFormat.BGRA8Unorm; // default context format
 
 		}
 
@@ -639,7 +633,6 @@ class WebGPURenderer {
 
 	_projectObject( object, camera, groupOrder ) {
 
-		const info = this._info;
 		const currentRenderList = this._currentRenderList;
 
 		if ( object.visible === false ) return;
@@ -693,19 +686,6 @@ class WebGPURenderer {
 
 			} else if ( object.isMesh || object.isLine || object.isPoints ) {
 
-				if ( object.isSkinnedMesh ) {
-
-					// update skeleton only once in a frame
-
-					if ( object.skeleton.frame !== info.render.frame ) {
-
-						object.skeleton.update();
-						object.skeleton.frame = info.render.frame;
-
-					}
-
-				}
-
 				if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
 
 					if ( this.sortObjects === true ) {
@@ -791,7 +771,7 @@ class WebGPURenderer {
 						passEncoder.setViewport( vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth );
 
 						this._nodes.update( object, camera2 );
-						this._bindings.update( object, camera2 );
+						this._bindings.update( object );
 						this._renderObject( object, passEncoder );
 
 					}
@@ -801,7 +781,7 @@ class WebGPURenderer {
 			} else {
 
 				this._nodes.update( object, camera );
-				this._bindings.update( object, camera );
+				this._bindings.update( object );
 				this._renderObject( object, passEncoder );
 
 			}
@@ -914,7 +894,7 @@ class WebGPURenderer {
 					depthOrArrayLayers: 1
 				},
 				sampleCount: this._parameters.sampleCount,
-				format: GPUTextureFormat.BRGA8Unorm,
+				format: GPUTextureFormat.BGRA8Unorm,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT
 			} );
 
@@ -953,7 +933,7 @@ class WebGPURenderer {
 
 			this._context.configure( {
 				device: device,
-				format: GPUTextureFormat.BRGA8Unorm,
+				format: GPUTextureFormat.BGRA8Unorm,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT,
 				size: {
 					width: Math.floor( this._width * this._pixelRatio ),
@@ -976,4 +956,6 @@ class WebGPURenderer {
 
 }
 
+WebGPURenderer.prototype.isWebGPURenderer = true;
+
 export default WebGPURenderer;

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

@@ -24,28 +24,59 @@ import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology } from './constants
 
 class WebGPUTextureUtils {
 
-	constructor( device, glslang ) {
+	constructor( device ) {
 
 		this.device = device;
 
-		const mipmapVertexSource = `#version 450
-			const vec2 pos[4] = vec2[4](vec2(-1.0f, 1.0f), vec2(1.0f, 1.0f), vec2(-1.0f, -1.0f), vec2(1.0f, -1.0f));
-			const vec2 tex[4] = vec2[4](vec2(0.0f, 0.0f), vec2(1.0f, 0.0f), vec2(0.0f, 1.0f), vec2(1.0f, 1.0f));
-			layout(location = 0) out vec2 vTex;
-			void main() {
-				vTex = tex[gl_VertexIndex];
-				gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
-			}
-		`;
-
-		const mipmapFragmentSource = `#version 450
-			layout(set = 0, binding = 0) uniform sampler imgSampler;
-			layout(set = 0, binding = 1) uniform texture2D img;
-			layout(location = 0) in vec2 vTex;
-			layout(location = 0) out vec4 outColor;
-			void main() {
-				outColor = texture(sampler2D(img, imgSampler), vTex);
-			}`;
+		const mipmapVertexSource = `
+struct VarysStruct {
+
+	[[ builtin( position ) ]] Position: vec4<f32>;
+	[[ location( 0 ) ]] vTex : vec2<f32>;
+
+};
+
+[[ stage( vertex ) ]]
+fn main( [[ builtin( vertex_index ) ]] vertexIndex : u32 ) -> VarysStruct {
+
+	var Varys: VarysStruct;
+
+	var pos = array< vec2<f32>, 4 >(
+		vec2<f32>( -1.0,  1.0 ),
+		vec2<f32>(  1.0,  1.0 ),
+		vec2<f32>( -1.0, -1.0 ),
+		vec2<f32>(  1.0, -1.0 )
+	);
+
+	var tex = array< vec2<f32>, 4 >(
+		vec2<f32>( 0.0, 0.0 ),
+		vec2<f32>( 1.0, 0.0 ),
+		vec2<f32>( 0.0, 1.0 ),
+		vec2<f32>( 1.0, 1.0 )
+	);
+
+	Varys.vTex = tex[ vertexIndex ];
+	Varys.Position = vec4<f32>( pos[ vertexIndex ], 0.0, 1.0 );
+
+	return Varys;
+
+}
+`;
+
+		const mipmapFragmentSource = `
+[[ group( 0 ), binding( 0 ) ]] 
+var imgSampler : sampler;
+
+[[ group( 0 ), binding( 1 ) ]] 
+var img : texture_2d<f32>;
+
+[[ stage( fragment ) ]]
+fn main( [[ location( 0 ) ]] vTex : vec2<f32> ) -> [[ location( 0 ) ]] vec4<f32> {
+
+	return textureSample( img, imgSampler, vTex );
+
+}
+`;
 
 		this.sampler = device.createSampler( { minFilter: GPUFilterMode.Linear } );
 
@@ -53,10 +84,11 @@ class WebGPUTextureUtils {
 		this.pipelines = {};
 
 		this.mipmapVertexShaderModule = device.createShaderModule( {
-			code: glslang.compileGLSL( mipmapVertexSource, 'vertex' ),
+			code: mipmapVertexSource
 		} );
+
 		this.mipmapFragmentShaderModule = device.createShaderModule( {
-			code: glslang.compileGLSL( mipmapFragmentSource, 'fragment' ),
+			code: mipmapFragmentSource
 		} );
 
 	}
@@ -82,6 +114,7 @@ class WebGPUTextureUtils {
 					stripIndexFormat: GPUIndexFormat.Uint32
 				}
 			} );
+
 			this.pipelines[ format ] = pipeline;
 
 		}
@@ -99,32 +132,32 @@ class WebGPUTextureUtils {
 
 		let srcView = textureGPU.createView( {
 			baseMipLevel: 0,
-			mipLevelCount: 1,
+			mipLevelCount: 1
 		} );
 
 		for ( let i = 1; i < textureGPUDescriptor.mipLevelCount; i ++ ) {
 
 			const dstView = textureGPU.createView( {
 				baseMipLevel: i,
-				mipLevelCount: 1,
+				mipLevelCount: 1
 			} );
 
 			const passEncoder = commandEncoder.beginRenderPass( {
 				colorAttachments: [ {
 					view: dstView,
-					loadValue: [ 0, 0, 0, 0 ],
-				} ],
+					loadValue: [ 0, 0, 0, 0 ]
+				} ]
 			} );
 
 			const bindGroup = this.device.createBindGroup( {
 				layout: bindGroupLayout,
 				entries: [ {
 					binding: 0,
-					resource: this.sampler,
+					resource: this.sampler
 				}, {
 					binding: 1,
-					resource: srcView,
-				} ],
+					resource: srcView
+				} ]
 			} );
 
 			passEncoder.setPipeline( pipeline );

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

@@ -1,17 +1,16 @@
 import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
 import { CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping,
-	RGBFormat, RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
+	RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
 } from 'three';
 import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
 class WebGPUTextures {
 
-	constructor( device, properties, info, glslang ) {
+	constructor( device, properties, info ) {
 
 		this.device = device;
 		this.properties = properties;
 		this.info = info;
-		this.glslang = glslang;
 
 		this.defaultTexture = null;
 		this.defaultCubeTexture = null;
@@ -42,7 +41,9 @@ class WebGPUTextures {
 			texture.minFilter = NearestFilter;
 			texture.magFilter = NearestFilter;
 
-			this.defaultTexture = this._createTexture( texture );
+			this._uploadTexture( texture );
+
+			this.defaultTexture = this.getTextureGPU( texture );
 
 		}
 
@@ -58,7 +59,9 @@ class WebGPUTextures {
 			texture.minFilter = NearestFilter;
 			texture.magFilter = NearestFilter;
 
-			this.defaultCubeTexture = this._createTexture( texture );
+			this._uploadTexture( texture );
+
+			this.defaultCubeTexture = this.getTextureGPU( texture );
 
 		}
 
@@ -84,7 +87,7 @@ class WebGPUTextures {
 
 	updateTexture( texture ) {
 
-		let forceUpdate = false;
+		let needsUpdate = false;
 
 		const textureProperties = this.properties.get( texture );
 
@@ -117,21 +120,9 @@ class WebGPUTextures {
 
 				}
 
-				// texture creation
-
-				if ( textureProperties.textureGPU !== undefined ) {
+				//
 
-					// @TODO: Avoid calling of destroy() in certain scenarios. When only the contents of a texture
-					// are updated, a buffer upload should be sufficient. However, if the user changes
-					// the dimensions of the texture, format or usage, a new instance of GPUTexture is required.
-
-					textureProperties.textureGPU.destroy();
-
-				}
-
-				textureProperties.textureGPU = this._createTexture( texture );
-				textureProperties.version = texture.version;
-				forceUpdate = true;
+				needsUpdate = this._uploadTexture( texture );
 
 			}
 
@@ -143,11 +134,11 @@ class WebGPUTextures {
 		if ( textureProperties.initializedRTT === false ) {
 
 			textureProperties.initializedRTT = true;
-			forceUpdate = true;
+			needsUpdate = true;
 
 		}
 
-		return forceUpdate;
+		return needsUpdate;
 
 	}
 
@@ -305,11 +296,15 @@ class WebGPUTextures {
 
 	}
 
-	_createTexture( texture ) {
+	_uploadTexture( texture ) {
+
+		let needsUpdate = false;
 
 		const device = this.device;
 		const image = texture.image;
 
+		const textureProperties = this.properties.get( texture );
+
 		const { width, height, depth } = this._getSize( texture );
 		const needsMipmaps = this._needsMipmaps( texture );
 		const dimension = this._getDimension( texture );
@@ -326,8 +321,6 @@ class WebGPUTextures {
 
 		}
 
-		// texture creation
-
 		const textureGPUDescriptor = {
 			size: {
 				width: width,
@@ -340,7 +333,19 @@ class WebGPUTextures {
 			format: format,
 			usage: usage
 		};
-		const textureGPU = device.createTexture( textureGPUDescriptor );
+
+		// texture creation
+
+		let textureGPU = textureProperties.textureGPU;
+
+		if ( textureGPU === undefined ) {
+
+			textureGPU = device.createTexture( textureGPUDescriptor );
+			textureProperties.textureGPU = textureGPU;
+
+			needsUpdate = true;
+
+		}
 
 		// transfer texture data
 
@@ -376,7 +381,9 @@ class WebGPUTextures {
 
 		}
 
-		return textureGPU;
+		textureProperties.version = texture.version;
+
+		return needsUpdate;
 
 	}
 
@@ -481,7 +488,7 @@ class WebGPUTextures {
 
 		if ( this.utils === null ) {
 
-			this.utils = new WebGPUTextureUtils( this.device, this.glslang ); // only create this helper if necessary
+			this.utils = new WebGPUTextureUtils( this.device ); // only create this helper if necessary
 
 		}
 
@@ -557,7 +564,6 @@ class WebGPUTextures {
 				formatGPU = ( encoding === sRGBEncoding ) ? GPUTextureFormat.BC3RGBAUnormSRGB : GPUTextureFormat.BC3RGBAUnorm;
 				break;
 
-			case RGBFormat:
 			case RGBAFormat:
 
 				switch ( type ) {

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

@@ -107,8 +107,8 @@ export const GPUTextureFormat = {
 	RGBA8Snorm: 'rgba8snorm',
 	RGBA8Uint: 'rgba8uint',
 	RGBA8Sint: 'rgba8sint',
-	BRGA8Unorm: 'bgra8unorm',
-	BRGA8UnormSRGB: 'bgra8unorm-srgb',
+	BGRA8Unorm: 'bgra8unorm',
+	BGRA8UnormSRGB: 'bgra8unorm-srgb',
 	// Packed 32-bit formats
 	RGB9E5UFloat: 'rgb9e5ufloat',
 	RGB10A2Unorm: 'rgb10a2unorm',