。

三年前#xff0c;当我第一次接触Cesium的时候就被它强大和炫丽所折服#xff0c;最关键的是它还是开源的。

以前我一直是机械地敲着业务代码#xff0c;好像计算机程序就只能干这点事情一样#xff0c;而

做为一名技术宅却没有能拿得出手的技术无疑是最可悲的事情。

三年前当我第一次接触Cesium的时候就被它强大和炫丽所折服最关键的是它还是开源的。

以前我一直是机械地敲着业务代码好像计算机程序就只能干这点事情一样而

Cesium

就像打开了一扇窗原来里面的世界如此精彩原来计算机程序还可以变幻出如此多的花样来。

于是我好像找到了人生方向一般如饥似渴地踏入了

Cesium

里面涉及的知识都那么高深那么玄奥同时学习过程也是那么痛苦。

然心向往之故痛并快乐着。

差不多半年有余对

Cesium

算是初窥门径了搭上一个框架堆上一堆功能花架子在当年也算很不错了。

然而Cesium

Cesium

学好图形学是必经之路。

如果Cesium是修真体系那么图形学就是功法而且是高阶功法想入门都很困难更遑论小成、大成圆满更是不敢想象这也是很多人被挡在门外或只能浅尝辄止的缘故。

也是在那时萌生了深入浅出系列的想法本意就是想大道化简人人都得以修炼于是我便开启了深入浅出之路。

要说一开始还是挺顺利的出产了几篇勉强过得去的修炼心得。

可是后来因为陷入项目导致这条路中断了长达两年之久。

以至于后来与人交流的时候都明显感觉自己的技术跟不上了毕竟在你懈怠的时候别人还在努力修炼。

果然修炼一途如逆水行舟不进则退。

意识到自己再也不能这样下去了所以再次捡起修炼。

如果按修真的等级划分的话我现在最多只能算练气期九层甚至还没筑基用仙界的话说筑基之下皆是蝼蚁艾玛太恐怖了不废话了开始我们的筑基之路。

预期效果

今天要讲的是自定义材质篇幅可能会很长很有可能一次更新不完因为想写的东西太多了一次能更多少是多少吧。

Cesium

的材质我们都很熟了毕竟从入门开始就使用到材质。

只不过通常我们使用的是

Cesium

自带的材质当我们想实现一个稍微复杂点效果时自带的材质库就不够用了这时候就该自定义材质登场了。

我记得刚接触

Cesium

那会想做一个雷达扫描的效果自己啥也不会于是就到网上搜罗了一些案例。

有的是使用

Entity

实现的思路很简单先在地图上画一个圆然后贴上预先绘制好的一张静态的雷达图片做为材质通过

CallbackProperty

的方式让图形旋转起来这方法的弊端是需要图片资源不够灵活。

还有一种思路是用

PostProcessStage

实现的这种方式在当时看起来就很高大上不需要引入图片资源而且还涉及到了当时的知识盲区

Shader一堆glsl语言直接让我放弃研究当起了大自然的搬运工不过这种方式实现的有瑕疵就是距离太近的时候雷达出现断层想要优化也无能为力只得放弃。

其实现在想来这个效果其实及其简单只需一个自定义材质就能搞定。

实现原理

materials将会引发错误。

translucentboolean

当值为

几何图形的材质半透明。

minificationFilterTetureMinificationFilterTextureMinificationFilter.LINEAR可选

纹理缩小筛选器。

magnificationFilterTetureMagnificationFilterTextureMagnificationFilter.LINEAR可选

纹理放大筛选器。

fabricObject用于生成材质的JSON。

materials

返回材质是否已被销毁。

如果一个材质可能被销毁了那么调用材质之前最好先调用这个方法否则会抛出异常。

isTranslucent()

了还有一些自带材质类型的静态成员我就不列出来了毕竟我们今天讲的是自定义材质。

Cesium

某个类的源码拷贝过来然后在上面一顿操作猛如虎改造完之后连亲妈都不认得了毕竟

Cesium

constructor*/constructor(options{})

{const

}看吧简简单单几行代码就完成了自定义材质的框架接下来你只需要关心

shaderSource

的代码了。

我们程序员应该向雷布斯学习写代码要像写诗一样优雅别人舒心自己也舒心。

下面来看看今天的正主——shaderSource。

shaderSource

即材质着色器我们前面的文章有讲过顶点着色器和片元着色器它们都是使用相同的语言

glsl。

虽然前面也曾接着某个功能详细讲解过着色器代码但总觉得不够浅不够浅就无法深入不符合深入浅出的理念所以今天要从幼儿园讲起。

uniform

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);material.diffuse

0.5;return

的专属标记我们一看到它就知道它是系统函数或变量了czm_getMaterial

Cesium

函数可以获取到默认的材质那么这个默认的材质是什么样的呢没错是一片漆黑。

这是因为材质默认的颜色是黑色默认的透明度为1。

那么我们通过修改默认材质的颜色和透明度就可以实现材质自定义了即修改

diffuse

值。

其实材质的神奇之处就在于这里简简单单两个属性可以衍生出出千变万化来。

纹理x轴方向渐变

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

materialInput.st;material.diffuse

st.s;return

没错我们惊喜地发现我们居然实现了渐变的材质嘞其实想想原理就很好解释了纹理从左到右数值从0到1逐渐增大对应着透明度也从透明逐渐变为不透明。

同学想一想如果

alpha

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

materialInput.st;material.diffuse

st.t;return

相信同学们都猜到了材质呈现了从下到上的渐变效果。

由此我们可以看出材质的纹理坐标是从左下角向右上角渐进的。

纹理中心向外部渐变

现在我们已经打开了自定材质的大门了上面我们一不小心就实现了纹理渐变不过都是从一侧到另一侧渐变的如果我们想从中心往四周渐变又该如何做呢说到这个问题我们已经能联想到那些扫描特效了几何形状都是圆形的从中心往四周扩散的材质无疑比较适合圆形。

uniform

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

dis

值设为0以中心点为圆心以0.5为半径绘制一个圆在这个圆面上的点距离中心点越远值越大。

因此我们就由了解决方案了就是计算中心点的距离使用到的函数是

看上图发现最外圈边缘颜色比较浅与预想的不太一样。

细想一下上面的圆半径是0.5所以最大值也只能到0.5。

那么我们只要将

dis

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

dis

查看效果图发现材质在圆形上很完美但在矩形上出现了奇怪的现象这白边是哪里来的呢仔细一想在矩形材质中最大距离并不是0.5而是约等于0.707这个通过简单的三角函数就能知道了。

上述代码出现了负值所以导致了白边的出现。

这时候我们可以使用clamp函数来解决即当值大于0.707的时候我们就将数值置为0。

clamp(x,

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

dis

上面讲了自定义材质的原理其实是已经将自定义材质的具体实现过程都完成了。

不过我们开篇的时候提到的要实现雷达扫描的效果的这个就稍微复杂些了不过万变不离其宗我相信只要你看懂了上面的内容接下来的内容你将毫不费力。

添加圆形

这个算最基础的添加图元操作了我完全可以省略掉这部分但本着完整的原则还是放上来了。

直接上代码。

const

Transforms.eastNorthUpToFixedFrame(position);

const

viewer.scene.primitives.add({geometryInstances:[new

new

RadarScanCircleMaterial({color:

Math.PI

通过上面的学习现在我们已经会创建自定义材质了。

首先要做的是创建一个雷达扫描材质类然后加入下面的着色器代码即可。

uniform

czm_getMaterial(czm_materialInput

materialInput)

czm_getDefaultMaterial(materialInput);vec2

dis

我感觉上面的代码注释已经很详细了结合我前面讲的材质纹理原理应该非常容易理解。

好了让我们看看最终的效果吧。

总算是写完啦简简单单的一篇文章花了我两天时间效率低到姥姥家了。

主要是期间把之前的

SimpleCesium

捡起来了文章案例都是在上面完成的。

三年未更新了GitHub上面下载下来竟然跑不起来了要说Cesium也真是可以新版本改了引用路径之后连老版本也受影响索性直接升到最新版本了一番升级改造算是勉强能看了。

看了文章还不会用的同学可以去看看再不行您就进组织呗暗号854943530。

雷达效果是做出来了要让里面的扇叶转起来才酷嘛。

其实很简单预留参数

radians