Cesium原理篇：6 Renderer模块(2: Texture)

Posted 2020-08-15 法克鸡丝

       Texture也是WebGL中重要的概念，使用起来也很简单。但有句话叫大道至简，如果真的想要用好纹理，里面的水其实也是很深的。下面我们来一探究竟。

       下面是WebGL中创建一个纹理的最简过程：

var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
// 创建纹理句柄
var texture = gl.createTexture();
// 填充纹理内容
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
// 设置纹理参数
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// 释放
gl.bindTexture(gl.TEXTURE_2D, null);

       如果你觉得上面的这段代码简单易懂，不妨在看看WebGL中提供的gl.glTexImage2D的重载方法：

void gl.texImage2D(target, level, internalformat, width, height, border, format, type, ArrayBufferView? pixels);
void gl.texImage2D(target, level, internalformat, format, type, ImageData? pixels);
void gl.texImage2D(target, level, internalformat, format, type, htmlImageElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels);
void gl.texImage2D(target, level, internalformat, format, type, HTMLVideoElement? pixels);

     一个再简单的纹理调用，在实际中也会有变幻无穷的方式，而这就是实现功能和产品封装上的区别，Cesium中提供了Texture类，整体上考虑了主要的使用场景，在代码设计上简化了学习成本，当然在编码上也较为优雅，我们不妨看一下Cesium中创建纹理的伪代码：

function Texture(options) {
    // 如下三个if判断，用来查看是否是深度纹理、深度模版纹理或浮点纹理
    //  并判断当前浏览器是否支持，数据类型是否满足要求
    if (pixelFormat === PixelFormat.DEPTH_COMPONENT) {
    }

    if (pixelFormat === PixelFormat.DEPTH_STENCIL) {
    }

    if (pixelDatatype === PixelDatatype.FLOAT) {
    }

    var preMultiplyAlpha = options.preMultiplyAlpha || pixelFormat === PixelFormat.RGB || pixelFormat === PixelFormat.LUMINANCE;
    var flipY = defaultValue(options.flipY, true);

    var gl = context._gl;
    var textureTarget = gl.TEXTURE_2D;
    var texture = gl.createTexture();

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(textureTarget, texture);

    if (defined(source)) {
        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, preMultiplyAlpha);
        // Y轴方向是否翻转
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipY);

        if (defined(source.arrayBufferView)) {
            // 纹理数据是arraybuffer的形式下，调用此方法
            gl.texImage2D(textureTarget, 0, internalFormat, width, height, 0, pixelFormat, pixelDatatype, source.arrayBufferView);
        } else if (defined(source.framebuffer)) {
            // 纹理数据是纹理缓冲区中的数据时，调用此方法
            if (source.framebuffer !== context.defaultFramebuffer) {
                source.framebuffer._bind();
            }

            gl.copyTexImage2D(textureTarget, 0, internalFormat, source.xOffset, source.yOffset, width, height, 0);

            if (source.framebuffer !== context.defaultFramebuffer) {
                source.framebuffer._unBind();
            }
        } else {
            // 纹理数据是其他类型: ImageData, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
            gl.texImage2D(textureTarget, 0, internalFormat, pixelFormat, pixelDatatype, source);
        }
    } else {
        // 纹理数据为空
        gl.texImage2D(textureTarget, 0, internalFormat, width, height, 0, pixelFormat, pixelDatatype, null);
    }
    gl.bindTexture(textureTarget, null);
}

       Cesium.Texture支持纹理贴图，还有深度和模版，以及浮点纹理等扩展性的用法，保证了Cesium可以支持深度值，模版等操作，满足一些复杂情况下的需求，同时，通过Texture.fromFramebuffer方式，可以支持FBO作为一张纹理，实现离屏渲染的效果。因此，在纹理数据创建上，Cesium还是比较完整的。

       同时，Cesium.Sample类提供了数据的一些显示风格设置，比如TextureWrap，Filter的设置，在Texture类中有一个sampler的属性，用户在赋值时自动设置：

sampler : {
    get : function() {
        return this._sampler;
    },
    set : function(sampler) {
        // ……

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(target, this._texture);
        gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minificationFilter);
        gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magnificationFilter);
        gl.texParameteri(target, gl.TEXTURE_WRAP_S, sampler.wrapS);
        gl.texParameteri(target, gl.TEXTURE_WRAP_T, sampler.wrapT);
        if (defined(this._textureFilterAnisotropic)) {
            gl.texParameteri(target, this._textureFilterAnisotropic.TEXTURE_MAX_ANISOTROPY_EXT, sampler.maximumAnisotropy);
        }
        gl.bindTexture(target, null);

        this._sampler = sampler;
    }
},

       另外，为了解决纹理闪烁的情况，Cesium中提供了MipMap的设置方式：

Texture.prototype.generateMipmap = function(hint) {
    hint = defaultValue(hint, MipmapHint.DONT_CARE);

    var gl = this._context._gl;
    var target = this._textureTarget;

    gl.hint(gl.GENERATE_MIPMAP_HINT, hint);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(target, this._texture);
    gl.generateMipmap(target);
    gl.bindTexture(target, null);
};

       当然，这种方式比较方便，浏览器内部自己创建MipMap，相当于一个影像金字塔的过程，如果你出于效率和效果的优化，希望自己创建MipMap也是可以的，不过目前的Cesium.Texture还不支持这种情况。

       个人认为，目前Texture实现的中规中矩，基本支持了各种纹理情况，能够满足后面模版缓存，深度缓存等高级用法，并对这一部分做了一个很好的封装，能够满足各类应用。但如果想要用好纹理，其实里面还有很多可以扩展的地方，比如支持压缩纹理，这对于显存的意义，特别是Cesium这种比较消耗显存的应用（特别是移动端），还是很有意义的。对纹理压缩技术感兴趣的，可以读一下这篇《为什么需要纹理压缩》,当然效率高也是有代价了，比如效果和兼容性，另外，随着对纹理创建的增加，个人认为增加一个纹理管理器TextureManager还是很有必要的，而且并不复杂。