轻量封装WebGPU渲染系统示例＜18＞- 材质多pass实现GPU Compute计算(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ComputeMaterialTest.ts

系统特性:

1. 用户态与系统态隔离。

         细节请见：引擎系统设计思路 - 用户态与系统态隔离-CSDN博客

2. 高频调用与低频调用隔离。

3. 面向用户的易用性封装。

4. 渲染数据(内外部相关资源)和渲染机制分离。

5. 用户操作和渲染系统调度并行机制。

6. 数据/语义驱动。

7. 异步并行的场景/模型载入。

8. computing与rendering用法机制一致性。

        1). 构造过程一致性。

        2). 启用过程一致性。

        3). 自动兼容到material多pass以及material graph机制中。

此示例基于此渲染系统实现，当前示例TypeScript源码如下：

const gridSize = 32;
const shdWorkGroupSize = 8;

// an example compute shader
const compShdCode0 = `
			@group(0) @binding(0) var grid: vec2f;
			@group(0) @binding(1) var cellStateIn: array;
			@group(0) @binding(2) var cellStateOut: array;

			fn cellIndex(cell: vec2u) -> u32 {
				return cell.y * u32(grid.x) + cell.x;
			}

			@compute @workgroup_size(${shdWorkGroupSize}, ${shdWorkGroupSize})
			fn compMain(@builtin(global_invocation_id) cell: vec3u) {
				if (cellStateIn[cellIndex(cell.xy)] == 1) {
					cellStateOut[cellIndex(cell.xy)] = 0;
				} else {
					cellStateOut[cellIndex(cell.xy)] = 1;
				}
			}`;

// an example compute shader
const compShdCode1 = `
			@group(0) @binding(0) var grid: vec2f;
			@group(0) @binding(1) var cellStateIn: array;
			@group(0) @binding(2) var cellStateOut: array;

			fn cellIndex(cell: vec2u) -> u32 {
				return cell.y * u32(grid.x) + cell.x;
			}

			@compute @workgroup_size(${shdWorkGroupSize}, ${shdWorkGroupSize})
			fn compMain(@builtin(global_invocation_id) cell: vec3u) {
				if (cellStateIn[cellIndex(cell.xy)]%5 == 0) {
					cellStateOut[cellIndex(cell.xy)] = 0;
				} else {
					cellStateOut[cellIndex(cell.xy)] = 1;
				}
			}`;
export class ComputeMaterialTest {
	private mRscene = new RendererScene();

	initialize(): void {
		console.log("ComputeMaterialTest::initialize() ...");

		const rc = this.mRscene;
		rc.initialize();
		this.initEvent();
		this.initScene();
	}

	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}

	private mouseDown = (evt: MouseEvent): void => {};

	private createUniformValues(): WGRUniformValue[] {

		const gridsSizesArray = new Float32Array([gridSize, gridSize]);
		const cellStateArray0 = new Uint32Array(gridSize * gridSize);
		for (let i = 0; i < cellStateArray0.length; i += 3) {
			cellStateArray0[i] = 1;
		}
		const cellStateArray1 = new Uint32Array(gridSize * gridSize);
		for (let i = 0; i < cellStateArray1.length; i++) {
			cellStateArray1[i] = i % 2;
		}
		const v0 = new WGRUniformValue({ data: gridsSizesArray, stride: 2 }).toVisibleAll();
		const v1 = new WGRStorageValue({ data: cellStateArray0, stride: 1 }).toVisibleVertComp();
		const v2 = new WGRStorageValue({ data: cellStateArray1, stride: 1 }).toVisibleComp();
		v2.toBufferForStorage();

		return [v0, v1, v2];
	}
	private createMaterial(shaderCodeSrc: WGRShderSrcType, shadinguuid: string, workgroupCountX = 2, workgroupCountY = 2): WGCompMaterial {
		const uniformValues = this.createUniformValues();
		return new WGCompMaterial({ shadinguuid, shaderCodeSrc, uniformValues
		}).setWorkcounts(workgroupCountX, workgroupCountY);
	}
	private initScene(): void {
		const rc = this.mRscene;

		let shaderCodeSrc0 = {
			compShaderSrc: { code: compShdCode0, uuid: "computing-0", compEntryPoint: "compMain" }
		};
		let shaderCodeSrc1 = {
			compShaderSrc: { code: compShdCode1, uuid: "computing-1", compEntryPoint: "compMain" }
		};
		let materials = [this.createMaterial(shaderCodeSrc0, "comp-1"), this.createMaterial(shaderCodeSrc1, "comp-2", 4, 4)];
		rc.addEntity( new ComputeEntity({ materials }) );
	}

	run(): void {
		this.mRscene.run();
	}
}