Cesium深入浅出之可视域分析【转】

1 // 创建一个沿负z轴向下的，位于原点的，视野为60度的，宽高比为1:1的相机。
2 var camera = new Cesium.Camera(scene);
3 camera.position = new Cesium.Cartesian3();
4 camera.direction = Cesium.Cartesian3.negate(Cesium.Cartesian3.UNIT_Z, new Cesium.Cartesian3());
5 camera.up = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_Y);
6 camera.frustum.fov = Cesium.Math.PI_OVER_THREE;
7 camera.frustum.near = 1.0;
8 camera.frustum.far = 2.0;

 1 // ViewShed.js
 2  
 3 /**
 4  * 可视域分析。
 5  *
 6  * @author Helsing
 7  * @date 2020/08/28
 8  * @alias ViewShedStage
 9  * @class
10  * @param {Cesium.Viewer} viewer Cesium三维视窗。
11  * @param {Object} options 选项。
12  * @param {Cesium.Cartesian3} options.viewPosition 观测点位置。
13  * @param {Cesium.Cartesian3} options.viewPositionEnd 最远观测点位置（如果设置了观测距离，这个属性可以不设置）。
14  * @param {Number} options.viewDistance 观测距离（单位`米`，默认值100）。
15  * @param {Number} options.viewHeading 航向角（单位`度`，默认值0）。
16  * @param {Number} options.viewPitch 俯仰角（单位`度`，默认值0）。
17  * @param {Number} options.horizontalViewAngle 可视域水平夹角（单位`度`，默认值90）。
18  * @param {Number} options.verticalViewAngle 可视域垂直夹角（单位`度`，默认值60）。
19  * @param {Cesium.Color} options.visibleAreaColor 可视区域颜色（默认值`绿色`）。
20  * @param {Cesium.Color} options.invisibleAreaColor 不可视区域颜色（默认值`红色`）。
21  * @param {Boolean} options.enabled 阴影贴图是否可用。
22  * @param {Boolean} options.softShadows 是否启用柔和阴影。
23  * @param {Boolean} options.size 每个阴影贴图的大小。
24  */
25 class ViewShedStage {
26  
27     constructor(viewer, options) {
28         this.viewer = viewer;
29         this.viewPosition = options.viewPosition;
30         this.viewPositionEnd = options.viewPositionEnd;
31         this.viewDistance = this.viewPositionEnd ? Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd) : (options.viewDistance || 100.0);
32         this.viewHeading = this.viewPositionEnd ? getHeading(this.viewPosition, this.viewPositionEnd) : (options.viewHeading || 0.0);
33         this.viewPitch = this.viewPositionEnd ? getPitch(this.viewPosition, this.viewPositionEnd) : (options.viewPitch || 0.0);
34         this.horizontalViewAngle = options.horizontalViewAngle || 90.0;
35         this.verticalViewAngle = options.verticalViewAngle || 60.0;
36         this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN;
37         this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED;
38         this.enabled = (typeof options.enabled === "boolean") ? options.enabled : true;
39         this.softShadows = (typeof options.softShadows === "boolean") ? options.softShadows : true;
40         this.size = options.size || 2048;
41  
42         this.update();
43     }
44  
45     add() {
46         this.createLightCamera();
47         this.createShadowMap();
48         this.createPostStage();
49         this.drawFrustumOutine();
50         this.drawSketch();
51     }
52  
53     update() {
54         this.clear();
55         this.add();
56     }
57  
58     clear() {
59         if (this.sketch) {
60             this.viewer.entities.removeById(this.sketch.id);
61             this.sketch = null;
62         }
63         if (this.frustumOutline) {
64             this.frustumOutline.destroy();
65             this.frustumOutline = null;
66         }
67         if (this.postStage) {
68             this.viewer.scene.postProcessStages.remove(this.postStage);
69             this.postStage = null;
70         }
71     }
72 }
73  
74 export default ViewShed;

常规的ES6封装和JSDoc注释，无需多讲。三个基本方法添加、更新、清除。

 1 createLightCamera() {
 2     this.lightCamera = new Cesium.Camera(this.viewer.scene);
 3     this.lightCamera.position = this.viewPosition;
 4     // if (this.viewPositionEnd) {
 5     //     let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(this.viewPositionEnd, this.viewPosition, new Cesium.Cartesian3()), new Cesium.Cartesian3());
 6     //     this.lightCamera.direction = direction; // direction是相机面向的方向
 7     // }
 8     this.lightCamera.frustum.near = this.viewDistance * 0.001;
 9     this.lightCamera.frustum.far = this.viewDistance;
10     const hr = Cesium.Math.toRadians(this.horizontalViewAngle);
11     const vr = Cesium.Math.toRadians(this.verticalViewAngle);
12     const aspectRatio =
13         (this.viewDistance * Math.tan(hr / 2) * 2) /
14         (this.viewDistance * Math.tan(vr / 2) * 2);
15     this.lightCamera.frustum.aspectRatio = aspectRatio;
16     if (hr > vr) {
17         this.lightCamera.frustum.fov = hr;
18     } else {
19         this.lightCamera.frustum.fov = vr;
20     }
21     this.lightCamera.setView({
22         destination: this.viewPosition,
23         orientation: {
24             heading: Cesium.Math.toRadians(this.viewHeading || 0),
25             pitch: Cesium.Math.toRadians(this.viewPitch || 0),
26             roll: 0
27         }
28     });
29 }

 1 createShadowMap() {
 2     this.shadowMap = new Cesium.ShadowMap({
 3         context: (this.viewer.scene).context,
 4         lightCamera: this.lightCamera,
 5         enabled: this.enabled,
 6         isPointLight: true,
 7         pointLightRadius: this.viewDistance,
 8         cascadesEnabled: false,
 9         size: this.size,
10         softShadows: this.softShadows,
11         normalOffset: false,
12         fromLightSource: false
13     });
14     this.viewer.scene.shadowMap = this.shadowMap;
15 }

 1 drawFrustumOutline() {
 2     const scratchRight = new Cesium.Cartesian3();
 3     const scratchRotation = new Cesium.Matrix3();
 4     const scratchOrientation = new Cesium.Quaternion();
 5     const position = this.lightCamera.positionWC;
 6     const direction = this.lightCamera.directionWC;
 7     const up = this.lightCamera.upWC;
 8     let right = this.lightCamera.rightWC;
 9     right = Cesium.Cartesian3.negate(right, scratchRight);
10     let rotation = scratchRotation;
11     Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
12     Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
13     Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
14     let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
15     
16     let instance = new Cesium.GeometryInstance({
17         geometry: new Cesium.FrustumOutlineGeometry({
18             frustum: this.lightCamera.frustum,
19             origin: this.viewPosition,
20             orientation: orientation
21         }),
22         id: Math.random().toString(36).substr(2),
23         attributes: {
24             color: Cesium.ColorGeometryInstanceAttribute.fromColor(
25                 Cesium.Color.YELLOWGREEN//new Cesium.Color(0.0, 1.0, 0.0, 1.0)
26             ),
27             show: new Cesium.ShowGeometryInstanceAttribute(true)
28         }
29     });
30 
31     this.frustumOutline = this.viewer.scene.primitives.add(
32         new Cesium.Primitive({
33             geometryInstances: [instance],
34             appearance: new Cesium.PerInstanceColorAppearance({
35                 flat: true,
36                 translucent: false
37             })
38         })
39     );
40 }

 1 drawSketch() {
 2     this.sketch = this.viewer.entities.add({
 3         name: 'sketch',
 4         position: this.viewPosition,
 5         orientation: Cesium.Transforms.headingPitchRollQuaternion(
 6             this.viewPosition,
 7             Cesium.HeadingPitchRoll.fromDegrees(this.viewHeading - this.horizontalViewAngle, this.viewPitch, 0.0)
 8         ),
 9         ellipsoid: {
10             radii: new Cesium.Cartesian3(
11                 this.viewDistance,
12                 this.viewDistance,
13                 this.viewDistance
14             ),
15             // innerRadii: new Cesium.Cartesian3(2.0, 2.0, 2.0),
16             minimumClock: Cesium.Math.toRadians(-this.horizontalViewAngle / 2),
17             maximumClock: Cesium.Math.toRadians(this.horizontalViewAngle / 2),
18             minimumCone: Cesium.Math.toRadians(this.verticalViewAngle + 7.75),
19             maximumCone: Cesium.Math.toRadians(180 - this.verticalViewAngle - 7.75),
20             fill: false,
21             outline: true,
22             subdivisions: 256,
23             stackPartitions: 64,
24             slicePartitions: 64,
25             outlineColor: Cesium.Color.YELLOWGREEN
26         }
27     });
28 }

 1 function getHeading(fromPosition, toPosition) {
 2     let finalPosition = new Cesium.Cartesian3();
 3     let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
 4     Cesium.Matrix4.inverse(matrix4, matrix4);
 5     Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
 6     Cesium.Cartesian3.normalize(finalPosition, finalPosition);
 7     return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y));
 8 }
 9 
10 function getPitch(fromPosition, toPosition) {
11     let finalPosition = new Cesium.Cartesian3();
12     let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
13     Cesium.Matrix4.inverse(matrix4, matrix4);
14     Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
15     Cesium.Cartesian3.normalize(finalPosition, finalPosition);
16     return Cesium.Math.toDegrees(Math.asin(finalPosition.z));
17 }

  1 export default `
  2  #define USE_CUBE_MAP_SHADOW true
  3  uniform sampler2D colorTexture;
  4  uniform sampler2D depthTexture;
  5  varying vec2 v_textureCoordinates;
  6  uniform mat4 camera_projection_matrix;
  7  uniform mat4 camera_view_matrix;
  8  uniform samplerCube shadowMap_textureCube;
  9  uniform mat4 shadowMap_matrix;
 10  uniform vec4 shadowMap_lightPositionEC;
 11  uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness;
 12  uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;
 13  uniform float helsing_viewDistance; 
 14  uniform vec4 helsing_visibleAreaColor;
 15  uniform vec4 helsing_invisibleAreaColor;
 16 
 17  struct zx_shadowParameters
 18  {
 19      vec3 texCoords;
 20      float depthBias;
 21      float depth;
 22      float nDotL;
 23      vec2 texelStepSize;
 24      float normalShadingSmooth;
 25      float darkness;
 26  };
 27 
 28  float czm_shadowVisibility(samplerCube shadowMap, zx_shadowParameters shadowParameters)
 29  {
 30      float depthBias = shadowParameters.depthBias;
 31      float depth = shadowParameters.depth;
 32      float nDotL = shadowParameters.nDotL;
 33      float normalShadingSmooth = shadowParameters.normalShadingSmooth;
 34      float darkness = shadowParameters.darkness;
 35      vec3 uvw = shadowParameters.texCoords;
 36      depth -= depthBias;
 37      float visibility = czm_shadowDepthCompare(shadowMap, uvw, depth);
 38      return czm_private_shadowVisibility(visibility, nDotL, normalShadingSmooth, darkness);
 39  }
 40 
 41  vec4 getPositionEC(){
 42      return czm_windowToEyeCoordinates(gl_FragCoord);
 43  }
 44 
 45  vec3 getNormalEC(){
 46      return vec3(1.);
 47  }
 48 
 49  vec4 toEye(in vec2 uv,in float depth){
 50      vec2 xy=vec2((uv.x*2.-1.),(uv.y*2.-1.));
 51      vec4 posInCamera=czm_inverseProjection*vec4(xy,depth,1.);
 52      posInCamera=posInCamera/posInCamera.w;
 53      return posInCamera;
 54  }
 55 
 56  vec3 pointProjectOnPlane(in vec3 planeNormal,in vec3 planeOrigin,in vec3 point){
 57      vec3 v01=point-planeOrigin;
 58      float d=dot(planeNormal,v01);
 59      return(point-planeNormal*d);
 60  }
 61 
 62  float getDepth(in vec4 depth){
 63      float z_window=czm_unpackDepth(depth);
 64      z_window=czm_reverseLogDepth(z_window);
 65      float n_range=czm_depthRange.near;
 66      float f_range=czm_depthRange.far;
 67      return(2.*z_window-n_range-f_range)/(f_range-n_range);
 68  }
 69 
 70  float shadow(in vec4 positionEC){
 71      vec3 normalEC=getNormalEC();
 72      zx_shadowParameters shadowParameters;
 73      shadowParameters.texelStepSize=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.xy;
 74      shadowParameters.depthBias=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.z;
 75      shadowParameters.normalShadingSmooth=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.w;
 76      shadowParameters.darkness=shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness.w;
 77      vec3 directionEC=positionEC.xyz-shadowMap_lightPositionEC.xyz;
 78      float distance=length(directionEC);
 79      directionEC=normalize(directionEC);
 80      float radius=shadowMap_lightPositionEC.w;
 81      if(distance>radius)
 82      {
 83          return 2.0;
 84      }
 85      vec3 directionWC=czm_inverseViewRotation*directionEC;
 86      shadowParameters.depth=distance/radius-0.0003;
 87      shadowParameters.nDotL=clamp(dot(normalEC,-directionEC),0.,1.);
 88      shadowParameters.texCoords=directionWC;
 89      float visibility=czm_shadowVisibility(shadowMap_textureCube,shadowParameters);
 90      return visibility;
 91  }
 92 
 93  bool visible(in vec4 result)
 94  {
 95      result.x/=result.w;
 96      result.y/=result.w;
 97      result.z/=result.w;
 98      return result.x>=-1.&&result.x<=1.
 99      &&result.y>=-1.&&result.y<=1.
100      &&result.z>=-1.&&result.z<=1.;
101  }
102 
103  void main(){
104      // 釉色 = 结构二维(颜色纹理, 纹理坐标)
105      gl_FragColor = texture2D(colorTexture, v_textureCoordinates);
106      // 深度 = 获取深度(结构二维(深度纹理, 纹理坐标))
107      float depth = getDepth(texture2D(depthTexture, v_textureCoordinates));
108      // 视角 = (纹理坐标, 深度)
109      vec4 viewPos = toEye(v_textureCoordinates, depth);
110      // 世界坐标
111      vec4 wordPos = czm_inverseView * viewPos;
112      // 虚拟相机中坐标
113      vec4 vcPos = camera_view_matrix * wordPos;
114      float near = .001 * helsing_viewDistance;
115      float dis = length(vcPos.xyz);
116      if(dis > near && dis < helsing_viewDistance){
117          // 透视投影
118          vec4 posInEye = camera_projection_matrix * vcPos;
119          // 可视区颜色
120          // vec4 helsing_visibleAreaColor=vec4(0.,1.,0.,.5);
121          // vec4 helsing_invisibleAreaColor=vec4(1.,0.,0.,.5);
122          if(visible(posInEye)){
123              float vis = shadow(viewPos);
124              if(vis > 0.3){
125                  gl_FragColor = mix(gl_FragColor,helsing_visibleAreaColor,.5);
126              } else{
127                  gl_FragColor = mix(gl_FragColor,helsing_invisibleAreaColor,.5);
128              }
129          }
130      }
131  }`;