效果：
>webgl 利用緩衝區物件畫多個點
title
>
6head
>
7<
body
>89
<
canvas
id="mycanvas"
width
="500"
height
="300"
style
='border:1px
solid red'
>
canvas
>
1011
body
>
1213
14<
script
>
1516
window.onload
=function
() ";49
50//
片段著色器
51var
fragcode ="
void main() ";
5455
建立乙個頂點著色器物件、乙個片段著色器物件
56var
vertshader
=gl.createshader(gl.vertex_shader);
57var
fragshader
=gl.createshader(gl.fragment_shader);
5859
為兩個著色器附加源**
60gl.shadersource(vertshader, vertcode);
61gl.shadersource(fragshader, fragcode);
6263
編譯著色器
64gl.compileshader(vertshader);
65gl.compileshader(fragshader);
6667
建立要儲存的著色器程式物件
68var
shaderprogram
=gl.createprogram();
6970
為著色器程式附加著色器
71gl.attachshader(shaderprogram, vertshader);
72gl.attachshader(shaderprogram, fragshader);
7374
鏈結兩個著色器
75gl.linkprogram(shaderprogram);
7677
使用組合著色器程式物件
78gl.useprogram(shaderprogram);
7980
8182
//步驟四： 關聯著色器程式到緩衝物件
83//
4.1 繫結緩衝區物件
84//
gl.bindbuffer(gl.array_buffer, vertex_buffer);
8586
獲取屬性(定點的座標點)
87var
coord
=gl.getattriblocation(shaderprogram,
"coordinates");
8889
將緩衝區物件分配給coord變數
90//
這裡是設定獲取資料的規則 第二個引數3 表示每個點定點有3個資料（對應vec3）
91gl.vertexattribpointer(coord,
3, gl.float,
false, 0
, 0);92
93//
4.4 啟用屬性
94gl.enablevertexattribarray(coord);
9596
97//
步驟五： 繪製所需的物件
98//
清除畫布顏色
99gl.clearcolor(
0.5,
0.5,
0.5,
0.9);
100101
//啟用深度測試
102gl.enable(gl.depth_test);
103104
//清除顏色緩衝位
105gl.clear(gl.color_buffer_bit);
106107
//設定檢視視窗
108gl.viewport(0,
0,mycanvas.width,mycanvas.height);
109110
//畫 三角形
111gl.drawarrays(gl.points, 0,
3)112113
114}
115116
script
>
117118
html
>
WebGL學習系列 使用緩衝區物件畫多個點
一般而言，我們需要繪製的點的數量非常的多，所以不可能像第乙個程式一樣乙個點乙個點繪製，webgl提供了緩衝區物件，用於處理繪製多個點的資料問題。座標系為了更好的理解點的位置，我們需要知道canvas以及webgl的座標系。canvas座標系如下所示 webgl座標系如下所示 可以看到，webgl的座...
WebGL學習 緩衝區物件（四）
緩衝區物件 webgl提供的一種機制，可以一次性向著色器傳入多個頂點資料，我們可以一次性向緩衝器物件中填充大量的頂點資料，然後將這些資料儲存起來，供頂點著色器使用。初始化過程 建立緩衝器物件 gl.createbuffer 繫結緩衝器物件 gl.bindbuffer gl.array buffer,...
WebGL之旅（二十）幀緩衝區物件FBO
前面都是將作為繪製圖形時的紋理對映，這一節來看看如何將渲染結果作為紋理，即動態生成紋理，貼在另乙個物體上。預設情況下，都是在螢幕提供幀緩衝區中繪製，如果要動態生成紋理，就需要另外新建乙個緩衝區物件，來代替預設的緩衝區，在其中進行離屏繪製。幀緩衝區物件包括 顏色關聯物件 可以是紋理物件或渲染緩衝區物件...