playcanvas
Version:
Open-source WebGL/WebGPU 3D engine for the web
258 lines (255 loc) • 11.7 kB
JavaScript
import { Debug } from '../../core/debug.js';
import { PIXELFORMAT_RGBA16U, getGlslShaderType, SEMANTIC_POSITION, BUFFERUSAGE_COPY_DST, ADDRESS_CLAMP_TO_EDGE, PIXELFORMAT_R32U } from '../../platform/graphics/constants.js';
import { RenderTarget } from '../../platform/graphics/render-target.js';
import { StorageBuffer } from '../../platform/graphics/storage-buffer.js';
import { Texture } from '../../platform/graphics/texture.js';
import { UploadStream } from '../../platform/graphics/upload-stream.js';
import { QuadRender } from '../graphics/quad-render.js';
import { ShaderUtils } from '../shader-lib/shader-utils.js';
import glslGsplatCopyToWorkBufferPS from '../shader-lib/glsl/chunks/gsplat/frag/gsplatCopyToWorkbuffer.js';
import wgslGsplatCopyToWorkBufferPS from '../shader-lib/wgsl/chunks/gsplat/frag/gsplatCopyToWorkbuffer.js';
import glslGsplatCopyInstancedQuadVS from '../shader-lib/glsl/chunks/gsplat/vert/gsplatCopyInstancedQuad.js';
import wgslGsplatCopyInstancedQuadVS from '../shader-lib/wgsl/chunks/gsplat/vert/gsplatCopyInstancedQuad.js';
import { GSplatFrustumCuller } from './gsplat-frustum-culler.js';
import { GSplatWorkBufferRenderPass } from './gsplat-work-buffer-render-pass.js';
import { GSplatStreams } from '../gsplat/gsplat-streams.js';
let id = 0;
/**
* @import { GSplatFormat } from '../gsplat/gsplat-format.js'
* @import { GSplatInfo } from "./gsplat-info.js"
* @import { GraphicsDevice } from '../../platform/graphics/graphics-device.js'
* @import { GraphNode } from '../graph-node.js';
* @import { ShaderMaterial } from '../materials/shader-material.js'
*/ /**
* A helper class to cache quad renders for work buffer rendering.
*
* @ignore
*/ class WorkBufferRenderInfo {
destroy() {
this.material?.destroy();
this.quadRender?.destroy();
}
/**
* @param {GraphicsDevice} device - The graphics device.
* @param {string} key - Cache key for this render info.
* @param {ShaderMaterial} material - The material to use.
* @param {boolean} colorOnly - Whether to render only color (not full MRT).
* @param {GSplatFormat} format - The work buffer format descriptor.
*/ constructor(device, key, material, colorOnly, format){
this.material = material;
const clonedDefines = new Map(material.defines);
// Derive color format from format's dataColor stream
// GSPLAT_COLOR_UINT is for WRITING to work buffer when using RGBA16U format
// (converts float color to packed half-float format)
const colorStream = format.getStream('dataColor');
if (colorStream.format === PIXELFORMAT_RGBA16U) {
clonedDefines.set('GSPLAT_COLOR_UINT', '');
}
// when rendering only color (not full MRT)
if (colorOnly) {
clonedDefines.set('GSPLAT_COLOR_ONLY', '');
}
// Enable ID output when pcId stream exists in format
if (format.getStream('pcId')) {
clonedDefines.set('GSPLAT_ID', '');
}
// Get custom shader chunks from material (for container support)
const fragmentIncludes = material.hasShaderChunks ? device.isWebGPU ? material.shaderChunks.wgsl : material.shaderChunks.glsl : undefined;
// Get streams to output - color-only mode uses just dataColor, otherwise all streams
const outputStreams = colorOnly ? [
colorStream
] : [
...format.streams,
...format.extraStreams
];
// Build fragmentOutputTypes from streams
const fragmentOutputTypes = [];
for (const stream of outputStreams){
const info = getGlslShaderType(stream.format);
fragmentOutputTypes.push(info.returnType);
}
// Use instanced vertex shader for LOD path, fullscreen quad for non-LOD
const useInstanced = clonedDefines.has('GSPLAT_LOD');
const shaderOptions = {
uniqueName: `SplatCopyToWorkBuffer:${key}`,
attributes: {
vertex_position: SEMANTIC_POSITION
},
vertexDefines: clonedDefines,
fragmentDefines: clonedDefines,
fragmentGLSL: glslGsplatCopyToWorkBufferPS,
fragmentWGSL: wgslGsplatCopyToWorkBufferPS,
fragmentIncludes: fragmentIncludes,
fragmentOutputTypes: fragmentOutputTypes
};
if (useInstanced) {
// Instanced LOD path: custom vertex shader that positions quads per instance
shaderOptions.vertexGLSL = glslGsplatCopyInstancedQuadVS;
shaderOptions.vertexWGSL = wgslGsplatCopyInstancedQuadVS;
} else {
// Standard fullscreen quad path
shaderOptions.vertexChunk = 'fullscreenQuadVS';
}
const shader = ShaderUtils.createShader(device, shaderOptions);
this.quadRender = new QuadRender(shader);
}
}
/**
* @ignore
*/ class GSplatWorkBuffer {
/**
* Creates or recreates render targets from current textures.
*
* @private
*/ _createRenderTargets() {
// Work buffer does not support instance-level streams
Debug.assert(this.format.instanceStreams.length === 0, 'Work buffer format does not support instance-level streams (GSPLAT_STREAM_INSTANCE)');
// Destroy existing render targets
this.renderTarget?.destroy();
this.colorRenderTarget?.destroy();
// Collect all textures in order for MRT
const colorBuffers = this.streams.getTexturesInOrder();
this.renderTarget = new RenderTarget({
name: `GsplatWorkBuffer-MRT-${this.id}`,
colorBuffers: colorBuffers,
depth: false,
flipY: true
});
// Color-only render target uses just the first texture (dataColor)
const colorTexture = this.streams.getTexture('dataColor');
this.colorRenderTarget = new RenderTarget({
name: `GsplatWorkBuffer-Color-${this.id}`,
colorBuffer: colorTexture,
depth: false,
flipY: true
});
// Reinitialize render passes
this.renderPass?.init(this.renderTarget);
this.colorRenderPass?.init(this.colorRenderTarget);
}
/**
* Syncs textures and render targets with the format when extra streams are added.
* Call this before rendering to ensure all streams have textures.
*/ syncWithFormat() {
const prevVersion = this.streams._formatVersion;
this.streams.syncWithFormat(this.format);
// If format changed, recreate render targets to include new textures
if (prevVersion !== this.streams._formatVersion) {
this._createRenderTargets();
}
}
/**
* Gets a texture by name.
*
* @param {string} name - The texture name.
* @returns {Texture|undefined} The texture, or undefined if not found.
*/ getTexture(name) {
return this.streams.getTexture(name);
}
destroy() {
this.renderPass?.destroy();
this.colorRenderPass?.destroy();
this.streams.destroy();
this.orderTexture?.destroy();
this.orderBuffer?.destroy();
this.renderTarget?.destroy();
this.colorRenderTarget?.destroy();
this.uploadStream.destroy();
this.frustumCuller.destroy();
}
get textureSize() {
return this.streams.textureDimensions.x;
}
setOrderData(data) {
const size = this.textureSize;
if (this.device.isWebGPU) {
Debug.assert(data.length <= size * size);
this.uploadStream.upload(data, this.orderBuffer, 0, data.length);
} else {
Debug.assert(data.length === size * size);
this.uploadStream.upload(data, this.orderTexture, 0, data.length);
}
}
/**
* @param {number} textureSize - The texture size to resize to.
*/ resize(textureSize) {
Debug.assert(textureSize);
this.renderTarget.resize(textureSize, textureSize);
this.colorRenderTarget.resize(textureSize, textureSize);
this.streams.resize(textureSize, textureSize);
if (this.device.isWebGPU) {
const newByteSize = textureSize * textureSize * 4;
if (this.orderBuffer.byteSize < newByteSize) {
this.orderBuffer.destroy();
this.orderBuffer = new StorageBuffer(this.device, newByteSize, BUFFERUSAGE_COPY_DST);
}
} else {
this.orderTexture.resize(textureSize, textureSize);
}
}
/**
* Render given splats to the work buffer.
*
* @param {GSplatInfo[]} splats - The splats to render.
* @param {GraphNode} cameraNode - The camera node.
* @param {number[][]|undefined} colorsByLod - Array of RGB colors per LOD. Index by lodIndex; if a
* shorter array is provided, index 0 will be reused as fallback.
* @param {Set<number>|null} [changedAllocIds] - When provided, only render sub-draws for intervals
* whose allocIds are in this set (per-node partial update).
*/ render(splats, cameraNode, colorsByLod, changedAllocIds = null) {
// render splats using render pass
if (this.renderPass.update(splats, cameraNode, colorsByLod, changedAllocIds)) {
this.renderPass.render();
}
}
/**
* Render only the color data to the work buffer (not geometry/covariance).
*
* @param {GSplatInfo[]} splats - The splats to render.
* @param {GraphNode} cameraNode - The camera node.
* @param {number[][]|undefined} colorsByLod - Array of RGB colors per LOD. Index by lodIndex; if a
* shorter array is provided, index 0 will be reused as fallback.
* @param {Set<number>|null} [changedAllocIds] - Set of changed allocIds for partial render.
*/ renderColor(splats, cameraNode, colorsByLod, changedAllocIds = null) {
if (this.colorRenderPass.update(splats, cameraNode, colorsByLod, changedAllocIds)) {
this.colorRenderPass.render();
}
}
/**
* @param {GraphicsDevice} device - The graphics device.
* @param {GSplatFormat} format - The work buffer format descriptor.
*/ constructor(device, format){
/** @type {number} */ this.id = id++;
this.device = device;
this.format = format;
this.frustumCuller = new GSplatFrustumCuller(device);
// Create streams manager and initialize with format
this.streams = new GSplatStreams(device);
this.streams.init(format, 1);
// Build render targets from textures
this._createRenderTargets();
// Create upload stream for non-blocking uploads
this.uploadStream = new UploadStream(device);
// Use storage buffer on WebGPU, texture on WebGL
if (device.isWebGPU) {
this.orderBuffer = new StorageBuffer(device, 4, BUFFERUSAGE_COPY_DST);
} else {
this.orderTexture = new Texture(device, {
name: 'SplatGlobalOrder',
width: 1,
height: 1,
format: PIXELFORMAT_R32U,
mipmaps: false,
addressU: ADDRESS_CLAMP_TO_EDGE,
addressV: ADDRESS_CLAMP_TO_EDGE
});
}
// Create the optimized render pass for batched splat rendering
this.renderPass = new GSplatWorkBufferRenderPass(device, this);
this.renderPass.init(this.renderTarget);
// Create the color-only render pass for updating just the color texture
this.colorRenderPass = new GSplatWorkBufferRenderPass(device, this, true);
this.colorRenderPass.init(this.colorRenderTarget);
}
}
export { GSplatWorkBuffer, WorkBufferRenderInfo };