WebGL 探祕 (F)
摘要：
網格（Mesh）、多邊形
我們用過 3dMax 和 Maya 所以對 Mesh 已經有點理解， 在 3D 軟體中都提供了 mesh 功能，mesh 是一種繪製 3D 圖形的方式。 網格（mesh）是由一個或多個多邊形拼接而成，定義這些多邊形的頂點（vertice)的位置...
網格（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);
}