You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1340 lines
32 KiB

6 months ago
/*// 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';
//
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.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;
// create the device if it is not passed with parameters
let device;
if ( parameters.device === undefined ) {
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
};
device = await adapter.requestDevice( deviceDescriptor );
} else {
device = parameters.device;
}
const context = ( parameters.context !== undefined ) ? parameters.context : renderer.domElement.getContext( 'webgpu' );
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 ] !== 0n ) {
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;
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 ( supportsDepth || supportsStencil ) {
depthStencilAttachment = descriptor.depthStencilAttachment;
}
} else {
supportsDepth = renderTargetData.depth;
supportsStencil = renderTargetData.stencil;
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 ( supportsDepth || supportsStencil ) {
const depthTextureData = this.get( renderTargetData.depthTexture );
depthStencilAttachment = {
view: depthTextureData.texture.createView()
};
}
}
//
if ( supportsDepth ) {
if ( depth ) {
depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
depthStencilAttachment.depthClearValue = renderer.getClearDepth();
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
} else {
depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
depthStencilAttachment.depthStoreOp = GPUStoreOp.Store;
}
}
//
if ( supportsStencil ) {
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 = renderObject.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.clippingContextVersion !== renderObject.clippingContextVersion
) {
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.clippingContextVersion = renderObject.clippingContextVersion;
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 ),
renderObject.clippingContextVersion
].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);
const { currentTimestampQueryBuffer } = renderContextData;
if (currentTimestampQueryBuffer === undefined) return;
const buffer = currentTimestampQueryBuffer;
try {
await buffer.mapAsync(GPUMapMode.READ);
const times = new BigUint64Array(buffer.getMappedRange());
const duration = Number(times[1] - times[0]) / 1000000;
this.renderer.info.updateTimestamp(type, duration);
} catch (error) {
console.error(`Error mapping buffer: ${error}`);
// Optionally handle the error, e.g., re-queue the buffer or skip it
} finally {
buffer.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, promises ) {
this.pipelineUtils.createRenderPipeline( renderObject, promises );
}
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;
}
hasFeature( name ) {
return this.device.features.has( name );
}
copyTextureToTexture( position, srcTexture, dstTexture, level = 0 ) {
const encoder = this.device.createCommandEncoder( { label: 'copyTextureToTexture_' + srcTexture.id + '_' + dstTexture.id } );
const sourceGPU = this.get( srcTexture ).texture;
const destinationGPU = this.get( dstTexture ).texture;
encoder.copyTextureToTexture(
{
texture: sourceGPU,
mipLevel: level,
origin: { x: 0, y: 0, z: 0 }
},
{
texture: destinationGPU,
mipLevel: level,
origin: { x: position.x, y: position.y, z: position.z }
},
[
srcTexture.image.width,
srcTexture.image.height
]
);
this.device.queue.submit( [ encoder.finish() ] );
}
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;