轻量封装WebGPU渲染系统示例＜7＞-材质多pass(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/MultiMaterialPass.ts

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

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

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

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

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

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

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

当前示例运行效果:

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

export class MultiMaterialPass {

	private mEntity: Entity3D;

	geomData = new GeomDataBuilder();
	renderer = new WGRenderer();

	initialize(): void {
		console.log("MultiMaterialPass::initialize() ...");

		const shdSrc = {
			vert: { code: vertWGSL },
			frag: { code: fragWGSL }
		};
		const tds = [new WGImage2DTextureData("static/assets/blueTransparent.png")];
		let material0 = this.createMaterial(shdSrc, tds, ["transparent"], "front");
		let material1 = this.createMaterial(shdSrc, tds, ["transparent"], "back");
		this.mEntity = this.createEntity([material0, material1]);
	}

	private createMaterial(shaderCodeSrc: WGRShderSrcType, texDatas?: WGImage2DTextureData[], blendModes: string[] = [], faceCullMode = "back"): WGMaterial {
		let pipelineDefParam = {
			depthWriteEnabled: true,
			faceCullMode: faceCullMode,
			blendModes: [] as string[]
		};

		pipelineDefParam.blendModes = blendModes;

		const texTotal = texDatas ? texDatas.length : 0;

		const material = new WGMaterial({
			shadinguuid: "base-material-tex" + texTotal + faceCullMode,
			shaderCodeSrc,
			pipelineDefParam
		});
		material.addTextureWithDatas(texDatas);
		return material;
	}
	private createEntity(materials: WGMaterial[]): Entity3D {
		const renderer = this.renderer;

		const rgd = this.geomData.createSphere(150, 30, 30);
		const geometry = new WGGeometry()
			.addAttribute({ position: rgd.vs })
			.addAttribute({ uv: rgd.uvs })
			.setIndices( rgd.ivs );

		const entity = new Entity3D({geometry, materials});
		renderer.addEntity( entity );
		return entity;
	}
	private mRotY = 0.0;
	run(): void {

		this.mRotY += 0.5;
		this.mEntity.transform.setRotationXYZ(0, this.mRotY, this.mRotY + 0.5);
		this.mEntity.update();

		this.renderer.run();
	}
}