WebGL 探祕 (3)

摘要： 這裡對程式進行，之所以為什麼這樣校驗個人暫時也不太懂，只是 copy，估計應該便於我們開發人員進行除錯吧。 gl.validateProgram(shaderProgram) if(!gl.getProgramParameter(shaderProgram,gl.VALIDATE_STAT...

這裡對程式進行，之所以為什麼這樣校驗個人暫時也不太懂，只是 copy，估計應該便於我們開發人員進行除錯吧。

gl.validateProgram(shaderProgram)
if(!gl.getProgramParameter(shaderProgram,gl.VALIDATE_STATUS)){
console.log("ERROR validating program ",gl.getProgramInfoLog(shaderProgram))
}

這裡我們定義三角形的頂點座標，我們回到看一下 attribute vec2 vertPosition; 所以我們的頂點座標是二維的，所以每兩個點定義一個座標，然後這些座標組成一個數組用來表示三角形，具體這裡數值怎麼來的，為什麼是這個數值。隨後分享

const triangleVertices = [
0.0,0.5,
-0.5,-0.5,
0.5,-0.5
];

1. 首先為三角形建立一個位置的 buffer
2. 然後為 buffer 指定型別
3. 然後將我們三角形的頂點座標給定buffer型別

• 這裡有一點值得注意就是 javascript 的 triangleVertices 型別為 float64 而 webgl 需要 float32 所以我們需要轉一下型

var triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(triangleVertices),
gl.STATIC_DRAW);

這裡我們定義屬性這是需要傳入 shader 進行計算的我們定義本地資料 vertPosition

var positionAttribLocation = gl.getAttribLocation(shaderProgram,'vertPosition')

vertexAttribPointer 這個函式接受 5 引數

• numComponents 表示我們座標數這裡是 2
• normalize 理解他需要一定做 3d 基礎他是我們繪製面的法線，也就是垂直我們面的一條線
• stride 這裡 2 * 4
• offset 表示陣列中偏移量

const numComponents = 2;
const type = gl.FLOAT;
const normalize = gl.FALSE;
const stride = 2 * Float32Array.BYTES_PER_ELEMENT;
const offset = 0;

gl.vertexAttribPointer(
positionAttribLocation,
numComponents,
type,
normalize,
stride,
offset);

drawArrays 多半時候我們都是在繪製三角形，三角形是我們做動畫的基礎，有時候也會繪製點和線

gl.enableVertexAttribArray(
positionAttribLocation);
 gl.useProgram(shaderProgram)
gl.drawArrays(gl.TRIANGLES,0,3)