轻量封装WebGPU渲染系统示例＜4＞-CubeMap/天空盒(源码)

当前示例源码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();
	}
}