轻量封装WebGPU渲染系统示例<35>- HDR环境数据应用到PBR渲染材质

当前示例源码github地址:

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

当前示例运行效果:

微调参数之后的效果:

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

javascript 复制代码
export class BasePbrMaterialTest {
	private mRscene = new RendererScene();

	initialize(): void {

		this.mRscene.initialize({ canvasWith: 1024, canvasHeight: 1024, rpassparam: { multisampleEnabled: true } });
		this.initScene();
		this.initEvent();
	}
	private hdrEnvtex = new SpecularEnvBrnTexture();
	private createTextures(ns: string): WGTextureDataDescriptor[] {
		const albedoTex = { albedo: { url: `static/assets/pbr/${ns}/albedo.jpg` } };
		const normalTex = { normal: { url: `static/assets/pbr/${ns}/normal.jpg` } };
		const aoTex = { ao: { url: `static/assets/pbr/${ns}/ao.jpg` } };
		const roughnessTex = { roughness: { url: `static/assets/pbr/${ns}/roughness.jpg` } };
		const metallicTex = { metallic: { url: `static/assets/pbr/${ns}/metallic.jpg` } };
		let textures = [this.hdrEnvtex, albedoTex, normalTex, aoTex, roughnessTex, metallicTex];
		return textures;
	}
	private initScene(): void {
		this.initEntities();
	}
	private initEntities(): void {
		let rc = this.mRscene;

		let monkeySrc = new ModelEntity({
			modelUrl: "static/assets/draco/monkey.drc"
		});
		let sphSrc = new SphereEntity({
			radius: 100,
			latitudeNumSegments: 30,
			longitudeNumSegments: 30
		});

		let lightData = this.createLightData();

		let startV = new Vector3(-500, 0, -500);
		for (let i = 0; i < 3; ++i) {
			for (let j = 0; j < 5; ++j) {

				let pos = new Vector3(j * 300 + startV.x, 0, i * 600 + startV.z);

				let roughness = 1.0 - (0.05 + 0.95 * j/(5-1));
				let roughnessBase = i/(3-1);
				let material = new BasePBRMaterial();
				let property = material.property;
				property.setLightData(lightData.lightsData, lightData.lightColorsData);
				property.ambient.value = new Color4().randomRGB(0.3, 0.1);
				property.albedo.value = new Color4().randomRGB(1.0, 0.2);
				property.arms.value = [1, roughness, 1];
				property.armsBase.value = [0, roughnessBase ,0];

				material.addTextures(this.createTextures("gold"));

				let sph = new SphereEntity({
					materials: [material],
					geometry: sphSrc.geometry
				});
				sph.transform.setPosition(pos);
				rc.addEntity(sph);

				material = new BasePBRMaterial();
				property = material.property;
				property.setLightData(lightData.lightsData, lightData.lightColorsData);

				property.ambient.value = new Color4().randomRGB(0.3, 0.1).ceil();
				property.albedo.value = new Color4().randomRGB(1.0, 0.2);
				property.arms.value = [1, roughness, 1];
				property.armsBase.value = [0, roughnessBase ,0];
				property.uvParam.value = [2,2];
				material.addTextures(this.createTextures("rusted_iron"));

				let monkey = new ModelEntity({
					materials: [material],
					geometry: monkeySrc.geometry,
					transform: { position: pos.clone().subtractBy(new Vector3(0, 0, 270)), scale: [100, 100, 100], rotation: [0, 90, 0] }
				});
				rc.addEntity(monkey);
			}
		}
	}

	private createLightData(): { lightsData: Float32Array; lightColorsData: Float32Array } {
		let lightsData = new Float32Array([0.0, 300.0, 0, 0.000001]);
		let lightColorsData = new Float32Array([5.0, 5.0, 5.0, 0.000005]);
		return { lightsData, lightColorsData };
	}
	private initEvent(): void {
		const rc = this.mRscene;
		rc.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDown);
		new MouseInteraction().initialize(rc, 0, false).setAutoRunning(true);
	}
	private mouseDown = (evt: MouseEvent): void => {};
	run(): void {
		this.mRscene.run();
	}
}
相关推荐
mirrornan10 小时前
产品如何3D建模?如何根据使用场景选购3D扫描仪?
科技·3d·3d建模·3d模型·三维扫描
兔老大的胡萝卜10 小时前
关于 3D Engine Design for Virtual Globes(三维数字地球引擎设计)
人工智能·3d
深蓝学院10 小时前
无需姿态,即刻重建!NoPoSplat,重新定义3DGS的重建Pipeline
3d
智方科技10 小时前
cesium 3DTiles之pnts格式详解
3d
mirrornan11 小时前
3D看车如何实现?有哪些功能特点和优势?
3d·3d模型·3d交互展示·3d看车
一介青烟小生15 小时前
cesium渲染3DTiles模型和glb模型
3d·cesium
暖和_白开水1 天前
材质(二)——材质参数化,从源材质继承生成不同的材质实例
ue5·材质
暖和_白开水1 天前
材质(一)
ue5·材质
UTwelve2 天前
【UE5】在材质中实现球形法线技术,常用于改善植物等表面的渲染效果
ue5·材质·虚幻引擎·着色器·虚幻4
DBBH2 天前
UE5材质篇 2 ICE 冰材质尝试
ue5·材质