我们通常使用三角形来构建网格。因为WebGL使用GPU加速计算,有关这些三角形中的信息一般从CPU传送到GPU,这需要大量的通信开销。
WebGL提供了一个解决方案以降低通信开销。由于它使用ES SL(嵌入式系统着色语言)在GPU上运行,我们编写所有程序需要使用着色器程序的客户端系统上的图形元素(这是我们使用OpenGL ES着色语言/GLSL来写程序)。
这些着色器是GPU和用于编写着色器程序的程序语言是GLSL。在这些着色器,我们定义确切的顶点,转换,材质,光源,和摄像机使用彼此交互以创建具体图像。
总之,这是一个实现的算法来获得像素一个网状片段。在后面的章节我们将讨论更多关于着色器。有两种类型的着色器- 顶点着色器和片段着色器。
顶点着色器
顶点着色器是所谓的在每个顶点的程序代码。它被用于转化(移动)的几何形状(例如:三角形)从一个地方到另一个地方。它处理每个顶点的数据(每个顶点的数据),例如顶点坐标,法线,色彩,和纹理坐标。
在顶点着色器的ES GL代码,程序员必须定义的属性来处理数据。这些属性指向一个顶点缓冲区对象是用JavaScript编写的。
下面的任务可以使用顶点着色器来进行 -
-
顶点变换
-
正常转化和正常化
-
纹理坐标生成
-
纹理坐标变换
- 灯光/光线
-
颜色材料应用
片段着色器(像素着色器)
网状由多个三角形形成,并且每一个三角形的表面被称为一个片段。片段着色器是对每一个片段的所有像素上运行的代码。这是写计算以填补单个像素的颜色。
下面的任务可以使用片段着色器来进行 -
-
插值操作
-
纹理访问
-
纹理应用
-
灰蒙/雾
-
颜色总和
OpenGL ES SL 变量
OpenGL ES的SL完整形式是 OpenGL 的嵌入式系统着色语言。为了处理着色器程序中的数据,ES SL提供了三种类型的变量。它们如下 -
-
属性− 这些变量保存顶点着色器程序的输入值。属性指向包含每个顶点数据的顶点缓冲对象。顶点着色器被调用的时候,这个属性指向不同的顶点的VBO。
-
制服− 这些变量存储输入数据,很常见为顶点和片段着色器,例如光位置,纹理坐标和颜色。
-
变动充填− 这些变量用来从顶点着色到片段着色器传递数据。有了这么多的基础知识,现在我们将继续前进,讨论图形管线。