采用后处理方式接口作为shader的入口
原效果地址
https://www.shadertoy.com/view/MdlXz8 ,cesium中的效果
最终实现代码,参照前几篇博文就可以顺利做出来了。
原文的分辨率是自己获取的,初学就直接写死了
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=ebf64362215c081f8317203220f133eb",
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 持续时间 毫秒
*/
var _time = (new Date()).getTime();
function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
var ScanSegmentShader =
"uniform sampler2D colorTexture;\n" + //颜色纹理
"varying vec2 v_textureCoordinates;\n" + //纹理坐标
"uniform float u_Time;\n" + //扫描半径
'void main(){' +
'float TAU=6.28318530718;\n' +
'vec2 iResolution=vec2(384,188);\n' +
'float time = u_Time * .5+23.0;\n' +
'vec2 uv = v_textureCoordinates;\n' +
'#ifdef SHOW_TILING\n' +
'vec2 p = mod(uv*TAU*2.0, TAU)-250.0;\n' +
'#else\n' +
'vec2 p = mod(uv*TAU, TAU)-250.0;\n' +
'#endif\n' +
'vec2 i = vec2(p);\n' +
'float c = 1.0;\n' +
'float inten = .005;\n' +
'\n' +
'for (int n = 0; n < 5; n++)\n' +
'{\n' +
' float t = time * (1.0 - (3.5 / float(n+1)));\n' +
' i = p + vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));\n' +
' c += 1.0/length(vec2(p.x / (sin(i.x+t)/inten),p.y / (cos(i.y+t)/inten)));\n' +
'}\n' +
'c /= float(5);\n' +
'c = 1.17-pow(c, 1.4);\n' +
'vec3 colour = vec3(pow(abs(c), 8.0));\n' +
'colour = clamp(colour + vec3(0.0, 0.35, 0.5), 0.0, 1.0);\n' +
'\n' +
'\n' +
'#ifdef SHOW_TILING\n' +
'// Flash tile borders...\n' +
'vec2 pixel = 2.0 / iResolution.xy;\n' +
'uv *= 2.0;\n' +
'\n' +
'float f = floor(mod(iTime*.5, 2.0)); // Flash value.\n' +
'vec2 first = step(pixel, uv) * f;// Rule out first screen pixels and flash.\n' +
'uv = step(fract(uv), pixel);// Add one line of pixels per tile.\n' +
'colour = mix(colour, vec3(1.0, 1.0, 0.0), (uv.x + uv.y) * first.x * first.y); // Yellow line\n' +
'\n' +
'#endif\n' +
'gl_FragColor=texture2D(colorTexture, v_textureCoordinates);'+
'if(v_textureCoordinates.y>0.3 && v_textureCoordinates.y<0.7&&v_textureCoordinates.x>0.3 && v_textureCoordinates.x<0.7){' +
'gl_FragColor = vec4(colour, 1.0);}'+
'}'
var duration=300
var ScanPostStage = new Cesium.PostProcessStage({
fragmentShader: ScanSegmentShader,
uniforms: {
u_Time: function () {
console.log(11111111111)
return (((new Date()).getTime() - _time)/1000.0 ) ;
},
}
});
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);