渐变，简约而不简单

我喜欢将暮未暮的原野

在这时候

所有的颜色都已沉静

而黑暗尚未来临

在山冈上那丛郁绿里

还有着最后一笔的激情

——席慕蓉《暮歌》

日出日落前后短暂的“曙暮光(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）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。

欢迎进入官网体验使用：Mapmost——让人与机器联合创作成为新常态