WebGL入門教程(四)-webgl顏色

標籤：bar   參數   draw   浮點   類型   fail   attr   ons   buffers   

前面文章：WebGL入門教程(一)-初識webglWebGL入門教程(二)-webgl繪製三角形WebGL入門教程(三)-webgl動畫

顏色：

 

操作步驟：

  1.建立HTML5 canvas

  2.擷取畫布 canvas 的 ID

  3.擷取WebGL

  4.編譯著色器

  5.使用緩衝區對象向頂點傳入多個頂點資料

  6.繪製映像

以上1~3參考：http://www.cnblogs.com/bsman/p/6128447.html

4.編譯著色器

改頂點著色器，片著色器

//頂點著色器程式    var VSHADER_SOURCE =        "attribute vec4 a_Position;" +        "attribute vec4 a_Color;" +        "varying vec4 v_Color;" +        "void main(){" +        "gl_Position = a_Position;" +        "v_Color = a_Color;" +         "}";    //片元著色器    var FSHADER_SOURCE =        "precision mediump float;" +        "varying vec4 v_Color;" +         "void main() {" +         "gl_FragColor = v_Color;" +         "}";

解釋：定義修改顏色的變數 varying,其中"v_Color = a_Color;" 表示將顏色資料傳給片元著色器；"gl_FragColor = v_Color;"表示從頂點著色器接收資料；

 5.使用緩衝區對象向頂點傳入多個頂點資料

function initBuffers(gl,shaderProgram) {  //頂點座標和顏色    var vertices = new Float32Array([        0.0, 0.5, 1.0, 0.0, 0.0,       -0.5, -0.5, 0.0, 1.0, 0.0,        0.5, -0.5, 0.0, 0.0, 1.0,    ]);    var n = 3;//點的個數    //建立緩衝區對象    var vertexBuffer = gl.createBuffer();    //將緩衝區對象綁定到目標    gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);    //向緩衝區寫入資料    gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);    //擷取單個位元組    var FSIZE = vertices.BYTES_PER_ELEMENT;    //擷取座標點    var a_Position = gl.getAttribLocation(shaderProgram, ‘a_Position‘);    //將緩衝區對象分配給a_Position變數    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);    //串連a_Position變數與分配給它的緩衝區對象    gl.enableVertexAttribArray(a_Position);    //擷取Color座標點    var a_Color = gl.getAttribLocation(shaderProgram, ‘a_Color‘);    //將緩衝區對象分配給a_Position變數    gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);    //串連a_Position變數與分配給它的緩衝區對象    gl.enableVertexAttribArray(a_Color);    return n;}

其中 vertexAttribPointer 方法注意此時數組中有多種資料，有座標和顏色，此時就應該修改第五個（跨度）和第六個參數（位移）的值

第一個參數：指定待分配attribute變數的儲存位置

第二個參數：指定緩衝區中每個頂點的分量個數（1~4）

第三個參數：類型有，gl.UNSIGNED_BYTE無符號位元組，gl.SHORT短整數，gl.UNSIGNED_SHORT無符號短整數，gl.INT整型，gl.UNSIGNED_INT無符號整型，gl.FLOAT浮點型。

第四個參數：表示是否將非浮點型的資料歸到[0,1][-1,1]區間

第五個參數：相鄰兩個頂點的位元組數。預設為0

第六個參數：表示緩衝區對象的位移量（以位元組為單位），就是attribute變數從緩衝區中的何處開始儲存。

6.繪製映像

 var n = initBuffers(gl,shaderProgram);    if(n<0){        console.log(‘Failed to set the positions‘);        return;    }    // 清除指定<畫布>的顏色    gl.clearColor(0.0, 0.0, 0.0, 1.0);    // 清空 <canvas>    gl.clear(gl.COLOR_BUFFER_BIT);    gl.drawArrays(gl.TRIANGLES, 0, n);

 

WebGL入門教程(四)-webgl顏色