轻量封装WebGPU渲染系统示例<27>- 浮点RTT纹理(源码)

当前示例源码github地址:

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

当前示例运行效果:

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

javascript 复制代码
const floatRTT = { diffuse: { uuid: "rtt0", rttTexture: {}, format: 'rgba16float' } };

export class FloatRTT {

	private mRscene = new RendererScene();

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

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

		this.initScene();
	}

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

		let shaderSrc = {
			vert: { code: vertWGSL, uuid: "vert" },
			frag: { code: fragCalc, uuid: "calcFrag" }
		};
		const attachment = {
			texture: floatRTT,
			clearValue: [0.1, 0.1, 0.1, 1.0]
		};
		const colorAttachments = [attachment];

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

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

		let rttEntity = new FixScreenPlaneEntity({ extent: [-1, -1, 2, 2], textures: [diffuseTex], shaderSrc, shadinguuid: "floatRTT" });
		rPass.addEntity(rttEntity);

		shaderSrc = {
			vert: { code: vertWGSL, uuid: "vert" },
			frag: { code: fragRead, uuid: "readFrag" }
		};

		// display float rtt rendering result
		extent = [-0.8, -0.8, 1.6, 1.6];
		let entity = new FixScreenPlaneEntity({ extent, flipY: true, textures: [floatRTT], shaderSrc, shadinguuid: "calcColor" });
		rs.addEntity(entity);

		// display origin image
		extent = [-0.95, -0.95, 0.6, 0.6];
		entity = new FixScreenPlaneEntity({ extent, flipY: false, textures: [diffuseTex]});
		rs.addEntity(entity);
	}
	private initScene(): void {
		this.applyRTTPass( [-1, -1, 2, 2] );
	}

	run(): void {
		this.mRscene.run();
	}
}
相关推荐
周小码4 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
大嘴带你水论文4 小时前
震惊!仅用10张照片就能随意编辑3D人脸?韩国KAIST最新黑科技FFaceNeRF解析!
论文阅读·人工智能·python·科技·计算机视觉·3d·transformer
Coovally AI模型快速验证2 天前
3D目标跟踪重磅突破!TrackAny3D实现「类别无关」统一建模,多项SOTA达成!
人工智能·yolo·机器学习·3d·目标跟踪·无人机·cocos2d
研梦非凡2 天前
CVPR 2025|基于粗略边界框监督的3D实例分割
人工智能·计算机网络·计算机视觉·3d
逻辑羊驼2 天前
VSCode+MobaXterm+X11可视化界面本地显示
运维·服务器·ubuntu·3d
二川bro2 天前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
二川bro2 天前
第24节:3D音频与空间音效实现
3d·音视频
新启航半导体有限公司2 天前
[新启航]《超薄碳化硅衬底 TTV 测量:技术挑战与解决方案》
科技·3d·制造
咔咔一顿操作2 天前
第六章 Cesium 实现简易河流效果
microsoft·3d·cesium
桃花键神3 天前
如何选择合适的 3D 建模工具:我的经验和思考
3d