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); 15 }

其中，紅色部分的代碼是針對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交流可以掃碼加群，期待你的加入！！！