臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > 绘制对象-Primitive方式

绘制对象-Primitive方式

所属分类:   2019-04-23 15:10:10  编辑:admin  浏览次数 1531 次

Primitive由两个部分组成:

  1. (1)几何形状(Geometry):定义了Primitive的结构,例如三角形、线条、点等

  2. (2)外观(Appearance ):定义Primitive的着色(Sharding),包括GLSL(OpenGL着色语言,OpenGL Shading Language)顶点着色器和片段着色器( vertex and fragment shaders),以及渲染状态(render state)

Cesium支持以下几何图形:

几何图形  说明
BoxGeometry立方体
BoxOutlineGeometry仅有轮廓的立方体
CircleGeometry圆形或者拉伸的圆形
CircleOutlineGeometry只有轮廓的圆形
CorridorGeometry走廊:沿着地表的多段线,且具有一定的宽度,可以拉伸到一定的高度
CorridorOutlineGeometry只有轮廓的走廊
CylinderGeometry圆柱、圆锥或者截断的圆锥
CylinderOutlineGeometry只有轮廓的圆柱、圆锥或者截断的圆锥
EllipseGeometry椭圆或者拉伸的椭圆
EllipseOutlineGeometry只有轮廓的椭圆或者拉伸的椭圆
EllipsoidGeometry椭球体
EllipsoidOutlineGeometry只有轮廓的椭球体
RectangleGeometry矩形或者拉伸的矩形
RectangleOutlineGeometry只有轮廓的矩形或者拉伸的矩形
PolygonGeometry多边形,可以具有空洞或者拉伸一定的高度
PolygonOutlineGeometry只有轮廓的多边形
PolylineGeometry多段线,可以具有一定的宽度
SimplePolylineGeometry简单的多段线
PolylineVolumeGeometry多段线柱体
PolylineVolumeOutlineGeometry只有轮廓的多段线柱体
SphereGeometry球体
SphereOutlineGeometry只有轮廓的球体
WallGeometry
WallOutlineGeometry只有轮廓的墙

使用Geometry和Appearance 具有以下优势:

  1. (1)性能:绘制大量Primitive时,可以将其合并为单个Geometry以减轻CPU负担、更好的使用GPU。合并Primitive由web worker线程执行,UI保持响应性

  2. (2)灵活性:Geometry与Appearance 解耦,两者可以分别进行修改

  3. (3)低级别访问:易于编写GLSL 顶点、片段着色器、使用自定义的渲染状态 

同时,具有以下劣势:

  1. (1)需要编写更多地代码

  2. (2)需要对图形编程有更多的理解,特别是OpenGL的知识

下面代码时entity与primitive方式对比:
     //entity方式
        viewer.entities.add({
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(110.20, 34.55, 111.20, 35.55),
                material: new Cesium.StripeMaterialProperty({
                    evenColor: Cesium.Color.WHITE,
                    oddColor: Cesium.Color.BLUE,
                    repeat:5
                })
            }
        });
        //primitive方式
        var instance = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(105.20, 30.55, 106.20, 31.55),
                vertexFormat:Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
            })
        });
        viewer.scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instance,
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                material:Cesium.Material.fromType('Stripe')
            })
        }));
效果:
Cesium学习笔记15--绘制对象-Primitive方式


Web文章检索

Web文章目录