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

这篇具有很好参考价值的文章主要介绍了轻量封装WebGPU渲染系统示例＜7＞-材质多pass(源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当前示例源码github地址:

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

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

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

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

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

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

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

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

当前示例运行效果:

轻量封装WebGPU渲染系统示例＜7＞-材质多pass(源码),GPU/CPU,WebGL/WebGPU,WebGPU,3d

此示例基于此渲染系统实现，当前示例TypeScript源码如下：文章来源地址https://www.toymoban.com/news/detail-714610.html

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();
	}
}

到了这里，关于轻量封装WebGPU渲染系统示例＜7＞-材质多pass(源码)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！