Cesium可视域分析

实现效果

关键代码

createPostStage() {
         const fs = glsl
         const postStage = new Cesium.PostProcessStage({
             fragmentShader: fs,
             uniforms: {
                 shadowMap_textureCube: () => {
                     this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                     return Reflect.get(this.shadowMap, "_shadowMapTexture");
                 },
                 shadowMap_matrix: () => {
                     this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                     return Reflect.get(this.shadowMap, "_shadowMapMatrix");
                 },
                 shadowMap_lightPositionEC: () => {
                     this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                     return Reflect.get(this.shadowMap, "_lightPositionEC");
                 },
                 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: () => {
                     this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                     const bias = this.shadowMap._pointBias;
                     return Cesium.Cartesian4.fromElements(
                         bias.normalOffsetScale,
                         this.shadowMap._distance,
                         this.shadowMap.maximumDistance,
                         0.0,
                         new Cesium.Cartesian4()
                     );
                 },
                 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: () => {
                     this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
                     const bias = this.shadowMap._pointBias;
                     const scratchTexelStepSize = new Cesium.Cartesian2();
                     const texelStepSize = scratchTexelStepSize;
                     texelStepSize.x = 1.0 / this.shadowMap._textureSize.x;
                     texelStepSize.y = 1.0 / this.shadowMap._textureSize.y;
                     return Cesium.Cartesian4.fromElements(
                         texelStepSize.x,
                         texelStepSize.y,
                         bias.depthBias,
                         bias.normalShadingSmooth,
                         new Cesium.Cartesian4()
                     );
                 },
                 camera_projection_matrix: this.lightCamera.frustum.projectionMatrix,
                 camera_view_matrix: this.lightCamera.viewMatrix,
                 helsing_viewDistance: () => {
                     return this.viewDistance;
                 },
                 helsing_visibleAreaColor: this.visibleAreaColor,
                 helsing_invisibleAreaColor: this.invisibleAreaColor,
             }
         });
         this.postStage = this.viewer.scene.postProcessStages.add(postStage);
     }

详情参见 Cesium实战专栏