cesium视频投影
先看效果
使用cesium做视频投影效果,而且还要跟随无人机移动而移动,我现在用定时器更新无人机的坐标来实现效果具体代码如下:
1、CesiumVideo3d.js(某个cesium技术群大佬分享的)
// import ECEF from "./CoordinateTranslate";
let CesiumVideo3d = (function () {var videoShed3dShader = "\r\n\r\n\r\n\r\nuniform float mixNum;\r\nuniform sampler2D colorTexture;\r\nuniform sampler2D stcshadow; \r\nuniform sampler2D videoTexture;\r\nuniform sampler2D depthTexture;\r\nuniform mat4 _shadowMap_matrix; \r\nuniform vec4 shadowMap_lightPositionEC; \r\nuniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness; \r\nuniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth; \r\nvarying vec2 v_textureCoordinates;\r\nvec4 toEye(in vec2 uv, in float depth){\r\n vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\r\n vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\r\n posInCamera =posInCamera / posInCamera.w;\r\n return posInCamera;\r\n}\r\nfloat getDepth(in vec4 depth){\r\n float z_window = czm_unpackDepth(depth);\r\n z_window = czm_reverseLogDepth(z_window);\r\n float n_range = czm_depthRange.near;\r\n float f_range = czm_depthRange.far;\r\n return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\r\n}\r\nfloat _czm_sampleShadowMap(sampler2D shadowMap, vec2 uv){\r\n return texture2D(shadowMap, uv).r;\r\n}\r\nfloat _czm_shadowDepthCompare(sampler2D shadowMap, vec2 uv, float depth){\r\n return step(depth, _czm_sampleShadowMap(shadowMap, uv));\r\n}\r\nfloat _czm_shadowVisibility(sampler2D shadowMap, czm_shadowParameters shadowParameters){\r\n float depthBias = shadowParameters.depthBias;\r\n float depth = shadowParameters.depth;\r\n float nDotL = shadowParameters.nDotL;\r\n float normalShadingSmooth = shadowParameters.normalShadingSmooth;\r\n float darkness = shadowParameters.darkness;\r\n vec2 uv = shadowParameters.texCoords;\r\n depth -= depthBias;\r\n vec2 texelStepSize = shadowParameters.texelStepSize;\r\n float radius = 1.0;\r\n float dx0 = -texelStepSize.x * radius;\r\n float dy0 = -texelStepSize.y * radius;\r\n float dx1 = texelStepSize.x * radius;\r\n float dy1 = texelStepSize.y * radius;\r\n float visibility = \r\n (\r\n _czm_shadowDepthCompare(shadowMap, uv, depth)\r\n +_czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(0.0, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, 0.0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, 0.0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, dy1), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(0.0, dy1), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, dy1), depth)\r\n ) * (1.0 / 9.0)\r\n ;\r\n return visibility;\r\n}\r\nvec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){\r\n vec3 v01 = point -planeOrigin;\r\n float d = dot(planeNormal, v01) ;\r\n return (point - planeNormal * d);\r\n}\r\nfloat ptm(vec3 pt){\r\n return sqrt(pt.x*pt.x + pt.y*pt.y + pt.z*pt.z);\r\n}\r\nvoid main() \r\n{ \r\n const float PI = 3.141592653589793;\r\n vec4 color = texture2D(colorTexture, v_textureCoordinates);\r\n vec4 currD = texture2D(depthTexture, v_textureCoordinates);\r\n if(currD.r>=1.0){\r\n gl_FragColor = color;\r\n return;\r\n }\r\n \r\n float depth = getDepth(currD);\r\n vec4 positionEC = toEye(v_textureCoordinates, depth);\r\n vec3 normalEC = vec3(1.0);\r\n czm_shadowParameters shadowParameters; \r\n shadowParameters.texelStepSize = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.xy; \r\n shadowParameters.depthBias = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.z; \r\n shadowParameters.normalShadingSmooth = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.w; \r\n shadowParameters.darkness = shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness.w; \r\n shadowParameters.depthBias *= max(depth * 0.01, 1.0); \r\n vec3 directionEC = normalize(positionEC.xyz - shadowMap_lightPositionEC.xyz); \r\n float nDotL = clamp(dot(normalEC, -directionEC), 0.0, 1.0); \r\n vec4 shadowPosition = _shadowMap_matrix * positionEC; \r\n shadowPosition /= shadowPosition.w; \r\n if (any(lessThan(shadowPosition.xyz, vec3(0.0))) || any(greaterThan(shadowPosition.xyz, vec3(1.0)))) \r\n { \r\n gl_FragColor = color;\r\n return;\r\n }\r\n\r\n shadowParameters.texCoords = shadowPosition.xy; \r\n shadowParameters.depth = shadowPosition.z; \r\n shadowParameters.nDotL = nDotL; \r\n float visibility = _czm_shadowVisibility(stcshadow, shadowParameters); \r\n\r\n vec4 videoColor = texture2D(videoTexture,shadowPosition.xy);\r\n if(visibility==1.0){\r\n gl_FragColor = mix(color,vec4(videoColor.xyz,1.0),mixNum*videoColor.a);\r\n }else{\r\n if(abs(shadowPosition.z-0.0)<0.01){\r\n return;\r\n }\r\n gl_FragColor = color;\r\n }\r\n} ";var Cesium=nullvar videoShed3d=function(cesium,viewer, param) {Cesium=cesiumthis.ECEF = new ECEF(); this.param = param;var option = this._initCameraParam();this.optionType = {Color: 1,Image: 2,Video: 3}this.near = option.near ? option.near : 0.1;if (option || (option = {}), this.viewer = viewer, this._cameraPosition = option.cameraPosition, this._position = option.position,this.type = option.type, this._alpha = option.alpha || 1, this.url = option.url, this.color = option.color,this._debugFrustum = Cesium.defaultValue(option.debugFrustum, !0), this._aspectRatio = option.aspectRatio || this._getWinWidHei(),this._camerafov = option.fov || Cesium.Math.toDegrees(this.viewer.scene.camera.frustum.fov), this.texture = option.texture || new Cesium.Texture({context: this.viewer.scene.context,source: {width: 1,height: 1,arrayBufferView: new Uint8Array([255, 255, 255, 255])},flipY: !1}), this._videoPlay = Cesium.defaultValue(option.videoPlay, !0), this.defaultShow = Cesium.defaultValue(option.show, !0), !this.cameraPosition || !this.position) return void console.log('初始化失败:请确认相机位置与视点位置正确!');switch (this.type) {default:case this.optionType.Video:this.activeVideo(this.url);break;case this.optionType.Image:this.activePicture(this.url);this.deActiveVideo();break;case this.optionType.Color:this.activeColor(this.color),this.deActiveVideo();}this._createShadowMap(),this._getOrientation(),this._addCameraFrustum()this._addPostProcess()this.viewer.scene.primitives.add(this)}Object.defineProperties(videoShed3d.prototype, {alpha: {get: function () {return this._alpha},set: function (e) {return this._alpha = e}},aspectRatio: {get: function () {return this._aspectRatio},set: function (e) {this._aspectRatio = e,this._changeVideoWidHei()}},debugFrustum: {get: function () {return this._debugFrustum},set: function (e) {this._debugFrustum = e,this.cameraFrustum.show = e}},fov: {get: function () {return this._camerafov},set: function (e) {this._camerafov = e,this._changeCameraFov()}},cameraPosition: {get: function () {return this._cameraPosition},set: function (e) {e && (this._cameraPosition = e, this._changeCameraPos())}},position: {get: function () {return this._position},set: function (e) {e && (this._position = e, this._changeViewPos())}},videoPlay: {get: function () {return this._videoPlay},set: function (e) {this._videoPlay = Boolean(e),this._videoEle && (this.videoPlay ? this._videoEle.paly() : this._videoEle.pause())}},params: {get: function () {var t = {}return t.type = this.type,this.type == this.optionType.Color ? t.color = this.color : t.url = this.url,t.position = this.position,t.cameraPosition = this.cameraPosition,t.fov = this.fov,t.aspectRatio = this.aspectRatio,t.alpha = this.alpha,t.debugFrustum = this.debugFrustum,t}},show: {get: function () {return this.defaultShow},set: function (e) {this.defaultShow = Boolean(e),this._switchShow()}}})videoShed3d.prototype._initCameraParam = function () {var viewPoint = this.ECEF.enu_to_ecef({ longitude: this.param.position.x * 1, latitude: this.param.position.y * 1, altitude: this.param.position.z * 1 },{ distance: this.param.far, azimuth: this.param.rotation.y * 1, elevation: this.param.rotation.x * 1 });var position = Cesium.Cartesian3.fromDegrees(viewPoint.longitude, viewPoint.latitude, viewPoint.altitude);var cameraPosition = Cesium.Cartesian3.fromDegrees(this.param.position.x * 1, this.param.position.y * 1, this.param.position.z * 1);return {type: 3,url: this.param.url,cameraPosition: cameraPosition,position: position,alpha: this.param.alpha,near: this.param.near,fov: this.param.fov,debugFrustum: this.param.debugFrustum}}/*** 旋转*/videoShed3d.prototype._changeRotation = function (e) {if (e) {this.param.rotation = e;var option = this._initCameraParam();this.position = option.position;}}/*** 相机位置*/videoShed3d.prototype._changeCameraPosition = function (e) {if (e) {this.param.position = e;var option = this._initCameraParam();this.cameraPosition = option