使用緩衝區物件向頂點著色器傳入多個點

 1  // 頂點著色器，設定座標和設定尺寸。
 2         var
 
 VSHADER_SOURCE =
 3             `
 4     attribute vec4 a_Position;
 5     attribute float a_PointSize;
 6     void main(){
 7       gl_Position=a_Position;
 8       gl_PointSize=a_PointSize;
 9     }
10     `
11 
12         //片元著色器
13         var FSHADER_SOURCE =
14             `
15     void main(){
 
16         gl_FragColor=vec4(1.0,0.0,0.0,1.0);
17       }
18     `
19 
20         function main() {
21             var canvas = document.getElementById('webgl');
22             var gl = getWebGLContext(canvas);
23             if (!gl) {
24                 return;
25             }
26             //初始化著色器
27             if
 
 (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
28                 return;
29             }
30 
31             //必須初始化著色器後， 獲取attribute變數的儲存位置 getAttribLocation(program,name);
32             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
33 
34             // 獲取大小的儲存位置
35             var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
36 
37             if (a_Position < 0) {
38                 console.log('a_Position0');
39                 return;
40             }
41             // // 將頂點位置傳輸給attribute
42             // gl.vertexAttrib3f(a_Position,0.0,0.0,.0,0);
43 
44             gl.vertexAttrib1f(a_PointSize, 20.0);
45 
46             // 設定頂點位置，並返回數量
47             var n = initVertextBuffers(gl);
48             //設定背景色
49             gl.clearColor(0.0, 0.0, 0.0, 1.0);
50             // 清空canvas
51             gl.clear(gl.COLOR_BUFFER_BIT);
52 
53             // 繪製一個點 從第一個頂點繪製3個點
54             gl.drawArrays(gl.POINTS, 0, n);
55 
56         }
57         main();
58 
59         function initVertextBuffers(gl) {
60             // Float32Array 型別化陣列執行起來效率更快。 webGL型別化陣列與普通陣列不同，不支援pop，push方法。
61             var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
62             var n = 3;//點的個數
63             //建立緩衝區物件
64             var vertexBuffer = gl.createBuffer();
65             if (!vertexBuffer) {
66                 console.log('Failed to create the buffer object');
67                 return -1;
68             }
69 
70             // 將緩衝區物件繫結到目標
71             gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
72             // 向緩衝區寫入資料(只能寫在目標)
73             gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
74             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
75 
76             // 將緩衝區物件分配給a_Position變數
77             gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
78 
79             // 連線a_Position變數與分配給它的緩衝區物件
80             gl.enableVertexAttribArray(a_Position);
81             return n;
82         }