super-three 0.147.0 → 0.152.0

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

@@ -1,6 +1,6 @@
-import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import { GPUIndexFormat, GPUTextureFormat, GPUFeatureName, GPULoadOp } from './constants.js';
 import WebGPUAnimation from './WebGPUAnimation.js';
-import WebGPUObjects from './WebGPUObjects.js';
+import WebGPURenderObjects from './WebGPURenderObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
 import WebGPUInfo from './WebGPUInfo.js';
@@ -14,8 +14,7 @@ import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
 import WebGPUUtils from './WebGPUUtils.js';
-
-import { Frustum, Matrix4, Vector3, Color, LinearEncoding } from 'three';
+import { Frustum, Matrix4, Vector3, Color, SRGBColorSpace, NoToneMapping, DepthFormat } 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.' );
 
@@ -98,7 +97,10 @@ class WebGPURenderer {
 		this.autoClearDepth = true;
 		this.autoClearStencil = true;
 
-		this.outputEncoding = LinearEncoding;
+		this.outputColorSpace = SRGBColorSpace;
+
+		this.toneMapping = NoToneMapping;
+		this.toneMappingExposure = 1.0;
 
 		this.sortObjects = true;
 
@@ -135,11 +137,8 @@ class WebGPURenderer {
 
 		this._animation = new WebGPUAnimation();
 
-		this._renderPassDescriptor = null;
-
 		this._currentRenderState = null;
 
-		this._currentRenderList = null;
 		this._opaqueSort = null;
 		this._transparentSort = null;
 
@@ -166,9 +165,14 @@ class WebGPURenderer {
 
 		}
 
-		this._parameters.requiredFeatures = ( parameters.requiredFeatures === undefined ) ? [] : parameters.requiredFeatures;
 		this._parameters.requiredLimits = ( parameters.requiredLimits === undefined ) ? {} : parameters.requiredLimits;
 
+		// backwards compatibility
+
+		this.shadow = {
+			shadowMap: {}
+		};
+
 	}
 
 	async init() {
@@ -193,8 +197,24 @@ class WebGPURenderer {
 
 		}
 
+		// feature support
+
+		const features = Object.values( GPUFeatureName );
+
+		const supportedFeatures = [];
+
+		for ( const name of features ) {
+
+			if ( adapter.features.has( name ) ) {
+
+				supportedFeatures.push( name );
+
+			}
+
+		}
+
 		const deviceDescriptor = {
-			requiredFeatures: parameters.requiredFeatures,
+			requiredFeatures: supportedFeatures,
 			requiredLimits: parameters.requiredLimits
 		};
 
@@ -202,44 +222,29 @@ class WebGPURenderer {
 
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
-		context.configure( {
-			device,
-			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
-			alphaMode: 'premultiplied'
-		} );
-
 		this._adapter = adapter;
 		this._device = device;
 		this._context = context;
 
+		this._configureContext();
+
 		this._info = new WebGPUInfo();
 		this._properties = new WebGPUProperties();
 		this._attributes = new WebGPUAttributes( device );
-		this._geometries = new WebGPUGeometries( this._attributes, this._info );
+		this._geometries = new WebGPUGeometries( this._attributes, this._properties, this._info );
 		this._textures = new WebGPUTextures( device, this._properties, this._info );
-		this._objects = new WebGPUObjects( this._geometries, this._info );
 		this._utils = new WebGPUUtils( this );
 		this._nodes = new WebGPUNodes( this, this._properties );
+		this._objects = new WebGPURenderObjects( this, this._nodes, this._geometries, this._info );
 		this._computePipelines = new WebGPUComputePipelines( device, this._nodes );
 		this._renderPipelines = new WebGPURenderPipelines( device, this._nodes, this._utils );
 		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 );
+		this._background = new WebGPUBackground( this, this._properties );
 
 		//
 
-		this._renderPassDescriptor = {
-			colorAttachments: [ {
-				view: null
-			} ],
-			depthStencilAttachment: {
-				view: null,
-				depthStoreOp: GPUStoreOp.Store,
-				stencilStoreOp: GPUStoreOp.Store
-			}
-		};
-
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
@@ -252,11 +257,27 @@ class WebGPURenderer {
 
 	async render( scene, camera ) {
 
-		if ( this._initialized === false ) return await this.init();
+		if ( this._initialized === false ) await this.init();
+
+		// preserve render tree
+
+		const nodeFrame = this._nodes.nodeFrame;
+
+		const previousRenderId = nodeFrame.renderId;
+		const previousRenderState = this._currentRenderState;
 
 		//
 
-		if ( this._animation.isAnimating === false ) this._nodes.updateFrame();
+		const renderState = this._renderStates.get( scene, camera );
+		const renderTarget = this._renderTarget;
+
+		this._currentRenderState = renderState;
+
+		nodeFrame.renderId ++;
+
+		//
+
+		if ( this._animation.isAnimating === false ) nodeFrame.update();
 
 		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
@@ -267,28 +288,32 @@ class WebGPURenderer {
 		_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 		_frustum.setFromProjectionMatrix( _projScreenMatrix );
 
-		this._currentRenderList = this._renderLists.get( scene, camera );
-		this._currentRenderList.init();
+		const renderList = this._renderLists.get( scene, camera );
+		renderList.init();
 
-		this._currentRenderState = this._renderStates.get( scene );
-		this._currentRenderState.init();
+		this._projectObject( scene, camera, 0, renderList );
 
-		this._projectObject( scene, camera, 0 );
-
-		this._currentRenderList.finish();
+		renderList.finish();
 
 		if ( this.sortObjects === true ) {
 
-			this._currentRenderList.sort( this._opaqueSort, this._transparentSort );
+			renderList.sort( this._opaqueSort, this._transparentSort );
 
 		}
 
 		// prepare render pass descriptor
 
-		const colorAttachment = this._renderPassDescriptor.colorAttachments[ 0 ];
-		const depthStencilAttachment = this._renderPassDescriptor.depthStencilAttachment;
+		renderState.descriptorGPU = {
+			colorAttachments: [ {
+				view: null
+			} ],
+			depthStencilAttachment: {
+				view: null
+			}
+		};
 
-		const renderTarget = this._renderTarget;
+		const colorAttachment = renderState.descriptorGPU.colorAttachments[ 0 ];
+		const depthStencilAttachment = renderState.descriptorGPU.depthStencilAttachment;
 
 		if ( renderTarget !== null ) {
 
@@ -301,6 +326,8 @@ class WebGPURenderer {
 			colorAttachment.view = renderTargetProperties.colorTextureGPU.createView();
 			depthStencilAttachment.view = renderTargetProperties.depthTextureGPU.createView();
 
+			renderState.stencil = renderTarget.depthTexture ? renderTarget.depthTexture.format !== DepthFormat : true;
+
 		} else {
 
 			if ( this._parameters.antialias === true ) {
@@ -321,13 +348,21 @@ class WebGPURenderer {
 
 		//
 
-		this._background.update( this._currentRenderList, scene );
+		this._nodes.updateEnvironment( scene );
+		this._nodes.updateFog( scene );
+		this._nodes.updateBackground( scene );
+		this._nodes.updateToneMapping();
+
+		//
+
+		this._background.update( scene, renderList, renderState );
 
 		// start render pass
 
 		const device = this._device;
-		const cmdEncoder = device.createCommandEncoder( {} );
-		const passEncoder = cmdEncoder.beginRenderPass( this._renderPassDescriptor );
+
+		renderState.encoderGPU = device.createCommandEncoder( {} );
+		renderState.currentPassGPU = renderState.encoderGPU.beginRenderPass( renderState.descriptorGPU );
 
 		// global rasterization settings for all renderable objects
 
@@ -338,7 +373,7 @@ class WebGPURenderer {
 			const width = Math.floor( vp.width * this._pixelRatio );
 			const height = Math.floor( vp.height * this._pixelRatio );
 
-			passEncoder.setViewport( vp.x, vp.y, width, height, vp.minDepth, vp.maxDepth );
+			renderState.currentPassGPU.setViewport( vp.x, vp.y, width, height, vp.minDepth, vp.maxDepth );
 
 		}
 
@@ -349,26 +384,29 @@ class WebGPURenderer {
 			const width = Math.floor( sc.width * this._pixelRatio );
 			const height = Math.floor( sc.height * this._pixelRatio );
 
-			passEncoder.setScissorRect( sc.x, sc.y, width, height );
+			renderState.currentPassGPU.setScissorRect( sc.x, sc.y, width, height );
 
 		}
 
-		// lights node
-
-		const lightsNode = this._currentRenderState.getLightsNode();
-
 		// process render lists
 
-		const opaqueObjects = this._currentRenderList.opaque;
-		const transparentObjects = this._currentRenderList.transparent;
+		const opaqueObjects = renderList.opaque;
+		const transparentObjects = renderList.transparent;
+		const lightsNode = renderList.lightsNode;
 
-		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, scene, lightsNode, passEncoder );
-		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, scene, lightsNode, passEncoder );
+		if ( opaqueObjects.length > 0 ) this._renderObjects( opaqueObjects, camera, scene, lightsNode, renderState );
+		if ( transparentObjects.length > 0 ) this._renderObjects( transparentObjects, camera, scene, lightsNode, renderState );
 
 		// finish render pass
 
-		passEncoder.end();
-		device.queue.submit( [ cmdEncoder.finish() ] );
+		renderState.currentPassGPU.end();
+
+		device.queue.submit( [ renderState.encoderGPU.finish() ] );
+
+		// restore render tree
+
+		nodeFrame.renderId = previousRenderId;
+		this._currentRenderState = previousRenderState;
 
 	}
 
@@ -384,7 +422,7 @@ class WebGPURenderer {
 
 	}
 
-	async getArrayFromBuffer( attribute ) {
+	async getArrayBuffer( attribute ) {
 
 		return await this._attributes.getArrayBuffer( attribute );
 
@@ -503,6 +541,42 @@ class WebGPURenderer {
 
 	}
 
+	copyFramebufferToRenderTarget( renderTarget ) {
+
+		const renderState = this._currentRenderState;
+		const { encoderGPU, descriptorGPU } = renderState;
+
+		const texture = renderTarget.texture;
+		texture.internalFormat = GPUTextureFormat.BGRA8Unorm;
+
+		this._textures.initRenderTarget( renderTarget );
+
+		const sourceGPU = this._context.getCurrentTexture();
+		const destinationGPU = this._textures.getTextureGPU( texture );
+
+		renderState.currentPassGPU.end();
+
+		encoderGPU.copyTextureToTexture(
+			{
+			  texture: sourceGPU
+			},
+			{
+			  texture: destinationGPU
+			},
+			[
+				texture.image.width,
+				texture.image.height
+			]
+		);
+
+		descriptorGPU.colorAttachments[ 0 ].loadOp = GPULoadOp.Load;
+		if ( renderState.depth ) descriptorGPU.depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+		if ( renderState.stencil ) descriptorGPU.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+
+		renderState.currentPassGPU = encoderGPU.beginRenderPass( descriptorGPU );
+
+	}
+
 	getViewport( target ) {
 
 		const viewport = this._viewport;
@@ -590,7 +664,7 @@ class WebGPURenderer {
 
 	clear() {
 
-		this._background.clear();
+		if ( this._background ) this._background.clear();
 
 	}
 
@@ -620,7 +694,7 @@ class WebGPURenderer {
 
 	async compute( ...computeNodes ) {
 
-		if ( this._initialized === false ) return await this.init();
+		if ( this._initialized === false ) await this.init();
 
 		const device = this._device;
 		const computePipelines = this._computePipelines;
@@ -649,7 +723,7 @@ class WebGPURenderer {
 
 			// bind group
 
-			const bindGroup = this._bindings.get( computeNode ).group;
+			const bindGroup = this._bindings.getForCompute( computeNode ).group;
 			this._bindings.update( computeNode );
 			passEncoder.setBindGroup( 0, bindGroup );
 
@@ -668,10 +742,31 @@ class WebGPURenderer {
 
 	}
 
-	_projectObject( object, camera, groupOrder ) {
+	hasFeature( name ) {
+
+		if ( this._initialized === false ) {
+
+			throw new Error( 'THREE.WebGPURenderer: Renderer must be initialized before testing features.' );
+
+		}
+
+		//
 
-		const currentRenderList = this._currentRenderList;
-		const currentRenderState = this._currentRenderState;
+		const features = Object.values( GPUFeatureName );
+
+		if ( features.includes( name ) === false ) {
+
+			throw new Error( 'THREE.WebGPURenderer: Unknown WebGPU GPU feature: ' + name );
+
+		}
+
+		//
+
+		return this._adapter.features.has( name );
+
+	}
+
+	_projectObject( object, camera, groupOrder, renderList ) {
 
 		if ( object.visible === false ) return;
 
@@ -689,13 +784,7 @@ class WebGPURenderer {
 
 			} else if ( object.isLight ) {
 
-				currentRenderState.pushLight( object );
-
-				if ( object.castShadow ) {
-
-					//currentRenderState.pushShadow( object );
-
-				}
+				renderList.pushLight( object );
 
 			} else if ( object.isSprite ) {
 
@@ -712,7 +801,7 @@ class WebGPURenderer {
 
 					if ( material.visible ) {
 
-						currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 					}
 
@@ -726,14 +815,19 @@ class WebGPURenderer {
 
 				if ( ! object.frustumCulled || _frustum.intersectsObject( object ) ) {
 
+					const geometry = object.geometry;
+					const material = object.material;
+
 					if ( this.sortObjects === true ) {
 
-						_vector3.setFromMatrixPosition( object.matrixWorld ).applyMatrix4( _projScreenMatrix );
+						if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
 
-					}
+						_vector3
+							.copy( geometry.boundingSphere.center )
+							.applyMatrix4( object.matrixWorld )
+							.applyMatrix4( _projScreenMatrix );
 
-					const geometry = object.geometry;
-					const material = object.material;
+					}
 
 					if ( Array.isArray( material ) ) {
 
@@ -746,7 +840,7 @@ class WebGPURenderer {
 
 							if ( groupMaterial && groupMaterial.visible ) {
 
-								currentRenderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
+								renderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
 
 							}
 
@@ -754,7 +848,7 @@ class WebGPURenderer {
 
 					} else if ( material.visible ) {
 
-						currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
+						renderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 					}
 
@@ -768,13 +862,13 @@ class WebGPURenderer {
 
 		for ( let i = 0, l = children.length; i < l; i ++ ) {
 
-			this._projectObject( children[ i ], camera, groupOrder );
+			this._projectObject( children[ i ], camera, groupOrder, renderList );
 
 		}
 
 	}
 
-	_renderObjects( renderList, camera, scene, lightsNode, passEncoder ) {
+	_renderObjects( renderList, camera, scene, lightsNode ) {
 
 		// process renderable objects
 
@@ -801,9 +895,9 @@ class WebGPURenderer {
 						const minDepth = ( vp.minDepth === undefined ) ? 0 : vp.minDepth;
 						const maxDepth = ( vp.maxDepth === undefined ) ? 1 : vp.maxDepth;
 
-						passEncoder.setViewport( vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth );
+						this._currentRenderState.currentPassGPU.setViewport( vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth );
 
-						this._renderObject( object, scene, camera2, geometry, material, group, lightsNode, passEncoder );
+						this._renderObject( object, scene, camera2, geometry, material, group, lightsNode );
 
 					}
 
@@ -811,7 +905,7 @@ class WebGPURenderer {
 
 			} else {
 
-				this._renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder );
+				this._renderObject( object, scene, camera, geometry, material, group, lightsNode );
 
 			}
 
@@ -819,43 +913,51 @@ class WebGPURenderer {
 
 	}
 
-	_renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder ) {
+	_renderObject( object, scene, camera, geometry, material, group, lightsNode ) {
 
-		const info = this._info;
+		material = scene.overrideMaterial !== null ? scene.overrideMaterial : material;
 
-		// send scene properties to object
+		//
 
-		const objectProperties = this._properties.get( object );
+		object.onBeforeRender( this, scene, camera, geometry, material, group );
+
+		//
 
-		objectProperties.lightsNode = lightsNode;
-		objectProperties.scene = scene;
+		const renderObject = this._getRenderObject( object, material, scene, camera, lightsNode );
 
 		//
 
-		object.onBeforeRender( this, scene, camera, geometry, material, group );
+		this._nodes.updateBefore( renderObject );
+
+		//
+
+		const passEncoder = this._currentRenderState.currentPassGPU;
+		const info = this._info;
+
+		//
 
 		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
 
 		// updates
 
-		this._nodes.update( object, camera );
-		this._bindings.update( object );
-		this._objects.update( object );
+		this._nodes.update( renderObject );
+		this._geometries.update( renderObject );
+		this._bindings.update( renderObject );
 
 		// pipeline
 
-		const renderPipeline = this._renderPipelines.get( object );
+		const renderPipeline = this._renderPipelines.get( renderObject );
 		passEncoder.setPipeline( renderPipeline.pipeline );
 
 		// bind group
 
-		const bindGroup = this._bindings.get( object ).group;
+		const bindGroup = this._bindings.get( renderObject ).group;
 		passEncoder.setBindGroup( 0, bindGroup );
 
 		// index
 
-		const index = geometry.index;
+		const index = this._geometries.getIndex( renderObject );
 
 		const hasIndex = ( index !== null );
 
@@ -897,6 +999,46 @@ class WebGPURenderer {
 
 	}
 
+	_getRenderObject( object, material, scene, camera, lightsNode ) {
+
+		const renderObject = this._objects.get( object, material, scene, camera, lightsNode );
+		const renderObjectProperties = this._properties.get( renderObject );
+
+		if ( renderObjectProperties.initialized !== true ) {
+
+			renderObjectProperties.initialized = true;
+
+			const dispose = () => {
+
+				this._renderPipelines.remove( renderObject );
+				this._nodes.remove( renderObject );
+				this._properties.remove( renderObject );
+
+				this._objects.remove( object, material, scene, camera, lightsNode );
+
+				renderObject.material.removeEventListener( 'dispose', dispose );
+
+			};
+
+			renderObject.material.addEventListener( 'dispose', dispose );
+
+		}
+
+		const cacheKey = renderObject.getCacheKey();
+
+		if ( renderObjectProperties.cacheKey !== cacheKey ) {
+
+			renderObjectProperties.cacheKey = cacheKey;
+
+			this._renderPipelines.remove( renderObject );
+			this._nodes.remove( renderObject );
+
+		}
+
+		return renderObject;
+
+	}
+
 	_setupIndexBuffer( index, encoder ) {
 
 		const buffer = this._attributes.get( index ).buffer;
@@ -937,6 +1079,7 @@ class WebGPURenderer {
 			if ( this._colorBuffer ) this._colorBuffer.destroy();
 
 			this._colorBuffer = this._device.createTexture( {
+				label: 'colorBuffer',
 				size: {
 					width: Math.floor( this._width * this._pixelRatio ),
 					height: Math.floor( this._height * this._pixelRatio ),
@@ -944,7 +1087,7 @@ class WebGPURenderer {
 				},
 				sampleCount: this._parameters.sampleCount,
 				format: GPUTextureFormat.BGRA8Unorm,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
 			} );
 
 		}
@@ -960,6 +1103,7 @@ class WebGPURenderer {
 			if ( this._depthBuffer ) this._depthBuffer.destroy();
 
 			this._depthBuffer = this._device.createTexture( {
+				label: 'depthBuffer',
 				size: {
 					width: Math.floor( this._width * this._pixelRatio ),
 					height: Math.floor( this._height * this._pixelRatio ),
@@ -967,7 +1111,7 @@ class WebGPURenderer {
 				},
 				sampleCount: this._parameters.sampleCount,
 				format: GPUTextureFormat.Depth24PlusStencil8,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
 			} );
 
 		}
@@ -983,7 +1127,7 @@ class WebGPURenderer {
 			this._context.configure( {
 				device: device,
 				format: GPUTextureFormat.BGRA8Unorm,
-				usage: GPUTextureUsage.RENDER_ATTACHMENT,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
 				alphaMode: 'premultiplied'
 			} );
 

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

@@ -1,5 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
-import { GPUBindingType, GPUTextureViewDimension } from './constants.js';
+import { GPUBindingType, GPUTextureViewDimension, GPUTextureAspect } from './constants.js';
 
 class WebGPUSampledTexture extends WebGPUBinding {
 
@@ -16,6 +16,8 @@ class WebGPUSampledTexture extends WebGPUBinding {
 		this.type = GPUBindingType.SampledTexture;
 		this.visibility = GPUShaderStage.FRAGMENT;
 
+		this.aspect = texture.isDepthTexture ? GPUTextureAspect.DepthOnly : GPUTextureAspect.All;
+
 		this.textureGPU = null; // set by the renderer
 
 	}

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

@@ -1,4 +1,4 @@
-import { WebGLRenderTarget } from 'three';
+import WebGPURenderTarget from './WebGPURenderTarget.js';
 
 class WebGPUTextureRenderer {
 
@@ -6,9 +6,7 @@ class WebGPUTextureRenderer {
 
 		this.renderer = renderer;
 
-		// @TODO: Consider to introduce WebGPURenderTarget or rename WebGLRenderTarget to just RenderTarget
-
-		this.renderTarget = new WebGLRenderTarget( options );
+		this.renderTarget = new WebGPURenderTarget( 1, 1, options );
 
 	}
 

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

@@ -82,10 +82,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
 		} );