轻量封装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();
	}
}
相关推荐
子燕若水7 小时前
“Daz to Unreal”将 G8 角色(包括表情)从 daz3d 导入到 UE5。在 UE5 中,我发现使用某个表情并与闭眼混合后,上眼睑出现了问题
3d·ue5
zhu_zhu_xia14 小时前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
星空寻流年15 小时前
css3新特性第七章(3D变换)
前端·css·3d
在下胡三汉15 小时前
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