轻量封装WebGPU渲染系统示例<28>- MRT纹理(源码)

当前示例源码github地址:

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

当前示例运行效果:

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

javascript 复制代码
export class MRT {

	private mRscene = new RendererScene();

	initialize(): void {

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

		this.initEvent();
		this.initScene();
	}
	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}
	private mFlag = 6;
	private mouseDown = (evt: MouseEvent): void => {
		this.mFlag = 1;
	}

	private applyMRTPass(extent: number[]): void {
		let rs = this.mRscene;

		const attachment0 = {
			texture: colorRTTTex,
			clearValue: [0.15, 0.15, 0.15, 1.0]
		};
		const attachment1 = {
			texture: albedoRTTTex,
			clearValue: [0.15, 0.25, 0.25, 1.0]
		};
		const attachment2 = {
			texture: floatRTTTex,
			clearValue: [0.2, 0.25, 0.2, 1.0]
		};

		const colorAttachments = [attachment0, attachment1, attachment2];

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

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

		let shaderSrc = {
			vert: { code: vertMRT, uuid: "vertMRT" },
			frag: { code: fragMRT, uuid: "fragMRT" }
		};

		let uniformValues = [{ data: new Float32Array([1,1,1,1]) }];
		let torus = new TorusEntity({shaderSrc, textures: [diffuseTex], uniformValues});
		rPass.addEntity(torus);

		// display rendering result
		extent = [-0.8, -0.8, 1.6, 1.6];
		let entity = new FixScreenPlaneEntity({ extent, textures: [colorRTTTex] });
		rs.addEntity(entity);

		shaderSrc = {
			vert: { code: vertWGSL, uuid: "vert" },
			frag: { code: fragReadNormal, uuid: "readNromal" }
		};
		// display normal drawing result
		extent = [-0.7, -0.95, 0.6, 0.6];
		entity = new FixScreenPlaneEntity({ extent, textures: [floatRTTTex], shaderSrc, shadinguuid: "readNromal" });
		rs.addEntity(entity);

		// display albedo drawing result
		extent = [0.1, -0.95, 0.6, 0.6];
		entity = new FixScreenPlaneEntity({ extent, textures: [albedoRTTTex] });
		rs.addEntity(entity);
	}
	private initScene(): void {
		this.applyMRTPass( [-1, -1, 2, 2] );
	}
	run(): void {
		this.mRscene.run();
	}
}
相关推荐
子燕若水8 小时前
“Daz to Unreal”将 G8 角色(包括表情)从 daz3d 导入到 UE5。在 UE5 中,我发现使用某个表情并与闭眼混合后,上眼睑出现了问题
3d·ue5
zhu_zhu_xia15 小时前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
星空寻流年16 小时前
css3新特性第七章(3D变换)
前端·css·3d
在下胡三汉16 小时前
Google Store 如何利用 glTF 3D 模型改变产品教育
3d
Hali_Botebie16 小时前
【激光雷达3D(6)】3D点云目标检测方法;CenterPoint、PV-RCNN和M3DETR的骨干网络选择存在差异
网络·目标检测·3d
whuzhang161 天前
3DGS之齐次坐标
人工智能·3d·自动驾驶
90后小陈老师2 天前
WebXR教学 05 项目3 太空飞船小游戏
windows·3d·web·js
艾恩小灰灰2 天前
CSS中的`transform-style`属性:3D变换的秘密武器
前端·css·3d·css3·html5·web开发·transform-style
工业3D_大熊3 天前
HOOPS Exchange 与HOOPS Communicator集成:打造工业3D可视化新标杆!
3d·hoops·3d数据格式转换·3d模型可视化·bim技术数字解决方案·3d模型桌面可视化
二狗哈3 天前
使用最新threejs复刻经典贪吃蛇游戏的3D版,附完整源码
游戏·3d