几何体 instance

下面的代码创建了一个EllipsoidGeometry 和 两个instance. 每个instance 引用了相同的椭球几何体,但是使用 modelMatrix放到不同位置，这里效果是一个叠在另一个之上。

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});

var cyanEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 150000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
    }
});

var orangeEllipsoidInstance = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-100.0, 40.0)),
        new Cesium.Cartesian3(0.0, 0.0, 450000.0),
        new Cesium.Matrix4()
    ),
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [cyanEllipsoidInstance, orangeEllipsoidInstance],
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
}));

椭球体instances

更新每个instance的属性

即便是已经添加到图元里，每个instance的一些属性也可以修改，包括：

• Color : ColorGeometryInstanceAttribute 决定了几何体颜色。不过图元应该设置一个 PerInstanceColorAppearance外观。
• Show :布尔变量决定instance是否可见，对任意instance都有效。
  下面代码演示如何修改几何体instance的颜色:
  This example shows how to change the color of the geometry instance:

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var 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'
});
var primitive = new Cesium.Primitive({
    geometryInstances : circleInstance,
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
});
scene.primitives.add(primitive);

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

几何体的属性需要通过 primitive.getGeometryInstanceAttributes来获取到。attributes 里的值可以直接修改。这里，我们每2秒钟设置’circle’这个几何体随机颜色。

外观（Appearances）

几何体定义了结构。图元的另一个关键属性是appearance，决定图元的着色，也就说每个像素是如何上色的。一个图元可以有若干个几何体instance，但是只能有一个appearance属性。根据appearance类型不同，一个appearance可能有一个 material 属性，材质属性决定了大体的着色（ the bulk of the shading）。

Appearances

Cesium 包含下述外观类型：

MaterialAppearance

MaterialAppearance 所有几何体都使用同一个外观，支持使用 materials 去定义着色效果.

EllipsoidSurface

EllipsoidSurface MaterialAppearance 的简化版本，假定几何体都和地球椭球体平行，就像多边形一样。使用这个可以在计算大量顶点属性的时候节省内存

PerInstanceColorAppearance

PerInstanceColorAppearance 每个instance使用不同的颜色去着色。

PolylineMaterialAppearance

PolylineMaterialAppearance 支持在折线上设置材质。

PolylineColorAppearance

PolylineColorAppearance支持折线在每个顶点或者每一段设置颜色。

外观完整的定义了顶点和片段着色器代码，在GPU中图元渲染的时候使用。除非要自定义外观，否则我们很少使用它们。外观也定义了完整的渲染你状态，它控制了图元渲染时候的GPU状态。我们可以使用高级的属性来定义渲染状态，比如 闭合closed 和 半透明translucent，外观会把他们转换为真正的底层状态，比如：

//  一个不透明的盒子，视点永远不会进到里面去 
//   那么就需要启用背面裁剪，深度检测，不需要混合。

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

// 这个和上面的设置等价
var anotherAppearance  = new Cesium.PerInstanceColorAppearance({
  renderState : {
    depthTest : {
      enabled : true
    },
    cull : {
      enabled : true,
      face : Cesium.CullFace.BACK
    }
  }
});

一旦我们的外观创建了，我们不能修改它的renderState属性，但是我们能修改它的材质 material。当然，我们可以整个替换图元的appearance属性。

大部分外观包含 flat 和faceForward 属性, 这个直接控制了GLSL的着色效果。

• flat – 纯色着色，不考虑光照效果。
• faceForward – 当有光照的的时候，当视图正对它的时候反转法向量，避免墙体的背面是黑色的。
  flat : true | faceForward : false | faceForward : true |

flat:true

faceForward : false

faceForward : true

几何体和外观的匹配性

我们发现不是所有的外观都能作用在任意几何体上。比如EllipsoidSurfaceAppearance 不能用在WallGeometry 上，因为墙永远垂直地表，而不是平行地表。
隐含之意，一个外观能和一个几何体匹配，需要顶点格式匹配，也就是说几何体必须包含外观需要的顶点格式数据。创建一个几何体的时候，可以指定一个 VertexFormat 参数。

有时候为了简化问题，但是接受一点点浪费和效率低，可以计算一个几何体的所有顶点属性格式，这样就能和所有外观兼容（忽略per-instance属性）

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

兼容

不兼容

如果使用EllipsoidSurfaceAppearance，比如我们只创建了顶点的位置属性，那么就会崩溃（get away）。

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

通常，我们怎么知道某种外观需要哪种顶点格式？大部分外观都有一个 vertexFormat 属性， 甚至一个 VERTEX_FORMAT静态常量。

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

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

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

同样，几何体的 vertexFormat 属性也决定了几何体是否可以合并。如果要合并，可以几何体类型不同，但是必须保证顶点格式一致。

相关资源

用户手册:

• 所有几何体
• 所有外观
• 图元Primitive
• 几何体instanceGeometryInstance

想了解材质的更多内容，请访问Fabric。
想了解这块的开发计划，请访问： Geometry and Appearances Roadmap.

中国最专业的Cesium开发者社区

转载自：https://www.jianshu.com/p/fc0252e63204

相关推荐

• Ceisum官方教程2 — 项目实例（workshop） 注意 页面结构
• Cesium官方教程10–高级粒子特效 高级粒子系统特效
• Cesium官方教程3 — 空间数据可视化
• Cesium官方教程9–粒子系统 粒子系统介绍
• Cesium官方教程12–材质（Fabric）
• Cesium官方教程5–地形图层