@needle-tools/three 0.154.3 → 0.160.3

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

@@ -1,847 +1,1321 @@
-/*// debugger tools
-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 WGSLNodeBuilder from './nodes/WGSLNodeBuilder.js';
-import Backend from '../common/Backend.js';
-
-import { DepthTexture, DepthFormat, DepthStencilFormat, UnsignedInt248Type, UnsignedIntType, WebGPUCoordinateSystem } from 'three';
-
-import WebGPUUtils from './utils/WebGPUUtils.js';
-import WebGPUAttributeUtils from './utils/WebGPUAttributeUtils.js';
-import WebGPUBindingUtils from './utils/WebGPUBindingUtils.js';
-import WebGPUPipelineUtils from './utils/WebGPUPipelineUtils.js';
-import WebGPUTextureUtils from './utils/WebGPUTextureUtils.js';
-
-// statics
-
-let _staticAdapter = null;
-
-if ( navigator.gpu !== undefined ) {
-
-	_staticAdapter = await navigator.gpu.requestAdapter();
-
-}
-
-//
-
-class WebGPUBackend extends Backend {
-
-	constructor( parameters = {} ) {
-
-		super( parameters );
-
-		// some parameters require default values other than "undefined"
-
-		this.parameters.antialias = ( parameters.antialias === true );
-
-		if ( this.parameters.antialias === true ) {
-
-			this.parameters.sampleCount = ( parameters.sampleCount === undefined ) ? 4 : parameters.sampleCount;
-
-		} else {
-
-			this.parameters.sampleCount = 1;
-
-		}
-
-		this.parameters.requiredLimits = ( parameters.requiredLimits === undefined ) ? {} : parameters.requiredLimits;
-
-		this.adapter = null;
-		this.device = null;
-		this.context = null;
-		this.colorBuffer = null;
-
-		this.depthBuffers = new WeakMap();
-
-		this.utils = new WebGPUUtils( this );
-		this.attributeUtils = new WebGPUAttributeUtils( this );
-		this.bindingUtils = new WebGPUBindingUtils( this );
-		this.pipelineUtils = new WebGPUPipelineUtils( this );
-		this.textureUtils = new WebGPUTextureUtils( this );
-
-	}
-
-	async init( renderer ) {
-
-		await super.init( renderer );
-
-		//
-
-		const parameters = this.parameters;
-
-		const adapterOptions = {
-			powerPreference: parameters.powerPreference
-		};
-
-		const adapter = await navigator.gpu.requestAdapter( adapterOptions );
-
-		if ( adapter === null ) {
-
-			throw new Error( 'WebGPUBackend: Unable to create WebGPU adapter.' );
-
-		}
-
-		// 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: supportedFeatures,
-			requiredLimits: parameters.requiredLimits
-		};
-
-		const device = await adapter.requestDevice( deviceDescriptor );
-
-		const context = ( parameters.context !== undefined ) ? parameters.context : renderer.domElement.getContext( 'webgpu' );
-
-		this.adapter = adapter;
-		this.device = device;
-		this.context = context;
-
-		this.updateSize();
-
-	}
-
-	get coordinateSystem() {
-
-		return WebGPUCoordinateSystem;
-
-	}
-
-	async getArrayBuffer( attribute ) {
-
-		return await this.attributeUtils.getArrayBuffer( attribute );
-
-	}
-
-	beginRender( renderContext ) {
-
-		const renderContextData = this.get( renderContext );
-
-		const device = this.device;
-
-		const descriptor = {
-			colorAttachments: [ {
-				view: null
-			} ],
-			depthStencilAttachment: {
-				view: null
-			}
-		};
-
-		const colorAttachment = descriptor.colorAttachments[ 0 ];
-		const depthStencilAttachment = descriptor.depthStencilAttachment;
-
-		const antialias = this.parameters.antialias;
-
-		if ( renderContext.texture !== null ) {
-
-			const textureData = this.get( renderContext.texture );
-			const depthTextureData = this.get( renderContext.depthTexture );
-
-			// @TODO: Support RenderTarget with antialiasing.
-
-			colorAttachment.view = textureData.texture.createView( {
-				baseMipLevel: 0,
-				mipLevelCount: 1,
-				baseArrayLayer: renderContext.activeCubeFace,
-				dimension: GPUTextureViewDimension.TwoD
-			} );
-
-			depthStencilAttachment.view = depthTextureData.texture.createView();
-
-			if ( renderContext.stencil && renderContext.depthTexture.format === DepthFormat ) {
-
-				renderContext.stencil = false;
-
-			}
-
-		} else {
-
-			if ( antialias === true ) {
-
-				colorAttachment.view = this.colorBuffer.createView();
-				colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
-
-			} else {
-
-				colorAttachment.view = this.context.getCurrentTexture().createView();
-				colorAttachment.resolveTarget = undefined;
-
-			}
-
-			depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
-
-		}
-
-		if ( renderContext.clearColor ) {
-
-			colorAttachment.clearValue = renderContext.clearColorValue;
-			colorAttachment.loadOp = GPULoadOp.Clear;
-			colorAttachment.storeOp = GPUStoreOp.Store;
-
-		} else {
-
-			colorAttachment.loadOp = GPULoadOp.Load;
-			colorAttachment.storeOp = GPUStoreOp.Store;
-
-		}
-
-		//
-
-		if ( renderContext.depth ) {
-
-			if ( renderContext.clearDepth ) {
-
-				depthStencilAttachment.depthClearValue = renderContext.clearDepthValue;
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
-				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
-
-			} else {
-
-				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
-				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
-
-			}
-
-		}
-
-		if ( renderContext.stencil ) {
-
-			if ( renderContext.clearStencil ) {
-
-				depthStencilAttachment.stencilClearValue = renderContext.clearStencilValue;
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
-				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
-
-			} else {
-
-				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
-				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
-
-			}
-
-		}
-
-		//
-
-		const encoder = device.createCommandEncoder( { label: 'renderContext_' + renderContext.id } );
-		const currentPass = encoder.beginRenderPass( descriptor );
-
-		//
-
-		renderContextData.descriptor = descriptor;
-		renderContextData.encoder = encoder;
-		renderContextData.currentPass = currentPass;
-		renderContextData.currentAttributesSet = {};
-
-		//
-
-		if ( renderContext.viewport ) {
-
-			this.updateViewport( renderContext );
-
-		}
-
-		if ( renderContext.scissor ) {
-
-			const { x, y, width, height } = renderContext.scissorValue;
-
-			currentPass.setScissorRect( x, y, width, height );
-
-		}
-
-	}
-
-	finishRender( renderContext ) {
-
-		const renderContextData = this.get( renderContext );
-
-		renderContextData.currentPass.end();
-
-		this.device.queue.submit( [ renderContextData.encoder.finish() ] );
-
-		//
-
-		if ( renderContext.texture !== null && renderContext.texture.generateMipmaps === true ) {
-
-			this.textureUtils.generateMipmaps( renderContext.texture );
-
-		}
-
-	}
-
-	updateViewport( renderContext ) {
-
-		const { currentPass } = this.get( renderContext );
-		const { x, y, width, height, minDepth, maxDepth } = renderContext.viewportValue;
-
-		currentPass.setViewport( x, y, width, height, minDepth, maxDepth );
-
-	}
-
-	clear( renderContext, color, depth, stencil ) {
-
-		const device = this.device;
-		const renderContextData = this.get( renderContext );
-
-		const { descriptor } = renderContextData;
-
-		depth = depth && renderContext.depth;
-		stencil = stencil && renderContext.stencil;
-
-		const colorAttachment = descriptor.colorAttachments[ 0 ];
-
-		const antialias = this.parameters.antialias;
-
-		// @TODO: Include render target in clear operation.
-		if ( antialias === true ) {
-
-			colorAttachment.view = this.colorBuffer.createView();
-			colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
-
-		} else {
-
-			colorAttachment.view = this.context.getCurrentTexture().createView();
-			colorAttachment.resolveTarget = undefined;
-
-		}
-
-		descriptor.depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
-
-		if ( color ) {
-
-			colorAttachment.loadOp = GPULoadOp.Clear;
-			colorAttachment.clearValue = renderContext.clearColorValue;
-
-		}
-
-		if ( depth ) {
-
-			descriptor.depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
-			descriptor.depthStencilAttachment.depthClearValue = renderContext.clearDepthValue;
-
-		}
-
-		if ( stencil ) {
-
-			descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
-			descriptor.depthStencilAttachment.stencilClearValue = renderContext.clearStencilValue;
-
-		}
-
-		renderContextData.encoder = device.createCommandEncoder( {} );
-		renderContextData.currentPass = renderContextData.encoder.beginRenderPass( descriptor );
-
-		renderContextData.currentPass.end();
-
-		device.queue.submit( [ renderContextData.encoder.finish() ] );
-
-	}
-
-	// compute
-
-	beginCompute( computeGroup ) {
-
-		const groupGPU = this.get( computeGroup );
-
-		groupGPU.cmdEncoderGPU = this.device.createCommandEncoder( {} );
-		groupGPU.passEncoderGPU = groupGPU.cmdEncoderGPU.beginComputePass();
-
-	}
-
-	compute( computeGroup, computeNode, bindings, pipeline ) {
-
-		const { passEncoderGPU } = this.get( computeGroup );
-
-		// pipeline
-
-		const pipelineGPU = this.get( pipeline ).pipeline;
-		passEncoderGPU.setPipeline( pipelineGPU );
-
-		// bind group
-
-		const bindGroupGPU = this.get( bindings ).group;
-		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
-
-		passEncoderGPU.dispatchWorkgroups( computeNode.dispatchCount );
-
-	}
-
-	finishCompute( computeGroup ) {
-
-		const groupData = this.get( computeGroup );
-
-		groupData.passEncoderGPU.end();
-		this.device.queue.submit( [ groupData.cmdEncoderGPU.finish() ] );
-
-	}
-
-	// render object
-
-	draw( renderObject, info ) {
-
-		const { object, geometry, context, pipeline } = renderObject;
-
-		const bindingsData = this.get( renderObject.getBindings() );
-		const contextData = this.get( context );
-		const pipelineGPU = this.get( pipeline ).pipeline;
-		const attributesSet = contextData.currentAttributesSet;
-
-		// pipeline
-
-		const passEncoderGPU = contextData.currentPass;
-		passEncoderGPU.setPipeline( pipelineGPU );
-
-		// bind group
-
-		const bindGroupGPU = bindingsData.group;
-		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
-
-		// attributes
-
-		const index = renderObject.getIndex();
-
-		const hasIndex = ( index !== null );
-
-		// index
-
-		if ( hasIndex === true ) {
-
-			if ( attributesSet.index !== index ) {
-			
-				const buffer = this.get( index ).buffer;
-				const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
-
-				passEncoderGPU.setIndexBuffer( buffer, indexFormat );
-
-				attributesSet.index = index;
-
-			}
-
-		}
-
-		// vertex buffers
-
-		const attributes = renderObject.getAttributes();
-
-		for ( let i = 0, l = attributes.length; i < l; i ++ ) {
-
-			const attribute = attributes[ i ];
-
-			if ( attributesSet[ i ] !== attribute ) {
-
-				const buffer = this.get( attribute ).buffer;
-				passEncoderGPU.setVertexBuffer( i, buffer );
-
-				attributesSet[ i ] = attribute;
-
-			}
-
-		}
-
-		// draw
-
-		const drawRange = geometry.drawRange;
-		const firstVertex = drawRange.start;
-
-		const instanceCount = this.getInstanceCount( renderObject );
-
-		if ( hasIndex === true ) {
-
-			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
-
-			passEncoderGPU.drawIndexed( indexCount, instanceCount, firstVertex, 0, 0 );
-
-			info.update( object, indexCount, instanceCount );
-
-		} else {
-
-			const positionAttribute = geometry.attributes.position;
-			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
-
-			passEncoderGPU.draw( vertexCount, instanceCount, firstVertex, 0 );
-
-			info.update( object, vertexCount, instanceCount );
-
-		}
-
-	}
-
-	// cache key
-
-	needsUpdate( renderObject ) {
-
-		const renderObjectGPU = this.get( renderObject );
-
-		const { object, material } = renderObject;
-
-		const utils = this.utils;
-
-		const sampleCount = utils.getSampleCount( renderObject.context );
-		const colorSpace = utils.getCurrentColorSpace( renderObject.context );
-		const colorFormat = utils.getCurrentColorFormat( renderObject.context );
-		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderObject.context );
-		const primitiveTopology = utils.getPrimitiveTopology( object, material );
-
-		let needsUpdate = false;
-
-		if ( renderObjectGPU.sampleCount !== sampleCount || renderObjectGPU.colorSpace !== colorSpace ||
-			renderObjectGPU.colorFormat !== colorFormat || renderObjectGPU.depthStencilFormat !== depthStencilFormat ||
-            renderObjectGPU.primitiveTopology !== primitiveTopology ) {
-
-			renderObjectGPU.sampleCount = sampleCount;
-			renderObjectGPU.colorSpace = colorSpace;
-			renderObjectGPU.colorFormat = colorFormat;
-			renderObjectGPU.depthStencilFormat = depthStencilFormat;
-			renderObjectGPU.primitiveTopology = primitiveTopology;
-
-			needsUpdate = true;
-
-		}
-
-		return needsUpdate;
-
-	}
-
-	getCacheKey( renderObject ) {
-
-		const { object, material } = renderObject;
-
-		const utils = this.utils;
-		const renderContext = renderObject.context;
-
-		return [
-			utils.getSampleCount( renderContext ),
-			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
-			utils.getPrimitiveTopology( object, material )
-		].join();
-
-	}
-
-	// textures
-
-	createSampler( texture ) {
-
-		this.textureUtils.createSampler( texture );
-
-	}
-
-	destroySampler( texture ) {
-
-		this.textureUtils.destroySampler( texture );
-
-	}
-
-	createDefaultTexture( texture ) {
-
-		this.textureUtils.createDefaultTexture( texture );
-
-	}
-
-	createTexture( texture ) {
-
-		this.textureUtils.createTexture( texture );
-
-	}
-
-	updateTexture( texture ) {
-
-		this.textureUtils.updateTexture( texture );
-
-	}
-
-	destroyTexture( texture ) {
-
-		this.textureUtils.destroyTexture( texture );
-
-	}
-
-	copyTextureToBuffer( texture, x, y, width, height ) {
-
-		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );
-
-	}
-
-	// node builder
-
-	createNodeBuilder( object, renderer, scene = null ) {
-
-		return new WGSLNodeBuilder( object, renderer, scene );
-
-	}
-
-	// program
-
-	createProgram( program ) {
-
-		const programGPU = this.get( program );
-
-		programGPU.module = {
-			module: this.device.createShaderModule( { code: program.code, label: program.stage } ),
-			entryPoint: 'main'
-		};
-
-	}
-
-	destroyProgram( program ) {
-
-		this.delete( program );
-
-	}
-
-	// pipelines
-
-	createRenderPipeline( renderObject ) {
-
-		this.pipelineUtils.createRenderPipeline( renderObject );
-
-	}
-
-	createComputePipeline( computePipeline ) {
-
-		this.pipelineUtils.createComputePipeline( computePipeline );
-
-	}
-
-	// bindings
-
-	createBindings( bindings, pipeline ) {
-
-		this.bindingUtils.createBindings( bindings, pipeline );
-
-	}
-
-	updateBindings( bindings, pipeline ) {
-
-		this.bindingUtils.createBindings( bindings, pipeline );
-
-	}
-
-	updateBinding( binding ) {
-
-		this.bindingUtils.updateBinding( binding );
-
-	}
-
-	// attributes
-
-	createIndexAttribute( attribute ) {
-
-		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
-
-	}
-
-	createAttribute( attribute ) {
-
-		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
-
-	}
-
-	createStorageAttribute( attribute ) {
-
-		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
-
-	}
-
-	updateAttribute( attribute ) {
-
-		this.attributeUtils.updateAttribute( attribute );
-
-	}
-
-	destroyAttribute( attribute ) {
-
-		this.attributeUtils.destroyAttribute( attribute );
-
-	}
-
-	// canvas
-
-	updateSize() {
-
-		this._configureContext();
-		this._setupColorBuffer();
-
-	}
-
-	// utils public
-
-	hasFeature( name ) {
-
-		const adapter = this.adapter || _staticAdapter;
-
-		//
-
-		const features = Object.values( GPUFeatureName );
-
-		if ( features.includes( name ) === false ) {
-
-			throw new Error( 'THREE.WebGPURenderer: Unknown WebGPU GPU feature: ' + name );
-
-		}
-
-		//
-
-		return adapter.features.has( name );
-
-	}
-
-	copyFramebufferToTexture( texture, renderContext ) {
-
-		const renderContextData = this.get( renderContext );
-
-		const { encoder, descriptor } = renderContextData;
-
-		let sourceGPU = null;
-
-		if ( texture.isFramebufferTexture ) {
-
-			sourceGPU = this.context.getCurrentTexture();
-
-		} else if ( texture.isDepthTexture ) {
-
-			sourceGPU = this._getDepthBufferGPU( renderContext );
-
-		}
-
-		const destinationGPU = this.get( texture ).texture;
-
-		renderContextData.currentPass.end();
-
-		encoder.copyTextureToTexture(
-			{
-				texture: sourceGPU,
-				origin: { x: 0, y: 0, z: 0 }
-			},
-			{
-				texture: destinationGPU
-			},
-			[
-				texture.image.width,
-				texture.image.height
-			]
-		);
-
-		if ( texture.generateMipmaps ) this.textureUtils.generateMipmaps( texture );
-
-		descriptor.colorAttachments[ 0 ].loadOp = GPULoadOp.Load;
-		if ( renderContext.depth ) descriptor.depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
-		if ( renderContext.stencil ) descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
-
-		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
-		renderContextData.currentAttributesSet = {};
-
-	}
-
-	// utils
-
-	_getDepthBufferGPU( renderContext ) {
-
-		const { depthBuffers } = this;
-		const { width, height } = this.getDrawingBufferSize();
-
-		let depthTexture = depthBuffers.get( renderContext );
-
-		if ( depthTexture !== undefined && depthTexture.image.width === width && depthTexture.image.height === height ) {
-
-			return this.get( depthTexture ).texture;
-
-		}
-
-		this._destroyDepthBufferGPU( renderContext );
-
-		depthTexture = new DepthTexture();
-		depthTexture.name = 'depthBuffer';
-
-		if ( renderContext.stencil  ) {
-
-			depthTexture = new DepthTexture();
-			depthTexture.format = DepthStencilFormat;
-			depthTexture.type = UnsignedInt248Type;
-
-		} else if ( renderContext.depth ) {
-
-			depthTexture = new DepthTexture();
-			depthTexture.format = DepthFormat;
-			depthTexture.type = UnsignedIntType;
-
-		}
-
-		depthTexture.image.width = width;
-		depthTexture.image.height = height;
-
-		this.textureUtils.createTexture( depthTexture, { sampleCount: this.parameters.sampleCount } );
-
-		depthBuffers.set( renderContext, depthTexture );
-
-		return this.get( depthTexture ).texture;
-
-	}
-
-	_destroyDepthBufferGPU( renderContext ) {
-
-		const { depthBuffers } = this;
-
-		const depthTexture = depthBuffers.get( renderContext );
-
-		if ( depthTexture !== undefined ) {
-
-			this.textureUtils.destroyTexture( depthTexture );
-
-			depthBuffers.delete( renderContext );
-
-		}
-
-	}
-
-	_configureContext() {
-
-		this.context.configure( {
-			device: this.device,
-			format: GPUTextureFormat.BGRA8Unorm,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
-			alphaMode: 'premultiplied'
-		} );
-
-	}
-
-	_setupColorBuffer() {
-
-		if ( this.colorBuffer ) this.colorBuffer.destroy();
-
-		const { width, height } = this.getDrawingBufferSize();
-		//const format = navigator.gpu.getPreferredCanvasFormat(); // @TODO: Move to WebGPUUtils
-
-		this.colorBuffer = this.device.createTexture( {
-			label: 'colorBuffer',
-			size: {
-				width: width,
-				height: height,
-				depthOrArrayLayers: 1
-			},
-			sampleCount: this.parameters.sampleCount,
-			format: GPUTextureFormat.BGRA8Unorm,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
-		} );
-
-	}
-
-}
-
-export default WebGPUBackend;
+/*// debugger tools
+import 'https://greggman.github.io/webgpu-avoid-redundant-state-setting/webgpu-check-redundant-state-setting.js';
+//*/
+
+import { WebGPUCoordinateSystem } from 'three';
+
+import { GPUFeatureName, GPUTextureFormat, GPULoadOp, GPUStoreOp, GPUIndexFormat, GPUTextureViewDimension } from './utils/WebGPUConstants.js';
+
+import WGSLNodeBuilder from './nodes/WGSLNodeBuilder.js';
+import Backend from '../common/Backend.js';
+
+import WebGPUUtils from './utils/WebGPUUtils.js';
+import WebGPUAttributeUtils from './utils/WebGPUAttributeUtils.js';
+import WebGPUBindingUtils from './utils/WebGPUBindingUtils.js';
+import WebGPUPipelineUtils from './utils/WebGPUPipelineUtils.js';
+import WebGPUTextureUtils from './utils/WebGPUTextureUtils.js';
+import WebGPU from '../../capabilities/WebGPU.js';
+
+//
+
+class WebGPUBackend extends Backend {
+
+	constructor( parameters = {} ) {
+
+		super( parameters );
+
+		this.isWebGPUBackend = true;
+
+		// some parameters require default values other than "undefined"
+		this.parameters.alpha = ( parameters.alpha === undefined ) ? true : parameters.alpha;
+
+		this.parameters.antialias = ( parameters.antialias === true );
+
+		if ( this.parameters.antialias === true ) {
+
+			this.parameters.sampleCount = ( parameters.sampleCount === undefined ) ? 4 : parameters.sampleCount;
+
+		} else {
+
+			this.parameters.sampleCount = 1;
+
+		}
+
+		this.parameters.requiredLimits = ( parameters.requiredLimits === undefined ) ? {} : parameters.requiredLimits;
+
+		this.trackTimestamp = ( parameters.trackTimestamp === true );
+
+		this.adapter = null;
+		this.device = null;
+		this.context = null;
+		this.colorBuffer = null;
+		this.defaultRenderPassdescriptor = null;
+
+		this.utils = new WebGPUUtils( this );
+		this.attributeUtils = new WebGPUAttributeUtils( this );
+		this.bindingUtils = new WebGPUBindingUtils( this );
+		this.pipelineUtils = new WebGPUPipelineUtils( this );
+		this.textureUtils = new WebGPUTextureUtils( this );
+		this.occludedResolveCache = new Map();
+
+	}
+
+	async init( renderer ) {
+
+		await super.init( renderer );
+
+		//
+
+		const parameters = this.parameters;
+
+		const adapterOptions = {
+			powerPreference: parameters.powerPreference
+		};
+
+		const adapter = await navigator.gpu.requestAdapter( adapterOptions );
+
+		if ( adapter === null ) {
+
+			throw new Error( 'WebGPUBackend: Unable to create WebGPU adapter.' );
+
+		}
+
+		// 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: supportedFeatures,
+			requiredLimits: parameters.requiredLimits
+		};
+
+		const device = await adapter.requestDevice( deviceDescriptor );
+
+		const context = ( parameters.context !== undefined ) ? parameters.context : renderer.domElement.getContext( 'webgpu' );
+
+		this.adapter = adapter;
+		this.device = device;
+		this.context = context;
+
+		const alphaMode = parameters.alpha ? 'premultiplied' : 'opaque';
+
+		this.context.configure( {
+			device: this.device,
+			format: GPUTextureFormat.BGRA8Unorm,
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+			alphaMode: alphaMode
+		} );
+
+		this.updateSize();
+
+	}
+
+	get coordinateSystem() {
+
+		return WebGPUCoordinateSystem;
+
+	}
+
+	async getArrayBufferAsync( attribute ) {
+
+		return await this.attributeUtils.getArrayBufferAsync( attribute );
+
+	}
+
+	getContext() {
+
+		return this.context;
+
+	}
+
+	_getDefaultRenderPassDescriptor() {
+
+		let descriptor = this.defaultRenderPassdescriptor;
+
+		const antialias = this.parameters.antialias;
+
+		if ( descriptor === null ) {
+
+			const renderer = this.renderer;
+
+			descriptor = {
+				colorAttachments: [ {
+					view: null
+				} ],
+				depthStencilAttachment: {
+					view: this.textureUtils.getDepthBuffer( renderer.depth, renderer.stencil ).createView()
+				}
+			};
+
+			const colorAttachment = descriptor.colorAttachments[ 0 ];
+
+			if ( antialias === true ) {
+
+				colorAttachment.view = this.colorBuffer.createView();
+
+			} else {
+
+				colorAttachment.resolveTarget = undefined;
+
+			}
+
+			this.defaultRenderPassdescriptor = descriptor;
+
+		}
+
+		const colorAttachment = descriptor.colorAttachments[ 0 ];
+
+		if ( antialias === true ) {
+
+			colorAttachment.resolveTarget = this.context.getCurrentTexture().createView();
+
+		} else {
+
+			colorAttachment.view = this.context.getCurrentTexture().createView();
+
+		}
+
+		return descriptor;
+
+	}
+
+	_getRenderPassDescriptor( renderContext ) {
+
+		const renderTarget = renderContext.renderTarget;
+		const renderTargetData = this.get( renderTarget );
+
+		let descriptors = renderTargetData.descriptors;
+
+		if ( descriptors === undefined ) {
+
+			descriptors = [];
+
+			renderTargetData.descriptors = descriptors;
+
+		}
+
+		if ( renderTargetData.width !== renderTarget.width ||
+			renderTargetData.height !== renderTarget.height ||
+			renderTargetData.activeMipmapLevel !== renderTarget.activeMipmapLevel ||
+			renderTargetData.samples !== renderTarget.samples
+		) {
+
+			descriptors.length = 0;
+
+		}
+
+		let descriptor = descriptors[ renderContext.activeCubeFace ];
+
+		if ( descriptor === undefined ) {
+
+			const textures = renderContext.textures;
+			const colorAttachments = [];
+
+			for ( let i = 0; i < textures.length; i ++ ) {
+
+				const textureData = this.get( textures[ i ] );
+
+				const textureView = textureData.texture.createView( {
+					baseMipLevel: renderContext.activeMipmapLevel,
+					mipLevelCount: 1,
+					baseArrayLayer: renderContext.activeCubeFace,
+					dimension: GPUTextureViewDimension.TwoD
+				} );
+
+				let view, resolveTarget;
+
+				if ( textureData.msaaTexture !== undefined ) {
+
+					view = textureData.msaaTexture.createView();
+					resolveTarget = textureView;
+
+				} else {
+
+					view = textureView;
+					resolveTarget = undefined;
+
+				}
+
+				colorAttachments.push( {
+					view,
+					resolveTarget,
+					loadOp: GPULoadOp.Load,
+					storeOp: GPUStoreOp.Store
+				} );
+
+			}
+
+			const depthTextureData = this.get( renderContext.depthTexture );
+
+			const depthStencilAttachment = {
+				view: depthTextureData.texture.createView(),
+			};
+
+			descriptor = {
+				colorAttachments,
+				depthStencilAttachment
+			};
+
+			descriptors[ renderContext.activeCubeFace ] = descriptor;
+
+			renderTargetData.width = renderTarget.width;
+			renderTargetData.height = renderTarget.height;
+			renderTargetData.samples = renderTarget.samples;
+			renderTargetData.activeMipmapLevel = renderTarget.activeMipmapLevel;
+
+		}
+
+		return descriptor;
+
+	}
+
+	beginRender( renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+
+		const device = this.device;
+		const occlusionQueryCount = renderContext.occlusionQueryCount;
+
+		let occlusionQuerySet;
+
+		if ( occlusionQueryCount > 0 ) {
+
+			if ( renderContextData.currentOcclusionQuerySet ) renderContextData.currentOcclusionQuerySet.destroy();
+			if ( renderContextData.currentOcclusionQueryBuffer ) renderContextData.currentOcclusionQueryBuffer.destroy();
+
+			// Get a reference to the array of objects with queries. The renderContextData property
+			// can be changed by another render pass before the buffer.mapAsyc() completes.
+			renderContextData.currentOcclusionQuerySet = renderContextData.occlusionQuerySet;
+			renderContextData.currentOcclusionQueryBuffer = renderContextData.occlusionQueryBuffer;
+			renderContextData.currentOcclusionQueryObjects = renderContextData.occlusionQueryObjects;
+
+			//
+
+			occlusionQuerySet = device.createQuerySet( { type: 'occlusion', count: occlusionQueryCount } );
+
+			renderContextData.occlusionQuerySet = occlusionQuerySet;
+			renderContextData.occlusionQueryIndex = 0;
+			renderContextData.occlusionQueryObjects = new Array( occlusionQueryCount );
+
+			renderContextData.lastOcclusionObject = null;
+
+		}
+
+		let descriptor;
+
+		if ( renderContext.textures === null ) {
+
+			descriptor = this._getDefaultRenderPassDescriptor();
+
+		} else {
+
+			descriptor = this._getRenderPassDescriptor( renderContext );
+
+		}
+
+		this.initTimeStampQuery( renderContext, descriptor );
+
+		descriptor.occlusionQuerySet = occlusionQuerySet;
+
+		const depthStencilAttachment = descriptor.depthStencilAttachment;
+
+		if ( renderContext.textures !== null ) {
+
+			const colorAttachments = descriptor.colorAttachments;
+
+			for ( let i = 0; i < colorAttachments.length; i ++ ) {
+
+				const colorAttachment = colorAttachments[ i ];
+
+				if ( renderContext.clearColor ) {
+
+					colorAttachment.clearValue = renderContext.clearColorValue;
+					colorAttachment.loadOp = GPULoadOp.Clear;
+					colorAttachment.storeOp = GPUStoreOp.Store;
+
+				} else {
+
+					colorAttachment.loadOp = GPULoadOp.Load;
+					colorAttachment.storeOp = GPUStoreOp.Store;
+
+				}
+
+			}
+
+		} else {
+
+			const colorAttachment = descriptor.colorAttachments[ 0 ];
+
+			if ( renderContext.clearColor ) {
+
+				colorAttachment.clearValue = renderContext.clearColorValue;
+				colorAttachment.loadOp = GPULoadOp.Clear;
+				colorAttachment.storeOp = GPUStoreOp.Store;
+
+			} else {
+
+				colorAttachment.loadOp = GPULoadOp.Load;
+				colorAttachment.storeOp = GPUStoreOp.Store;
+
+			}
+
+		}
+
+		//
+
+		if ( renderContext.depth ) {
+
+			if ( renderContext.clearDepth ) {
+
+				depthStencilAttachment.depthClearValue = renderContext.clearDepthValue;
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			}
+
+		}
+
+		if ( renderContext.stencil ) {
+
+			if ( renderContext.clearStencil ) {
+
+				depthStencilAttachment.stencilClearValue = renderContext.clearStencilValue;
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			}
+
+		}
+
+		//
+
+		const encoder = device.createCommandEncoder( { label: 'renderContext_' + renderContext.id } );
+		const currentPass = encoder.beginRenderPass( descriptor );
+
+		//
+
+		renderContextData.descriptor = descriptor;
+		renderContextData.encoder = encoder;
+		renderContextData.currentPass = currentPass;
+		renderContextData.currentSets = { attributes: {} };
+
+		//
+
+		if ( renderContext.viewport ) {
+
+			this.updateViewport( renderContext );
+
+		}
+
+		if ( renderContext.scissor ) {
+
+			const { x, y, width, height } = renderContext.scissorValue;
+
+			currentPass.setScissorRect( x, renderContext.height - height - y, width, height );
+
+		}
+
+	}
+
+	finishRender( renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+		const occlusionQueryCount = renderContext.occlusionQueryCount;
+
+		if ( occlusionQueryCount > renderContextData.occlusionQueryIndex ) {
+
+			renderContextData.currentPass.endOcclusionQuery();
+
+		}
+
+		renderContextData.currentPass.end();
+
+		if ( occlusionQueryCount > 0 ) {
+
+			const bufferSize = occlusionQueryCount * 8; // 8 byte entries for query results
+
+			//
+
+			let queryResolveBuffer = this.occludedResolveCache.get( bufferSize );
+
+			if ( queryResolveBuffer === undefined ) {
+
+				queryResolveBuffer = this.device.createBuffer(
+					{
+						size: bufferSize,
+						usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
+					}
+				);
+
+				this.occludedResolveCache.set( bufferSize, queryResolveBuffer );
+
+			}
+
+			//
+
+			const readBuffer = this.device.createBuffer(
+				{
+					size: bufferSize,
+					usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+				}
+			);
+
+			// two buffers required here - WebGPU doesn't allow usage of QUERY_RESOLVE & MAP_READ to be combined
+			renderContextData.encoder.resolveQuerySet( renderContextData.occlusionQuerySet, 0, occlusionQueryCount, queryResolveBuffer, 0 );
+			renderContextData.encoder.copyBufferToBuffer( queryResolveBuffer, 0, readBuffer, 0, bufferSize );
+
+			renderContextData.occlusionQueryBuffer = readBuffer;
+
+			//
+
+			this.resolveOccludedAsync( renderContext );
+
+		}
+
+		this.prepareTimeStampBuffer( renderContext, renderContextData.encoder );
+
+		this.device.queue.submit( [ renderContextData.encoder.finish() ] );
+
+
+		//
+
+		if ( renderContext.textures !== null ) {
+
+			const textures = renderContext.textures;
+
+			for ( let i = 0; i < textures.length; i ++ ) {
+
+				const texture = textures[ i ];
+
+				if ( texture.generateMipmaps === true ) {
+
+					this.textureUtils.generateMipmaps( texture );
+
+				}
+
+			}
+
+		}
+
+	}
+
+	isOccluded( renderContext, object ) {
+
+		const renderContextData = this.get( renderContext );
+
+		return renderContextData.occluded && renderContextData.occluded.has( object );
+
+	}
+
+	async resolveOccludedAsync( renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+
+		// handle occlusion query results
+
+		const { currentOcclusionQueryBuffer, currentOcclusionQueryObjects } = renderContextData;
+
+		if ( currentOcclusionQueryBuffer && currentOcclusionQueryObjects ) {
+
+			const occluded = new WeakSet();
+
+			renderContextData.currentOcclusionQueryObjects = null;
+			renderContextData.currentOcclusionQueryBuffer = null;
+
+			await currentOcclusionQueryBuffer.mapAsync( GPUMapMode.READ );
+
+			const buffer = currentOcclusionQueryBuffer.getMappedRange();
+			const results = new BigUint64Array( buffer );
+
+			for ( let i = 0; i < currentOcclusionQueryObjects.length; i ++ ) {
+
+				if ( results[ i ] !== 0 ) {
+
+					occluded.add( currentOcclusionQueryObjects[ i ] );
+
+				}
+
+			}
+
+			currentOcclusionQueryBuffer.destroy();
+
+			renderContextData.occluded = occluded;
+
+		}
+
+	}
+
+	updateViewport( renderContext ) {
+
+		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 );
+
+	}
+
+	clear( color, depth, stencil, renderTargetData = null ) {
+
+		const device = this.device;
+		const renderer = this.renderer;
+
+		let colorAttachments = [];
+
+		let depthStencilAttachment;
+		let clearValue;
+
+		let supportsDepth;
+		let supportsStencil;
+
+		if ( color ) {
+
+			const clearColor = this.getClearColor();
+
+			clearValue = { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: clearColor.a };
+
+		}
+
+		if ( renderTargetData === null ) {
+
+			supportsDepth = renderer.depth;
+			supportsStencil = renderer.stencil;
+
+			depth = depth && supportsDepth;
+			stencil = stencil && supportsStencil;
+
+			const descriptor = this._getDefaultRenderPassDescriptor();
+
+			if ( color ) {
+
+				colorAttachments = descriptor.colorAttachments;
+
+				const colorAttachment = colorAttachments[ 0 ];
+
+				colorAttachment.clearValue = clearValue;
+				colorAttachment.loadOp = GPULoadOp.Clear;
+				colorAttachment.storeOp = GPUStoreOp.Store;
+
+			}
+
+			if ( depth || stencil ) {
+
+				depthStencilAttachment = descriptor.depthStencilAttachment;
+
+			}
+
+		} else {
+
+			supportsDepth = renderTargetData.depth;
+			supportsStencil = renderTargetData.stencil;
+
+			depth = depth && supportsDepth;
+			stencil = stencil && supportsStencil;
+
+			if ( color ) {
+
+				for ( const texture of renderTargetData.textures ) {
+
+					const textureData = this.get( texture );
+					const textureView = textureData.texture.createView();
+
+					let view, resolveTarget;
+
+					if ( textureData.msaaTexture !== undefined ) {
+
+						view = textureData.msaaTexture.createView();
+						resolveTarget = textureView;
+
+					} else {
+
+						view = textureView;
+						resolveTarget = undefined;
+
+					}
+
+					colorAttachments.push( {
+						view,
+						resolveTarget,
+						clearValue,
+						loadOp: GPULoadOp.Clear,
+						storeOp: GPUStoreOp.Store
+					} );
+
+				}
+
+			}
+
+			if ( depth || stencil ) {
+
+				const depthTextureData = this.get( renderTargetData.depthTexture );
+
+				depthStencilAttachment = {
+					view: depthTextureData.texture.createView()
+				};
+
+			}
+
+		}
+
+		//
+
+		if ( depthStencilAttachment !== undefined ) {
+
+			if ( depth ) {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.depthClearValue = renderer.getClearDepth();
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
+
+			}
+
+			//
+
+			if ( stencil ) {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
+				depthStencilAttachment.stencilClearValue = renderer.getClearStencil();
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			} else {
+
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+				depthStencilAttachment.stencilStoreOp = GPUStoreOp.Store;
+
+			}
+
+		}
+
+		//
+
+		const encoder = device.createCommandEncoder( {} );
+		const currentPass = encoder.beginRenderPass( {
+			colorAttachments,
+			depthStencilAttachment
+		} );
+
+		currentPass.end();
+
+		device.queue.submit( [ encoder.finish() ] );
+
+	}
+
+	// compute
+
+	beginCompute( computeGroup ) {
+
+		const groupGPU = this.get( computeGroup );
+
+
+		const descriptor = {};
+
+		this.initTimeStampQuery( computeGroup, descriptor );
+
+		groupGPU.cmdEncoderGPU = this.device.createCommandEncoder();
+
+		groupGPU.passEncoderGPU = groupGPU.cmdEncoderGPU.beginComputePass( descriptor );
+
+	}
+
+	compute( computeGroup, computeNode, bindings, pipeline ) {
+
+		const { passEncoderGPU } = this.get( computeGroup );
+
+		// pipeline
+
+		const pipelineGPU = this.get( pipeline ).pipeline;
+		passEncoderGPU.setPipeline( pipelineGPU );
+
+		// bind group
+
+		const bindGroupGPU = this.get( bindings ).group;
+		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
+
+		passEncoderGPU.dispatchWorkgroups( computeNode.dispatchCount );
+
+	}
+
+	finishCompute( computeGroup ) {
+
+		const groupData = this.get( computeGroup );
+
+		groupData.passEncoderGPU.end();
+
+		this.prepareTimeStampBuffer( computeGroup, groupData.cmdEncoderGPU );
+
+		this.device.queue.submit( [ groupData.cmdEncoderGPU.finish() ] );
+
+	}
+
+	// render object
+
+	draw( renderObject, info ) {
+
+		const { object, geometry, context, pipeline } = renderObject;
+
+		const bindingsData = this.get( renderObject.getBindings() );
+		const contextData = this.get( context );
+		const pipelineGPU = this.get( pipeline ).pipeline;
+		const currentSets = contextData.currentSets;
+
+		// pipeline
+
+		const passEncoderGPU = contextData.currentPass;
+
+		if ( currentSets.pipeline !== pipelineGPU ) {
+
+			passEncoderGPU.setPipeline( pipelineGPU );
+
+			currentSets.pipeline = pipelineGPU;
+
+		}
+
+		// bind group
+
+		const bindGroupGPU = bindingsData.group;
+		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
+
+		// attributes
+
+		const index = renderObject.getIndex();
+
+		const hasIndex = ( index !== null );
+
+		// index
+
+		if ( hasIndex === true ) {
+
+			if ( currentSets.index !== index ) {
+
+				const buffer = this.get( index ).buffer;
+				const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
+
+				passEncoderGPU.setIndexBuffer( buffer, indexFormat );
+
+				currentSets.index = index;
+
+			}
+
+		}
+
+		// vertex buffers
+
+		const vertexBuffers = renderObject.getVertexBuffers();
+
+		for ( let i = 0, l = vertexBuffers.length; i < l; i ++ ) {
+
+			const vertexBuffer = vertexBuffers[ i ];
+
+			if ( currentSets.attributes[ i ] !== vertexBuffer ) {
+
+				const buffer = this.get( vertexBuffer ).buffer;
+				passEncoderGPU.setVertexBuffer( i, buffer );
+
+				currentSets.attributes[ i ] = vertexBuffer;
+
+			}
+
+		}
+
+		// occlusion queries - handle multiple consecutive draw calls for an object
+
+		if ( contextData.occlusionQuerySet !== undefined ) {
+
+			const lastObject = contextData.lastOcclusionObject;
+
+			if ( lastObject !== object ) {
+
+				if ( lastObject !== null && lastObject.occlusionTest === true ) {
+
+					passEncoderGPU.endOcclusionQuery();
+					contextData.occlusionQueryIndex ++;
+
+				}
+
+				if ( object.occlusionTest === true ) {
+
+					passEncoderGPU.beginOcclusionQuery( contextData.occlusionQueryIndex );
+					contextData.occlusionQueryObjects[ contextData.occlusionQueryIndex ] = object;
+
+				}
+
+				contextData.lastOcclusionObject = object;
+
+			}
+
+		}
+
+		// draw
+
+		const drawRange = geometry.drawRange;
+		const firstVertex = drawRange.start;
+
+		const instanceCount = this.getInstanceCount( renderObject );
+		if ( instanceCount === 0 ) return;
+
+		if ( hasIndex === true ) {
+
+			const indexCount = ( drawRange.count !== Infinity ) ? drawRange.count : index.count;
+
+			passEncoderGPU.drawIndexed( indexCount, instanceCount, firstVertex, 0, 0 );
+
+			info.update( object, indexCount, instanceCount );
+
+		} else {
+
+			const positionAttribute = geometry.attributes.position;
+			const vertexCount = ( drawRange.count !== Infinity ) ? drawRange.count : positionAttribute.count;
+
+			passEncoderGPU.draw( vertexCount, instanceCount, firstVertex, 0 );
+
+			info.update( object, vertexCount, instanceCount );
+
+		}
+
+	}
+
+	// cache key
+
+	needsRenderUpdate( renderObject ) {
+
+		const data = this.get( renderObject );
+
+		const { object, material } = renderObject;
+
+		const utils = this.utils;
+
+		const sampleCount = utils.getSampleCount( renderObject.context );
+		const colorSpace = utils.getCurrentColorSpace( renderObject.context );
+		const colorFormat = utils.getCurrentColorFormat( renderObject.context );
+		const depthStencilFormat = utils.getCurrentDepthStencilFormat( renderObject.context );
+		const primitiveTopology = utils.getPrimitiveTopology( object, material );
+
+		let needsUpdate = false;
+
+		if ( data.material !== material || data.materialVersion !== material.version ||
+			data.transparent !== material.transparent || data.blending !== material.blending || data.premultipliedAlpha !== material.premultipliedAlpha ||
+			data.blendSrc !== material.blendSrc || data.blendDst !== material.blendDst || data.blendEquation !== material.blendEquation ||
+			data.blendSrcAlpha !== material.blendSrcAlpha || data.blendDstAlpha !== material.blendDstAlpha || data.blendEquationAlpha !== material.blendEquationAlpha ||
+			data.colorWrite !== material.colorWrite || data.depthWrite !== material.depthWrite || data.depthTest !== material.depthTest || data.depthFunc !== material.depthFunc ||
+			data.stencilWrite !== material.stencilWrite || data.stencilFunc !== material.stencilFunc ||
+			data.stencilFail !== material.stencilFail || data.stencilZFail !== material.stencilZFail || data.stencilZPass !== material.stencilZPass ||
+			data.stencilFuncMask !== material.stencilFuncMask || data.stencilWriteMask !== material.stencilWriteMask ||
+			data.side !== material.side || data.alphaToCoverage !== material.alphaToCoverage ||
+			data.sampleCount !== sampleCount || data.colorSpace !== colorSpace ||
+			data.colorFormat !== colorFormat || data.depthStencilFormat !== depthStencilFormat ||
+			data.primitiveTopology !== primitiveTopology
+		) {
+
+			data.material = material; data.materialVersion = material.version;
+			data.transparent = material.transparent; data.blending = material.blending; data.premultipliedAlpha = material.premultipliedAlpha;
+			data.blendSrc = material.blendSrc; data.blendDst = material.blendDst; data.blendEquation = material.blendEquation;
+			data.blendSrcAlpha = material.blendSrcAlpha; data.blendDstAlpha = material.blendDstAlpha; data.blendEquationAlpha = material.blendEquationAlpha;
+			data.colorWrite = material.colorWrite;
+			data.depthWrite = material.depthWrite; data.depthTest = material.depthTest; data.depthFunc = material.depthFunc;
+			data.stencilWrite = material.stencilWrite; data.stencilFunc = material.stencilFunc;
+			data.stencilFail = material.stencilFail; data.stencilZFail = material.stencilZFail; data.stencilZPass = material.stencilZPass;
+			data.stencilFuncMask = material.stencilFuncMask; data.stencilWriteMask = material.stencilWriteMask;
+			data.side = material.side; data.alphaToCoverage = material.alphaToCoverage;
+			data.sampleCount = sampleCount;
+			data.colorSpace = colorSpace;
+			data.colorFormat = colorFormat;
+			data.depthStencilFormat = depthStencilFormat;
+			data.primitiveTopology = primitiveTopology;
+
+			needsUpdate = true;
+
+		}
+
+		return needsUpdate;
+
+	}
+
+	getRenderCacheKey( renderObject ) {
+
+		const { object, material } = renderObject;
+
+		const utils = this.utils;
+		const renderContext = renderObject.context;
+
+		return [
+			material.transparent, material.blending, material.premultipliedAlpha,
+			material.blendSrc, material.blendDst, material.blendEquation,
+			material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
+			material.colorWrite,
+			material.depthWrite, material.depthTest, material.depthFunc,
+			material.stencilWrite, material.stencilFunc,
+			material.stencilFail, material.stencilZFail, material.stencilZPass,
+			material.stencilFuncMask, material.stencilWriteMask,
+			material.side,
+			utils.getSampleCount( renderContext ),
+			utils.getCurrentColorSpace( renderContext ), utils.getCurrentColorFormat( renderContext ), utils.getCurrentDepthStencilFormat( renderContext ),
+			utils.getPrimitiveTopology( object, material )
+		].join();
+
+	}
+
+	// textures
+
+	createSampler( texture ) {
+
+		this.textureUtils.createSampler( texture );
+
+	}
+
+	destroySampler( texture ) {
+
+		this.textureUtils.destroySampler( texture );
+
+	}
+
+	createDefaultTexture( texture ) {
+
+		this.textureUtils.createDefaultTexture( texture );
+
+	}
+
+	createTexture( texture, options ) {
+
+		this.textureUtils.createTexture( texture, options );
+
+	}
+
+	updateTexture( texture, options ) {
+
+		this.textureUtils.updateTexture( texture, options );
+
+	}
+
+	generateMipmaps( texture ) {
+
+		this.textureUtils.generateMipmaps( texture );
+
+	}
+
+	destroyTexture( texture ) {
+
+		this.textureUtils.destroyTexture( texture );
+
+	}
+
+	copyTextureToBuffer( texture, x, y, width, height ) {
+
+		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );
+
+	}
+
+
+	initTimeStampQuery( renderContext, descriptor ) {
+
+		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		if ( ! renderContextData.timeStampQuerySet ) {
+
+			// Create a GPUQuerySet which holds 2 timestamp query results: one for the
+			// beginning and one for the end of compute pass execution.
+			const timeStampQuerySet = this.device.createQuerySet( { type: 'timestamp', count: 2 } );
+
+			const timestampWrites = {
+				querySet: timeStampQuerySet,
+				beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
+				endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
+			};
+			Object.assign( descriptor, {
+				timestampWrites,
+			} );
+			renderContextData.timeStampQuerySet = timeStampQuerySet;
+
+		}
+
+	}
+
+	// timestamp utils
+
+	prepareTimeStampBuffer( renderContext, encoder ) {
+
+		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
+		const resolveBuffer = this.device.createBuffer( {
+			size,
+			usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
+		} );
+
+		const resultBuffer = this.device.createBuffer( {
+			size,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
+		} );
+
+		encoder.resolveQuerySet( renderContextData.timeStampQuerySet, 0, 2, resolveBuffer, 0 );
+		encoder.copyBufferToBuffer( resolveBuffer, 0, resultBuffer, 0, size );
+
+		renderContextData.currentTimeStampQueryBuffer = resultBuffer;
+
+	}
+
+	async resolveTimeStampAsync( renderContext, type = 'render' ) {
+
+		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
+
+		const renderContextData = this.get( renderContext );
+
+		// handle timestamp query results
+
+		const { currentTimeStampQueryBuffer } = renderContextData;
+
+		if ( currentTimeStampQueryBuffer ) {
+
+			renderContextData.currentTimeStampQueryBuffer = null;
+
+			await currentTimeStampQueryBuffer.mapAsync( GPUMapMode.READ );
+
+			const times = new BigUint64Array( currentTimeStampQueryBuffer.getMappedRange() );
+
+			const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
+			// console.log( `Compute ${type} duration: ${Number( times[ 1 ] - times[ 0 ] ) / 1000000}ms` );
+			this.renderer.info.updateTimestamp( type, duration );
+
+			currentTimeStampQueryBuffer.unmap();
+
+		}
+
+	}
+
+	// node builder
+
+	createNodeBuilder( object, renderer, scene = null ) {
+
+		return new WGSLNodeBuilder( object, renderer, scene );
+
+	}
+
+	// program
+
+	createProgram( program ) {
+
+		const programGPU = this.get( program );
+
+		programGPU.module = {
+			module: this.device.createShaderModule( { code: program.code, label: program.stage } ),
+			entryPoint: 'main'
+		};
+
+	}
+
+	destroyProgram( program ) {
+
+		this.delete( program );
+
+	}
+
+	// pipelines
+
+	createRenderPipeline( renderObject ) {
+
+		this.pipelineUtils.createRenderPipeline( renderObject );
+
+	}
+
+	createComputePipeline( computePipeline, bindings ) {
+
+		this.pipelineUtils.createComputePipeline( computePipeline, bindings );
+
+	}
+
+	// bindings
+
+	createBindings( bindings ) {
+
+		this.bindingUtils.createBindings( bindings );
+
+	}
+
+	updateBindings( bindings ) {
+
+		this.bindingUtils.createBindings( bindings );
+
+	}
+
+	updateBinding( binding ) {
+
+		this.bindingUtils.updateBinding( binding );
+
+	}
+
+	// attributes
+
+	createIndexAttribute( attribute ) {
+
+		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.INDEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
+
+	}
+
+	createAttribute( attribute ) {
+
+		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
+
+	}
+
+	createStorageAttribute( attribute ) {
+
+		this.attributeUtils.createAttribute( attribute, GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST );
+
+	}
+
+	updateAttribute( attribute ) {
+
+		this.attributeUtils.updateAttribute( attribute );
+
+	}
+
+	destroyAttribute( attribute ) {
+
+		this.attributeUtils.destroyAttribute( attribute );
+
+	}
+
+	// canvas
+
+	updateSize() {
+
+		this.colorBuffer = this.textureUtils.getColorBuffer();
+		this.defaultRenderPassdescriptor = null;
+
+	}
+
+	// utils public
+
+	getMaxAnisotropy() {
+
+		return 16;
+
+	}
+
+	async hasFeatureAsync( name ) {
+
+		const adapter = this.adapter || await WebGPU.getStaticAdapter();
+
+		//
+
+		return adapter.features.has( name );
+
+	}
+
+	hasFeature( name ) {
+
+		if ( ! this.adapter ) {
+
+			console.warn( 'WebGPUBackend: WebGPU adapter has not been initialized yet. Please use detectSupportAsync instead' );
+
+			return false;
+
+		}
+
+		return this.adapter.features.has( name );
+
+	}
+
+	copyFramebufferToTexture( texture, renderContext ) {
+
+		const renderContextData = this.get( renderContext );
+
+		const { encoder, descriptor } = renderContextData;
+
+		let sourceGPU = null;
+
+		if ( renderContext.renderTarget ) {
+
+			if ( texture.isDepthTexture ) {
+
+				sourceGPU = this.get( renderContext.depthTexture ).texture;
+
+			} else {
+
+				sourceGPU = this.get( renderContext.textures[ 0 ] ).texture;
+
+			}
+
+		} else {
+
+			if ( texture.isDepthTexture ) {
+
+				sourceGPU = this.textureUtils.getDepthBuffer( renderContext.depth, renderContext.stencil );
+
+			} else {
+
+				sourceGPU = this.context.getCurrentTexture();
+
+			}
+
+		}
+
+		const destinationGPU = this.get( texture ).texture;
+
+		if ( sourceGPU.format !== destinationGPU.format ) {
+
+			console.error( 'WebGPUBackend: copyFramebufferToTexture: Source and destination formats do not match.', sourceGPU.format, destinationGPU.format );
+
+			return;
+
+		}
+
+		renderContextData.currentPass.end();
+
+		encoder.copyTextureToTexture(
+			{
+				texture: sourceGPU,
+				origin: { x: 0, y: 0, z: 0 }
+			},
+			{
+				texture: destinationGPU
+			},
+			[
+				texture.image.width,
+				texture.image.height
+			]
+		);
+
+		if ( texture.generateMipmaps ) this.textureUtils.generateMipmaps( texture );
+
+		descriptor.colorAttachments[ 0 ].loadOp = GPULoadOp.Load;
+		if ( renderContext.depth ) descriptor.depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+		if ( renderContext.stencil ) descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
+
+		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
+		renderContextData.currentSets = { attributes: {} };
+
+	}
+
+}
+
+export default WebGPUBackend;