Primitive绘制点线面

作者: WebGiser | 来源:发表于2022-03-31 18:41 被阅读0次

Primitive绘制点线面
cesium Primitive与Enity
Cesium中Primitive讲解
Matplotlib图元与容器
绘制模式
Primitive篇（贴图）
cesium 绘制primitive流程（二）更新primiti
cesium绘制primitive流程（一）数据准备
学习WebGL文章目录
#Primitive Data Types

PrimitiveUtil.js代码

class PrimitiveUtil {

    //画点(componentsPerPositionAttribute必须为3)
    static addPrimitivePoints(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        for (let i = 0; i < pointNum; i++) {
            indicesTesm.push(i);
        }

        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);

        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.POINTS, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);

        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        });
        return viewer.scene.primitives.add(primitive);
    }
    
    //画线(每2个顶点相连组成一条线)
    static addPrimitiveLines(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        for (let i = 0; i < pointNum; i++) {
            indicesTesm.push(i);
        }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINES, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }
    
    //画线(所有的顶点前后相连组成一条线)
    static addPrimitiveLinesStrip(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        for (let i = 0; i < pointNum; i++) {
            indicesTesm.push(i);
        }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINE_STRIP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }
    
    //画线(所有的顶点前后相连组成一条闭合的线)
    static addPrimitiveLinesLoop(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        for (let i = 0; i < pointNum; i++) {
            indicesTesm.push(i);
        }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.LINE_LOOP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }
    
    //画三角形(每3个顶点相连组成一个三角形)
    static addPrimitiveTriangles(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        for (let i = 0; i < pointNum; i++) {
            indicesTesm.push(i);
        }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLES, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }
    
    //画三角形(每个顶点和前面的一个顶点,第一个顶点相连组成一个三角形)
    static addPrimitiveTrianglesFan(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        // let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        // for (let i = 2; i < pointNum; i++) {
        //  indicesTesm.push(0);
        //  indicesTesm.push(i-1);
        //  indicesTesm.push(i);
        // }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLE_FAN, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }
    
    //画三角形(每个顶点和前面的两个顶点相连组成一个三角形)
    static addPrimitiveTrianglesStrip(viewer, pointPositionArr, componentsPerPositionAttribute, pointColorArr, componentsPerColorAttribute) {
        let vertexShader = this.prototype.getVS();
        let fragmentShader = this.prototype.getFS();
        //顶点索引（坐标点下标的连接顺序）
        let indicesTesm = [];
        // let pointNum = (pointPositionArr.length)/componentsPerPositionAttribute;
        // for (let i = 2; i < pointNum; i++) {
        //  indicesTesm.push(i-2);
        //  indicesTesm.push(i-1);
        //  indicesTesm.push(i);
        // }
    
        let positionArr = new Float64Array(pointPositionArr);
        let colorArr = new Float32Array(pointColorArr);
        let indiceArr = new Uint32Array(indicesTesm);
    
        let geometry = this.prototype.createGeometry(Cesium.PrimitiveType.TRIANGLE_STRIP, positionArr, componentsPerPositionAttribute, colorArr, componentsPerColorAttribute, indiceArr);
        let appearance = this.prototype.createAppearence(fragmentShader, vertexShader);
    
        let primitive =  new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: appearance
        })
        return viewer.scene.primitives.add(primitive);
    }

    //创建Geometry
    createGeometry(primitiveType, positions, componentsPerPositionAttribute, colors, componentsPerColorAttribute, indices) {
        return new Cesium.Geometry({
            attributes: {
                position: new Cesium.GeometryAttribute({
                    componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                    componentsPerAttribute: componentsPerPositionAttribute,
                    values: positions
                }),
                color: new Cesium.GeometryAttribute({
                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
                    componentsPerAttribute: componentsPerColorAttribute,
                    values: colors
                })
            },
            indices: indices,
            primitiveType: primitiveType,
            boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
        });
    }

    //创建Appearence
    createAppearence(fs, vs) {
        return new Cesium.Appearance({
            renderState: {
                blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
                depthTest: {
                    enabled: true
                },
                depthMask: true
            },
            fragmentShaderSource: fs,
            vertexShaderSource: vs
        });
    }
    
    //顶点着色器源码
    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 = 10.0;\
                }\
                ";
    }

    //片源着色器源码
    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;\
                     }\
                }\
                ";
    }
}

export default PrimitiveUtil

测试代码

<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import CesiumUtil from '../../public/js/CesiumUtil.js'

    export default {
        name: 'CesiumViewer',
        components: {},
        data() {
            return {
                viewerFlag: false,
                maxR: 100000,
                r1: 0,

                leftDownFlag: false,
                pointDraged: null
            }
        },
        mounted() {
            let _this = this;

            let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
            window.viewer = new Cesium.Viewer('cesiumContainer', {
                animation: false,
                shouldAnimate: true,
                baseLayerPicker: false,
                fullscreenButton: false,
                geocoder: false,
                homeButton: false,
                sceneModePicker: false,
                selectionIndicator: false,
                timeline: false,
                navigationHelpButton: false,
                infoBox: false,
                navigationInstructionsInitiallyVisible: false,
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                })
            });
            window.viewer.scene.debugShowFramesPerSecond = true;

            let p1 = Cesium.Cartesian3.fromDegrees(115.0, 37.0, 0);
            let p2 = Cesium.Cartesian3.fromDegrees(120.0, 37.0, 0);
            let p3 = Cesium.Cartesian3.fromDegrees(120.0, 40.0, 0);
            let p4 = Cesium.Cartesian3.fromDegrees(119.0, 42.0, 0);
            let pointArr2 = [p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p3.x, p3.y, p3.z, p4.x, p4.y, p4.z];
            let colorArr = [1.0, 0.0, 0.0, 0.5, 
                            0.0, 1.0, 0.0, 0.5, 
                            0.0, 0.0, 1.0, 0.5,
                            1.0, 1.0, 0.0, 0.5
            ];
            let pPrimitives = CesiumUtil.primitive.addPrimitivePoints(window.viewer, pointArr2, 3, colorArr, 4);

            // let lPrimitives1 = CesiumUtil.primitive.addPrimitiveLines(window.viewer, pointArr2, 3, colorArr, 4);
            // let lPrimitives2 = CesiumUtil.primitive.addPrimitiveLinesStrip(window.viewer, pointArr2, 3, colorArr, 4);
            // let lPrimitives3 = CesiumUtil.primitive.addPrimitiveLinesLoop(window.viewer, pointArr2, 3, colorArr, 4);

            // let tPrimitives1 = CesiumUtil.primitive.addPrimitiveTriangles(window.viewer, pointArr2, 3, colorArr, 4);
            // let tPrimitives2 = CesiumUtil.primitive.addPrimitiveTrianglesFan(window.viewer, pointArr2, 3, colorArr, 4);
            // let tPrimitives3 = CesiumUtil.primitive.addPrimitiveTrianglesStrip(window.viewer, pointArr2, 3, colorArr, 4);
        },
        methods: {

        }
    }
</script>

<style scoped>
    #cesiumContainer {
        position: absolute;
        width: 100%;
        height: 100%;
    }
</style>

效果

image.png

Primitive绘制点线面
PrimitiveUtil.js代码测试代码效果
cesium Primitive与Enity
Cesium加载点线面矢量数据分为： Primitive API与Enity API； Primitive API...
Cesium中Primitive讲解
前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底...
Matplotlib图元与容器
Matplotlib实现绘图的基本工具是图元(Primitive)和容器(Container)。图元是绘制的基本图...
绘制模式
除了在SDK中写死输入的点线面之外，常用的就是绘制模式，绘制模式中，点的绘制比较麻烦，线面的绘制比较简单。 1.点...
Primitive篇（贴图）
前几篇博客我们了解了自定义点、线、面绘制，这篇我们接着学习cesium自定义纹理贴图。我们完成点线面的绘制，只是绘...
cesium 绘制primitive流程（二）更新primiti
我们从下面图片去观察cesium是怎样触发primitive更新的 1，初始化cesium场景时候会默认执行Ces...
cesium绘制primitive流程（一）数据准备
下面是cesium初始化一个矩形primitive的代码一，代码介绍其中geometryInstances属性...
学习WebGL文章目录
基础篇第一个WebGL程序绘制三角形深入了解Shader绘制点线面变换矩阵透视和正交投影摄像机绘制正方体基本光照...
#Primitive Data Types
#Primitive Data Types ##What is a primitive data type? - ...