关闭

Cesium学习笔记(五)几何和外观

标签: cesium
3204人阅读 评论(0) 收藏 举报
分类:

之前的笔记种记录了Cesium可以使用实体(如多边形和椭球)创建不同的地质类型。例如:使用点阵图在地球上创建一个矩形

let view = new Cesium.Viewer('cesiumDemo');

view.entities.add({
    rectangle : {
        coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
        material : new Cesium.StripeMaterialProperty({
            evenColor: Cesium.Color.WHITE,
            oddColor: Cesium.Color.BLUE,
            repeat: 5
        })
    }
});

这里写图片描述

下面将记录primitives ,并查看形成它们的类型Geometry和Appearance类型。几何定义了primitives的结构,即构成原语的三角形,线条或点。外观定义了primitives的阴影,包括其完整的GLSL顶点和片段着色器以及渲染状态。


Cesium支持以下几何形状

  • BoxGeometry
  • BoxOutlineGeometry
  • CircleGeometry
  • CircleOutlineGeomerty
  • CorridorGeometry
  • CorridroOutlineGeometry
  • CylinderGeometry
  • CylinderOutlineGeometry
  • EllipseGemetry
  • EllipsoidOutlineGeometry
  • RectangleGeometry
  • RectanelOutlineGeometry
  • PolygonGeometry
  • PolygonOutlineGeometry
  • PolylineGeometry
  • SimplePolylineGeometry
  • PolylineVolumeGeometry
  • PolylineVolumeOutlineGeometry
  • SphereGeometry
  • SphereOutlineGeometry
  • WallGeometry
  • WallOutlineGeometry

这里写图片描述

使用几何和外观的好处是:

  • 性能 - 当绘制大量静态图元(例如美国的每个邮政编码的多边形)时,直接使用几何形状可以将它们组合成单个几何体,以减少CPU开销并更好地利用GPU。组合primitives是在网络工作者上完成的,以保持UI的响应。
  • 灵活性 - 基元组合几何和外观。通过解耦,我们可以独立地修改。我们可以添加与许多不同外观兼容的新几何体,反之亦然。
  • 低级访问 - 外观提供近乎金属的访问权限,无需担心Renderer直接使用的所有细节。外观使其易于:
    1、编写完整的GLSL顶点和片段着色器。
    2、使用自定义渲染状态

还有一些缺点:

  • 使用几何和外观直接需要更多的代码和更深入的了解图形。基元处于适用于映射应用程序的抽象级别; 几何和外观具有更接近传统3D引擎的抽象级别。
  • 组合几何对于静态数据是有效的,不一定是动态数据。

用primitives将上面的例子重写

    let view = new Cesium.Viewer('cesiumDemo', {
            baseLayerPicker: false,
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
            }),
            shadows: true
        });
        let scene =  view.scene;
        scene.globe.enableLighting = true;

        // 创建几何实例
        let instance =  new Cesium.GeometryInstance({
            // 矩形几何
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
            })
        });

        // 添加
        scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instance,
            // 几何外观
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                material: Cesium.Material.fromType('Stripe')
            })
        }));

组合几何

当我们使用一个primitives绘制多个静态几何时,我们看到了性能优势。例如,我们画出两个矩形。

        // 创建几何实例
        let instance =  new Cesium.GeometryInstance({
            // 矩形几何
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
            })
        });

        // 另一个实例
        let anotherInstance = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
            })
        });
        // 添加
        scene.primitives.add(new Cesium.Primitive({
            // 用数组方式可以添加多个实例
            geometryInstances: [instance,anotherInstance],
            // 几何外观
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                material: Cesium.Material.fromType('Stripe')
            })
        }));

这里写图片描述

我们创建了另一个具有不同矩形的实例,然后将这两个实例提供给基元。这两个实例都使用相同的外观。一些外观允许每个实例提供唯一的属性。例如,我们可以使用PerInstanceColorAppearance不同颜色来遮蔽每个实例。

        // 创建几何实例
        let instance =  new Cesium.GeometryInstance({
            // 矩形几何
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
                vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
            }),
            attributes: {
                color: new Cesium.ColorGeometryInstanceAttribute(0.0, 0.0, 1.0, 0.8)
            }
        });

        // 另一个实例
        let anotherInstance = new Cesium.GeometryInstance({
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-85.0, 20.0, -75.0, 30.0),
                vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
            }),
            // 属性
            attributes: {
                color: new Cesium.ColorGeometryInstanceAttribute (1.0, 0.0, 0.0, 0.8)
            }
        });
        // 添加
        scene.primitives.add(new Cesium.Primitive({
            // 用数组方式可以添加多个实例
            geometryInstances: [instance,anotherInstance],
            // 几何外观根据自身的属性来设置
            appearance: new Cesium.PerInstanceColorAppearance()
        }));

这里写图片描述

每个实例都有一个Color属性。然后使用一个构造原语PerInstanceColorAppearance,它知道使用每个实例的颜色属性来确定阴影。
组合几何使Cesium可以有效地绘制出几何图形。以下示例绘制2,592个独特的彩色矩形。它将优化几何,然后绘制非常快。

        let instances = [];
        for(let lon = -180.0; lon<180.0; lon += 5.0){
            for(let lat = -85.0; lat<85.0; lat += 5.0){
                instances.push(new Cesium.GeometryInstance({
                    geometry: new Cesium.RectangleGeometry({
                        rectangle : Cesium.Rectangle.fromDegrees(lon, lat, lon + 5.0, lat + 5.0),
                        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                    }),
                    attributes: {
                        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.5}))
                    }
                }));
            }
        }
        scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instances,
            appearance: new Cesium.PerInstanceColorAppearance()
        }));

这里写图片描述

选择

实例组合后,它们仍然可以独立访问。特别是,我们可以分配一个id实例并使用它来确定实例是否被选中Scene.pick。 id可以是任何JavaScript类型:字符串,数字,具有其属性的对象等。
以下示例使用a创建一个实例id,并在单击该控件时将消息写入控制台。

        let instance = new Cesium.GeometryInstance({
            id: 'instance',
            geometry: new Cesium.RectangleGeometry({
                rectangle: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
                vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
            }),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
            }
        });

        scene.primitives.add(new Cesium.Primitive({
            geometryInstances: instance,
            appearance: new Cesium.PerInstanceColorAppearance()
        }));

        // 添加监听事件
        let handler = new Cesium.ScreenSpaceEventHandler();
        handler.setInputAction((movement)=>{
            let pick = scene.pick(movement.position);
            if(Cesium.defined(pick) && pick.id==='instance'){
                console.log('单击了实例')
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

这里写图片描述

使用id,而不是对实例本身的引用,允许原始和我们的应用程序避免在构建原语后,在内存中保留对完整实例的引用,包括其对几何的引用。由于几何可以包含几个大型类型的数组,这样我们可以节省大量的内存。

几何实例

到目前为止,我们已经将几何实例定义为几何体的容器。此外,实例用于在场景的不同部分中定位,缩放和旋转相同的几何。这是可能的,因为多个实例可以引用相同Geometry,并且每个实例可以具有不同的modelMatrix。这使我们只能计算几何一次,并重复使用多次。

这里写图片描述

更新每个实例属性

几何体的每个实例属性在添加到基元之后也可以进行更新。每个实例的属性包括:

  • 颜色:ColorGeometryInstanceAttribute确定实例的颜色。原始必须有一个PerInstanceColorAppearance。
  • 显示:布尔确定实例的可见性。适用于任何实例。

此示例显示如何更改几何实例的颜色:

let circleInstance = new Cesium.GeometryInstance({
    geometry : new Cesium.CircleGeometry({
        center : Cesium.Cartesian3.fromDegrees(-95.0, 43.0),
        radius : 250000.0,
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
    }),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.5))
    },
    id: 'circle'
});
let primitive = new Cesium.Primitive({
    geometryInstances : circleInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
});
scene.primitives.add(primitive);

setInterval(()=> {
    var attributes = primitive.getGeometryInstanceAttributes('circle');
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromRandom({alpha : 1.0}));
},2000);

几何实例的属性可以从原语使用中检索primitive.getGeometryInstanceAttributes。attributes可以直接改变属性。在这种情况下,我们正在改变attributes.color为每2000毫秒等于一个新的随机生成的颜色。


外观

几何定义结构。原语的另一个关键属性appearance定义了原始的阴影,即单个像素如何着色。一个原语可以有多个几何实例,但它只能有一个外观。根据外观的类型,外观将会material定义阴影的大部分。

这里写图片描述

Cesium有以下外观:

  • MaterialAppearance
  • EllipsoidSurfaceAppearance
  • PerInstanceColorAppearance
  • PolylineMaterialAppearance
  • PolylineColorAppearance

外观定义绘制原始图形时在GPU上执行的完整GLSL顶点和片段着色器。除非我们正在编写自定义的外观,否则我们很少会碰到这些。外观还定义了完整渲染状态,当绘制原始图形时控制GPU的状态。我们可以直接定义渲染状态或使用像更高级别的性能closed和translucent,它的出现将转换为渲染状态。例如:

let appearance  = new Cesium.PerInstanceColorAppearance({
  translucent : false,
  closed : true
});

let anotherAppearance  = new Cesium.PerInstanceColorAppearance({
  renderState : {
    depthTest : {
      enabled : true
    },
    cull : {
      enabled : true,
      face : Cesium.CullFace.BACK
    }
  }
});

一旦创建了外观,我们就不能改变它的renderState属性,但是我们可以改变它的属性material。同样,我们也可以改变原始的appearance属性。

大多数外观也有flat和faceForward属性,间接控制GLSL着色器。

  • flat - 平底阴影。不要考虑照明。
  • faceForward - 当照明时,翻转正常,使其始终面向观察者。避免背面的黑色区域,例如墙壁的内部。

这里写图片描述

我们已经看到,并不是所有的外观都适用于所有几何体。例如,EllipsoidSurfaceAppearance不适合WallGeometry因为墙壁垂直于球体而不是平行的。

除了这样的语义之外,为了与几何兼容的外观,它们必须具有匹配的顶点格式,这意味着几何必须具有外观所期望的数据作为输入。VertexFormat创建几何时可以提供A。

我们可以通过请求几何计算所有顶点属性来保持简单,但效率低下,浪费,这将使几何与所有外观兼容(忽略每个实例的属性;见下文)。

let geometry = new Cesium.RectangleGeometry({
  vertexFormat : Cesium.VertexFormat.ALL
  // ...
});

这里写图片描述
这里写图片描述

EllipsoidSurfaceAppearance例如,如果我们正在使用,我们可以只是请求位置。

let geometry = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.VertexFormat.POSITION_ONLY
  // ...
});

一般来说,我们如何知道用于给定外观的顶点格式?大多数外观都有一个vertexFormat属性,甚至一个VERTEX_FORMAT静态常量。

let geometry = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  // ...
});

let geometry2 = new Ceisum.RectangleGeometry({
  vertexFormat : Ceisum.PerInstanceColorAppearance.VERTEX_FORMAT
  // ...
});

let appearance = new Ceisum.MaterialAppearance(/* ... */);
let geometry3 = new Ceisum.RectangleGeometry({
  vertexFormat : appearance.vertexFormat
  // ...
});

而且,几何形状vertexFormat决定了它是否可以与其他几何组合。两个几何不一定是相同的类型; 他们只需要匹配的顶点格式。

官方文档

0
0
查看评论
发表评论
* 以上用户言论只代表其个人钱柜娱乐开户,不代表CSDN网站的钱柜娱乐开户或立场

Cesium学习笔记(二):添加实体对象

1. 首先,你需要选择一款代码编辑器,可以选择eclipse,webstorm,visual studio code这种比较大型的带有代码提示的,你也可以选择sublime,nodepad++,ato...
  • UmGsoil
  • UmGsoil
  • 2017-07-04 11:08
  • 1963

Cesium学习笔记(六):几何和外观(Geometry and Appearances)

我们先直接来看一个例子var viewer = new Cesium.Viewer('cesiumContainer');var flag = viewer.entities.add({ re...
  • UmGsoil
  • UmGsoil
  • 2017-07-10 13:33
  • 1266

cesiumjs开发实践 (四)

地形介绍 摘要 cesiumjs中的地形系统是一种由流式瓦片数据生成地形mesh的技术。 cesiumjs中的地形系统是一种由流式瓦片数据生成地形的技术。         ...
  • happyduoduo1
  • happyduoduo1
  • 2016-07-18 16:06
  • 3737

Cesium BillboardGraphics图形属性

BillboardGraphics new Cesium.BillboardGraphics(选项) 数据源/ BillboardGraphics。 js 53 ...
  • sinat_35954205
  • sinat_35954205
  • 2016-10-20 11:00
  • 1036

Cesium(三) 几何图形与外观

几何图形与外观 我们可以通过Primitive API来操控几何图形及其外观,或者绘制各种特殊的形状。需要先得到Scene对象,然后在其上添加Primitive对象: var viewer = n...
  • happyduoduo1
  • happyduoduo1
  • 2016-07-09 19:03
  • 6906

各种GeometryInstance的添加方法

Cesium.Math.setRandomNumberSeed(1234); var viewer = new Cesium.Viewer('cesiumContainer'); var scen...
  • zhishiqu
  • zhishiqu
  • 2018-01-09 17:38
  • 25

Cesium学习笔记(5)

1.更改cesium的选择框大小 在Souce/Widgets/SelectionIndicator/SelectionIndicator.js中修改: 在Souce/Widgets/Sele...
  • u013929284
  • u013929284
  • 2016-12-25 16:08
  • 1561

cesium的学习

一、学习资料:http://cesiumjs.org/
  • nanqidada
  • nanqidada
  • 2014-11-14 14:38
  • 7919

基于Cesium剖面分析功能的实现

基于Cesium三维地图项目记录_剖面分析功能的实现##最近项目进行到要添加针对三维地球上的3DTileset进行可视化分析,初步要实现通视分析、剖面分析、缓冲区分析;现将思路总结如下: 1)首先...
  • cr196
  • cr196
  • 2017-08-12 20:41
  • 803

Cesium地图上画图

  • 2017-08-29 11:14
  • 3.94MB
  • 下载
    个人资料
    • 访问:32471次
    • 积分:614
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:4篇
    • 译文:0篇
    • 评论:8条
    文章分类
    最新评论