1340 lines
32 KiB
JavaScript
1340 lines
32 KiB
JavaScript
/*// 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;
|