Cesium深入浅出之自定义材质

引子

做为一名技术宅却没有能拿得出手的技术无疑是最可悲的事情。三年前，当我第一次接触Cesium的时候就被它强大和炫丽所折服，最关键的是它还是开源的。以前我一直是机械地敲着业务代码，好像计算机程序就只能干这点事情一样，而 Cesium 就像打开了一扇窗，原来里面的世界如此精彩，原来计算机程序还可以变幻出如此多的花样来。于是，我好像找到了人生方向一般，如饥似渴地踏入了 Cesium 的殿堂。可能是因为以前从未接触过图形学，让我觉得 Cesium 里面涉及的知识都那么高深，那么玄奥，同时学习过程也是那么痛苦。然心向往之，故痛并快乐着。差不多半年有余，对 Cesium 算是初窥门径了，搭上一个框架，堆上一堆功能花架子，在当年也算很不错了。然而，Cesium 的核心技术是图形学，可以说想真正把 Cesium 学好，图形学是必经之路。如果Cesium是修真体系，那么图形学就是功法，而且是高阶功法，想入门都很困难，更遑论小成、大成，圆满更是不敢想象，这也是很多人被挡在门外或只能浅尝辄止的缘故。也是在那时萌生了深入浅出系列的想法，本意就是想大道化简，人人都得以修炼，于是我便开启了深入浅出之路。要说一开始还是挺顺利的，出产了几篇勉强过得去的修炼心得。可是后来因为陷入项目导致这条路中断了，长达两年之久。以至于后来与人交流的时候都明显感觉自己的技术跟不上了，毕竟在你懈怠的时候别人还在努力修炼。果然修炼一途如逆水行舟，不进则退。意识到自己再也不能这样下去了，所以再次捡起修炼。如果按修真的等级划分的话，我现在最多只能算练气期九层，甚至还没筑基！用仙界的话说：筑基之下皆是蝼蚁！艾玛，太恐怖了！不废话了，开始我们的筑基之路。

预期效果

今天要讲的是自定义材质，篇幅可能会很长，很有可能一次更新不完，因为想写的东西太多了，一次能更多少是多少吧。Cesium 的材质我们都很熟了，毕竟从入门开始就使用到材质。只不过通常我们使用的是 Cesium 自带的材质，当我们想实现一个稍微复杂点效果时自带的材质库就不够用了，这时候就该自定义材质登场了。我记得刚接触 Cesium 那会想做一个雷达扫描的效果，自己啥也不会，于是就到网上搜罗了一些案例。有的是使用 Entity 实现的，思路很简单，先在地图上画一个圆，然后贴上预先绘制好的一张静态的雷达图片做为材质，通过 CallbackProperty 的方式让图形旋转起来，这方法的弊端是需要图片资源，不够灵活。还有一种思路是用 PostProcessStage 实现的，这种方式在当时看起来就很高大上，不需要引入图片资源，而且还涉及到了当时的知识盲区 Shader，一堆glsl语言直接让我放弃研究，当起了大自然的搬运工，不过这种方式实现的有瑕疵，就是距离太近的时候雷达出现断层，想要优化也无能为力，只得放弃。其实现在想来，这个效果其实及其简单，只需一个自定义材质就能搞定。

实现原理

照例我们还是先了解一下 Cesium 的材质结构，上API。

构造函数

new Cesium.Material(options)

原文：A Material defines surface appearance through a combination of diffuse, specular, normal, emission, and alpha components. These values are specified using a JSON schema called Fabric which gets parsed and assembled into glsl shader code behind-the-scenes.

翻译：材质是用来定义一个表面外观的，主要是通过漫反射、镜面反射、 法线、自发光和 Alpha  这些分量。这些值是使用 Fabric 方式以 JSON 格式进行赋值的，它们在后台它被解析并组装成 glsl 着色器代码。

选项参数