Cesium源码剖析---视频投影

　　Cesium中的视频投影是指将视频作为一种物体材质，实现在物体上播放视频的效果。这个功能在Cesium早期版本中就支持了，在Code Example中有一个示例。今天就来分析一下其内部实现原理。

1. 添加视频投影及效果

　　示例中添加视频投影的代码分为两部分，第一步是添加div控件，控件负责视频播放、暂停等任务，代码如下：

<video id="trailer" muted autoplay loop crossorigin controls>
    <source src="https://cesiumjs.org/videos/Sandcastle/big-buck-bunny_trailer.webm" type="video/webm">
    <source src="https://cesiumjs.org/videos/Sandcastle/big-buck-bunny_trailer.mp4" type="video/mp4">
    <source src="https://cesiumjs.org/videos/Sandcastle/big-buck-bunny_trailer.mov" type="video/quicktime">
    Your browser does not support the <code>video</code> element.
</video>

第二步是添加一个球状物体，并为其指定材质，代码如下：

var videoElement = document.getElementById('trailer');//获得video对象
var sphere = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-79, 39, 1000),
    ellipsoid : {
        radii : new Cesium.Cartesian3(1000, 1000, 1000),
        material : videoElement //指定材质
    }
});

运行程序，得到的效果如下图所示：

2. 内部代码实现

　　在没有查看Cesium实现视频投影原理之前，我们可以大胆猜测实现的基本思路：视频不就是连续的照片组合在一起播放吗？那通过不断更换照片就可以实现视频投影！好，那我们就按照这个思路去查看一下相关代码。在Material.js中查找到了createTexture2DUpdateFunction这个函数，其中和video材质相关的部分代码如下：

var uniforms = material.uniforms;
var uniformValue = uniforms[uniformId];
var uniformChanged = oldUniformValue !== uniformValue;
oldUniformValue = uniformValue;
var texture = material._textures[uniformId];

var uniformDimensionsName;
var uniformDimensions;

if (uniformValue instanceof HTMLVideoElement) {
    // HTMLVideoElement.readyState >=2 means we have enough data for the current frame.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
    if (uniformValue.readyState >= 2) {
        if (uniformChanged && defined(texture)) {
            if (texture !== context.defaultTexture) {
                texture.destroy();
            }
            texture = undefined;
        }

        if (!defined(texture) || texture === context.defaultTexture) {
            texture = new Texture({
                context : context,
                source : uniformValue
            });
            material._textures[uniformId] = texture;
            return;
        }

        texture.copyFrom(uniformValue);
    } else if (!defined(texture)) {
        material._textures[uniformId] = context.defaultTexture;
    }
    return;
}

 从上面的代码可以看出，texture的更新可以分为三个状态：

　　视频未加载完成：此时的texture赋值为context.defaultTexture，用默认图片代替；

　　视频刚加载完成：通过video构造新的texture对象，并通过texture的copyFrom函数进行更新；

　　视频加载完成后：只需通过texture的copyFrom函数进行更新即可。

构造texture对象属于常规操作，所以实现视频投影中画面内容更新的重要函数就是copyFrom。截取函数中部分代码如下：

if (arrayBufferView) {
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);

    if (flipY) {
        arrayBufferView = PixelFormat.flipY(arrayBufferView, pixelFormat, pixelDatatype, width, height);
    }
    gl.texSubImage2D(target, 0, xOffset, yOffset, width, height, pixelFormat, pixelDatatype, arrayBufferView);
} else {
    // Only valid for DOM-Element uploads
    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);

    gl.texSubImage2D(target, 0, xOffset, yOffset, pixelFormat, pixelDatatype, source);
}

其中，红色部分的代码是针对dom元素的，用到的关键函数就是texSubImage2D。这个函数可以动态的更新GPU中绑定的图片内容，相当于每次都从video元素中取当前播放的图片作为材质的当前贴图，达到视频投影的效果。texSubImage2D函数的全部用法如下：

// WebGL 1:
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ArrayBufferView? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, ImageData? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLCanvasElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLVideoElement? pixels);
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, ImageBitmap? pixels);

// WebGL 2:
void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, GLintptr offset);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLCanvasElement source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLImageElement source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, HTMLVideoElement source); 
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ImageBitmap source); 
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ImageData source);
void gl.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, ArrayBufferView srcData, srcOffset);

3. 视频投影的应用

　　这个例子中是将视频投影到一个规则球体上，比较简单。根据这个原理，还可以引申出一些更加有实用价值的功能。比如将视频投影到gltf模型或者3dtiles模型上，将摄像头拍摄的视频投影到真实场景中，使监控更加直观、立体。下面是做的一个将视频投影到3dtiles的效果：

PS：Cesium交流可以扫码加群，期待你的加入！！！