在构建不同的三维场景时,对于场景的整体色调、亮度等都有不同的需求,针对不同的需求可以对场景以及模型做相应的颜色校正,以达到整个场景色调、亮度协调,呈现一个精美的场景。这节课程主要来讲解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;
下面来看一个校正前后的对比,如下图:
同样通过颜色的校正也可以制作夜景效果,如下图:
对于颜色的校正和调节,主要是对于视觉样式的把握,需要比较长的时间来对亮度、饱和度、色调等参数进行调节,也需要对颜色有比较深的理解,针对不同的数据,参数的设置也不同,没有完全可以照搬的模板或者参数。
本节教程就到这里,欢迎关注、评论、转发。