將shadertoy的效果移植到cesium中

採用後處理方式接口作爲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);