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还是很有必要的，而且并不复杂。