轻量封装WebGPU渲染系统示例＜2＞-彩色立方体(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/version-1.01/src/voxgpu/sample/VertColorCube.ts

此示例渲染系统实现的特性:

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

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

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

4. 渲染数据和渲染机制分离。

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

当前示例运行效果:

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

export class VertColorCube {geomData = new GeomDataBuilder();renderer = new WGRenderer();initialize(): void {console.log("VertColorCube::initialize() ...");const renderer = this.renderer;const rgd = this.geomData.createCubeWithSize(200);const shdSrc = {vertShaderSrc: { code: vertWGSL, uuid: "vtxShdCode" },fragShaderSrc: { code: fragWGSL, uuid: "fragShdCode" }};const material = new WGMaterial({shadinguuid: "shapeMaterial",shaderCodeSrc: shdSrc});const geometry = new WGGeometry().addAttribute({ shdVarName: "position", data: rgd.vs, strides: [3] }).setIndexBuffer({ name: "geomIndex", data: rgd.ivs });const entity = new Entity3D();entity.materials = [material];entity.geometry = geometry;renderer.addEntity(entity);}run(): void {this.renderer.run();}
}