3DTilesRendererJS中解决倾斜摄影与BIM模型的光照融合问题

在三维可视化项目中，同时加载倾斜摄影模型(如Google Photorealistic Tiles)和BIM模型(如Bentley iTwin导出的3DTiles)时，经常会遇到光照表现异常的问题。本文将深入分析这类问题的成因，并提供完整的解决方案。

问题现象分析

当在同一个场景中混合加载不同类型的3DTiles数据时，常见以下两类光照问题：

1. 大气效果角度依赖：使用Takram Atmosphere等大气效果时，某些视角下会出现不自然的亮度变化，表现为视角移动时场景突然变亮或变暗。

2. 模型全黑显示：BIM导出的3DTiles模型可能完全显示为黑色，无法看到模型细节。

根本原因

这些问题的核心在于3DTiles数据的法线信息处理：

1. 缺失法线数据：许多3DTiles生成工具默认不包含顶点法线信息，导致光照计算异常。当使用需要法线信息的着色器(如大气效果)时，缺失法线会导致不可预测的渲染结果。

2. 材质冲突：大气效果等后期处理通常需要在屏幕空间进行光照计算，如果原始模型已经应用了Three.js的标准材质(如MeshStandardMaterial)，会造成双重光照计算，导致显示异常。

解决方案

法线生成方案

针对法线缺失问题，有以下几种解决方案：

1. 预处理生成法线：

   • 在3DTiles生成阶段包含法线信息
   • 优点：渲染质量最佳，无接缝问题
   • 缺点：增加数据体积，需要修改生成流程

2. 运行时动态生成法线：

   // 使用3DTilesRendererJS的TileCreasedNormalsPlugin插件
   const normalsPlugin = new TileCreasedNormalsPlugin();
   tilesRenderer.addPlugin(normalsPlugin);
   

   • 优点：无需修改原始数据
   • 缺点：在瓦片边界可能出现法线不连续

3. 使用平面着色：

   material.flatShading = true;
   

   • 优点：实现简单，性能好
   • 缺点：模型呈现多面体效果，失去平滑外观

材质处理方案

对于大气效果等特殊光照需求，需要统一材质处理：

// 替换所有材质为基本材质
tilesRenderer.onLoadModel = (scene) => {
  scene.traverse((obj) => {
    if(obj.material) {
      obj.material = new MeshBasicMaterial({
        color: obj.material.color
      });
    }
  });
};

实践建议

1. 对于倾斜摄影数据，优先考虑在数据生成阶段包含法线信息
2. BIM数据建议使用平面着色方案，保持各构件边界清晰
3. 混合不同类型数据时，统一使用屏幕空间光照方案
4. 性能敏感场景可考虑LOD策略，仅在近处生成高质量法线

通过合理选择法线生成方案和统一材质管理，可以完美解决3DTiles混合渲染中的光照问题，实现高质量的跨平台三维可视化效果。