我喜欢将暮未暮的原野
在这时候
所有的颜色都已沉静
而黑暗尚未来临
在山冈上那丛郁绿里
还有着最后一笔的激情
——席慕蓉《暮歌》
日出日落前后短暂的“曙暮光(Twilight)”,是摄影爱好者们钟情的“蓝调时刻(Blue hour)”,也是大自然在一天之中埋藏的彩蛋。
蓝调时刻
这样的浪漫,在图形渲染领域必然也是被钟爱的。而这其中最重要的,便是那极致细腻的渐变色了。渐变在我们日常生活中随处可见,在coder的键盘下似乎也信手拈来。比如前端程序员:ctx.createLinearGradient
,shader开发者:mix(color1, color2, ratio)
。
canvas 图源:https://www.reddit.com/r/unixporn/comments/gv473x/oc_canvas_gradient_blured_wallpaper_generator_and/
但是,浪漫总是别人的,理想中平滑的渐变,绘制出来后却变成了这样一条一条的断层:
图源: https://mp.weixin.qq.com/s/ul98vT4DoLsWnpjUdSL3EQ
这种现象通常称为色彩断层,是由图像色彩深度不足以表现微小渐变而引起的,比如:
本来平滑的渐变应该是:
0,0.25,0.5,0.75,1,1.25,1.5,1.75,2,2.25,2.5。。。
但是由于图像色彩深度不够,导致小数无法显示出来,所以上面一串数字就成了
0,0,0,0,1,1,1,1,2,2,2。。。
如何优化色彩断层
在图形渲染领域可以用抖色(Dithering)的办法来优化色彩断层。
抖色是一种在图像中添加随机噪声,利用人的视觉特性,以低精度色谱模拟更高精度色谱的方法。
比如下面的渐变,右边的图像和左边一样,都只使用了4种颜色。但左边各个颜色间边界分明,过渡断层就很明显。右边在过渡带把几种颜色混合在一起,视觉上看起来就平滑多了。
图源: https://mp.weixin.qq.com/s/ul98vT4DoLsWnpjUdSL3EQ
Mapmost中的渐变
Mapmost作为一款对颜值有高要求的二三维地图引擎,也实现了各种各样的渐变:
天空
地形
矢量面、矢量线
矢量拉伸体
想要了解更多Mapmost开发技巧,进入《Mapmost SDK for WebGL系列教程》了解更多~
参考:
https://zhuanlan.zhihu.com/p/33637225
https://mp.weixin.qq.com/s/ul98
关注Mapmost,持续更新GIS、三维美术、计算机技术干货
Mapmost是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具(Alpha)。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理,以及数字孪生应用开发工具链,满足企业开发者用户快速搭建数字孪生场景的切实需求,助力实现行业领先。