Cesium 是一个强大的 3D 地图和可视化平台,广泛应用于地理空间数据展示、3D 模型渲染和虚拟现实环境的开发。在Cesium中,支持对3D模型应用物理渲染(PBR,Physically Based Rendering)材质属性,能够模拟更真实的光照、反射、粗糙度、金属度等效果,增强视觉效果。

本文将介绍如何在Cesium中通过JavaScript脚本设置3D模型的物理材质属性,具体涵盖以下几个方面:

  1. 模型加载和基础配置
  2. 物理材质属性的组成
  3. 通过 GUI 动态调节材质属性
  4. 对光照环境的适配

1. 模型加载和基础配置

首先,加载3D模型并进行基本配置。在Cesium中,你可以通过Cesium3DTileset或者Model来加载3D模型。假设我们已经有一个3D模型,并希望为其配置物理材质属性。以下是加载模型的基本代码:


const viewer = new Cesium.Viewer('cesiumContainer');
const modelUrl = './path/to/your/model.glb';

// 加载模型
const model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
  url: modelUrl,
  scale: 1.0,
  minimumPixelSize: 128
}));

// 配置环境光照
model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients; // 设置环境光照系数
model.imageBasedLighting.specularEnvironmentMaps = "./images/kiara_6_afternoon_2k_ibl.ktx2"; // 设置环境贴图

在上面的代码中,我们使用Cesium.Model.fromGltf方法加载了一个GLTF格式的3D模型,并配置了环境光照(Image-Based Lighting,IBL)相关的系数和环境贴图。这些光照设置有助于提升模型的渲染效果,尤其是在物理渲染中显得尤为重要。

2. 物理材质属性的组成

在物理基础渲染模型中,材质属性通常由金属度(Metallic)、粗糙度(Roughness)和基础颜色(Base Color)等多个因素构成。这些属性的组合影响着模型如何与光线交互,从而决定其外观的真实感。

Cesium中物理材质的主要属性包括:

  • 基础颜色(Base Color):即材质的颜色。这个颜色不仅影响物体的表面颜色,还可以受到环境光和物体自身材质属性的影响。
  • 金属度(Metallic Factor):控制材质是否具有金属属性。金属材质具有不同的反射特性,通常具有较高的反射率和更强的光泽感。
  • 粗糙度(Roughness Factor):控制表面是否光滑。高粗糙度的材质表面会让反射模糊且散射,低粗糙度的材质则会呈现出更加清晰和锐利的反射效果。

下面是如何访问和修改Cesium模型中的材质属性:


model.readyEvent.addEventListener(() => {
  // 获取模型节点
  let modelNode = model.getNode('node_damagedHelmet_-6514');
  let material = modelNode._runtimeNode.node.primitives[0].material;
  
  // 输出当前材质信息
  console.log(material);
  
  // 动态调整基础颜色(RGB)
  gui.add(material.metallicRoughness.baseColorFactor, 'x', 0, 1, 0.1).name('基础红色').onChange(()=>{
    model.imageBasedLighting.sphericalHarmonicCoefficients = undefined;
    model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients;
  });
  gui.add(material.metallicRoughness.baseColorFactor, 'y', 0, 1, 0.1).name('基础绿色').onChange(()=>{
    model.imageBasedLighting.sphericalHarmonicCoefficients = undefined;
    model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients;
  });
  gui.add(material.metallicRoughness.baseColorFactor, 'z', 0, 1, 0.1).name('基础蓝色').onChange(()=>{
    model.imageBasedLighting.sphericalHarmonicCoefficients = undefined;
    model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients;
  });
  
  // 调整金属度
  gui.add(material.metallicRoughness, 'metallicFactor', 0, 1, 0.1).name('金属度').onChange(()=>{
    model.imageBasedLighting.sphericalHarmonicCoefficients = undefined;
    model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients;
  });
  
  // 调整粗糙度
  gui.add(material.metallicRoughness, 'roughnessFactor', 0, 1, 0.1).name('粗糙度').onChange(()=>{
    model.imageBasedLighting.sphericalHarmonicCoefficients = undefined;
    model.imageBasedLighting.sphericalHarmonicCoefficients = coefficients;
  });
});

3. 通过 GUI 动态调节材质属性

为了更直观地调整物理材质的属性,本文示范了如何使用dat.GUI库来创建一个交互式界面,通过调整滑块来改变基础颜色、金属度、粗糙度等属性。这使得用户可以实时查看调整效果,并且调整每个属性的范围和步长(例如,0到1之间,以0.1为步长)。

在上述代码中,我们通过gui.add方法将模型的材质属性绑定到界面中的滑块上。例如,我们可以调整基础颜色的红色、绿色和蓝色分量,或者调节金属度和粗糙度。这些改变会触发onChange事件,从而更新材质属性,并通过重新设置环境光照系数来确保渲染结果保持一致。

4. 对光照环境的适配

在Cesium中,imageBasedLighting是用于实现环境光照的核心配置,它包含了球谐系数(spherical harmonic coefficients)和环境贴图(specular environment maps)。这些设置对渲染物理材质的模型至关重要,尤其是在使用金属度和粗糙度的情况下。

在上述代码中,我们通过model.imageBasedLighting.sphericalHarmonicCoefficients来设置球谐系数,确保模型在不同光照环境下呈现出自然的光影效果。此外,通过model.imageBasedLighting.specularEnvironmentMaps来指定一个包含环境光照信息的贴图,进一步增强模型的渲染效果。

每当调整材质的物理属性时,我们都会将imageBasedLighting.sphericalHarmonicCoefficients重置为新的系数,从而确保每次渲染的正确性。

总结

通过本教程,我们了解了如何在Cesium中为3D模型设置物理材质属性,并通过动态交互界面(如dat.GUI)调整这些属性。物理渲染(PBR)提供了更加真实的光照和材质表现,使得模型在不同光照条件下展现出丰富的细节。结合适当的环境光照和材质属性,开发者可以为自己的项目创建更加生动、真实的3D场景。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注