在Cesium中提升glTF渲染效果:PBR改进和Khronos中性色调映射

259 阅读5分钟

大家好,我是日拱一卒的攻城师不浪,致力于前沿科技探索,摸索小而美的工作室。

前言

一直以来,Cesium的渲染效果一直令人诟病,这也与官方团队的方向侧重点有关,不过随着产品逐渐趋于稳定,官方也在不断的向更好的效果推进。

为了提升Web端Cesium应用的视觉效果,我们在最近的CesiumJS版本中对glTF渲染进行了关键更新,包括改进了glTF的**物理基渲染(PBR)**材质模型和色调映射

我们专注于提升glTF3D Tiles的初始视觉效果,特别是在多种材质类型的可视化中,这对数字化表示很重要。

我们的目标不仅是呈现美观的图像,更重要的是提升用户对复杂三维地理空间场景的理解。

此外,我们致力于确保模型在glTF和3D Tiles生态系统中的一致性,这对于跨平台和产品的数据可移植性至关重要。

现代办公楼 glTF模型,由Kerkstra Precast通过Sketchfab提供的现代办公楼 glTF模型,在CesiumJS中使用更新的PBR材质模型、色调映射和光照效果。

技术概述

在像CesiumJS这样的Web环境中,实现视觉质量性能准确性的平衡具有独特的挑战。

  • 浏览器限制:与Unreal Engine或Unity等原生应用不同,CesiumJS在浏览器中运行。这限制了我们对图形处理内存使用优化的控制。

  • 运行时数据流:在像CesiumJS这样的地理空间应用中,数据在运行时流式传输,而不是由设计师预先构建包含详细光照信息的关卡。由于需要在运行时进行动态调整和计算,性能至关重要。

  • 可扩展性和精度:CesiumJS旨在处理从毫米级精度到全球范围的数据,以及从地下视角到外太空视图。确定默认参数而不损失细节或性能是一个难题

在提升视觉质量的过程中,我们广泛使用的glTF格式是一大优势。CesiumJS渲染使用.gltf.glb文件的模型,以及直接链接到.gltf.glb文件的3D Tiles。

利用glTF生态系统为我们提供了基础工具,特别是丰富的示例模型库和开源参考实现,例如Khronos提供的

【glTF-Sample-Viewer】:github.com/KhronosGrou…

中的PBR着色器

解析来我们讨论下PBR材质模型和色调映射的改进对CesiumJS中glTF渲染的影响。

PBR材质模型的改进

glTF 2.0引入了**物理基渲染(PBR)**作为核心功能,允许使用一组简单的标准参数来模拟现实世界的光照交互材质表面属性

通过PBR,开发者或艺术家无需了解渲染管线着色器即可构建在光照条件、反射和阴影下准确响应的材质。

我们对CesiumJS中物理基材质的反射属性进行了关键修复和更新。

  • 将**双向反射分布函数(BRDF)**从Schlick-Smith近似模型更新为基于微表面的模型,产生更符合物理的结果。

  • 添加了漫反射光的近似多次散射反射率修正,确保当光在表面散射或反射时更好地遵守能量守恒。

这些更新使模型看起来更加明亮鲜艳,因为我们之前收到glTF模型渲染过暗的反馈。此外,这些更新大大改善了CesiumJS中最近实现的glTF PBR Next扩展的外观:KHR_materials_specularKHR_materials_anisotropyKHR_materials_clearcoat

更新前的“Pot of Coals” glTF示例模型

更新后的“Pot of Coals” glTF示例模型。注意烧焦铜表面更逼真的高光效果,在掠射角度下改进的反射率,以及模型整体亮度的提升。

Khronos PBR中性色调映射器

色调映射在PBR渲染过程中作为最后一步起到关键作用。它们是将PBR输出(即线性值,近似真实世界光能,可能远超显示器能够显示的范围)缩小到较小设备输出范围的函数。

在之前的版本中,CesiumJS使用ACES色调映射模型,这是一种电影行业标准,但有时会导致模型显得色彩饱和度降低、暗淡无光。

现在,我们已经将默认的色调映射器替换为Khronos标准的PBR中性色调映射器。这意味着在glTF生态系统中,色彩表现将更加一致,这对于需要准确色彩表现的电子商务供应商尤为重要。

这个新的色调映射器扩大了显示颜色的色域,特别是在许多模型中,它帮助提亮了颜色并略微增加了饱和度。

左图: 使用ACES色调映射的Cesium Air glTF模型。右图: 使用Khronos PBR中性色调映射的Cesium Air glTF模型。
请注意,右图中的白色更加明亮,绿色和蓝色更加饱和。

左图: 使用ACES色调映射的San Miguel 3D Tileset。右图: 使用Khronos PBR中性色调映射的San Miguel 3D Tileset。  请注意,右图中的白色更加明亮,绿色和蓝色更加饱和。

结论

随着我们继续提升CesiumJS的视觉能力,对PBR材质模型的改进以及引入Khronos PBR中性色调映射器,已经大大提高了浏览器端的渲染质量。

这些更新增强了场景的逼真性和一致性,解决了用户关于模型过暗的反馈,并与glTF生态系统的标准更加接近。

有需要进可视化&Webgis交流群可以加我:brown_7778(备注来意)。