轻量封装WebGPU渲染系统示例＜8＞- 渲染器基本场景管理(源码)

当前示例源码github地址:

https://github.com/vilyLei/voxwebgpu/blob/main/src/voxgpu/sample/RSceneTest.ts

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

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

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

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

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

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

当前示例运行效果:

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

export class RSceneTest {
	private mRscene = new RendererScene();

	geomData = new GeomDataBuilder();

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

		this.mRscene.initialize();

		this.initEvent();

		const shdSrc = {
			vertShaderSrc: { code: vertWGSL, uuid: "vertShdCode" },
			fragShaderSrc: { code: fragWGSL, uuid: "fragShdCode" }
		};
		const materials = [
			this.createMaterial(shdSrc, [new WGImage2DTextureData("static/assets/box.jpg")], ["solid"], "back"),
			this.createMaterial(shdSrc, [new WGImage2DTextureData("static/assets/brickwall_big512.jpg")], ["solid"], "back"),
			this.createMaterial(shdSrc, [new WGImage2DTextureData("static/assets/metal_02.jpg")], ["solid"], "back")
		]
		this.createEntities(materials, new Vector3(0, 200, 0));
	}

	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}
	private mouseDown(evt: MouseEvent): void {
		console.log("mousedown evt call ...");
	}
	private createMaterial(shdSrc: WGRShderSrcType, texDatas?: WGImage2DTextureData[], blendModes: string[] = [], faceCullMode = "back"): WGMaterial {
		let pipelineDefParam = {
			depthWriteEnabled: true,
			faceCullMode,
			blendModes: [] as string[]
		};

		pipelineDefParam.blendModes = blendModes;

		const texTotal = texDatas ? texDatas.length : 0;

		const material = new WGMaterial({
			shadinguuid: "base-material-tex" + texTotal,
			shaderCodeSrc: shdSrc,
			pipelineDefParam
		});

		let ufv = new WGRStorageValue(new Float32Array([1, 1, 1, 1]));
		material.uniformValues = [ufv];
		material.addTextureWithDatas(texDatas);

		return material;
	}

	private createGeom(rgd: GeomRDataType): WGGeometry {
		const geometry = new WGGeometry()
			.addAttribute({ shdVarName: "position", data: rgd.vs, strides: [3] })
			.addAttribute({ shdVarName: "uv", data: rgd.uvs, strides: [2] })
			.setIndexBuffer({ name: "geomIndex", data: rgd.ivs });
		return geometry;
	}
	private createEntities(materials: WGMaterial[], pv?: Vector3): void {
		const rc = this.mRscene;
		pv = pv ? pv : new Vector3();

		let sphGeom = this.createGeom(this.geomData.createSphere(30, 30, 30));
		let boxGeom = this.createGeom(this.geomData.createCube(100));
		let torusGeom = this.createGeom(this.geomData.createTorus(100));

		const floor = new Entity3D();
		floor.materials = [materials[0]];
		floor.geometry = boxGeom;
		floor.transform.setPosition(new Vector3(0, -150, 0).addBy(pv));
		floor.transform.setScaleXYZ(8, 0.1, 8);
		rc.addEntity(floor);

		for (let i = 0; i < 6; ++i) {
			const torus = new Entity3D();
			torus.materials = [materials[1]];
			torus.geometry = torusGeom;
			torus.transform.setPosition(new Vector3(-200 + i * 80, 0, 0).addBy(pv));
			rc.addEntity(torus);
		}
		for (let i = 0; i < 12; ++i) {
			const sphere = new Entity3D();
			sphere.materials = [materials[2]];
			sphere.geometry = sphGeom;
			sphere.transform.setPosition(new Vector3(-400 + i * 80, 0, 0).addBy(pv));
			rc.addEntity(sphere);
		}
	}

	run(): void {
		this.mRscene.run();
	}
}