Cesium 实例化绘制教程

原创于 2024-12-05 17:46:11 发布 · 1.5k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webgl #TilesBuilder #智慧城市 #3d #cesium

Cesium开发专栏收录该内容

22 篇文章

订阅专栏

Wan2.2-I2V-A14B

图生视频

Wan2.2

Wan2.2是由通义万相开源高效文本到视频生成模型，是有50亿参数的轻量级视频生成模型，专为快速内容创作优化。支持480P视频生成，具备优秀的时序连贯性和运动推理能力

Cesium 实例化绘制教程

在使用 Cesium 构建 3D 地图应用时，绘制大量图元（Primitives）通常会导致性能问题，尤其当需要渲染成千上万个对象时，性能瓶颈尤为明显。为了解决这一问题，Cesium 提供了 实例化绘制（Instancing）技术。这种方法允许在 GPU 上高效地批量渲染多个对象，大幅提升渲染效率。

本文将详细介绍如何在 Cesium 中使用实例化绘制技术，并通过代码示例展示其基本用法。

1. 什么是实例化绘制？

实例化绘制是一种 GPU 渲染技术，它允许在一次绘制调用中渲染多个对象，而无需为每个对象单独发起绘制调用。每个实例可以共享同一个几何形状，同时具有各自独立的变换（位置、旋转、缩放）和属性。

在 Cesium 中，这种技术被用于优化大量同类图元（如箱体、圆柱、球体等）的绘制。Cesium 的 Cesium3DInstance 和 GeometryInstance 提供了对实例化的支持。

2. 使用场景

实例化绘制适用于以下场景：

绘制大量重复几何体，如建筑物、点标记等。
每个几何体共享相同的基础模型，但位置、颜色、大小可能不同。
提升帧率以适配大规模 3D 数据集。

3. Cesium 中实例化绘制的实现步骤

以下是一个简单的实例化绘制示例：在地图上绘制多个具有不同颜色的立方体。

3.1 初始化 Cesium Viewer

首先，初始化 Cesium Viewer。

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    animation: false,
    timeline: false,
});

3.2 创建几何实例

使用 Cesium.GeometryInstance 定义每个实例的几何体和属性。

const instances = [];

for (let i = 0; i < 1000; i++) {
    const position = Cesium.Cartesian3.fromDegrees(
        -75.0 + Math.random(),
        40.0 + Math.random(),
        Math.random() * 500
    );

    instances.push(
        new Cesium.GeometryInstance({
            geometry: new Cesium.BoxGeometry({
                dimensions: new Cesium.Cartesian3(100.0, 100.0, 100.0),
            }),
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    Cesium.Color.fromRandom()
                ),
            },
        })
    );
}

3.3 使用 Primitive 创建实例化绘制

将所有几何实例绑定到一个 Cesium.Primitive 中：

const primitive = new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.PerInstanceColorAppearance({
        translucent: false,
        closed: true,
    }),
});

viewer.scene.primitives.add(primitive);

4. 完整代码

以下是完整代码示例，将所有部分整合在一起：

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    animation: false,
    timeline: false,
});

// 创建几何实例
const instances = [];

for (let i = 0; i < 1000; i++) {
    const position = Cesium.Cartesian3.fromDegrees(
        -75.0 + Math.random(),
        40.0 + Math.random(),
        Math.random() * 500
    );

    instances.push(
        new Cesium.GeometryInstance({
            geometry: new Cesium.BoxGeometry({
                dimensions: new Cesium.Cartesian3(100.0, 100.0, 100.0),
            }),
            modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
            attributes: {
                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
                    Cesium.Color.fromRandom()
                ),
            },
        })
    );
}

// 使用 Primitive 实例化绘制
const primitive = new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new Cesium.PerInstanceColorAppearance({
        translucent: false,
        closed: true,
    }),
});

viewer.scene.primitives.add(primitive);