轻量封装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();
	}
}
相关推荐
云空8 小时前
《PyQt6-3D应用开发技术文档》
3d·pyqt
鹧鸪云光伏14 小时前
光伏无人机3D建模:毫秒级精度设计
3d·无人机
杀生丸学AI16 小时前
【三维生成】FlashDreamer:基于扩散模型的单目图像到3D场景
人工智能·3d·大模型·aigc·蒸馏与迁移学习·扩散模型与生成模型
gis分享者1 天前
学习threejs,使用自定义GLSL 着色器,生成漂流的3D能量球
3d·threejs·着色器·glsl·shadermaterial·能量球
m0_743106461 天前
【论文笔记】BlockGaussian:巧妙解决大规模场景重建中的伪影问题
论文阅读·计算机视觉·3d·aigc·几何学
向宇it2 天前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质
荔枝味啊~2 天前
相机位姿估计
人工智能·计算机视觉·3d
在下胡三汉3 天前
什么是 3D 文件?
3d
点云登山者4 天前
登山第二十六梯:单目3D检测一切——一只眼看世界
3d·3d检测·检测一切·单目3d检测
xhload3d4 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收