WebGL 探秘 (F)

网格（Mesh）、多边形

我们用过 3dMax 和 Maya 所以对 Mesh 已经有点理解，在 3D 软件中都提供了 mesh 功能，mesh 是一种绘制 3D 图形的方式。网格（mesh）是由一个或多个多边形拼接而成，定义这些多边形的顶点（vertice)的位置包括 x,y,z

变换与矩阵

Html5 与 WegGL 编程

再来一个简单的 WebGL 示例

创建一个 Canvas

<body>
    <canvas id="webgl-container" width="512" height="512">
        您的浏览器还不支持 Canvas
    </canvas>
</body>

获取 canvas 的绘图上下文

const myCanvas = document.getElementById("webgl-container")

function initWebGL(container){
    let gl = null;
    const msg = "您的浏览器还不支持 WebGL";

    gl = container.getContext("webgl")

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

    return gl;
}

const gl = initWebGL(myCanvas);

初始化窗口，确定我们 webgl 在 canvas 的位置

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

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

function createSquare(gl){
    let 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);
    let square = {
        butter:vertexBuffer,
        vertSize:3,
        nVerts:4,
        primtype:gl.TRIANGLE_STRIP
    };

    return square;
}

这里有几个概念需要在这里解释一些，可能这些概念在我们 web 前段听起来有点陌生。

图元所谓图元就是指不同类型的几何图形
gl.POINT
gl.LINES
gl.TRIANGLES
...
缓冲（Butter）图元以数组形式存储数据就是缓冲

let verts = [
        .5,.5,0.0,
        -.5,.5,0.0,
        .5,-.5,0.0,
        -.5,-.5,0.0,
    ];

这里的 verts 就是 gl.TRIANGLE_STRIP 类型的图元，其他图元可能根据名字很好理解对于 triangle_strip 这个（三角带）给大家解释一下吧。首先这个应该是由两个三角形组成，前三个点(x,y,z)表示一个三角形，最后一个点和这个定义好的三角形共用两个顶点。

矩阵分别创建

模型-视图矩阵
用于定义正方形在 3D 坐标系（相对于摄像机的的位置）的位置。�
投影矩阵

function initMatrices(container){
    //创建一个模型视图的矩阵
    modelViewMatrix = mat4.create();
    mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -3.333]);

    //创建 45 度角视野的投影矩形
    projectionMatrix = math4.create();
    mat4.perspective(projectionMatrix, Math.PI / 4, 
        container.width / container.height, 1, 10000);
}

WebGL 探秘 (F)

网格（Mesh）、多边形

变换与矩阵

推荐阅读更多精彩内容