Cesium 入门系列教程（十）：利用shader、后处理重构图形

编程语言 2025-04-08 09:27
0 阅读

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

一，着色器和后处理的基本设置

CesiumJS 支持通过自定义着色器（Shaders）和后处理阶段（Post-Processing Stages）来增强可视化效果。这些功能允许你修改场景的渲染方式，添加特效，比如模糊、辉光等，或者对特定对象应用特殊的材质效果。

（1）自定义着色器

在 Cesium 中，你可以使用 CustomShader 来为 3D Tiles 或者实体（Entities）添加自定义着色器逻辑。以下是一个简单的例子，演示如何为一个 3D Tileset 应用自定义着色器：

// 加载 3D Tileset
const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    
    
    url: Cesium.IonResource.fromAssetId(YourTilesetId)
}));

// 创建自定义着色器
const customShader = new Cesium.CustomShader({
    
    
    fragmentShaderText: `
        void fragmentMain(FragmentInput input, inout czm_modelMaterial material) {
            // 示例：将模型颜色设置为红色
            material.diffuse = vec3(1.0, 0.0, 0.0);
        }
    `
});

// 将自定义着色器应用到 3D Tileset
tileset.customShader = customShader;

（2）后处理阶段

Cesium 的后处理阶段允许你在最终图像输出前对其进行修改。这可以用来实现各种视觉效果，如景深、边缘检测等。要使用后处理阶段，你需要先创建一个 PostProcessStage 实例，然后将其添加到场景中。

以下是一个简单的示例，演示如何添加一个基本的亮度/对比度调整的后处理阶段：

// 创建亮度/对比度调整的后处理阶段
const postProcessStage = new Cesium.PostProcessStage({
    
    
    fragmentShader: `
        uniform sampler2D colorTexture;
        in vec2 v_textureCoordinates;
        out vec4 fragColor;

        void main() {
            vec4 color = texture(colorTexture, v_textureCoordinates);
            // 调整亮度和对比度
            float brightness = 0.1; // 亮度值
            float contrast = 1.5; // 对比度值
            fragColor = vec4(((color.rgb - 0.5) * contrast + 0.5 + brightness), color.a);
        }
    `,
    uniforms: {
    
    
        colorTexture: function() {
    
    
            return viewer.scene.frameState.commandList[0].pass === Cesium.Pass.GLOBE ? viewer.scene.globe.depthTexture : undefined;
        }
    }
});

// 将后处理阶段添加到场景中
viewer.scene.postProcessStages.add(postProcessStage);

请注意，上述代码仅为示例，实际应用中可能需要根据具体需求进行适当调整。例如，后处理阶段的 uniforms 可能需要动态更新以响应用户输入或时间变化等。

二，Cesium 实际示例（含源代码）

01.vue+cesium：加载json数据，使用shader绘制省边界线

https://dajianshi.blog.csdn.net/article/details/146037787

在这里插入图片描述

02.vue+cesium： 使用后处理来绘制轮廓线

https://dajianshi.blog.csdn.net/article/details/146017088

扫描二维码关注公众号，回复： 17555673 查看本文章

在这里插入图片描述

03.vue+cesium： 实现下雨效果

https://dajianshi.blog.csdn.net/article/details/129238682

04.vue+cesium： 实现下雪效果

https://dajianshi.blog.csdn.net/article/details/136403498

05.vue+cesium： 实现大雾效果

https://dajianshi.blog.csdn.net/article/details/136451486

三、Cesium 入门教程 -系列文章列表

猜你喜欢

目录

热门文章