playcanvas/build/playcanvas/src/platform/graphics/webgpu/webgpu-clear-renderer.js

Open-source WebGL/WebGPU 3D engine for the web

import { UniformBufferFormat, UniformFormat } from '../uniform-buffer-format.js';
import { BlendState } from '../blend-state.js';
import { BINDGROUP_MESH_UB, BINDGROUP_MESH, CLEARFLAG_COLOR, CLEARFLAG_DEPTH, CLEARFLAG_STENCIL, PRIMITIVE_TRISTRIP, SHADERLANGUAGE_WGSL, UNIFORMTYPE_VEC4, UNIFORMTYPE_FLOAT } from '../constants.js';
import { Shader } from '../shader.js';
import { DynamicBindGroup } from '../bind-group.js';
import { UniformBuffer } from '../uniform-buffer.js';
import { DepthState } from '../depth-state.js';

const primitive = {
		type: PRIMITIVE_TRISTRIP,
		base: 0,
		baseVertex: 0,
		count: 4,
		indexed: false
};
class WebgpuClearRenderer {
		destroy() {
				this.shader.destroy();
				this.shader = null;
				this.uniformBuffer.destroy();
				this.uniformBuffer = null;
		}
		clear(device, renderTarget, options, defaultOptions) {
				options = options || defaultOptions;
				const flags = options.flags ?? defaultOptions.flags;
				if (flags !== 0) {
						const { uniformBuffer, dynamicBindGroup } = this;
						uniformBuffer.startUpdate(dynamicBindGroup);
						device.setBindGroup(BINDGROUP_MESH_UB, dynamicBindGroup.bindGroup, dynamicBindGroup.offsets);
						device.setBindGroup(BINDGROUP_MESH, device.emptyBindGroup);
						let blendState;
						if (flags & CLEARFLAG_COLOR && (renderTarget.colorBuffer || renderTarget.impl.assignedColorTexture)) {
								const color = options.color ?? defaultOptions.color;
								this.colorData.set(color);
								blendState = BlendState.NOBLEND;
						} else {
								blendState = BlendState.NOWRITE;
						}
						uniformBuffer.set('color', this.colorData);
						let depthState;
						if (flags & CLEARFLAG_DEPTH && renderTarget.depth) {
								const depth = options.depth ?? defaultOptions.depth;
								uniformBuffer.set('depth', depth);
								depthState = DepthState.WRITEDEPTH;
						} else {
								uniformBuffer.set('depth', 1);
								depthState = DepthState.NODEPTH;
						}
						if (flags & CLEARFLAG_STENCIL && renderTarget.stencil) ;
						uniformBuffer.endUpdate();
						device.setDrawStates(blendState, depthState);
						device.setShader(this.shader);
						device.draw(primitive);
				}
		}
		constructor(device){
				const code = `

						struct ub_mesh {
								color : vec4f,
								depth: f32
						}

						@group(2) @binding(0) var<uniform> ubMesh : ub_mesh;

						var<private> pos : array<vec2f, 4> = array<vec2f, 4>(
								vec2(-1.0, 1.0), vec2(1.0, 1.0),
								vec2(-1.0, -1.0), vec2(1.0, -1.0)
						);

						struct VertexOutput {
								@builtin(position) position : vec4f
						}

						@vertex
						fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {
								var output : VertexOutput;
								output.position = vec4(pos[vertexIndex], ubMesh.depth, 1.0);
								return output;
						}

						@fragment
						fn fragmentMain() -> @location(0) vec4f {
								return ubMesh.color;
						}
				`;
				this.shader = new Shader(device, {
						name: 'WebGPUClearRendererShader',
						shaderLanguage: SHADERLANGUAGE_WGSL,
						vshader: code,
						fshader: code
				});
				this.uniformBuffer = new UniformBuffer(device, new UniformBufferFormat(device, [
						new UniformFormat('color', UNIFORMTYPE_VEC4),
						new UniformFormat('depth', UNIFORMTYPE_FLOAT)
				]), false);
				this.dynamicBindGroup = new DynamicBindGroup();
				this.colorData = new Float32Array(4);
		}
}

export { WebgpuClearRenderer };