【筆記】《WebGL編程指南》學習-第3章繪製和變換三角形(2-你好三角形）)

目標：

• 繪製一個簡單的二維圖形：三角形
• 利用三角形畫一個矩形

結果：

---

HelloTriangle.js

//頂點着色器程序
var VSHADER_SOURCE =
    'attribute vec4 a_Position;'+
    'void main(){'+
    'gl_Position=a_Position;'+
    '}';

//片元着色器程序
var FSHADER_SOURCE=
    'void main(){'+
    'gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
    '}';

function main() {
    //獲取canvas元素
    var canvas = document.getElementById("webgl");
    if(!canvas){
        console.log("Failed to retrieve the <canvas> element");
        return;
    }

    //獲取WebGL繪圖上下文
    var gl = getWebGLContext(canvas);
    if(!gl){
        console.log("Failed to get the rendering context for WebGL");
        return;
    }

    //初始化着色器
    if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
        console.log("Failed to initialize shaders.");
        return;
    }

    //設置頂點位置
    var n = initVertexBuffers(gl);
    if (n < 0) {
        console.log('Failed to set the positions of the vertices');
        return;
    }


    //指定清空<canvas>顏色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空<canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    //繪製三個點
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0.0, 0.5, -0.5, -0.5, 0.5, -0.5
    ]);
    var n=3; //點的個數

    //創建緩衝區對象
    var vertexBuffer = gl.createBuffer();
    if(!vertexBuffer){
        console.log("Failed to create thie buffer object");
        return -1;
    }

    //將緩衝區對象保存到目標上
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    //向緩存對象寫入數據
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if(a_Position < 0){
        console.log("Failed to get the storage location of a_Position");
        return -1;
    }

    //將緩衝區對象分配給a_Postion變量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    //連接a_Postion變量與分配給它的緩衝區對象
    gl.enableVertexAttribArray(a_Position);

    return n;
}

與上一節的 MultiPoint.js 相比，兩處關鍵的改動在於：

• 在頂點着色器中，指定點的尺寸的一行 gl_pointSize = 10.0; 被刪去了。該語句只有在繪製單個點的時候才起作用。
• gl.drawArray(）方法的第1個參數從 gl.POINTS 被改爲了 gl.TRIANGLES。

gl.drawArray(）的第1個參數 mode 十分強大。在這個參數上指定不同的值，我們可以按照不同的規則繪製圖形。下面詳細瞭解一下。

---

基本圖形

將gl.drawArrays(）方法的第1個參數 mode 改爲 gl.TRAINGLES，就相當於告訴WebGL，“從緩衝區的第1個頂點開始，使頂點着色器執行3次，用這3個點繪製出一個三角形”：

這樣，緩衝區的3個點就不再是相互獨立的，而是同一個三角形中的3個頂點。

WebGL 方法 gl.drawArray(）即強大又靈活，通過給第1個參數指定不同的值，我們就能以7種不同的方式來繪製圖形。下表對此進行了詳細介紹，其中 v0，v1，v2等等表示緩衝區中的頂點，頂點的順序將影響繪製的結果。

如圖所示，WebGL 只能繪製三種圖形：點、線段和三角形。但是，從球體到立方體，再到遊戲中的三維角色，都可以由小的三角形組成。實際上，你可以用以上這些最基本的圖形來繪製出任何東西。

---

運行下結果：

---

Hello Rectangle

讓我們使用這個最基本的方法來試着繪製一個矩形。

下圖顯示了矩形的頂點。當然，頂點的個數爲4，因爲這是一個矩形。如上一節所述，WebGL不能直接繪製矩形，你需要將其劃分爲兩個三角形（v0，v1，v2）和（v2，v1，v3），然後通過 gl.TRIANGLE、gl.TRIANGLE_STRIP或者gl.TRIANGLE_FAN 將其繪製出來。本例使用 gl.TRIANGLE_STRIP 進行繪製，只需要用到4個頂點。如果用 gl.TRIANGLES，就要用到6個。

運行一下：