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=null
var videoShed3d=function(cesium,viewer, param) {
Cesium=cesium
this.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