SuperMap iClient3D for WebGL教程- 颜色校正

作者：桔子

本文同步发布于https://www.jianshu.com/p/ae41fef89123
在构建不同的三维场景时，对于场景的整体色调、亮度等都有不同的需求，针对不同的需求可以对场景以及模型做相应的颜色校正，以达到整个场景色调、亮度协调，呈现一个精美的场景。这节课程主要来讲解SuperMap iClient3D for WebGL对于场景和s3mtileslayer图层的颜色校正。
场景颜色校正通过ColorCorrection类，可以实现对场景图像的渲染后处理，可以调节图像的亮度、对比度、饱和度及色调。
ColorCorrection类下主要接口包括：
brightness : 获取或设置图像的亮度。
contrast : 获取或设置图像的对比度。
hue : 获取或设置图像的色调。
saturation : 获取或设置图像的饱和度。
show : 获取或设置图像的颜色校正效果是否开启。

//开启场景颜色校正
viewer.scene.colorCorrection.show = true;
viewer.scene.colorCorrection.saturation = 1;
viewer.scene.colorCorrection.brightness = 0.8;
viewer.scene.colorCorrection.contrast = 1;
viewer.scene.colorCorrection.hue = 0;

s3mtileslayer下颜色校正的接口和场景颜色校正的接口设置类似，主要包括：
brightness ：设置图层亮度值调节颜色。
gamma：设置图层gamma值调节颜色。
hue：设置图层色调值调节颜色。
contrast ：设置图层对比度值调节颜色。
saturation ：设置图层饱和度值调节颜色。
有时也需要设置图层的前景色，来调整图层的透明度。

//开启图层颜色校正
buildinglayer.brightness = 1.2;
buildinglayer.gamma= 1;
buildinglayer.hue= 0.1;
buildinglayer.contrast =1.1;
buildinglayer.saturation = 0.5;
buildinglayer.style3D.fillForeColor.alpha = 0.9;

下面来看一个校正前后的对比，如下图：


同样通过颜色的校正也可以制作夜景效果，如下图：


对于颜色的校正和调节，主要是对于视觉样式的把握，需要比较长的时间来对亮度、饱和度、色调等参数进行调节，也需要对颜色有比较深的理解，针对不同的数据，参数的设置也不同，没有完全可以照搬的模板或者参数。
本节教程就到这里，欢迎关注、评论、转发。