javascript基础学习系列三百：读取像素

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

设置这个标志可以强制帧缓冲区在下一次绘制之前保持上一次绘制的状态。这个选项可能会影响性 能，因此尽量不要使用。
注意 纹理来源可以是图片、通过元素加载的视频，甚至是别的元素。 视频同样受跨源限制。

WebGL1 代码几乎完全与 WebGL2 兼容。在使用 WebGL2 上下文时，唯一可能涉及修改代码以保证 兼容性的就是扩展。在 WebGL2 中，很多扩展都变成了默认功能。

例如，要在 WebGL1 中使用绘制缓冲区，需要先测试相应扩展后再使用:

let ext = gl.getExtension('WEBGL_draw_buffers');
if (!ext) {
// 没有扩展的代码
} else {
  ext.drawBuffersWEBGL([...])
}

而在 WebGL2 中，这里的检测代码就不需要了，因为这个扩展已经直接暴露在上下文对象上了: gl.drawBuffers([…]);
以下特性都已成为 WebGL2 的标准特性:  ANGLE_instanced_arrays
 EXT_blend_minmax
 EXT_frag_depth 20  EXT_shader_texture_lod
 OES_element_index_uint
 OES_standard_derivatives
 OES_texture_float
 OES_texture_float_linear
 OES_vertex_array_object
 WEBGL_depth_texture
 WEBGL_draw_buffers
 Vertex shader texture access

requestAnimationFrame 是简单但实用的工具，可以让 JavaScript 跟进浏览器渲染周期，从而更 加有效地实现网页视觉动效。
HTML5 的元素为 JavaScript 提供了动态创建图形的 API。这些图形需要使用特定上下文 绘制，主要有两种。第一种是支持基本绘图操作的 2D 上下文:
 填充和描绘颜色及图案  绘制矩形
 绘制路径
 绘制文本
注意 要了解WebGL更新的内容，可以参考WebGL2Fundamentals网站上的文章“WebGL2 from WebGL1”。
 创建渐变和图案 28

第二种是 3D 上下文，也就是 WebGL。WebGL 是浏览器对 OpenGL ES 2.0 的实现。OpenGL ES 2.0 是游戏图形开发常用的一个标准。WebGL 支持比 2D 上下文更强大的绘图能力，包括:
 用 OpenGL 着色器语言(GLSL)编写顶点和片段着色器;  支持定型数组，限定数组中包含数值的类型;
 创建和操作纹理。 目前所有主流浏览器的较新版本都已经支持标签。