ThreeJS教程:PBR材质简介

推荐:将NSDT场景编辑器加入你的3D工具链

3D工具集:NSDT简石数字孪生

PBR材质简介

本节课没有具体的代码,就是给大家科普一下PBR材质,所谓PBR就是,基于物理的渲染(physically-based rendering)。

Three.js提供了两个PBR材质相关的APIMeshStandardMaterialMeshPhysicalMaterial,MeshPhysicalMaterialMeshStandardMaterial扩展的子类,提供了更多功能属性。

光照模型

如果你有初高中最基本的物理光学知识,应该有折射、镜面反射、漫反射等基本光学概念,对于实际生活中的光学问题,Three.js会提供一些的光照模型来模拟物体表面的光照,光照模型就一种模拟光照的计算方法。MeshPhysicalMaterialMeshLambertMaterial一样都是渲染网格模型的材质,但是他们用的光照模型不同,具体点说就是材质模拟Mesh反射光照的代码算法不同,算法不同,自然模拟光照的真实程度也不同。

如果你想深入研究光照模型,可以学习下原生WebGL或WebGPU,或者看看计算机图形学相关书籍,使用threejs的大部分情况,用不着你自己实现光照模型算法,毕竟threejs通过网格模型材质帮你实现了。

PBR相关理论介绍文章

  • 半小时了解PBR:https://zhuanlan.zhihu.com/p/37639418
  • PBR知识体系整理:https://zhuanlan.zhihu.com/p/100596453
  • PBR核心知识体系总结与概览:https://zhuanlan.zhihu.com/p/53086060

网格模型材质整体回顾

  • MeshLambertMaterial: Lambert光照模型(漫反射)
  • MeshPhongMaterial:Phong光照模型(漫反射、高光反射)
  • MeshStandardMaterial和MeshPhysicalMaterial:基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...)

PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果,当然也会占用更多的电脑硬件资源。

通过MeshPhysicalMaterial文档,提供的资源,可以查看多个PBR材质的案例效果,系统课程中轿车展示案例也会用到PBR材质。

渲染占用资源和表现能力

整体上来看,就是渲染表现能力越强,占用的计算机硬件资源更多。

  • 占用渲染资源 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial
  • 渲染表现能力 MeshBasicMaterial < MeshLambertMaterial < MeshPhongMaterial < MeshStandardMaterial < MeshPhysicalMaterial


上一篇:Three.js教程:gltf模型更换.map(纹理.flipY) (mvrlink.com)

下一篇:ThreeJS教程:PBR材质金属度和粗糙度 (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号