網上有很多效果都是基於後處理來實現的
如bloom，雷達掃描，圓形擴散等；儘管前期學習了一些關於着色器的知識，但是要直接上手寫代碼還是比較困難
實際上，理解的都比較困難
因此在痛苦的折磨之後，終於算是摸清了一點點門道。下面這篇文章對於與PostProcessStage做出瞭解釋，
文中的每一句話我都懂，但最後讀代碼就不懂了。
https://www.cnblogs.com/webgl-angela/p/9272810.html
先上代碼：
let viewer = new Cesium.Viewer('cesiumContainer',{
imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles"+"&tk=token",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
maximumLevel:18, //天地圖的最大縮放級別
tileMatrixSetID: "GoogleMapsCompatible",
show: false
}),
selectionIndicator : false,
infoBox : false,
//terrainProvider: Cesium.createWorldTerrain(),
shouldAnimate : true,
baseLayerPicker:true,
// selectedImageryProviderViewModel:cs[7],
});
var lat = 39.70524201566827;// 42.006;
var lon = 117.01296152309055;//128.055;
viewer.scene.globe.depthTestAgainstTerrain = true;
//取消雙擊事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
/*
添加掃描線 depth關閉 lon:-74.01296152309055 lat:40.70524201566827 height:129.14366696393927
viewer
cartographicCenter 掃描中心
maxRadius 最大半徑 米
scanColor 掃描顏色
duration 持續時間 毫秒
*/
function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
var ScanSegmentShader =
"uniform sampler2D colorTexture;\n" + //顏色紋理
"uniform sampler2D depthTexture;\n" + //深度紋理
"varying vec2 v_textureCoordinates;\n" + //紋理座標
"uniform vec4 u_scanCenterEC;\n" + //掃描中心
"uniform vec3 u_scanPlaneNormalEC;\n" + //掃描平面法向量
"uniform float u_radius;\n" + //掃描半徑
"uniform vec4 u_scanColor;\n" + //掃描顏色
//根據二維向量和深度值 計算距離camera的向量
"vec4 toEye(in vec2 uv, in float depth)\n" +
" {\n" +
" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +//
" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +//看看源碼中關於此函數的解釋是，cesium系統自動生成的4*4的反投影變換矩陣，從clip座標轉爲眼睛座標，clip座標是指頂點着色器的座標系統gl_position輸出的
" posInCamera =posInCamera / posInCamera.w;\n" + //將視角座標除深度分量
" return posInCamera;\n" +
" }\n" +
//點在平面上的投影，輸入參數爲 平面法向量，平面起始點，測試點
"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
"{\n" +
//計算測試點與平面起始點的向量
"vec3 v01 = point -planeOrigin;\n" +
//平面法向量與 測試點與平面上的點 點積 點積的幾何意義，b在a上的投影長度，
//即v01在平面法向量上的長度
"float d = dot(planeNormal, v01) ;\n" +
//planeNormal * d 即爲v01在平面法向量上的投影向量
//根據三角形向量相加爲0的原則 即可得點在平面上的投影
"return (point - planeNormal * d);\n" +
"}\n" +
//獲取深度值，根據紋理座標獲取深度值
"float getDepth(in vec4 depth)\n" +
"{\n" +
"float z_window = czm_unpackDepth(depth);\n" + //源碼解釋將一個vec4向量還原到0，1內的一個數
"z_window = czm_reverseLogDepth(z_window);\n" + //czm_reverseLogDepth解開深度
"float n_range = czm_depthRange.near;\n" +//
"float f_range = czm_depthRange.far;\n" +
"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
"}\n" +
"void main()\n" +
"{\n" +
"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" + //片元顏色
"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +//根據紋理獲取深度值
"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +//根據紋理座標和深度值獲取視點座標
//點在平面上的投影，平面法向量，平面中心，視點座標
"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
//計算投影座標到視點中心的距離
"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
//如果在掃描半徑內，則重新賦值片元顏色
"if(dis < u_radius)\n" +
"{\n" +
//計算與掃描中心的距離並歸一化
"float f = dis/ u_radius;\n" +
//原博客如下，實際上可簡化爲上式子
//"float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +
//四次方
"f = pow(f, 2.0);\n" +
//mix(x, y, a): x, y的線性混疊， x(1-a) + y*a;,
//效果解釋：在越接近掃描中心時，f越小，則片元的顏色越接近原來的，相反則越紅
"gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +
"}\n" +
"}\n";
var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
var _time = (new Date()).getTime();
var _scratchCartesian4Center = new Cesium.Cartesian4();
var _scratchCartesian4Center1 = new Cesium.Cartesian4();
var _scratchCartesian3Normal = new Cesium.Cartesian3();
var ScanPostStage = new Cesium.PostProcessStage({
fragmentShader: ScanSegmentShader,
uniforms: {
u_scanCenterEC: function () {
return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
},
u_scanPlaneNormalEC: function () {
var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
_scratchCartesian3Normal.x = temp1.x - temp.x;
_scratchCartesian3Normal.y = temp1.y - temp.y;
_scratchCartesian3Normal.z = temp1.z - temp.z;
Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
return _scratchCartesian3Normal;
},
u_radius: function () {
return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
},
u_scanColor: scanColor
}
});
viewer.scene.postProcessStages.add(ScanPostStage);
}
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
});
var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat), 0);
var scanColor = new Cesium.Color(1.0, 0.0, 0.0, 1);
AddCircleScanPostStage(viewer, CartographicCenter, 1500, scanColor, 4000);
首先要明確一點：webgl中頂點着色器與片元着色器總是成對出現
而該API是僅提供了片元着色器代碼的入口，實際上該API會默認獲取當前視角下的視圖範圍作爲頂點着色器；
將 着色器中 "if(dis < u_radius)\n" 註釋掉之後就會發現，整個視圖內基本都變成紅色了
關於這一點，在首次接觸這段代碼的時候困擾了我很久
實現該效果的原理就是：
判斷片元與圓心的距離是否大於半徑，如果小於半徑，則更改該片元的顏色，否則使用原來的片元顏色；
我們看到的是一個圓形，實際上，該圓形也是由若干個片元構成的