好了，GPU开始从顶点缓冲中读取顶点信息，并在顶点着色器（Vertex Shader）中处理这些信息。顶点着色器是一个程序，用于读取顶点属性，并输出一个新的属性集合。顶点着色器最基本的功能是计算顶点在屏幕空间中的位置。但它也会为每个顶点生成其他属性，比如颜色或纹理坐标。你可以编写代码自定义顶点着色器，也可以使用第三方图形库提供的顶点着色器。

然后，GPU会连接这些顶点来形成三角形。这里就用到了顶点索引数组，GPU会根据顶点索引的描述，将这些顶点按照指定顺序每3个分成一组，形成一个三角形。

然后光栅器（Rasterizer）会作用于每个三角形，切出这些三角形并忽略形状之外的其他部分，然后将当前剩余的可见部分打碎，填充到像素大小的片元（Fragment）中。对于其他顶点属性（比如颜色和纹理），顶点着色器会在光栅化之后的三角形表面上，为一个顶点和另一个顶点之间的部分做线性插值，为每一个片元（也就是像素）产生一个平滑的渐变值。举例来说，如果顶点着色器为每个顶点分配了一个颜色值，那么光栅器将会混合这些颜色，并在像素化的表面生成一个新的合适的渐变色。关于本段内容更详细的讲解，请参考我们教程的第2课。

这些生成的像素大小的片元之后会被传递到片元着色器（Fragment Shader）中。片元着色器将会输出每个像素的颜色和深度值，用于在帧缓冲（Frame Buffer）中进行绘制。通常情况下，片元着色器的操作包括纹理映射和光照。因为片元着色器会为每个像素进行独立绘制，这就可以实现很多相当复杂的特殊效果；但也正是因为这样，片元着色器也成为图形管线中和性能最为相关的部分。和顶点着色器一样，你可以编写代码自定义片元着色器，也可以使用第三方图形库提供的片元着色器。

最后，帧缓冲（Frame Buffer）是渲染输出的最终目的地。帧缓冲是一个2D图像，但又不仅仅是一个2D图像这么简单。除了一个或多个颜色缓冲区之外，帧缓冲还包含深度缓冲区（Depth Buffer）和/或模板缓冲区（Stencil Buffer），这两个都是在最终绘制到帧缓冲之前可选的过滤片元的方式，深度检测会忽略被前面已经绘制的物体挡住的后面的物体，模板检测会使用模板缓冲区中绘制的形状约束帧缓冲中的可绘制区域，将渲染工作“模板化”。经过这两层过滤之后依然幸存的片元，它们的颜色值会与在它们覆盖之下的颜色值进行α混合。最终的颜色值、深度值、模板值会写入相应的缓冲区。帧缓冲的输出结果也可以用作纹理输入到其他渲染中去（即渲染到纹理，可以参考教程第16课）。

首先你需要有一个支持WebGL的浏览器。然后，你可以在你喜欢的JavaScript开发环境中编写代码。

要学习WebGL，最好有编写JavaScript、OpenGL或OpenGL ES的经验和基础，还需要少量的HTML5知识。如果你是一个网络前端工程师，那可能你的JavaScript经验已经很充足了，但是却没有接触过计算机图形学，那也没有关系，实际上你可以越过OpenGL和OpenGL ES，直接从WebGL切入，作为你学习计算机图形学的开始。

教程方面推荐Giles编写的WebGL教程，我们的网站上有这一教程的指定中文版本，这一教程的大部分课程都是从大名鼎鼎的Nehe的OpenGL教程改编的，从浅入深，相当的通俗易懂。如果学习过程中有什么疑问，可以加入我们的QQ群提问，也可以在有问必答栏目发帖提问。

如果不是出于学习目的，而是要开发一个正式的商用项目，那么我们建议你在了解了WebGL的工作原理和其他计算机图形学的知识之后，使用第三方图形库进行开发。如果你阅读了上面的章节之后，你会发现直接使用原生的WebGL API开发项目会非常非常非常让人头疼。不像其他的web API，原生的WebGL是非常低等级的。WebGL标准的开发者这么做的目的是为了保证WebGL充分的灵活性和适用于所有应用的可用性，同时希望第三方图形库的开发者在这之后可以为WebGL添加一个简单便捷开发层。

目前有很多WebGL的第三方图形库，其中大多都是基于WebGL来迅速创建3D环境中的元素的，这些元素包括场景、相机、光源、环境光、内置的几何体形状、材质、纹理和雾化以及粒子效果。每个图形库都提供了差不多的元素类型，但可用性如何依赖于不同图形库的本身的开发质量。另外因为WebGL可以互动，所以很多图形库也封装了处理交互事件的接口。最后，很多图形库都提供了一些成型的顶点着色器和片元着色器代码。这么说很难说清楚，当你开始试着用一下各种图形库的时候，你就会发现使用图形库而不是原生WebGL AP的便捷性了。

你可以在WebGL Public Wiki的User Contributions页面上找到一个列有大部分图形库的清单。