HTML5 WEBGL学习2 实时3D渲染

本系列学习资源来自《HTML5 与WebGL编程》 中国工信出版集团 人民邮电出版社

中文教程地址：
http://www.hiwebgl.com/?p=42
项目开源地址：
https://github.com/tparisi/Programming3DApplications

WEB GL不属于HTML5官方标准，但绝大多数支持HTML5的浏览器都支持WebGL。

• WebGL是一套底层绘图API，它通过解析数据和着色器阵列来进行绘制。
• WebGL基于OpenGL Es2.0，ES代表嵌入式系统。
• WebGL可以与其它Web页面元素相结合。
• WebGL为创建动态Web应用而生
• WebGL是跨平台的
• WebGL是免费的。

WebGL应用剖析

为了在页面中渲染WebGL，一个应用至少应当执行以下步骤：

1. 创建一个Canvas元素
2. 获取Canvas元素中的绘图上下文
3. 初始化视口
4. 创建一个或多个包含待渲染数据（通常是顶点数据）的缓冲
5. 创建一个或多个定义顶点缓冲到屏幕空间转换规则的矩阵
6. 创建一个或多个实现绘制算法的着色器
7. 使用各项参数初始化着色器
8. 绘制

简单的WebGL示例

1. 从Canvas获得WebGL上下文

    function initWebGL(canvas) {
        var gl = null;
        var msg = "Your browser does not support WebGL, " +
            "or it is not enabled by default.";
        try 
        {
            gl = canvas.getContext("experimental-webgl");
        } 
        catch (e)
        {
            msg = "Error creating WebGL Context!: " + e.toString();
        }

        if (!gl)
        {
            alert(msg);
            throw new Error(msg);
        }
        return gl;        
     }

2. 视口

    function initViewport(gl, canvas)
    {
        gl.viewport(0, 0, canvas.width, canvas.height);
    }

3. 缓冲、缓冲数组和类型化数组

WebGL基于图元（primitive）进行图像绘制。图元以数组的形式存储数据，这个数组被称为缓冲（buffer），待绘制的顶点数据在缓冲中被定义。
创建一个1*1正方形顶点缓冲：

    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;
    }

Float32Array，是一种浏览器专门为WebGL引入的新数据类型。Float32Array是一类缓冲数组（ArrayBuffer），也称为类型化数组（typed array）。它是一种以二进制方式存储的JavaScript类型。

4. 矩阵

在绘制正方形前，首先要创建一对矩阵。一个矩阵用于定义正方形在3D坐标系统中的位置（相对于相机），这个矩阵被称为模型-视图矩阵，因为它同时包含模型矩阵和视图矩阵的信息。
第二个矩阵被称为投影矩阵，着色器使用它来执行从3D空间坐标到2D视口绘制空间坐标的转换。

    var projectionMatrix, modelViewMatrix;
    function initMatrices(canvas)
    {
        // Create a model view matrix with object at 0, 0, -3.333
        modelViewMatrix = mat4.create();
        mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3.333]);
        // Create a project matrix with 45 degree field of view
        projectionMatrix = mat4.create();
        mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 1, 10000);
    }

5. 着色器

着色器是一段使用GLSL编写的简短程序。

    function createShader(gl, str, type) {
        var shader;
        if (type == "fragment") {
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (type == "vertex") {
            shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
            return null;
        }
        gl.shaderSource(shader, str);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert(gl.getShaderInfoLog(shader));
            return null;
        }
        return shader;
    }

着色器代码以JavaScript字符串的形式定义，存储在全局变量中。

    var vertexShaderSource =

        "    attribute vec3 vertexPos;\n" +
        "    uniform mat4 modelViewMatrix;\n" +
        "    uniform mat4 projectionMatrix;\n" +
        "    void main(void) {\n" +
        "       // Return the transformed and projected vertex value\n" +
        "        gl_Position = projectionMatrix * modelViewMatrix * \n" +
        "            vec4(vertexPos, 1.0);\n" +
        "    }\n";
    var fragmentShaderSource = 
        "    void main(void) {\n" +
        "    // Return the pixel color: always output white\n" +
        "    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n" +
        "}\n";

当着色器的各个部分被编译完成，需要调用WebGL中的gl.createProgram() gl.attachShader()以及gl.linkProgram()方法将它们链接到同一段程序中。随便需要调用 gl.getAttribLocation()和gl.getUniformLocation()函数获取GLSL程序中定义的各个变量的句柄，从而可以用JavaScript 定义的数值来初始化这些变量。

6. 绘制图元

   function draw(gl, obj) {
       // clear the background (with black)
       gl.clearColor(0.0, 0.0, 0.0, 1.0);
       gl.clear(gl.COLOR_BUFFER_BIT);
       // set the shader to use
       gl.useProgram(shaderProgram);
       // connect up the shader parameters: vertex position and projection/model matrices
       // set the vertex buffer to be drawn
       gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
       gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
       gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
       gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
       // draw the object
       gl.drawArrays(obj.primtype, 0, obj.nVerts);
    }

完整源代码可以在
https://github.com/tparisi/Programming3DApplications
看到。