55、WebGL与表单脚本开发全解析

WebGL与表单脚本开发全解析

1. WebGL基础

1.1 纹理图像来源限制

用于纹理的图像必须与包含该图像的页面同源，或者存在于对这些图像启用了跨源资源共享（CORS）的服务器上。纹理源可以是图像、加载到 <video> 元素中的视频，甚至是另一个 <canvas> 元素。同样的跨源资源限制也适用于视频。

1.2 读取像素

在WebGL上下文中可以像在2D上下文中一样读取像素。 readPixels() 方法的参数与OpenGL中的类似，但最后一个参数必须是类型化数组。像素信息从帧缓冲区读取并存储到类型化数组中。该方法的参数包括 x 、 y 、 width 、 height 、 image format 、 type 和 typed array 。前四个参数指定要读取像素的位置，图像格式参数通常为 gl.RGBA 。类型参数决定了存储在类型化数组中的数据类型，有以下限制：
- 如果类型是 gl.UNSIGNED_BYTE ，则类型化数组必须是 Uint8Array 。
- 如果类型是 gl.UNSIGNED_SHORT_5_6_5 、 gl.UNSIGNED_SHORT_4_4_