/*// 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.defaultDepthTexture = new DepthTexture(); this.defaultDepthTexture.name = 'depthBuffer'; 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 getArrayBufferAsync( attribute ) { return await this.attributeUtils.getArrayBufferAsync( 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 ); const view = textureData.texture.createView( { baseMipLevel: 0, mipLevelCount: 1, baseArrayLayer: renderContext.activeCubeFace, dimension: GPUTextureViewDimension.TwoD } ); if ( textureData.msaaTexture !== undefined ) { colorAttachment.view = textureData.msaaTexture.createView(); colorAttachment.resolveTarget = view; } else { colorAttachment.view = view; colorAttachment.resolveTarget = undefined; } 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 vertexBuffers = renderObject.getVertexBuffers(); for ( let i = 0, l = vertexBuffers.length; i < l; i ++ ) { const vertexBuffer = vertexBuffers[ i ]; if ( attributesSet[ i ] !== vertexBuffer ) { const buffer = this.get( vertexBuffer ).buffer; passEncoderGPU.setVertexBuffer( i, buffer ); attributesSet[ i ] = vertexBuffer; } } // 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, options ) { this.textureUtils.createTexture( texture, options ); } 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, 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._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 { width, height } = this.getDrawingBufferSize(); const depthTexture = this.defaultDepthTexture; const depthTextureGPU = this.get( depthTexture ).texture; let format, type; if ( renderContext.stencil ) { format = DepthStencilFormat; type = UnsignedInt248Type; } else if ( renderContext.depth ) { format = DepthFormat; type = UnsignedIntType; } if ( depthTextureGPU !== undefined ) { if ( depthTexture.image.width === width && depthTexture.image.height === height && depthTexture.format === format && depthTexture.type === type ) { return depthTextureGPU; } this.textureUtils.destroyTexture( depthTexture ); } depthTexture.name = 'depthBuffer'; depthTexture.format = format; depthTexture.type = type; depthTexture.image.width = width; depthTexture.image.height = height; this.textureUtils.createTexture( depthTexture, { sampleCount: this.parameters.sampleCount } ); return this.get( depthTexture ).texture; } _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;