当前位置:首页 > 编程笔记 > 正文
已解决

轻量封装WebGPU渲染系统示例<16>- 使用GPU Compute计算(源码)

来自网友在路上 162862提问 提问时间:2023-11-06 21:43:53阅读次数: 62

最佳答案 问答题库628位专家为你答疑解惑

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ComputeEntityTest.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;const compShdCode = `@group(0) @binding(0) var<uniform> grid: vec2f;@group(0) @binding(1) var<storage> cellStateIn: array<u32>;@group(0) @binding(2) var<storage, read_write> cellStateOut: array<u32>;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;}}`;
export class ComputeEntityTest {private mRscene = new RendererScene();initialize(): void {console.log("ComputeEntityTest::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});const v1 = new WGRStorageValue({data: cellStateArray0, stride: 1});const v2 = new WGRStorageValue({data: cellStateArray1, stride: 1});v0.toVisibleAll();v1.toVisibleVertComp();v2.toVisibleComp();v2.toBufferForStorage();return [v0, v1, v2];}private initScene(): void {const rc = this.mRscene;let shaderSrc = {compShaderSrc: {code: compShdCode,uuid: 'shader-computing',compEntryPoint: 'compMain'}};let uniformValues = this.createUniformValues();let entity = new ComputeEntity({ shaderSrc, uniformValues });rc.addEntity(entity);}run(): void {this.mRscene.run();}
}

查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"轻量封装WebGPU渲染系统示例<16>- 使用GPU Compute计算(源码)":http://eshow365.cn/6-33962-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!