// /** // * @param {Cesium.Viewer} viewer Cesium三维视窗。 // * @param {Object} options 选项。 // * @param {Cesium.Cartesian3} options.viewPosition 观测点位置。 // * @param {Cesium.Cartesian3} options.viewPositionEnd 最远观测点位置（如果设置了观测距离，这个属性可以不设置）。 // * @param {Number} options.viewDistance 观测距离（单位`米`，默认值100）。 // * @param {Number} options.viewHeading 航向角（单位`度`，默认值0）。 // * @param {Number} options.viewPitch 俯仰角（单位`度`，默认值0）。 // * @param {Number} options.horizontalViewAngle 可视域水平夹角（单位`度`，默认值90）。 // * @param {Number} options.verticalViewAngle 可视域垂直夹角（单位`度`，默认值60）。 // * @param {Cesium.Color} options.visibleAreaColor 可视区域颜色（默认值`绿色`）。 // * @param {Cesium.Color} options.invisibleAreaColor 不可视区域颜色（默认值`红色`）。 // * @param {Boolean} options.enabled 阴影贴图是否可用。 // * @param {Boolean} options.softShadows 是否启用柔和阴影。 // * @param {Boolean} options.size 每个阴影贴图的大小。 // */ (function (window) { 'use strict'; function define_ViewShed() { var ViewShed = {}; ViewShed.create = function(viewer,options) { this.viewer = viewer; this.viewPosition = options.viewPosition; //开始坐标 this.viewPositionEnd = options.viewPositionEnd; //结束坐标 this.viewDistance = this.viewPositionEnd ? Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd) : (options.viewDistance || 100.0); //观测距离 this.viewHeading = this.viewPositionEnd ? this.getHeading(this.viewPosition, this.viewPositionEnd) : (options.viewHeading || 0.0); this.viewPitch = this.viewPositionEnd ? this.getPitch(this.viewPosition, this.viewPositionEnd) : (options.viewPitch || 0.0); this.horizontalViewAngle = options.horizontalViewAngle || 90.0; //可视域的水平夹角 this.verticalViewAngle = options.verticalViewAngle || 60.0; //可视域的垂直夹角 this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN; this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED; this.enabled = (typeof options.enabled === "boolean") ? options.enabled : true; this.softShadows = (typeof options.softShadows === "boolean") ? options.softShadows : true; this.size = options.size || 2048; }; ViewShed.add = function() { this.createLightCamera(); this.createShadowMap(); // this.drawFrustumOutline(); //视锥线 this.drawSketch(); this.createPostStage(); }; ViewShed.update =function() { this.clear(); this.add(); }; /** * @method 更新终点坐标，从而实时更新绘制的实体的方向和半径 * */ ViewShed.updatePosition = function (viewPositionEnd) { this.viewPositionEnd = viewPositionEnd this.viewDistance = Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd) //观测距离 this.viewHeading = this.getHeading(this.viewPosition, this.viewPositionEnd) this.viewPitch = this.getPitch(this.viewPosition, this.viewPositionEnd) }; ViewShed.clear = function() { if (this.sketch) { this.viewer.entities.remove(this.sketch); this.sketch = null; } /* if (this.frustumOutline) { this.viewer.scene.primitives.destroy(); this.frustumOutline = null; } */ if (this.postStage) { this.viewer.scene.postProcessStages.remove(this.postStage); this.postStage = null; } }; /** * @method 创建相机 */ ViewShed.createLightCamera = function() { this.lightCamera = new Cesium.Camera(this.viewer.scene); this.lightCamera.position = this.viewPosition; this.lightCamera.frustum.near = this.viewDistance * 0.001; this.lightCamera.frustum.far = this.viewDistance; const hr = Cesium.Math.toRadians(this.horizontalViewAngle); const vr = Cesium.Math.toRadians(this.verticalViewAngle); const aspectRatio = (this.viewDistance * Math.tan(hr / 2) * 2) / (this.viewDistance * Math.tan(vr / 2) * 2); this.lightCamera.frustum.aspectRatio = aspectRatio; if (hr > vr) { this.lightCamera.frustum.fov = hr; } else { this.lightCamera.frustum.fov = vr; } this.lightCamera.setView({ destination: this.viewPosition, orientation: { heading: Cesium.Math.toRadians(this.viewHeading || 0), pitch: Cesium.Math.toRadians(this.viewPitch || 0), roll: 0 } }); }; /** * @method 创建阴影贴图 */ ViewShed.createShadowMap = function() { this.shadowMap = new Cesium.ShadowMap({ context: (this.viewer.scene).context, lightCamera: this.lightCamera, enabled: this.enabled, isPointLight: true, pointLightRadius: this.viewDistance, cascadesEnabled: false, size: this.size, softShadows: this.softShadows, normalOffset: false, fromLightSource: false }); this.viewer.scene.shadowMap = this.shadowMap; }; /** * @method 创建PostStage * 导入的glsl是做片元着色的，具体怎么实现的我也不太明白 */ ViewShed.createPostStage = function() { const fs = '#define USE_CUBE_MAP_SHADOW true\n\ uniform sampler2D colorTexture;\n\ uniform sampler2D depthTexture;\n\ varying vec2 v_textureCoordinates;\n\ uniform mat4 camera_projection_matrix;\n\ uniform mat4 camera_view_matrix;\n\ uniform samplerCube shadowMap_textureCube;\n\ uniform mat4 shadowMap_matrix;\n\ uniform vec4 shadowMap_lightPositionEC;\n\ uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness;\n\ uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;\n\ uniform float helsing_viewDistance; \n\ uniform vec4 helsing_visibleAreaColor;\n\ uniform vec4 helsing_invisibleAreaColor;\n\ struct zx_shadowParameters\n\ {\n\ vec3 texCoords;\n\ float depthBias;\n\ float depth;\n\ float nDotL;\n\ vec2 texelStepSize;\n\ float normalShadingSmooth;\n\ float darkness;\n\ };\n\ float czm_shadowVisibility(samplerCube shadowMap, zx_shadowParameters shadowParameters)\n\ {\n\ float depthBias = shadowParameters.depthBias;\n\ float depth = shadowParameters.depth;\n\ float nDotL = shadowParameters.nDotL;\n\ float normalShadingSmooth = shadowParameters.normalShadingSmooth;\n\ float darkness = shadowParameters.darkness;\n\ vec3 uvw = shadowParameters.texCoords;\n\ depth -= depthBias;\n\ float visibility = czm_shadowDepthCompare(shadowMap, uvw, depth);\n\ return czm_private_shadowVisibility(visibility, nDotL, normalShadingSmooth, darkness);\n\ }\n\ vec4 getPositionEC(){\n\ return czm_windowToEyeCoordinates(gl_FragCoord);\n\ }\n\ vec3 getNormalEC(){\n\ return vec3(1.0);\n\ }\n\ vec4 toEye(in vec2 uv,in float depth){\n\ vec2 xy=vec2((uv.x*2.0-1.0),(uv.y*2.0-1.0));\n\ vec4 posInCamera=czm_inverseProjection*vec4(xy,depth,1.0);\n\ posInCamera=posInCamera/posInCamera.w;\n\ return posInCamera;\n\ }\n\ vec3 pointProjectOnPlane(in vec3 planeNormal,in vec3 planeOrigin,in vec3 point){\n\ vec3 v01=point-planeOrigin;\n\ float d=dot(planeNormal,v01);\n\ return(point-planeNormal*d);\n\ }\n\ float getDepth(in vec4 depth){\n\ float z_window=czm_unpackDepth(depth);\n\ z_window=czm_reverseLogDepth(z_window);\n\ float n_range=czm_depthRange.near;\n\ float f_range=czm_depthRange.far;\n\ return(2.0*z_window-n_range-f_range)/(f_range-n_range);\n\ }\n\ float shadow(in vec4 positionEC){\n\ vec3 normalEC=getNormalEC();\n\ zx_shadowParameters shadowParameters;\n\ shadowParameters.texelStepSize=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.xy;\n\ shadowParameters.depthBias=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.z;\n\ shadowParameters.normalShadingSmooth=shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.w;\n\ shadowParameters.darkness=shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness.w;\n\ vec3 directionEC=positionEC.xyz-shadowMap_lightPositionEC.xyz;\n\ float distance=length(directionEC);\n\ directionEC=normalize(directionEC);\n\ float radius=shadowMap_lightPositionEC.w;\n\ if(distance>radius)\n\ {\n\ return 2.0;\n\ }\n\ vec3 directionWC=czm_inverseViewRotation*directionEC;\n\ shadowParameters.depth=distance/radius-0.0003;\n\ shadowParameters.nDotL=clamp(dot(normalEC,-directionEC),0.0,1.0);\n\ shadowParameters.texCoords=directionWC;\n\ float visibility=czm_shadowVisibility(shadowMap_textureCube,shadowParameters);\n\ return visibility;\n\ }\n\ bool visible(in vec4 result)\n\ {\n\ result.x/=result.w;\n\ result.y/=result.w;\n\ result.z/=result.w;\n\ return result.x>=-1.0&&result.x<=1.0\n\ &&result.y>=-1.0&&result.y<=1.0\n\ &&result.z>=-1.0&&result.z<=1.0;\n\ }\n\ void main(){\n\ // 釉色 = 结构二维(颜色纹理, 纹理坐标)\n\ gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n\ // 深度 = 获取深度(结构二维(深度纹理, 纹理坐标))\n\ float depth = getDepth(texture2D(depthTexture, v_textureCoordinates));\n\ // 视角 = (纹理坐标, 深度)\n\ vec4 viewPos = toEye(v_textureCoordinates, depth);\n\ // 世界坐标\n\ vec4 wordPos = czm_inverseView * viewPos;\n\ // 虚拟相机中坐标\n\ vec4 vcPos = camera_view_matrix * wordPos;\n\ float near = 0.001 * helsing_viewDistance;\n\ float dis = length(vcPos.xyz);\n\ if(dis > near && dis < helsing_viewDistance){\n\ // 透视投影\n\ vec4 posInEye = camera_projection_matrix * vcPos;\n\ // 可视区颜色\n\ // vec4 helsing_visibleAreaColor=vec4(0.,1.,0.,.5);\n\ // vec4 helsing_invisibleAreaColor=vec4(1.,0.,0.,.5);\n\ if(visible(posInEye)){\n\ float vis = shadow(viewPos);\n\ if(vis > 0.3){\n\ gl_FragColor = mix(gl_FragColor,helsing_visibleAreaColor,0.5);\n\ } else{\n\ gl_FragColor = mix(gl_FragColor,helsing_invisibleAreaColor,0.5);\n\ }\n\ }\n\ }\n\ }\n\ '; 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); }; /** * @method 创建视锥线 */ ViewShed.drawFrustumOutline = function() { const scratchRight = new Cesium.Cartesian3(); const scratchRotation = new Cesium.Matrix3(); const scratchOrientation = new Cesium.Quaternion(); const position = this.lightCamera.positionWC; const direction = this.lightCamera.directionWC; const up = this.lightCamera.upWC; let right = this.lightCamera.rightWC; right = Cesium.Cartesian3.negate(right, scratchRight); let rotation = scratchRotation; Cesium.Matrix3.setColumn(rotation, 0, right, rotation); Cesium.Matrix3.setColumn(rotation, 1, up, rotation); Cesium.Matrix3.setColumn(rotation, 2, direction, rotation); let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation); let instance = new Cesium.GeometryInstance({ geometry: new Cesium.FrustumOutlineGeometry({ frustum: this.lightCamera.frustum, origin: this.viewPosition, orientation: orientation }), id: Math.random().toString(36).substr(2), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor( Cesium.Color.YELLOWGREEN ), show: new Cesium.ShowGeometryInstanceAttribute(true) } }); this.frustumOutline = this.viewer.scene.primitives.add( new Cesium.Primitive({ geometryInstances: [instance], appearance: new Cesium.PerInstanceColorAppearance({ flat: true, translucent: false }) }) ); }; /** * @method 创建视网 * 在实时绘制椭球实体时，其实不是一直创建entity，而是改变实体的方向(orientation)和改变椭球的半径(radii) */ ViewShed.drawSketch = function() { this.sketch = this.viewer.entities.add({ name: 'sketch', position: this.viewPosition, orientation: new Cesium.CallbackProperty(()=> Cesium.Transforms.headingPitchRollQuaternion( //实体的方向 this.viewPosition, Cesium.HeadingPitchRoll.fromDegrees(this.viewHeading - 90.0, this.viewPitch, 0.0))), ellipsoid: { //椭球的半径 radii:new Cesium.CallbackProperty(() => new Cesium.Cartesian3( this.viewDistance, this.viewDistance, this.viewDistance)), innerRadii: new Cesium.Cartesian3(2.0, 2.0, 2.0), //椭球内部的半径 minimumClock: Cesium.Math.toRadians(-this.horizontalViewAngle / 2), //椭圆形的最小时钟角度 maximumClock: Cesium.Math.toRadians(this.horizontalViewAngle / 2), //椭球的最大时钟角度 minimumCone: Cesium.Math.toRadians(this.verticalViewAngle + 7.75), //椭圆形的最小圆锥角 maximumCone: Cesium.Math.toRadians(180 - this.verticalViewAngle - 7.75), //椭球的最大圆锥角 fill: false, //椭圆是否填充所提供的的材料 outline: true, //是否勾勒出椭圆形 subdivisions: 256, //每个轮廓环的样本数,确定曲率的粒度 stackPartitions: 64, //堆栈数的属性 slicePartitions: 64, //径向切片数量的属性 outlineColor: Cesium.Color.YELLOWGREEN, //轮廓的颜色 } }); }; /** * @method 获取偏航角 */ ViewShed.getHeading = function(fromPosition, toPosition) { let finalPosition = new Cesium.Cartesian3(); let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition); Cesium.Matrix4.inverse(matrix4, matrix4); Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition); Cesium.Cartesian3.normalize(finalPosition, finalPosition); return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y)); }; /** * @method 获取俯仰角 */ ViewShed.getPitch = function(fromPosition, toPosition) { let finalPosition = new Cesium.Cartesian3(); let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition); Cesium.Matrix4.inverse(matrix4, matrix4); Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition); Cesium.Cartesian3.normalize(finalPosition, finalPosition); return Cesium.Math.toDegrees(Math.asin(finalPosition.z)); }; return ViewShed; } if (typeof (ViewShed) === 'undefined') { window.ViewShed = define_ViewShed(); } else { console.log("ViewShed already defined."); } })(window);