开始使用 webgl

WebGL 是一种光栅化 API,通常在你的 GPU 上运行,使你能够快速绘制 2D 和 3D 图形。WebGL 还可用于对数据数组进行计算。

WebGL 是一个非常低级的 API。在基础级别,WebGL 是一个在 GPU 上运行 2 个用户提供的功能的引擎。一个函数称为顶点着色器。顶点着色器的工作是计算顶点位置。根据函数输出 WebGL 的位置,然后可以栅格化各种基元,包括点,线或三角形。当栅格化这些基元时,它调用第二个用户提供的函数,称为片段着色器。片段着色器的工作是为当前正在绘制的图元的每个像素计算颜色。

这些函数是用一种名为 GLSL 的语言编写的,它有点像 C / C++并且是严格类型的。

由程序员提供这些功能,使 WebGL 绘制 2d,3d 或计算某些东西。几乎每一个 WebGL 都是关于设置这两个函数然后向它们提供数据。

数据可以从 4 个来源提供。

  • 制服

制服是着色器函数的输入,非常类似于函数参数或全局变量。它们在着色器执行之前设置一次,并在执行期间保持不变

  • 属性

属性仅向顶点着色器提供数据。属性定义了如何从缓冲区中提取数据。例如,你可以将位置,法线和纹理坐标放入缓冲区。通过属性,你可以告诉 WebGL 如何从缓冲区中提取数据并将其提供给顶点着色器。通过调用 gl.drawArraysgl.drawElements 并指定计数,顶点着色器被称为用户指定的次数。每次调用当前顶点着色器时,下一组数据将从用户指定的缓冲区中提取并放入属性中

  • 纹理

纹理是 4 个通道的 2D 数据阵列。最常见的是,这 4 个通道是图像中的红色,绿色,蓝色和 alpha。WebGL 并不关心数据是什么。与属性和缓冲区不同,着色器可以通过随机访问从纹理中读取值。

  • Varyings

变量是顶点着色器将数据传递到片段着色器的一种方式。当使用片段着色器对基元进行光栅化时,在顶点着色器输出的值之间插入变量