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设置，我们暂不涉及。

顶点着色器代码：

片源着色器代码：

示例运行效果（红蓝间隔点）：

更新（实际是删除后再新建）：