《webgl程式設計指南》的第三章用了兩天看完，現將看完之後的總結和心得寫下來！
一、繪製多個點
webgl提供了
緩衝區物件（buffer object），可以一次性的向緩衝區內傳入多個頂點資料。例如下面在同時繪製三個點的時候，就用到了緩衝區物件。
function main()
function initvertexbuffers(gl)
var vertexbuffer = gl.createbuffer();
gl.bindbuffer(gl.array_buffer, vertexbuffer);//將緩衝區繫結到目標
gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);//向緩衝區物件中寫入資料
gl.vertexattribpointer(points, 2, gl.float, false, 0, 0);//將緩衝區物件分配給points變數
gl.enablevertexattribarray(points);//連線points變數與分配給他的緩衝區物件
緩衝區物件是webgl系統中的儲存區，在儲存區中儲存著想要使用的頂點資料。使用緩衝區的句提步驟如下：
建立緩衝區》繫結緩衝區物件》將資料寫入緩衝區》將緩衝區物件分配給乙個attribute變數》啟用attribute變數。
一、移動、旋轉、縮放
為了將目標移動，只需要在頂點著色器中為頂點座標的每個分量都加上需要移動的數值即可。
首先在頂點著色器中新增相應**：
'uniform vec4 u_translation;\n' +
'void main() \n';//頂點著色器中進行計算與賦值
//將旋轉需要的資料傳遞給頂點著色器
var radian = math.pi * angle / 180.0; // convert to radians
var cosb = math.cos(radian);
var sinb = math.sin(radian);
var u_cosb = gl.getuniformlocation(gl.program, 'u_cosb');
var u_sinb = gl.getuniformlocation(gl.program, 'u_sinb');
if (!u_cosb || !u_sinb)
gl.uniform1f(u_cosb, cosb);
gl.uniform1f(u_sinb, sinb);
WebGL 繪製和變換
1.使用緩衝區物件向頂點著色器傳入多個頂點的資料，需要遵循以下五個步驟 1.1 建立緩衝區物件 gl.createbuffer 1.2 繫結緩衝區物件 gl.bindbuffer 1.3 將資料寫入緩衝區物件 gl.bufferdata 1.4 將緩衝區物件分配給乙個attribute變數 gl.v...
WebGL程式設計指南案例解析之繪製乙個點
webgl width 400 height 400 後續的本系列部落格頁都將基於這個頁面進行開發，只是替換了案例相關 部分的js檔案。首先讓我們來看webgl1.js 第一章.繪製乙個點，通過頂點著色器和片元著色器傳參 頂點著色器，接收attribute型變數a position var vsha...
00 《WebGL程式設計指南》解讀2 1繪製2D矩形
演示效果如下 講解 please use a browser that supports canvas 在html中的body中定義了canvas標籤中載入的函式為main 使用onload標籤定義。其中canvas是html5標籤，並不是所有的瀏覽器都支援，倘若不支援將會輸出please use ...