轻量封装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();
	}
}
相关推荐
笑鸿的学习笔记1 天前
qt-Quick3D笔记之官方例程Runtimeloader Example运行笔记
笔记·qt·3d
你好!蒋韦杰-(烟雨平生)3 天前
第一个3D程序!
c++·数学·3d
xwz小王子4 天前
北京大学与智元机器人联合实验室发布OmniManip:显著提升机器人3D操作能力
3d·机器人
m0_743106465 天前
【论文笔记】Fast3R:前向并行muti-view重建方法
论文阅读·深度学习·计算机视觉·3d·几何学
iloveas20147 天前
three.js+WebGL踩坑经验合集(4.2):为什么不在可视范围内的3D点投影到2D的结果这么不可靠
3d·webgl
有Li7 天前
2D 超声心动图视频到 3D 心脏形状重建的临床应用| 文献速递-医学影像人工智能进展
人工智能·3d·音视频
mirrornan7 天前
3D可视化定制:开启个性化购物新时代,所见即所得
3d·3d模型·web3d
Hypochondria.7 天前
基于SMPL的三维人体重建-深度学习经典方法之VIBE
人工智能·深度学习·计算机视觉·3d
就是个名称8 天前
cesium相机
前端·3d
一粒马豆8 天前
three.js用粒子使用canvas生成的中文字符位图材质
3d·three.js·canvas·中文字符·粒子动画