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

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

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, https://www.360docs.net/doc/df4113636.html,BufferView);

} 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)) {

https://www.360docs.net/doc/df4113636.html,meteri(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还不支持这种情况。