動態更新——緩衝區物件

昨天學習瞭如果初始化著色器，費了半天勁，並且褲子都脫了，才繪製出一個點，還是個靜止的點。我們前端要做就做互動，不能動態的互動的東西，恕我直言，都是辣雞...好了不開玩笑了，開始讓WebGL動起來了吧...動詞大詞...

無論什麼方法，第一步都是獲取 GLSL 中定義的變數的位置，方法就是從程式物件那裡取得

var programObj = gl.createProgram();
... gl.linkProgram() & gl.useProgram();

var aVertexPosition = gl.getAttribLocation( programObj  ,'aVertexPosition');

這樣就可以獲取到 aVertexPosition 這個變數的位置了，然後可以利用這個變數位置操作 GLSL 中的變數了

方法一：

 gl.vertexAttrib3f(aVertexPosition, x, y , 0.0);

這種方法每次只能改變一個變數，如果想要畫多個點就要改變一次 gl.drawArrays() 一次，並且我發現，凡是回撥的呼叫 gl.drawArrays 整個的canvas都會重新整理，不知道為什麼，如果想要畫非常複雜的 3D 圖形怎麼辦呢，這種方法肯定不行，這就要用到緩衝區物件了，利用 Javascript 中的型別陣列可以一次傳入大量資料給緩衝區，然後再進行圖形繪製

方法二：流程如圖

當然流程稍微複雜，與著色器初始化那種環環相扣不一樣，這個流程中很多呼叫看起來並沒有什麼關係，那麼WebGL在開始渲染圖形前到底做了些什麼？暫時還不是很瞭解，不過這樣就可以簡化複雜資料的傳入，而且還可以用同一個型別陣列傳入多種資料。

後面很多都要用到緩衝區物件。