javascript七基础学习系列一千四百七十四：纹理

WebGL 纹理可以使用DOM中的图片。可以使用gl.createTexture()方法创建新的纹理，然后
再将图片绑定到这个纹理。如果图片还没有加载，则可以创建一个Image 对象来动态加载。图片加载
完成后才能初始化纹理，因此在图片的load 事件之后才能使用纹理。比如：
let image = new Image(),
texture;
image.src = “smile.gif”;
image.onload = function() {
texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
// 除当前纹理
gl.bindTexture(gl.TEXTURE_2D, null);
}
除了使用DOM 图片，这些步骤跟在OpenGL 中创建纹理是一样的。最大的区别在于使用
gl.pixelStorei()设置了像素存储格式。常量gl.UNPACK_FLIP_Y_WEBGL 是WebGL 独有的，在基
于Web 加载图片时通常要使用。原因在于GIF、JPEG 和PNG 图片使用的坐标系统与WebGL 内部的坐
标系统不一样。如果不使用这个标志，图片就会倒过来。
用于纹理的图片必须跟当前页面同源，或者是来自启用了跨源资源共享（CORS，Cross-Origin
Resource Sharing）的服务器上。
读取像素
与2D 上下文一样，可以从WebGL 上下文中读取像素数据。读取像素的readPixels()方法与
OpenGL 中的方法有同样的参数，只不过最后一个参数必须是定型数组。像素信息是从帧缓冲区读出来
并放到这个定型数组中的。readPixels()方法的参数包括x 和y 坐标、宽度、高度、图像格式、类型
和定型数组。前4 个参数用于指定要读取像素的位置。图像格式参数几乎总是gl.RGBA。类型参数指的
是要存储在定型数组中的数据类型，有如下限制：
 如果这个类型是gl.UNSIGNED_BYTE，则定型数组必须是Uint8Array；
 如果这个类型是gl.UNSIGNED_SHORT_5_6_5、gl.UNSIGNED_SHORT_4_4_4_4 或gl.UNSIGNED_
SHORT_5_5_5_1，则定型数组必须是Uint16Array。
下面是一个调用readPixels()方法的例子：
let pixels = new Uint8Array(25*25);
gl.readPixels(0, 0, 25, 25, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
以上代码读取了帧缓冲区中25 像素×25 像素大小的区域，并把读到的像素信息保存在pixels 数组
中，其中每个像素的颜色在这个数组中都以4 个值表示，分别代表红、绿、蓝和透明度值。每个数组值
的取值范围是0~255（包括0 和255）。别忘了先按照预期存储的数据量初始化定型数组。
在浏览器绘制更新后的WebGL 图像之前调用readPixels()没有问题。而在绘制完成后，帧缓冲
区会恢复到其初始清除状态，此时调用readPixels()会得到与清除状态一致的像素数据。如果想在绘
制之后读取像素，则必须使用前面讨论过的preserveDrawingBuffer 选项初始化WebGL 上下文：
let gl = drawing.getContext(“webgl”, { preserveDrawingBuffer: true; });
设置这个标志可以强制帧缓冲区在下一次绘制之前保持上一次绘制的状态。这个选项可能会影响性
能，因此尽量不要使用。