Cesium 光照和后处理 postProcessStages

最新推荐文章于 2026-06-07 16:34:16 发布

原创

最新推荐文章于 2026-06-07 16:34:16 发布 · 1.5w 阅读

本文详细介绍了如何在Cesium中通过后处理技术调整日照阴影、控制亮度、去除锯齿、修复模型变黑，以及应用边缘检测、轮廓、泛光、阴影映射等高级效果。涵盖Ambient Occlusion、Bloom等技术的使用和参数设置，适合提高场景的真实感与艺术表现力。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

前言

查了一堆的资料，最终落位于后处理

概念

Silhouette

https://sandcastle.cesium.com/?src=Post%20Processing.html&label=All
silhouette的效果可以理解为物体轮廓、描边，相当于把物体的外轮廓线勾勒出来
在这里插入图片描述

Ambient Occlusion

https://sandcastle.cesium.com/?src=Ambient%20Occlusion.html&label=All
简称AO，一般译作环境光遮蔽。
AO是来描绘物体和物体相交或靠近的时候遮挡周围漫反射光线的效果，可以解决或改善漏光、飘和阴影不实等问题，解决或改善场景中缝隙、褶皱与墙角、角线以及细小物体等的表现不清晰问题，综合改善细节尤其是暗部阴影，增强空间的层次感、真实感，同时加强和改善画面明暗对比，增强画面的艺术性。AO简单来说就是根据周围物体对光线的遮挡程度，改变明暗效果。

var ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
ambientOcclusion.enabled = true;
ambientOcclusion.uniforms.ambientOcclusionOnly = false;
ambientOcclusion.uniforms.intensity = 3;
ambientOcclusion.uniforms.bias = 0.1;
ambientOcclusion.uniforms.lengthCap = 0.03;
ambientOcclusion.uniforms.stepSize = 1;
ambientOcclusion.uniforms.blurStepSize = 0.86;

在这里插入图片描述

Bloom

泛光，一个明亮的物体真的有种明亮的感觉。泛光可以极大提升场景中的光照效果，并提供了极大的效果提升
在这里插入图片描述

问题整理

1. 开启日照阴影

let viewer = new Cesium.Viewer('cesium-container');
viewer.scene.globe.enableLighting = true;// 开启全球光照
viewer.shadows = true

2. 亮度设置

方法1 api自带后处理

  // 亮度设置
  var stages = viewer.scene.postProcessStages;
  viewer.scene.brightness =  viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
  viewer.scene.brightness.enabled = true;
  viewer.scene.brightness.uniforms.brightness = Number(2);

方法2 自己写后处理

var fs =
    'uniform sampler2D colorTexture;\n' +
    'varying vec2 v_textureCoordinates;\n' +
    'uniform float scale;\n' +
    'uniform vec3 offset;\n' +
    'void main() {\n' +
    '    vec4 color = texture2D(colorTexture, v_textureCoordinates);\n' + //获取片段颜色
    '    gl_FragColor = vec4(color.rgb * scale + offset, 10.0);\n' +
    '}\n'; //放大片段颜色系数

  viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({
   
   
    fragmentShader: fs,
    uniforms: {
   
   
      scale: 1.1,
      offset: function () {
   
   
        // return new Cesium.Cartesian3(0.1, 0.2, 0.3);
        return new Cesium.Cartesian3(0.01, 0.02, 0.03);
      }
    }
  }));

3. 去锯齿

参考文章

cesium中有个属性viewer.resolutionScale,默认值是1.0。
JavaScript中有个属性window.devicePixelRatio，属性返回的是当前显示设备的物理像素分辨率与CSS像素分辨率的比率，即一个CSS像素和一个物理像素的大小比值
cesium中viewer.resolutionScale默认值是1.0，也就是说无论在哪个屏幕上，cesium都把当前显示器的物理像素分辨率与CSS像素分辨率的比率(window.devicePixelRatio)当成是1.0来渲染，而实际上的比率可能是1.0或者1.25或者2.0(比如mac电脑Retina屏)，所以造成锯齿和模糊。

	//是否开启抗锯齿
	if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){
   
   //判断是否支持图像渲染像素化处理
	  viewer.resolutionScale = window.devicePixelRatio;
	}
	viewer.scene.fxaa = true;
	viewer.scene.postProcessStages.fxaa.enabled = true;
	this.labelInfo=this.viewer.entities.add(new Cesium.Entity());
	this.labelInfo.position=position;
	this.labelInfo.label={
   
   
		   show:true,
           showBackground:true,
           backgroundColor:Cesium.Color.fromCssColorString('#000'),
           scale:0.5, //这里非常巧妙的先将字体大小放大一倍在缩小一倍
           font:'normal 32px MicroSoft YaHei',
           text:`blabla~~`,
           pixelOffset :new Cesium.Cartesian2(-120, -100),
           horizontalOrigin:Cesium.HorizontalOrigin.LEFT
	}