cesium primitive方式 ————http://blog.sina.com.cn/s/blog_15e866bbe0102y0ji.html

Cesium學習筆記-工具篇17-PrimitivePoint自定義渲染-點

  (2018-08-28 16:12:06)

轉載▼

標籤：  cesium   primitive   自定義渲染   shader   cesium自定義畫點

分類： cesium

今天咱們來學習下cesium最重要一個對象--primitive，在以前基礎系列中，咱們已經接觸過primitive，可是接觸的都是primitive爲咱們封裝好的接口，咱們今天來學習下primitive更深層次的api。咱們有時候繪製對象時，須要本身靈活控制渲染對象的頂點和顏色（紋理），雖然cesium已經給咱們提供了不少現成的基礎圖元，但仍是不夠靈活，今天咱們就從三維基礎繪製原理來學習下在cesium中，如何繪製基本圖元：點、線、三角面片以及紋理貼圖。若是你熟悉三維渲染底層，那麼對點、線、三角面片、紋理這些概念必定很是瞭解，應爲它們是組成三維渲染對象的基礎。任何三維對象幾何屬性都是由複雜的點、線、三角面片這三種基本類型組成，而後加上紋理貼圖就有了逼真的外觀。那麼今天咱們就先來了解下如何用primitive接口繪製自定義點。在這裏我要感謝個人好朋友 MikesWei，在我學習cesium過程當中給予無私地幫助。

首先咱們看primitive的官方api：

能夠看到，primitive兩個重要對象：geometry和appearance。

查看geometry：

這裏的PrimitiveType就是指定該幾何對象圖元類型是那種，一共有如下幾種：

每一個類型具體含義，你們能夠本身翻譯便知。本節咱們學習如何繪製點，因此咱們使用POINTS對象。

而後咱們來看appearance：

這裏咱們須要關注圖中標出的三個屬性：

material：設置材質

vertexShaderSource：設置頂點着色器代碼

fragmentShaderSource：設置片源着色器代碼。

頂點着色器和片源着色器都是使用GLSL語言編寫，接觸webgl的童鞋對此必定很是瞭解，我對此還沒入門，沒法說出個因此然來。

知道繪製primitive的要點後，下面就是具體實現，直接上代碼：

var PrimitivePoints=(

    function () {

        var vertexShader;

        var fragmentShader;

        var geometry;

        var appearance;

        var viewer;

        function _(options) {

            viewer = options.viewer;

            vertexShader = getVS();

            fragmentShader = getFS();

            if (options.Cartesians && options.Cartesians.length >= 2) {

                var postionsTemp = [];

                var colorsTemp = [];

                var indicesTesm = [];

                if (options.Colors && options.Colors.length === options.Cartesians.length * 4) {

                    for (var i = 0; i < options.Cartesians.length; i++) {

                        postionsTemp.push(options.Cartesians[i].x);

                        postionsTemp.push(options.Cartesians[i].y);

                        postionsTemp.push(options.Cartesians[i].z);

                    }

                    colorsTemp = options.Colors;

                } else {

                    for (var i = 0; i < options.Cartesians.length; i++) {

                        postionsTemp.push(options.Cartesians[i].x);

                        postionsTemp.push(options.Cartesians[i].y);

                        postionsTemp.push(options.Cartesians[i].z);

                        //

                        colorsTemp.push(0.0);

                        colorsTemp.push(0.0);

                        colorsTemp.push(1.0);

                        colorsTemp.push(1.0);

                    }

                }

                for (var i = 0; i < options.Cartesians.length; i++) {

                    indicesTesm.push(i);

                }

                this.positionArr = new Float64Array(postionsTemp);

                this.colorArr = new Float32Array(colorsTemp);

                this.indiceArr = new Uint16Array(indicesTesm);

 

            } else {

                var p1 = Cesium.Cartesian3.fromDegrees(0, 0, -10);

                var p2 = Cesium.Cartesian3.fromDegrees(0, 0.001, -10);

                this.positionArr = new Float64Array([

                    p1.x, p1.y, p1.z,

                    p2.x, p2.y, p2.z

                ]);

                this.colorArr = new Float32Array([

                         0.0, 0.0, 1.0, 1.0,

                         0.0, 0.0, 1.0, 1.0

                ]);

                this.indiceArr = new Uint16Array([0, 1]);

            }

           

            geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);

            appearance = CreateAppearence(fragmentShader, vertexShader);

 

            this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({

                geometryInstances: new Cesium.GeometryInstance({

                    geometry: geometry

                }),

                appearance: appearance,

                asynchronous: false

            }));

        }

 

        function CreateGeometry(positions, colors, indices) {

            return 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: indices,

                primitiveType: Cesium.PrimitiveType.POINTS,

                boundingSphere: Cesium.BoundingSphere.fromVertices(positions)

            });

        }

 

        function CreateAppearence(fs, vs) {

            return new Cesium.Appearance({        

                renderState: {

                    blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND, 

                    depthTest: { enabled: true }, 

                    depthMask: true

                },

                fragmentShaderSource: fs,

                vertexShaderSource: vs

            });

        }

 

        function getVS() {

            return "attribute vec3 position3DHigh;\

            attribute vec3 position3DLow;\

            attribute vec4 color;\

            varying vec4 v_color;\

            attribute float batchId;\

            void main()\

            {\

                vec4 p = czm_computePosition();\

                v_color =color;\

                p = czm_modelViewProjectionRelativeToEye * p;\

                gl_Position = p;\

                gl_PointSize=8.0;\

            }\

            ";

        }

        function getFS() {

            return "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;\

                 }\

            }\

            ";

        }

       

        _.prototype.remove = function () {

            if (this.primitive != null) {

                viewer.scene.primitives.remove(this.primitive);

                this.primitive = null;

            }

        }

        _.prototype.updateCartesianPosition = function (cartesians) {

            if (this.primitive != null) {

                viewer.scene.primitives.remove(this.primitive);

                if (cartesians && cartesians.length < 2) { return; }

            

                var postionsTemp = [];

                var colorsTemp = [];

                var indicesTesm = [];

                for (var i = 0; i < cartesians.length; i++) {

                    postionsTemp.push(cartesians[i].x);

                    postionsTemp.push(cartesians[i].y);

                    postionsTemp.push(cartesians[i].z);

                     

                    colorsTemp.push(0.0);

                    colorsTemp.push(0.0);

                    colorsTemp.push(1.0);

                    colorsTemp.push(1.0);

                }

                for (var i = 0; i < cartesians.length; i++) {

                    indicesTesm.push(i);

                }

                this.positionArr = new Float64Array(postionsTemp);

                this.colorArr = new Float32Array(colorsTemp);

                this.indiceArr = new Uint16Array(indicesTesm);

 

                geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);

                appearance = CreateAppearence(fragmentShader, vertexShader);

 

                this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({

                    geometryInstances: new Cesium.GeometryInstance({

                        geometry: geometry

                    }),

                    appearance: appearance,

                    asynchronous: false

                }));

            } else { return;}

        }

        _.prototype.updateCartesianPositionColor = function (cartesians, colors) {

            if (colors.length === cartesians.length * 4) { } else { return; }

            if (this.primitive != null) {

                viewer.scene.primitives.remove(this.primitive);

                if (cartesians && cartesians.length < 2) { return; }

                

                var postionsTemp = [];

                var indicesTesm = [];

                

                for (var i = 0; i < cartesians.length; i++) {

                    postionsTemp.push(cartesians[i].x);

                    postionsTemp.push(cartesians[i].y);

                    postionsTemp.push(cartesians[i].z);

                }

                for (var i = 0; i < cartesians.length; i++) {

                    indicesTesm.push(i);

                }

                this.positionArr = new Float64Array(postionsTemp);

                this.colorArr = new Float32Array(colors);

                this.indiceArr = new Uint16Array(indicesTesm);

 

                geometry = CreateGeometry(this.positionArr, this.colorArr, this.indiceArr);

                appearance = CreateAppearence(fragmentShader, vertexShader);

                

                this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({

                    geometryInstances: new Cesium.GeometryInstance({

                        geometry: geometry

                    }),

                    appearance: appearance,

                    asynchronous: false

                }));

            } else { return; }

        }

        return _;

    })();

代碼中咱們定義了PrimitivePoints自定義渲染點類，能夠繪製任意多個點，而且改變點的位置和顏色。

其中定義geometry代碼：

在attributes中指定位置和顏色，primitiveType指定爲POINTS。特別注意位置和顏色傳入的數據類型。

定義appearance代碼：

關聯頂點着色器和片源着色器，關於renderState設置，咱們暫不涉及。

頂點着色器代碼：

片源着色器代碼：

示例運行效果（紅藍間隔點）：

更新（實際是刪除後再新建）：