区块链技术博客
www.b2bchain.cn

可视域分析(viewShed)求职学习资料

本文介绍了可视域分析(viewShed)求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

可视域在三维中是比较常用的分析功能,很多领域中都能应用到。对三维空间而言,可视域分析就是指在某种场景下,基于某一个观察点,以一定的水平视角、垂直视角以及指定的视域范围等信息,来分析得到该区域所有通视点集合的过程。

本次使用的可视域分析核心代码是参考网上大佬 lvcq617 贴子,修改的部分如下:

  • 1、修改了原分析结果中地面没有颜色的问题
  • 2、去掉 boundsphere
  • 3、增加了一些参数设置
  • 4、增加了交互功能 ScreenSpaceEventHandler

一、视域分析核心代码

“`javascript
import * as Cesium from ‘cesium’;

export class ViewShed {
enabled = true;

size = 100;

softShadows = false;

constructor(options) {
this.viewer = options.viewer;
this.viewPosition = options.viewPosition;
this.direction = options.direction % 360;
this.pitch = options.pitch;
this.horizontalViewAngle = options.horizontalViewAngle || 90;
this.verticalViewAngle = options.verticalViewAngle || 60;
this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN;
this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED;
this.visualRange = options.visualRange || 100;
this.updateViewShed();
}

createLightCamera() {
this.lightCamera = new Cesium.Camera(this.viewer.scene);
this.lightCamera.position = this.viewPosition;
}

// 以自定义相机为点光源,声明自定义shadowmap
// 注意:虽然cesium并不建议修改shadowMap,但是必须将当前场景里的shadowMap替换为自定义的shadowMap,才能得到正确的参数。
createShadowMap() {
this.shadowMap = new Cesium.ShadowMap({
context: (this.viewer.scene).context,
lightCamera: this.lightCamera,
enabled: this.enabled,
isPointLight: true,
pointLightRadius: this.visualRange,
cascadesEnabled: false,
size: this.size,
softShadows: this.softShadows,
normalOffset: false,
fromLightSource: false,
});
this.viewer.scene.shadowMap = this.shadowMap;
this.viewer.scene.globe.shadows = Cesium.ShadowMode.ENABLED;
this.viewer.scene.globe.depthTestAgainstTerrain = true;
}

updateViewShed() {
this.clear();
this.createLightCamera();
this.setCameraParams();
this.createShadowMap();

 this.createPostStage();  this.drawViewCentrum();

}

// 视锥体
drawViewCentrum() {
const scratchRight = new Cesium.Cartesian3();
const scratchRotation = new Cesium.Matrix3();
const scratchOrientation = new Cesium.Quaternion();
const direction = this.lightCamera.directionWC;
const up = this.lightCamera.upWC;
let right = this.lightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);

 const rotation = scratchRotation;  Cesium.Matrix3.setColumn(rotation, 0, right, rotation);  Cesium.Matrix3.setColumn(rotation, 1, up, rotation);  Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);   const orientation = Cesium.Quaternion.fromRotationMatrix(    rotation,    scratchOrientation,  );  const instanceOutline = new Cesium.GeometryInstance({    geometry: new Cesium.FrustumOutlineGeometry({      frustum: this.lightCamera.frustum,      origin: this.viewPosition,      orientation,    }),    id: `pri${this.viewer.scene.primitives.length + 1}`,    attributes: {      color: Cesium.ColorGeometryInstanceAttribute.fromColor(        new Cesium.Color(0.0, 1.0, 0.0, 1.0),      ),      show: new Cesium.ShowGeometryInstanceAttribute(true),    },  });  this.newPrimitive = this.viewer.scene.primitives.add(    new Cesium.Primitive({      geometryInstances: instanceOutline,      appearance: new Cesium.PerInstanceColorAppearance({        flat: true,      }),    }),  );

}

// 在观察点自定义相机,设置相机的可视椎体范围,方向
setCameraParams() {
this.lightCamera.frustum.near = 0.001 * this.visualRange;
this.lightCamera.frustum.far = this.visualRange;
this.lightCamera.frustum.fov = Cesium.Math.toRadians(Math.max(this.horizontalViewAngle, this.verticalViewAngle));
this.lightCamera.frustum.aspectRatio = this.horizontalViewAngle / this.verticalViewAngle;
this.lightCamera.setView({
destination: this.viewPosition,
orientation: {
heading: Cesium.Math.toRadians(this.direction || 0),
pitch: Cesium.Math.toRadians(this.pitch || 0),
roll: 0,
},
});
}

clear() {
// 椭球体
if (this.pyramid) {
this.viewer.entities.removeById(this.pyramid.id);
this.pyramid = null;
}

 if (this.cameraPrimitive) {    this.cameraPrimitive.destroy();    this.cameraPrimitive = null;  }  // 煊染结果  if (this.postStage) {    this.viewer.scene.postProcessStages.remove(this.postStage);    this.postStage = null;  }   // 视锥体  if (this.newPrimitive) {    this.viewer.scene.primitives.remove(this.newPrimitive);    this.newPrimitive = null;  }

}

setDirection(direction) {
this.direction = direction % 360;
this.updateViewShed();
}

setPitch(pitch) {
this.pitch = pitch;
this.updateViewShed();
}

setDirectionDistancePitch(direction, distance, pitch) {
this.direction = direction % 360;
this.visualRange = distance;
this.pitch = pitch;
this.updateViewShed();
}

setVisualRange(visualRange) {
this.visualRange = visualRange;
this.updateViewShed();
}

setHorizontalViewAngle(hva) {
this.horizontalViewAngle = hva;
this.updateViewShed();
}

setVerticalViewAngle(vva) {
this.verticalViewAngle = vva;
this.updateViewShed();
}

// 根据shadowMap中的数据,实现自定义shader
/*
shader中的内容主要是从cesium源码中获取的,这只是简单实现了可视区域和不可视区域不同着色;
如果要解决锯齿等问题,需要设置softShadows 、normalOffset 等,相应的glsl代码可以在源码SourceSceneShadowMapShader.js寻找;
如果要实现可视区域、不可视区域颜色自由改变,只需要将v_color与inv_color两个变量改为外部传入就可以了。
*/
createPostStage() {
const fs = `
#define USE_CUBE_MAP_SHADOW true
uniform sampler2D colorTexture;
// 深度纹理
uniform sampler2D depthTexture;
// 纹理坐标
varying vec2 v_textureCoordinates;

uniform mat4 camera_projection_matrix;  uniform mat4 camera_view_matrix; // 观测距离 uniform float far; //阴影 uniform samplerCube shadowMap_textureCube;  uniform mat4 shadowMap_matrix; uniform vec4 shadowMap_lightPositionEC; uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness; uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;  struct zx_shadowParameters {     vec3 texCoords;     float depthBias;     float depth;     float nDotL;     vec2 texelStepSize;     float normalShadingSmooth;     float darkness; };

可视域在三维中是比较常用的分析功能,很多领域中都能应用到。对三维空间而言,可视域分析就是指在某种场景下,基于某一个观察点,以一定的水平视角、垂直视角以及指定的视域范围等信息,来分析得到该区域所有通视点集合的过程。

本次使用的可视域分析核心代码是参考网上大佬 lvcq617 贴子,修改的部分如下:

  • 1、修改了原分析结果中地面没有颜色的问题
  • 2、去掉 boundsphere
  • 3、增加了一些参数设置
  • 4、增加了交互功能 ScreenSpaceEventHandler

一、视域分析核心代码

“`javascript
import * as Cesium from ‘cesium’;

export class ViewShed {
enabled = true;

size = 100;

softShadows = false;

constructor(options) {
this.viewer = options.viewer;
this.viewPosition = options.viewPosition;
this.direction = options.direction % 360;
this.pitch = options.pitch;
this.horizontalViewAngle = options.horizontalViewAngle || 90;
this.verticalViewAngle = options.verticalViewAngle || 60;
this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN;
this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED;
this.visualRange = options.visualRange || 100;
this.updateViewShed();
}

createLightCamera() {
this.lightCamera = new Cesium.Camera(this.viewer.scene);
this.lightCamera.position = this.viewPosition;
}

// 以自定义相机为点光源,声明自定义shadowmap
// 注意:虽然cesium并不建议修改shadowMap,但是必须将当前场景里的shadowMap替换为自定义的shadowMap,才能得到正确的参数。
createShadowMap() {
this.shadowMap = new Cesium.ShadowMap({
context: (this.viewer.scene).context,
lightCamera: this.lightCamera,
enabled: this.enabled,
isPointLight: true,
pointLightRadius: this.visualRange,
cascadesEnabled: false,
size: this.size,
softShadows: this.softShadows,
normalOffset: false,
fromLightSource: false,
});
this.viewer.scene.shadowMap = this.shadowMap;
this.viewer.scene.globe.shadows = Cesium.ShadowMode.ENABLED;
this.viewer.scene.globe.depthTestAgainstTerrain = true;
}

updateViewShed() {
this.clear();
this.createLightCamera();
this.setCameraParams();
this.createShadowMap();

 this.createPostStage();  this.drawViewCentrum();

}

// 视锥体
drawViewCentrum() {
const scratchRight = new Cesium.Cartesian3();
const scratchRotation = new Cesium.Matrix3();
const scratchOrientation = new Cesium.Quaternion();
const direction = this.lightCamera.directionWC;
const up = this.lightCamera.upWC;
let right = this.lightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);

 const rotation = scratchRotation;  Cesium.Matrix3.setColumn(rotation, 0, right, rotation);  Cesium.Matrix3.setColumn(rotation, 1, up, rotation);  Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);   const orientation = Cesium.Quaternion.fromRotationMatrix(    rotation,    scratchOrientation,  );  const instanceOutline = new Cesium.GeometryInstance({    geometry: new Cesium.FrustumOutlineGeometry({      frustum: this.lightCamera.frustum,      origin: this.viewPosition,      orientation,    }),    id: `pri${this.viewer.scene.primitives.length + 1}`,    attributes: {      color: Cesium.ColorGeometryInstanceAttribute.fromColor(        new Cesium.Color(0.0, 1.0, 0.0, 1.0),      ),      show: new Cesium.ShowGeometryInstanceAttribute(true),    },  });  this.newPrimitive = this.viewer.scene.primitives.add(    new Cesium.Primitive({      geometryInstances: instanceOutline,      appearance: new Cesium.PerInstanceColorAppearance({        flat: true,      }),    }),  );

}

// 在观察点自定义相机,设置相机的可视椎体范围,方向
setCameraParams() {
this.lightCamera.frustum.near = 0.001 * this.visualRange;
this.lightCamera.frustum.far = this.visualRange;
this.lightCamera.frustum.fov = Cesium.Math.toRadians(Math.max(this.horizontalViewAngle, this.verticalViewAngle));
this.lightCamera.frustum.aspectRatio = this.horizontalViewAngle / this.verticalViewAngle;
this.lightCamera.setView({
destination: this.viewPosition,
orientation: {
heading: Cesium.Math.toRadians(this.direction || 0),
pitch: Cesium.Math.toRadians(this.pitch || 0),
roll: 0,
},
});
}

clear() {
// 椭球体
if (this.pyramid) {
this.viewer.entities.removeById(this.pyramid.id);
this.pyramid = null;
}

 if (this.cameraPrimitive) {    this.cameraPrimitive.destroy();    this.cameraPrimitive = null;  }  // 煊染结果  if (this.postStage) {    this.viewer.scene.postProcessStages.remove(this.postStage);    this.postStage = null;  }   // 视锥体  if (this.newPrimitive) {    this.viewer.scene.primitives.remove(this.newPrimitive);    this.newPrimitive = null;  }

}

setDirection(direction) {
this.direction = direction % 360;
this.updateViewShed();
}

setPitch(pitch) {
this.pitch = pitch;
this.updateViewShed();
}

setDirectionDistancePitch(direction, distance, pitch) {
this.direction = direction % 360;
this.visualRange = distance;
this.pitch = pitch;
this.updateViewShed();
}

setVisualRange(visualRange) {
this.visualRange = visualRange;
this.updateViewShed();
}

setHorizontalViewAngle(hva) {
this.horizontalViewAngle = hva;
this.updateViewShed();
}

setVerticalViewAngle(vva) {
this.verticalViewAngle = vva;
this.updateViewShed();
}

// 根据shadowMap中的数据,实现自定义shader
/*
shader中的内容主要是从cesium源码中获取的,这只是简单实现了可视区域和不可视区域不同着色;
如果要解决锯齿等问题,需要设置softShadows 、normalOffset 等,相应的glsl代码可以在源码SourceSceneShadowMapShader.js寻找;
如果要实现可视区域、不可视区域颜色自由改变,只需要将v_color与inv_color两个变量改为外部传入就可以了。
*/
createPostStage() {
const fs = `
#define USE_CUBE_MAP_SHADOW true
uniform sampler2D colorTexture;
// 深度纹理
uniform sampler2D depthTexture;
// 纹理坐标
varying vec2 v_textureCoordinates;

uniform mat4 camera_projection_matrix;  uniform mat4 camera_view_matrix; // 观测距离 uniform float far; //阴影 uniform samplerCube shadowMap_textureCube;  uniform mat4 shadowMap_matrix; uniform vec4 shadowMap_lightPositionEC; uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness; uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;  struct zx_shadowParameters {     vec3 texCoords;     float depthBias;     float depth;     float nDotL;     vec2 texelStepSize;     float normalShadingSmooth;     float darkness; };

可视域在三维中是比较常用的分析功能,很多领域中都能应用到。对三维空间而言,可视域分析就是指在某种场景下,基于某一个观察点,以一定的水平视角、垂直视角以及指定的视域范围等信息,来分析得到该区域所有通视点集合的过程。

本次使用的可视域分析核心代码是参考网上大佬 lvcq617 贴子,修改的部分如下:

  • 1、修改了原分析结果中地面没有颜色的问题
  • 2、去掉 boundsphere
  • 3、增加了一些参数设置
  • 4、增加了交互功能 ScreenSpaceEventHandler

一、视域分析核心代码

“`javascript
import * as Cesium from ‘cesium’;

export class ViewShed {
enabled = true;

size = 100;

softShadows = false;

constructor(options) {
this.viewer = options.viewer;
this.viewPosition = options.viewPosition;
this.direction = options.direction % 360;
this.pitch = options.pitch;
this.horizontalViewAngle = options.horizontalViewAngle || 90;
this.verticalViewAngle = options.verticalViewAngle || 60;
this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN;
this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED;
this.visualRange = options.visualRange || 100;
this.updateViewShed();
}

createLightCamera() {
this.lightCamera = new Cesium.Camera(this.viewer.scene);
this.lightCamera.position = this.viewPosition;
}

// 以自定义相机为点光源,声明自定义shadowmap
// 注意:虽然cesium并不建议修改shadowMap,但是必须将当前场景里的shadowMap替换为自定义的shadowMap,才能得到正确的参数。
createShadowMap() {
this.shadowMap = new Cesium.ShadowMap({
context: (this.viewer.scene).context,
lightCamera: this.lightCamera,
enabled: this.enabled,
isPointLight: true,
pointLightRadius: this.visualRange,
cascadesEnabled: false,
size: this.size,
softShadows: this.softShadows,
normalOffset: false,
fromLightSource: false,
});
this.viewer.scene.shadowMap = this.shadowMap;
this.viewer.scene.globe.shadows = Cesium.ShadowMode.ENABLED;
this.viewer.scene.globe.depthTestAgainstTerrain = true;
}

updateViewShed() {
this.clear();
this.createLightCamera();
this.setCameraParams();
this.createShadowMap();

 this.createPostStage();  this.drawViewCentrum();

}

// 视锥体
drawViewCentrum() {
const scratchRight = new Cesium.Cartesian3();
const scratchRotation = new Cesium.Matrix3();
const scratchOrientation = new Cesium.Quaternion();
const direction = this.lightCamera.directionWC;
const up = this.lightCamera.upWC;
let right = this.lightCamera.rightWC;
right = Cesium.Cartesian3.negate(right, scratchRight);

 const rotation = scratchRotation;  Cesium.Matrix3.setColumn(rotation, 0, right, rotation);  Cesium.Matrix3.setColumn(rotation, 1, up, rotation);  Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);   const orientation = Cesium.Quaternion.fromRotationMatrix(    rotation,    scratchOrientation,  );  const instanceOutline = new Cesium.GeometryInstance({    geometry: new Cesium.FrustumOutlineGeometry({      frustum: this.lightCamera.frustum,      origin: this.viewPosition,      orientation,    }),    id: `pri${this.viewer.scene.primitives.length + 1}`,    attributes: {      color: Cesium.ColorGeometryInstanceAttribute.fromColor(        new Cesium.Color(0.0, 1.0, 0.0, 1.0),      ),      show: new Cesium.ShowGeometryInstanceAttribute(true),    },  });  this.newPrimitive = this.viewer.scene.primitives.add(    new Cesium.Primitive({      geometryInstances: instanceOutline,      appearance: new Cesium.PerInstanceColorAppearance({        flat: true,      }),    }),  );

}

// 在观察点自定义相机,设置相机的可视椎体范围,方向
setCameraParams() {
this.lightCamera.frustum.near = 0.001 * this.visualRange;
this.lightCamera.frustum.far = this.visualRange;
this.lightCamera.frustum.fov = Cesium.Math.toRadians(Math.max(this.horizontalViewAngle, this.verticalViewAngle));
this.lightCamera.frustum.aspectRatio = this.horizontalViewAngle / this.verticalViewAngle;
this.lightCamera.setView({
destination: this.viewPosition,
orientation: {
heading: Cesium.Math.toRadians(this.direction || 0),
pitch: Cesium.Math.toRadians(this.pitch || 0),
roll: 0,
},
});
}

clear() {
// 椭球体
if (this.pyramid) {
this.viewer.entities.removeById(this.pyramid.id);
this.pyramid = null;
}

 if (this.cameraPrimitive) {    this.cameraPrimitive.destroy();    this.cameraPrimitive = null;  }  // 煊染结果  if (this.postStage) {    this.viewer.scene.postProcessStages.remove(this.postStage);    this.postStage = null;  }   // 视锥体  if (this.newPrimitive) {    this.viewer.scene.primitives.remove(this.newPrimitive);    this.newPrimitive = null;  }

}

setDirection(direction) {
this.direction = direction % 360;
this.updateViewShed();
}

setPitch(pitch) {
this.pitch = pitch;
this.updateViewShed();
}

setDirectionDistancePitch(direction, distance, pitch) {
this.direction = direction % 360;
this.visualRange = distance;
this.pitch = pitch;
this.updateViewShed();
}

setVisualRange(visualRange) {
this.visualRange = visualRange;
this.updateViewShed();
}

setHorizontalViewAngle(hva) {
this.horizontalViewAngle = hva;
this.updateViewShed();
}

setVerticalViewAngle(vva) {
this.verticalViewAngle = vva;
this.updateViewShed();
}

// 根据shadowMap中的数据,实现自定义shader
/*
shader中的内容主要是从cesium源码中获取的,这只是简单实现了可视区域和不可视区域不同着色;
如果要解决锯齿等问题,需要设置softShadows 、normalOffset 等,相应的glsl代码可以在源码SourceSceneShadowMapShader.js寻找;
如果要实现可视区域、不可视区域颜色自由改变,只需要将v_color与inv_color两个变量改为外部传入就可以了。
*/
createPostStage() {
const fs = `
#define USE_CUBE_MAP_SHADOW true
uniform sampler2D colorTexture;
// 深度纹理
uniform sampler2D depthTexture;
// 纹理坐标
varying vec2 v_textureCoordinates;

uniform mat4 camera_projection_matrix;  uniform mat4 camera_view_matrix; // 观测距离 uniform float far; //阴影 uniform samplerCube shadowMap_textureCube;  uniform mat4 shadowMap_matrix; uniform vec4 shadowMap_lightPositionEC; uniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness; uniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth;  struct zx_shadowParameters {     vec3 texCoords;     float depthBias;     float depth;     float nDotL;     vec2 texelStepSize;     float normalShadingSmooth;     float darkness; };

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 可视域分析(viewShed)求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们