轻量封装WebGPU渲染系统示例＜25＞- 颜色附件数据更新替换(源码)

当前示例源码github地址:

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

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

const rttTex0 = { diffuse: { uuid: 'rtt0', rttTexture: {} } };
const rttTex1 = { diffuse: { uuid: 'rtt1', rttTexture: {} } };
const attachment0 = {
	texture: rttTex0,
	clearValue: [] as ColorDataType,
	loadOp: "clear",
	storeOp: "store"
} as WGRPassColorAttachment;
const attachment1 = {
	texture: rttTex1,
	clearValue: [] as ColorDataType,
} as WGRPassColorAttachment;
const colorAttachments: WGRPassColorAttachment[] = [attachment0];

class PassGraph extends WGRPassNodeGraph {
	private mTimes = 0;
	constructor() { super(); }
	runBegin(): void {
		super.runBegin();
	}
	run(): void {
		this.mTimes++;
		if (this.mTimes == 50) {
			const replaceColorAttachment = true;
			if (replaceColorAttachment) {
				// replace color attachment
				attachment1.clearValue = [0.2, 0.5, 0.2];
				colorAttachments[0] = attachment1;
			} else {
				// replace texture
				colorAttachments[0].texture = rttTex1;
			}
		}
		let pass = this.passes[0];
		for (let i = 0; i < 1; ++i) {
			pass.colorAttachments[0].clearEnabled = i < 1;
			pass.render();
		}
	}
}

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

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

		let multisampleEnabled = true;
		let depthTestEnabled = false;
		let rpassparam = { multisampleEnabled, depthTestEnabled };
		this.mRscene.initialize({ rpassparam });
		this.initEvent();
		this.initScene();
	}

	private mGraph = new PassGraph();
	private applyRTTPass(clearColor: ColorDataType, extent = [0.4, 0.3, 0.5, 0.5]): void {

		let rs = this.mRscene;

		const graph = this.mGraph;

		attachment0.clearValue = clearColor;
		attachment1.clearValue = clearColor;


		let rPass = rs.renderer.appendRenderPass({ separate: true, colorAttachments });

		const diffuseTex = { diffuse: { url: "static/assets/huluwa.jpg", flipY: true } };
		let rttEntity = new FixScreenPlaneEntity({ extent: [-0.8, -0.8, 1.6, 1.6], textures: [diffuseTex] });
		rPass.addEntity(rttEntity);

		graph.passes = [rPass];
		rs.setPassNodeGraph(graph);

		let entity = new FixScreenPlaneEntity({ extent, flipY: true, textures: [rttTex0] });
		rs.addEntity(entity);

		extent = [-0.9, -0.9, 1.2, 1.2];
		entity = new FixScreenPlaneEntity({ extent, flipY: true, textures: [rttTex1] });
		rs.addEntity(entity);
	}
	private initEvent(): void {
		const rs = this.mRscene;
		new MouseInteraction().initialize(rs, 0, false).setAutoRunning(true);
	}
	private initScene(): void {

		this.applyRTTPass([0.1, 0.1, 0.1, 1.0], [-0.8, -0.8, 1.6, 1.6]);
	}

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