DebugAppearance

DebugAppearance是Cesium中一种调试用的外观类，它能够将模型、实体、Primitive等对象的特定几何形状部分用指定颜色进行渲染，从而帮助用户快速辨别和分析问题。

创建一个DebugAppearance

要使用DebugAppearance，我们需要将其导入，然后通过构造函数创建一个DebugAppearance对象。构造函数需要传递一个颜色和option对象。

import { DebugAppearance } from "cesium";

const red = new DebugAppearance({ color: Color.RED });

option对象支持以下属性：

• color: 用于渲染的颜色，默认为Color.WHITE。
• translucent: 是否渲染为透明，默认为false。
• closed: 是否在顶点处闭合几何图形，默认为true。
• flat: 是否使用平坦外观，默认为false。
• vertexShaderSource: 顶点着色器源代码，默认为内置的着色器。
• fragmentShaderSource: 片元着色器源代码，默认为内置的着色器。

import { DebugAppearance, Color } from "cesium";

const yellow = new DebugAppearance({
  color: Color.YELLOW,
  translucent: true,
  closed: false,
  flat: true,
});

应用DebugAppearance

1. Entity对象

const entity = viewer.entities.add({
  position: { lng: 110, lat: 20, height: 0 },
  box: {
    dimensions: { x: 200000, y: 100000, z: 5000 },
    material: yellow,
    outline: true,
  },
});

2. Primitive对象

const primitive = new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry : Cesium.EllipseGeometry.createGeometry(new Cesium.EllipseGeometry({
            ellipsoid : Cesium.Ellipsoid.WGS84,
            center : Cesium.Cartesian3.fromDegrees(120.0, 40.0),
            semiMajorAxis : 200000.0,
            semiMinorAxis : 100000.0,
            rotation : Cesium.Math.toRadians(45.0),
            vertexFormat : Cesium.VertexFormat.POSITION_AND_ST
        })),
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        id : 'ellipse',
        pick : true
    }),
    appearance : yellow
});
viewer.scene.primitives.add(primitive);

3. Model对象

const model = viewer.scene.primitives.add(
  Cesium.Model.fromGltf({
    url: "/path/to/model.gltf",
    id: "model",
    debugWireframe: true,
    debugShowBoundingVolume: true,
    debugWireframeColor: Cesium.Color.YELLOW,
  })
);
model.appearance = yellow;

附加材质

需要注意的是，使用DebugAppearance渲染的几何图形，其材质（material）实际上是通过着色器源代码中的uniform变量动态添加的。因此，如果使用DebugAppearance作为一个Primitive的appearance时，要先创建好对应的材质对象（例如MaterialAppearance、EllipsoidSurfaceAppearance等），然后将其与DebugAppearance对象合并。这个过程可以使用MaterialAppearance.createMaterial()方法完成：

const mixApperance = new MaterialAppearance({
    material: MaterialAppearance.createMaterial(yellow)
});
primitive.appearance = mixApperance;

总结

DebugAppearance是CesiumJs中一款非常强大的调试工具，能够帮助用户快速分析和解决问题。通过建立DebugAppearance对象，用户可以将Cesium对象的几何图形部分用指定颜色进行渲染。同时，配合MaterialAppearance和Primitive等高级功能，DebugAppearance还能够实现更加细致精准的调试工作。