​WebGL Shader 程序

WebGL Shader 程序

  我们通常使用三角形来构造网格,由于WebGL使用GPU加速计算,这些三角形的信息应该从CPU传输到需要大量通信开销的GPU。

  WebGL提供了一个解决方案来减少通信开销。它使用在GPU上运行的ES SL(嵌入式系统着色语言) ,我们编写所有必要的shader程序在客户系统上绘制图形元素(我们使用OpenGL ES着色语言/GLSL)。

  这些着色器用于编写着色程序的语言是GLSL。在这些着色器中,我们定义了顶点、转换、材质、灯光和相机如何相互作用以创建特定的图像。简而言之,它是一个实现算法来获取网格像素的代码片段,我们将在后面的章节中讨论更多关于着色器的问题。

  有两种类型的着色器:顶点 Shader和片段 Shader。

顶点 Shader

  顶点 Shader是每个顶点调用的程序代码。它用于将几何图形(例如:三角形)从一个位置转换为另一个位置。它处理每个顶点(每个顶点数据)的数据,如顶点坐标、法线、颜色和纹理坐标.

  在顶点 Shader的ES GL代码中,程序员必须定义属性来处理数据,这些属性指向用JavaScript编写的顶点缓冲对象。

  可以使用ES GL执行以下任务:

  顶点变换

  正常变换与归一化

  纹理坐标生成

  纹理坐标变换

  照明设备

  颜色材料应用

片段 Shader(像素 Shader)

  网格由多个三角形组成,每个三角形的表面称为碎片。片段 Shader是运行在每个片段的所有像素上面的代码,它是用来计算和填充每个像素的颜色。

  可以使用片段 Shader执行以下任务:

  插值的运算

  纹理存取

  纹理应用

  雾

  色彩计算

OpenGL ES SL变量

  OpenGL ES SL的完整形式是OpenGL嵌入式系统着色语言。为了处理着色程序中的数据, ES SL提供了三种类型的变量。它们如下−

  attribute变量——这些变量包含顶点着色程序的输入值。属性指向包含每个顶点数据的顶点缓冲对象(VBO).每次调用顶点着色器时,属性都指向不同顶点的VBO。

  uniform变量-这些变量保存了顶点和碎片着色器常见的输入数据,如光照位置、纹理坐标和颜色。

  varying变量-varying变量是顶点 Shader和片段 Shader之间做数据传递用的。

  有了这些基础,我们现在将继续讨论图形管道。