WebGL主要是低级光栅化API而不是3D API.要使用WebGL绘制图像，您必须传递表示图像的矢量.然后，它使用OpenGL SL将给定矢量转换为像素格式，并在屏幕上显示图像.编写WebGL应用程序涉及一系列步骤，我们将在本章中解释这些步骤.
就像在任何其他3D系统中，您将在WebGL中具有x，y和z轴，其中 z 轴表示深度. WebGL中的坐标限制为(1,1,1)和(-1，-1，-1).它意味着 : 去;如果你认为屏幕将WebGL图形投影为立方体，那么立方体的一个角将是(1,1,1)，而对角将是(-1，-1，-1). WebGL不会显示超出这些边界的任何内容.
下图描绘了WebGL坐标系. z轴表示深度. z的正值表示对象靠近屏幕/查看器，而z的负值表示对象远离屏幕.同样，x的正值表示对象位于屏幕的右侧，负值表示对象位于屏幕的左侧.类似地，y的正值和负值表示对象是在屏幕的顶部还是底部.
获取canvas对象的WebGL上下文后，可以使用JavaScript中的WebGL API开始绘制图形元素.
以下是在开始使用WebGL之前需要了解的一些基本术语.
一般来说，为了绘制多边形等对象，我们在平面上标记点并将它们连接起来以形成所需的多边形. 顶点是定义3D对象边缘的连接的点.它由三个浮点值表示，每个浮点值分别代表x，y，z轴.
在下面的示例中，我们绘制了一个带有以下顶点和负号的三角形; (0.5,0.5)，( - 0.5,5.)，( - 0.5，-0.5).
注意 : 我们必须使用JavaScript数组手动存储这些顶点，并使用顶点缓冲区将它们传递给WebGL渲染管道.
在WebGL中，数值用于识别顶点.这些数值称为指数.这些索引用于在WebGL中绘制网格.
注意 : 就像顶点一样，我们使用JavaScript数组存储索引，并使用索引缓冲区将它们传递给WebGL渲染管道.
与OpenGL和JoGL不同， WebGL中没有预定义的方法来直接渲染顶点.我们必须使用JavaScript数组手动存储它们.
var vertices = [0.5,0.5 ，0.1，-0.5,0.5，-0.5]
缓冲区是WebGL的内存区域数据.有各种缓冲区，即绘图缓冲区，帧缓冲区，vetex缓冲区和索引缓冲区. 顶点缓冲区和索引缓冲区用于描述和处理模型的几何.
顶点缓冲区对象存储有关顶点，而索引缓冲区对象存储有关索引的数据.将顶点存储到数组后，我们使用这些Buffer对象将它们传递给WegGL图形管道.
帧缓冲区是保存场景数据的图形内存的一部分.此缓冲区包含详细信息，如表面的宽度和高度(以像素为单位)，每个像素的颜色，深度和模板缓冲区.
为了绘制2D或3D对象，WebGL API提供了两种方法，即 drawArrays()和 drawElements().这两个方法接受一个名为 mode 的参数，您可以使用该参数选择要绘制的对象.此字段提供的选项仅限于点，线和三角形.
要使用这两种方法绘制3D对象，我们必须使用点，线构造一个或多个基本多边形或三角形.此后，使用这些原始多边形，我们可以形成网格.
使用基本多边形绘制的3D对象称为网格. WebGL提供了几种绘制3D图形对象的方法，但用户通常更喜欢绘制网格.
在以下示例中，您可以观察我们用两个三角形和rarr绘制了一个正方形; {1,2,3}和{4,1,3}.
我们通常使用三角形来构造网格.由于WebGL使用GPU加速计算，因此有关这些三角形的信息应该从CPU传输到GPU，这需要大量的通信开销.
WebGL提供了一种减少通信开销的解决方案.由于它使用在GPU上运行的ES SL(嵌入式系统着色器语言)，我们使用着色器程序(我们使用OpenGL ES着色编写的程序)编写所有必需程序以在客户端系统上绘制图形元素语言/ GLSL ).
这些着色器是GPU的程序，用于编写着色器程序的语言是GLSL.在这些着色器中，我们精确定义顶点，变换，材质，灯光和相机如何相互作用以创建特定图像.
简而言之，它是一个实现算法的片段获取网格的像素.我们将在后面的章节中讨论有关着色器的更多信息.有两种类型的着色器和减号;顶点着色器和片段着色器.
Vertext着色器是在每个顶点上调用的程序代码.它用于将几何体(例如:三角形)从一个地方变换(移动)到另一个地方.它处理每个顶点(每顶点数据)的数据，如顶点坐标，法线，颜色和纹理坐标.
在 ES GL 代码中顶点着色器，程序员必须定义属性来处理数据.这些属性指向用JavaScript编写的顶点缓冲区对象.
可以使用顶点着色器和减号执行以下任务;
顶点变换
正常变换和标准化
纹理坐标生成
纹理坐标转换
照明
颜色材质应用
网格由多个三角形组成，每个三角形的表面称为片段.片段着色器是在每个片段的所有像素上运行的代码.它用于计算和填充单个像素上的颜色.
可以使用片段着色器和减号执行以下任务;
内插值的操作
纹理访问
纹理应用程序
雾
颜色总和
OpenGL ES SL 的完整形式是OpenGL Embedded系统着色语言.为了处理着色器程序中的数据，ES SL提供了三种类型的变量.它们如下:<
属性 : 这些变量保存顶点着色器程序的输入值.属性指向包含每顶点数据的顶点缓冲区对象.每次调用顶点着色器时，属性都指向不同顶点的VBO.
制服 : 这些变量保存顶点和片段着色器常用的输入数据，例如灯光位置，纹理坐标和颜色.
Varyings : 这些变量用于将数据从顶点着色器传递到片段着色器.
有了这么多基础知识，我们现在继续讨论图形管道.
