CesiumJS 进阶之着色器CesiumJS 是一个开源的 JavaScript 库，用于创建 3D 地球和地图的应用

CesiumJS 是一个开源的 JavaScript 库，用于创建 3D 地球和地图的应用程序。本教程将涵盖一些高级功能和使用技巧，包括实体、数据源、自定义着色器和性能优化。

初始化 Cesium

在开始使用 Cesium 之前，您需要在您的 HTML 文件中引入 Cesium 库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CesiumJS Tutorial</title>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
</head>
<body>
    <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>

使用实体(Entity)

实体是 Cesium 中的一种高级抽象，它可以表示点、线、面等几何图形，并且可以绑定属性和行为。

创建一个简单的实体

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

var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

viewer.zoomTo(entity);

添加带标签的实体

var entityWithLabel = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    point: {
        pixelSize: 10,
        color: Cesium.Color.BLUE
    },
    label: {
        text: 'Hello, Cesium!',
        font: '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -9)
    }
});

viewer.zoomTo(entityWithLabel);

加载数据源

Cesium 支持多种数据源格式，如 GeoJSON、KML、CZML 等。

加载 GeoJSON 数据源

var geoJsonUrl = 'path/to/your/data.geojson';

Cesium.GeoJsonDataSource.load(geoJsonUrl).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);
});

加载 KML 数据源

var kmlUrl = 'path/to/your/data.kml';

Cesium.KmlDataSource.load(kmlUrl).then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    viewer.zoomTo(dataSource);
});

自定义着色器

Cesium 允许自定义着色器来控制图形的渲染效果。

自定义面着色器

var customShader = new Cesium.CustomShader({
    vertexShaderText: `
        void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
            vsOutput.positionMC *= 1.5;
        }
    `,
    fragmentShaderText: `
        void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
            material.diffuse = vec3(1.0, 0.0, 0.0);
        }
    `
});

var polygon = viewer.entities.add({
    polygon: {
        hierarchy: Cesium.Cartesian3.fromDegreesArray([-108.0, 25.0, -100.0, 25.0, -100.0, 30.0, -108.0, 30.0]),
        material: new Cesium.Material({
            fabric: {
                type: 'Color',
                uniforms: {
                    color: Cesium.Color.RED.withAlpha(0.5)
                }
            }
        }),
        customShader: customShader
    }
});

viewer.zoomTo(polygon);

性能优化

为了在大型应用中保持良好的性能，您可以采取一些优化措施。

关闭不必要的功能

var viewer = new Cesium.Viewer('cesiumContainer', {
    shadows: false,
    terrainShadows: Cesium.ShadowMode.DISABLED,
    infoBox: false,
    selectionIndicator: false
});

降低帧率

viewer.scene.requestRenderMode = true;
viewer.scene.maximumRenderTimeChange = Infinity;

使用精简版的 CesiumJS

您可以使用 CesiumJS 的模块化版本，只加载您需要的部分。详见官方文档。

希望这个教程对您有所帮助！

CesiumJS 进阶之着色器

目录