WebGL中的坐标系统是一个Clipspace（裁剪空间/投影坐标），Clipspace的坐标范围从-1到1，坐标中心点位于 (0,0)。注意这和显示屏幕的坐标系不同，显示屏幕的坐标原点位于窗口的左上角，且坐标值使用实际的像素单位。

着色器（Shader）

如前所述，Shader是像C一样的系统级语言，用来确定如何把3D模型绘制为显示屏幕上的像素。WebGL要求开发者为每一个对象提供着色器，但Shader可以用于多个对象，因此实际上我们只需要创建共享的Shader，传入不同的参数来绘制不同对象。顶点着色负责将对象的坐标转换为二维空间显示，片段着色负责根据输入（如颜色、纹理、照明和材料值）生成变换后的顶点每个像素的最终颜色输出。

顶点着色器最主要的变量是gl_Position，这是一个vec4类型的变量，用来表示顶点（vertex）在3D裁剪空间中的位置：(x,y,z,w)，那么为什么是vec4，而不是vec3呢，x/y/z很清楚是3D坐标，最后的w用来表示偏差属性，在大多数情况下并不被使用，我们可以暂时忽略它。

片段着色器用来处理像素着色，片段（fragment）就是一种分辨率无关的3D空间像素，其最主要的变量是gl_FragColor，也使用一个vec4类型的变量来表示：(Red,Green,Blue,Alpha)，也就是我们常用的RGBA颜色值。

这两个着色器的代码如下所示：

<script id="vert-shader" type="x-shader/x-vertex">   // 获取当前顶点位置     attribute vec3 a_position;     uniform mat4 modelViewMatrix;     uniform mat4 projectionMatrix;   void main() {    // 返回转换过的坐标    gl_Position = projectionMatrix * modelViewMatrix * vec4(a_position, 1.0);   } </script> <script id="frag-shader" type="x-shader/x-fragment">   precision mediump float;   void main() {     // 设置像素颜色     gl_FragColor = vec4(0, 1, 0, 1); // r=0%, g=100%, b=0%, a=100%, 表示绿色   } </script>

你可以看到着色器代码为C语言风格的代码，main函数是程序主入口。

我们现在需要把这两段GLSL代码加载到WebGL的着色器程序中：

function createShader(gl, source, type) {     var shader = gl.createShader(type);     source = document.getElementById(source).text;     gl.shaderSource(shader, source);     gl.compileShader(shader);     return shader; } //根据ID从DOM中获取GLSL代码并分别创建顶点着色器和片段着色器（并编译代码） var vertexShader = createShader(gl, 'vert-shader', gl.VERTEX_SHADER); var fragShader = createShader(gl, 'frag-shader', gl.FRAGMENT_SHADER); //创建着色器程序并加载着色器代码、链接并设置为正在使用状态 var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragShader); gl.linkProgram(program);  gl.useProgram(program);

记住GLSL的代码和JavaScript代码是不同的，GLSL是编译语言，需要编译（Compile）和链接（Link）后才能在GPU上执行，而JS是解释型语言，不需要编译。

绘制图形

到此，我们已经准备好了WebGL的绘制上下文、绘制对象（矩形数据）以及绘制程序（着色器），接下来只要把数据和程序通过缓存连接起来，程序从缓存中依次读取顶点数据并变换、着色，完成绘制。

function draw(gl, obj) {     // 清除背景色     gl.clearColor(0.0, 0.0, 0.0, 1.0);     gl.clear(gl.COLOR_BUFFER_BIT);     // 连接着色器参数：顶点位置和投影/模型视图矩阵     // 查找属性在顶点代码中的地方，返回一个索引，并启用该索引处的顶点属性数组     var positionLocation = gl.getAttribLocation(shaderProgram, "vertexPos");     gl.enableVertexAttribArray(positionLocation);     // 把位置属性数据和缓存绑定     gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);     // 把我们创建的变换矩阵（数组数据）赋值给着色器的uniform变量     gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);     gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);     // draw it  - drawArrays(Mode,first,count)     // 从索引0开始一直到nVerts逐个绘制顶点/图元     gl.drawArrays(obj.primtype, 0, obj.nVerts); }

这样，我们总算完成了第一个WebGL应用程序，画了一个远离我们的长方形！

靠！看起来用Canvas 2D几行代码就可以完成的任务。

不过WebGL显然不是用来画2D图形的，WebGL强大的地方在于3D渲染。

而且为了便于理解基本概念，我们并没有使用一些WebGL的JS库，如Three.js。

我们后面会介绍如何使用Three.js来简化编程，并结合一些经典案例来进行剖析，才能真正体会到WebGL惊人的能量。

本例代码，你可以自己在线试试看。