为WebGL场景添加城市天际线

目录隐藏

在一些三维建筑展示引擎中，用户可以设置展示建筑所处的环境。在场景远处的边缘添加上城市天际线的环形贴图来模拟，这应该算是锦上添花的效果优化，通过远处的城市天际线用户可以感受到建筑所处的环境，是城市、乡村、海滨、或沙漠，丰富了原本仅有天空渐变色的背景，增加了场景的代入感。

为了实现本教程中的DEMO效果，会涉及到一些常用工具，比如：ThreeJS、Photoshop、三维软件。你不需要掌握的很好，但都要懂一些。如果你是一名设计师，想要搭建出这个demo的话必须要掌握一定的ThreeJS知识；如果你是一名前端开发，需要学习一点点Photoshop和三维软件的知识。

竞品&参考照片

Twinmotion

Twinmotion的效果非常棒~在Twinmotion2019中提供了很多天际线场景的方案，共有9种：None，City，Town，Countryside，Mountains，City island，Bay，Waterfront，European City。

城市天际线隐隐约约在远处显现，低对比度、高灰度、略带模糊，视觉上很好的融合在背景中。用户可以感知到，但绝对不会跳到前景中抢了建筑模型的戏份。

Mars

光辉城市中使用了默认的DEMO场景做测试。在DEMO场景中，天际线贴图视觉上离场景中心很近，并且在中景处添加了很多三维树木。在天际线贴图和三维场景的衔接处比较生硬。

参考照片

真实世界永远是最好的老师，通过观察这些照片我们能总结出天际线贴图的一些特点。

天际线的视觉距离非常的远，在离相机视点很远很远处。
因为摄影师是在拍摄很远很远处的景物，所以透视效果更趋近与正交投影，基本不会有两点透视、三点透视的视觉效果。
远处城市天际线或山脉天际线都会被大气雾效果影响。造成以下结果：
- 某些情况下出现比较极端情况：仅能看到城市天际线的剪影效果，建筑细节完全不可见。
- 对颜色产生影响，表现出的特点为：灰度高，饱和度低，对比度低，颜色很大程度受日光、天光影响。
- 天际线轮廓边缘与天空背景的衔接自然，很好融入天空背景。
还有另外一点，参考摄影的经验，当镜头焦距对准前景时，背景是应该有一些失焦模糊的。所以天际线图像本身的锐度不能过高，甚至需要有一定的模糊效果。

DEMO制作

需求

模仿真实世界能够创造出和谐的视觉效果，在此基础上我觉还有几点是需要考虑的：

场景主体剪影面积和城市天际线背景剪影面积的比例要合适。在面积占比上前景的建筑一定是画面的重点，所以背景的剪影面积最好不要过大。
建筑场景的光照方向和城市天际线背景的光照方向最好要匹配。在DEMO示例中测试发现，由于城市天际线离的比较远，剪影面积比较小，所以不太容易关注到光照的一致性。
建筑场景的光照颜色和城市天际线背景的颜色要匹配。比如建筑光照表现的是清晨或傍晚的光照效果，将场景渲染成了橙黄色，那么城市天际线背景的色调也应该是橙黄色调的。
城市天际线距离场景中心的距离可以通过调试设置到合适的位置。我在制作示例DEMO的时候设想城市天际线处于离场景中心5千米远的位置，但threejs摄像机远截面并不支持这么远的距离，你可能需要通过调试确定一个视觉上合理的距离。
其他方面的考虑。如是否使用风格化的城市天际线贴图？二维卡通渲染的城市天际线建筑？剪影效果的？或是白模渲染等。

流程

制作的基本流程如下：

使用ThreeJS创建场景，并加入camera、light、renderer等场景对象。
加载预先准备好的建筑模型。DEMO中使用.obj格式的模型，并使用了一个白模材质。
建筑场景搭建完毕后开始准备城市天际线背景的素材。
1. 城市天际线背景将被贴在一个圆柱体上。在三维软件中创建圆柱体（注意和建筑模型的尺寸相匹配），删除圆柱体的上下盖面，并且将多边形面片的法向量翻转朝向圆柱体内部，将圆柱体底面圆心放置到场景中心点位置。
2. 使用网上搜索到的城市天际线素材制作贴图。我在示例DEMO使用了两张贴图，色彩贴图贴在.map通道，透明度贴图贴在.alphaMap。原始图片素材的色调饱和度不能满足我们的需求，所以需要调整参考图片。在Photoshop中使用色阶、曲线、亮度/对比度等工具将饱和度调低、对比度调低、增加一定的模糊。透明度贴图将遮罩住色彩贴图非城市建筑的部分，应用到材质上，材质将只会显示城市天际线中的建筑物。在这个简单demo中我只使用两张贴图，如果你有更多控制的需求，你可以其他材质属性通道添加贴图控制更多的材质属性，比如粗糙度贴图、金属度贴图、法线贴图、AO贴图等等。不过这些贴图的制作会大大增加你的工作量；另外基于我个人观察，由于城市天际线处于较远处，所以这些通道的贴图对视觉效果产生的影响也非常有限。
将城市天际线的圆柱体模型加载进ThreeJS场景，创建.MeshBasicMaterial材质并将刚刚准备好的贴图应用到材质的.map通道和.alphaMap通道上，并设置其他材质属性值。如果模型加载进场景后，在场景中找不到，你可以看一下camera的远截面距离是否设置的够远，或者从三维软件中导出的时候将模型放大1000倍或者缩小1000倍。
调试场景，如平行光、环境光、雾效、天空球效果等。