轻量封装WebGPU渲染系统示例＜14＞

示例＜14＞"/>

轻量封装WebGPU渲染系统示例＜14＞

当前示例源码github地址:

.ts

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

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

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

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

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

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

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

6. 数据/语义驱动。

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

当前示例运行效果:

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

export class ModelLoadTest {private mRscene = new RendererScene();private mTeamLoader = new CoModelTeamLoader();initialize(): void {console.log("ModelLoadTest::initialize() ...");const rc = this.mRscene;rc.initialize();this.initEvent();this.initModels();}private initEvent(): void {const rc = this.mRscene;rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);}private createGeometry(gd: CoGeomDataType, normalEnabled = false): WGGeometry {const geometry = new WGGeometry().addAttribute({ position: gd.vertices }).addAttribute({ uv: gd.uvsList[0] }).setIndices(gd.indices);if (normalEnabled) {geometry.addAttribute({ normal: gd.normals });}return geometry;}private initModels(): void {let url0 = "static/assets/fbx/mat_ball.fbx";let loader = this.mTeamLoader;loader.load([url0], (models: CoGeomDataType[], transforms: Float32Array[]): void => {console.log("loaded models: ", models);for (let i = 0; i < models.length; ++i) {this.createEntity(models[i]);}});}private mouseDown = (evt: MouseEvent): void => { };private createEntity(model: CoGeomDataType): void {const rc = this.mRscene;const geometry = this.createGeometry(model, true);let entity = new PrimitiveEntity({ geometry }).setAlbedo(new Color4().randomRGB(1.5, 0.1)).setARM(1.1, Math.random() * 0.95 + 0.05, Math.random() * 0.9 + 0.1);rc.addEntity( entity );}run(): void {this.mRscene.run();}
}