当前示例源码github地址:
https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ImgCubeMap.ts
此示例渲染系统实现的特性:
1. 用户态与系统态隔离。
2. 高频调用与低频调用隔离。
3. 面向用户的易用性封装。
4. 渲染数据和渲染机制分离。
5. 用户操作和渲染系统调度并行机制。
当前示例运行效果:
此示例基于此渲染系统实现,当前示例TypeScript源码如下:
export class ImgCubeMap {
geomData = new GeomDataBuilder();
renderer = new WGRenderer();
initialize(): void {
const material = this.createMaterial();
this.createEntity([material]);
}
private createMaterial(): WGMaterial {
let urls = [
"static/assets/hw_morning/morning_ft.jpg",
"static/assets/hw_morning/morning_bk.jpg",
"static/assets/hw_morning/morning_up.jpg",
"static/assets/hw_morning/morning_dn.jpg",
"static/assets/hw_morning/morning_rt.jpg",
"static/assets/hw_morning/morning_lf.jpg"
];
let texDataList = [new WGImageCubeTextureData(urls)];
const shaderCodeSrc = {
vert: { code: vertWGSL, uuid: "vertShdCode" },
frag: { code: fragWGSL, uuid: "fragShdCode" }
};
const texTotal = texDataList ? texDataList.length : 0;
const material = new WGMaterial({
shadinguuid: "base-material-tex" + texTotal,
shaderCodeSrc
}).addTextureWithDatas(texDataList);
return material;
}
private createEntity(materials: WGMaterial[]): Entity3D {
const renderer = this.renderer;
const rgd = this.geomData.createCube(200);
const geometry = new WGGeometry()
.addAttribute({ position: rgd.vs })
.setIndices( rgd.ivs );
const entity = new Entity3D({materials, geometry});
renderer.addEntity(entity);
return entity;
}
run(): void {
this.renderer.run();
}
}