cesium着色器學習系列3-着色器方式繪製圖元

通過前兩篇文章的研究，那麼就可以基於着色器寫自己的圖元實現邏輯了

    let viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
            enablePickFeatures: false
        }),


        //terrainProvider: Cesium.createWorldTerrain(),


    })
    let v=`
         attribute vec3 position3DHigh;
         attribute vec3 position3DLow;
         // attribute vec3 position2DHigh;
         // attribute vec3 position2DLow;
         attribute vec4 color;
         varying vec4 v_color;
         attribute float batchId;
         void main()
         {
           //vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
            vec4 p = czm_computePosition();  //The position relative to eye
            v_color =color;
            p = czm_modelViewProjectionRelativeToEye * p;
            gl_Position=p;
           // gl_Position =  czm_modelViewProjectionRelativeToEye * p;
            gl_PointSize=20.0;
         }`
    let f=`  varying vec4 v_color;
             void main()
             {
                   float d = distance(gl_PointCoord, vec2(0.5,0.5));
                  if(d < 0.5){
                     gl_FragColor = v_color;
                  }else{
                     discard;
                  }
             }`
    var appearance = new Cesium.Appearance({
        renderState: {
            blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,  //混合
            depthTest: { enabled: true }, //深度測試
            depthMask: true
        },
        fragmentShaderSource: f,
        vertexShaderSource: v
    });

    viewer.camera.setView( {
        destination  : Cesium.Cartesian3.fromDegrees( 110.20, 34.55, 3000000 )
    } );
    var p1 = Cesium.Cartesian3.fromDegrees(120.6822, 50.9247, 10);
    var p2 = Cesium.Cartesian3.fromDegrees(120.6822, 38.9247, 10);
    var p3 = Cesium.Cartesian3.fromDegrees(133.6822, 38.9247, 10);
    var p4 = Cesium.Cartesian3.fromDegrees(133.6822, 50.9247, 10);
    var positions = new Float64Array([
        p1.x, p1.y, p1.z,
        p2.x, p2.y, p2.z,
        p3.x, p3.y, p3.z,
        p4.x, p4.y, p4.z
    ]);
    var colors = new Float32Array([
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        1.0, 1.0, 0.0, 1.0,
        1.0, 1.0, 1.0, 1.0
    ]);
    var geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute: 3,
                values: positions
            }),
            color: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 4,
                values: colors
            })
        },
        //索引
        indices: new Uint16Array([
            0, 1, 2,  //第一個三角形用的座標點
            1, 2, 3  //第二個三角形用的座標點
        ]),
        //繪製類型
        primitiveType: Cesium.PrimitiveType.TRIANGLE_FAN ,
        boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
    });


    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: new Cesium.GeometryInstance({
            geometry: geometry
        }),
        appearance: appearance,
        asynchronous: false
    }));