網格（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);
}