要把WebGL绘制到页面上，通常需要执行如下工作：
1.创建画布元素
2.获取呈现上下文
3.初始化视口
4.创建顶点数组
5.创建矩阵
6.加载着色器
7.绘制
创建画布元素并获取上下文
WebGL都发生在Canvas 元素的上下文中，Canvs的上下文是一个JavaScript对象，它提供了完整的WebGL API，你可以爱屏幕上创建和操作图形。
由于WebGL 规范仍在开发中，因此上下文仍处于“实验”阶段。当前，大部分浏览器都使用语法 canvas.getContext("experimental-webgl") 来获取 WebGLRenderingContext。
//从Canvas中获取上下文
function initWebGL(canvas) {
var gl;
try {
gl = canvas.getContext("experimental-webgl") || canvas.getContext("webgl");
} catch (e) {
//Fail quietly
}
return gl;
}
初始化视口
获得Canvas的上下文后，我们就可以设置在哪块区域绘制WebGL了。在WebGL中，这被称为视口(viewport)。
//将WebGL的视口设置为整个画布的大小
function initViewport(gl, canvas) {
gl.viewport(0, 0, canvas.width, canvas.height);
}
创建顶点数组
WebGL的绘制由图元(primitive)组成。图元的数据数组称为Buffer，它定义了顶点的位置。
下面的代码展示了如何创建一个大小为1x1的正方形的顶点数据。返回的JavaSript对象存储了顶点数据信息、数组中每个顶点所占的尺寸(在这个实例中包含三个浮点数来存储x、y、z的值)、需要绘制的顶点的数据，以及用于绘制正方形的图元的类型。
顶点数组是 Float32Array 类型的类型化数组。 这是一种为了WebGL专门引入的新数据类型。它相比传统数组速度更快并且占用更少的内存。
//创建用于绘制正方形的定点数据
function createSquare(gl) {
var vertexBuffer;
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var verts = [
.5, .5, 0.0,
-.5, .5, 0.0,
.5, -.5, 0.0,
-.5, -.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
return square;
}
创建矩阵
在绘制正方形之前，我们需要先建立两个矩阵。首先我们需要一个矩阵来定义正方形在3D坐标系中相对于摄像机的位置，这个矩阵也被称为模型视图矩阵(modelview matrix)。
第二个矩阵是投影矩阵(projection matrix)，这个矩阵将被用于在着色器中将摄像机空间中的模型的3D坐标转换为绘制的视口的2D坐标。
function initMatrices(){
// 正方形的变换矩阵——相对与相机沿着z轴稍微后移一些
modelViewMatrix = new Float32Array(
[1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, -3.333, 1]);
// 变换矩阵*45度视野(
projectionMatrix = new Float32Array(
[2.41421, 0, 0, 0,
0, 2.41421, 0, 0,
0, 0, -1.002002, -1,
0, 0, -0.2002002, 0]);
}
着色器
着色器由两部分组成：顶点着色器(vertex shader)和片元着色器(fragment shader)。顶点着色器负责将模型的坐标转换带2D视口，片元着色器负责将元素输出到转换后的顶点像素。
因为篇幅有限，我们在这里只展示部分代码：
var vertexShaderSource =
" attribute vec3 vertexPos;\n" +
" uniform mat4 modelViewMatrix;\n" +
" uniform mat4 projectionMatrix;\n" +
" void main(void) {\n" +
" // 返回变换并投影后的顶点数据\n" +
" gl_Position = projectionMatrix * modelViewMatrix * \n" +
" vec4(vertexPos, 1.0);\n" +
" }\n";
var fragmentShaderSource =
" void main(void) {\n" +
" // 返回像素颜色，永远输出白色\n" +
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
"}\n";
绘制图元
现在我们开始真正绘制正方形。首先清理画布并设置黑色为背景色。然后将顶点数组绑定到上下文中，使用着色器，并把定点数组和矩阵作为输入传递给着色器。最后调用WebGL的drawArrays() 方法来绘制正方形。
function draw(gl, obj) {
// 用黑色清空背景
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 设置顶点数组
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
// 设置着色器
gl.useProgram(shaderProgram);
// 设置着色器参数：顶点坐标、投影矩阵和模型试图矩阵
gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
// 绘制物体
gl.drawArrays(obj.primtype, 0, obj.nVerts);
}
