轻量封装WebGPU渲染系统示例<24>- Rendering Pass Graph基本用法(源码)

当前示例源码github地址:

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

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

javascript 复制代码
class PassGraph extends WGRPassNodeGraph {
	constructor() { super(); }
	runBegin(): void {
		super.runBegin();
	}
	run(): void {
		let pass = this.passes[0];
		for (let i = 0; i < 16; ++i) {
			pass.colorAttachments[0].clearEnabled = i < 1;
			pass.render();
		}
	}
}

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

	initialize(): void {

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

	private applyNewRPass(texUUID: string, entities: FixScreenPlaneEntity[], clearColor: ColorDataType, extent = [0.4, 0.3, 0.5, 0.5]): void {

		let rs = this.mRscene;
		let rttTex = { diffuse: { uuid: texUUID, rttTexture: {} } };
		let colorAttachments = [
			{
				texture: rttTex,
				clearValue: clearColor,
				loadOp: "clear",
				storeOp: "store"
			}
		];
		let rPass = rs.renderer.appendRenderPass({ separate: true, colorAttachments });
		for (let i = 0; i < entities.length; ++i) {
			rPass.addEntity(entities[i]);
		}

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

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

		const rs = this.mRscene;
		let entity: FixScreenPlaneEntity;

		const diffuseTex = { diffuse: { url: "static/assets/guangyun_40.png", flipY: true } };

		let blendModes = ['add'];
		let entities: FixScreenPlaneEntity[] = [];
		entity = new FixScreenPlaneEntity({ extent: [-0.8, -0.8, 0.8, 0.8], textures: [diffuseTex], blendModes });
		entity.setColor([0.9, 0.3, 0.9]);
		rs.addEntity(entity);
		entities.push(entity);

		this.applyNewRPass('rtt0', entities, [0.2, 0.2, 0.2, 1.0], [-0.2, 0.1, 0.8, 0.8]);
	}

	run(): void {
		this.mRscene.run();
	}
}
相关推荐
工业3D_大熊16 小时前
3D Web轻量引擎HOOPS赋能BIM/工程施工:实现超大模型的轻量化加载与高效浏览!
3d·3d web轻量化·3d模型可视化·3d渲染引擎·工业3d开发引擎·bim模型可视化
研梦非凡16 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
fanged1 天前
Cesium4--地形(OSGB到3DTiles)
3d·gis·web
桃花键神1 天前
从传统到智能:3D 建模流程的演进与 AI 趋势 —— 以 Blender 为例
人工智能·3d·blender
东风西巷1 天前
全能的3D创作平台,Blender(免费开源3D建模工具)
学习·3d·开源·blender·软件需求
查里王2 天前
AI 3D 生成工具知识库:当前产品格局与测评总结
人工智能·3d
Hello123网站2 天前
Champ-基于3D的人物图像到动画视频生成框架
3d·ai工具
Magnum Lehar2 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
博图光电2 天前
Motioncam Color S + 蓝激光:3D 视觉革新,重塑工业与科研应用新格局
3d
新启航光学频率梳2 天前
[新启航]深孔加工尺寸精度检测方法 - 激光频率梳 3D 轮廓测量
科技·3d·制造