网格（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);
}
网友评论