正文

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

IP云
IP云V管理员/4 阅读
09/08
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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设置，我们暂不涉及。
顶点着色器代码：

片源着色器代码：

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

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