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

当前示例源码github地址:

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

系统特性:

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

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

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

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

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

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

  5. 数据/语义驱动。

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

  7. GPU通用计算过程与渲染过程保持使用机制一致性。

1). 构造过程一致性。

2). 启用过程一致性。

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

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

javascript 复制代码
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: 1});
		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();
	}
}
相关推荐
CAD芯智库3 分钟前
国产三维CAD工程图特征、公母唇缘有何提升?| 中望3D 2026亮点速递(8)
科技·3d·业界资讯·中望3d·国产三维cad软件·中望3d2026·3d工程图设计
苏州知芯传感6 分钟前
MEMS与CMOS的3D集成技术研究进展
3d·cmos·mems
曹勖之8 分钟前
simulink中的Simulation 3D Camera模块和Simulation 3D Camera Get模块的区别?
3d·ue5
da_vinci_x12 小时前
Substance Designer的通道合并(Channel Packing)自动化工作流
3d·自动化·贴图·技术美术·游戏策划·游戏美术·substance designer
康谋自动驾驶19 小时前
拆解3D Gaussian Splatting:原理框架、实战 demo 与自驾仿真落地探索!
算法·数学建模·3d·自动驾驶·汽车
黑金IT19 小时前
3D虚拟人模型转换的完整指南
服务器·数据库·3d
xhload3d1 天前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
小张成长计划..2 天前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
GIS数据转换器2 天前
带高度多边形,生成3D建筑模型,支持多种颜色或纹理的OBJ、GLTF、3DTiles格式
数据库·人工智能·机器学习·3d·重构·无人机
列兵阿甘3 天前
知微传感Dkam系列3D相机SDK例程篇:Python设置相机触发模式
python·数码相机·3d