super-three 0.152.0 → 0.154.0

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

@@ -0,0 +1,847 @@
+/*// 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;