导航网站移动端流量占比,网站投稿系统怎么做,小制作小发明做法,什么网站专做店铺注#xff1a; 此示例通过渲染实体的渲染过程控制来实现。此实现方式繁琐#xff0c;这里用于说明相关用法。
更简洁的实现请见: 轻量封装WebGPU渲染系统示例#xff1c;19#xff1e;- 使用GPU Compute材质多pass元胞自动机(源码)-CSDN博客
当前示例源码github地址:
ht…注 此示例通过渲染实体的渲染过程控制来实现。此实现方式繁琐这里用于说明相关用法。
更简洁的实现请见: 轻量封装WebGPU渲染系统示例19- 使用GPU Compute材质多pass元胞自动机(源码)-CSDN博客
当前示例源码github地址:
https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/GameOfLifeTest.ts
系统特性:
1. 用户态与系统态隔离。
2. 高频调用与低频调用隔离。
3. 面向用户的易用性封装。
4. 渲染数据(内外部相关资源)和渲染机制分离。
5. 用户操作和渲染系统调度并行机制。
6. 数据/语义驱动。
7. 异步并行的场景/模型载入。
8. computing与rendering用法机制一致性。 1). 构造过程一致性。 2). 启用过程一致性。 3). 自动兼容到material多pass以及material graph机制中。
当前示例运行效果: WGSL顶点与片段shader:
struct VertexInput {location(0) pos: vec3f,builtin(instance_index) instance: u32,
};struct VertexOutput {builtin(position) pos: vec4f,location(0) cell: vec2f,
};
group(0) binding(0) varuniform grid: vec2f;
group(0) binding(1) varstorage cellState: arrayu32;
vertex
fn vertMain(input: VertexInput) - VertexOutput {let i f32(input.instance);let cell vec2f(i % grid.x, floor(i / grid.x));let cellOffset cell / grid * 2.0;var state f32(cellState[input.instance]);let gridPos (input.pos.xy * state 1.0) / grid - 1.0 cellOffset;var output: VertexOutput;output.pos vec4f(gridPos, 0.0, 1.0);output.cell cell;return output;
}fragment
fn fragMain(input: VertexOutput) - location(0) vec4f {let c input.cell / grid;return vec4f(c, 1.0 - c.x, 1.0);
}
此示例基于此渲染系统实现当前示例TypeScript源码如下
export class GameOfLifeTest {private mRscene new RendererScene();initialize(): void {console.log(GameOfLifeTest::initialize() ...);const rc this.mRscene;rc.initialize();this.initEvent();this.initScene();}private mFlag 6;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 {this.mFlag 1;};private createUniformValues(): { ufvs0: WGRUniformValue[]; ufvs1: WGRUniformValue[] }[] {const gridsSizesArray new Float32Array([gridSize, gridSize]);const cellStateArray0 new Uint32Array(gridSize * gridSize);for (let i 0; i cellStateArray0.length; i) {cellStateArray0[i] Math.random() 0.6 ? 1 : 0;}const cellStateArray1 new Uint32Array(gridSize * gridSize);for (let i 0; i cellStateArray1.length; i) {cellStateArray1[i] i % 2;}let shared true;let sharedData0 { data: cellStateArray0 };let sharedData1 { data: cellStateArray1 };const v0 new WGRUniformValue({ data: gridsSizesArray, stride: 2, shared });v0.toVisibleAll();// build rendering uniformsconst va1 new WGRStorageValue({ sharedData: sharedData0, stride: 1, shared }).toVisibleVertComp();const vb1 new WGRStorageValue({ sharedData: sharedData1, stride: 1, shared }).toVisibleVertComp();// build computing uniformsconst compva1 new WGRStorageValue({ sharedData: sharedData0, stride: 1, shared }).toVisibleVertComp();const compva2 new WGRStorageValue({ sharedData: sharedData1, stride: 1, shared }).toVisibleComp();compva2.toBufferForStorage();const compvb1 new WGRStorageValue({ sharedData: sharedData1, stride: 1, shared }).toVisibleVertComp();const compvb2 new WGRStorageValue({ sharedData: sharedData0, stride: 1, shared }).toVisibleComp();compvb2.toBufferForStorage();let objs [{ ufvs0: [v0, va1], ufvs1: [v0, vb1] },{ ufvs0: [v0, compva1, compva2], ufvs1: [v0, compvb1, compvb2] }];return objs;}private mNodes: NodeType[] [];private mStep 0;private initScene(): void {const rc this.mRscene;let ufvsObjs this.createUniformValues();// build ping-pong rendering processlet shaderSrc {shaderSrc: {code: shaderWGSL,uuid: shader-gameOfLife,vertEntryPoint: vertMain,fragEntryPoint: fragMain}} as WGRShderSrcType;let instanceCount gridSize * gridSize;let uniformValues ufvsObjs[0].ufvs0;let entity new FixScreenPlaneEntity({x: -0.8, y: -0.8, width: 1.6, height: 1.6,shadinguuid: rshd0, shaderSrc, uniformValues, instanceCount});rc.addEntity(entity);this.mNodes [{ rendEntity: entity, compEntity: null }];entity.rstate.visible false;const geometry this.mNodes[0].rendEntity.geometry;uniformValues ufvsObjs[0].ufvs1;entity new FixScreenPlaneEntity({ shadinguuid: rshd1, shaderSrc, uniformValues, instanceCount, geometry });rc.addEntity(entity);this.mNodes.push({ rendEntity: entity, compEntity: null });// build ping-pong computing processshaderSrc {compShaderSrc: {code: compShdCode,uuid: shader-computing,compEntryPoint: compMain}};const workgroupCount Math.ceil(gridSize / shdWorkGroupSize);uniformValues ufvsObjs[1].ufvs1;let compEentity new ComputeEntity({ shadinguuid: compshd0, shaderSrc, uniformValues }).setWorkcounts(workgroupCount, workgroupCount);rc.addEntity(compEentity);compEentity.rstate.visible false;this.mNodes[0].compEntity compEentity;uniformValues ufvsObjs[1].ufvs0;compEentity new ComputeEntity({ shadinguuid: compshd1, shaderSrc, uniformValues }).setWorkcounts(workgroupCount, workgroupCount);rc.addEntity(compEentity);this.mNodes[1].compEntity compEentity;}private mFrameDelay 3;run(): void {let rendering this.mNodes[0].compEntity.isRendering();if (rendering) {if (this.mFrameDelay 0) {this.mFrameDelay--;return;}this.mFrameDelay 3;const nodes this.mNodes;for (let i 0; i nodes.length; i) {const t nodes[i];const flag (this.mStep % 2 i) % 2 0;t.rendEntity.visible flag;t.compEntity.visible flag;}this.mStep;}this.mRscene.run(rendering);}
}
