標籤：

WebGL基礎函數筆記（使用WebGL系統+緩衝區應用）

03-10

WebGL基礎函數庫下載：

鏈接：pan.baidu.com/s/1LFA89_

密碼：cmq3

資料參考：《WebGL編程指南》

1. getWebGLContext(element, [, debug])

(1) 獲取WebGL繪圖上下文，如果開啟了debug屬性，遇到錯誤時將在控制台顯示錯誤信息。

(2) Element：指定<canvas>元素

(3) Debug：默認為false，設置為true的話則開啟錯誤列印。

(4) 返回值：non-null：返回了WebGL繪圖上下文（也叫繪圖環境）；null：表示WebGL不可用

例：

var canvas = document.getElementById(『canvasid』);

var gl = getWebGLContext(canvas);

2. gl.clearColor(red, green, blue, alpha)

(1) 設置指定繪圖區域的背景色，這是在清空繪圖區的必需條件（可以理解為填充背景的意思）。以RGBA格式設置背景色。

(2) Red：指定紅色值（0.0-1.0），越高顏色越亮

(3) Green：指定綠色值（0.0-1.0），越高顏色越亮

(4) Blue：指定藍色值（0.0-1.0），越高顏色越亮

(5) Alpha：指定透明度值（0.0-1.0），越高越不透明

(6) 無返回值。如需獲取錯誤信息在第1個函數中開啟錯誤提示。

(7) 一旦設置了背景色後該背景色就會儲存在WebGL系統中，在之後無需重複指定；如需改變則再次設置。

3. gl.clear(buffer)

(1) 將指定緩衝區（buffer）設定為預定的值。

(2) gl.COLOR_BUFFER_BIT：顏色緩衝區。當buffer為此值時將使用gl.clearColor()設定的顏色去清空顏色緩衝區。默認：(0.0, 0.0, 0.0, 0.0)。

(3) gl.DEPTH_BUFFER_BIT：深度緩衝區。使用gl.clearDepth()，默認：1.0。

(4) gl.STENCIL_BUFFER_BIT：模板緩衝區。使用gl.clearStencil()，默認：0。

(5) 正確返回：無；錯誤返回：INVALID_VALUE

4. initShaders(gl, vshader, fshader)

(1) 該函數被定義在cuon.util.js中（開頭網盤地址可下載），用於在WebGL系統內部建立和初始化著色器。

(2) gl：指定要渲染的繪圖環境。

(3) Vshader：指定頂點著色器程序代碼。

(4) Fshader：指定片元著色器程序代碼。

(5) 返回值：true，表示初始化成功；false，失敗。

例：

//頂點著色器程序

var VSHADER_SOURCE =

void main() {
+

gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+//設置坐標，四個浮點數組成的矢量

gl_PointSize = 10.0;
+ //設置尺寸

}
;

//片元著色器程序

var FSHADER_SOURCE =

void main() {
+

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+//設置顏色

}
;

//獲取環境

var canvas = document.getElementById(example);

var gl = getWebGLContext(canvas);

//初始化著色器

if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {

console.log(初始化著色器失敗！);

return;

}

5. gl.drawArrays(mode, first, count)

(1) 執行頂點著色器，按照mode參數指定的方式繪製圖形。

(2) Mode：指定繪製的方式，可設為：gl.POINTS(一系列點),gl.LINES(一系列單獨的線段),gl.LINE_STRIP(一系列連接的線段),gl.LINE_LOOP(一系列連接的線段並最後一個點與第一個點連接),gl.TRIANGLES(一系列單獨的三角形), gl.TRIANGLE_STRIP(一系列帶狀的三角形),gl.TRIANGLE_FAN(一系列三角形組成的類似於扇形的圖形)

(3) First：指定從哪個頂點開始繪製圖形（int）

(4) Count：指定用到的頂點數量（int）

(5) 返回值：無，正確繪製；INVALID_ENUM：傳入的mode錯誤；INVALID_VALUE：first或count參數是無效的負數

6. gl.getAttribLocation(program, name)

(1) 獲取由name參數指定的attribute變數的存儲地址（用處是通過該存儲地址向變數傳輸數據）

(2) Program：指定包含頂點著色器和片元著色器的著色器程序對象

(3) Name：指定要獲取其存儲地址的attribute變數的名稱

(4) 返回值：大於等於0，返回存儲地址；-1，變數名無效；INVALID_OPERATION，程序對象未能成功連接；INVALID_VALUE，name長度大於attribute變數名的最大長度（默認256位元組）

例：

//頂點著色器程序

var VSHADER_SOURCE =

attribute vec4 a_Position;
+//聲明attribute變數

void main() {
+

gl_Position = a_Position;
+//設置坐標

gl_PointSize = 10.0;
+ //設置尺寸

}
;

//獲取attribute變數的存儲位置

var a_Position = gl.getAttribLocation(gl.program, a_Position);

if(a_Position < 0) {

console.log(獲取地址失敗);

}

7. gl.vertexAttrib3f(location, v0, v1, v2)

(1) 將數據(v0, v1, v2)傳給由location指定的attribute變數

(2) Location：指定要修改的attribute變數的存儲地址

(3) V0：填充attribute變數第一個分量的值

(4) V1：填充attribute變數第二個分量的值

(5) V2：填充attribute變數第三個分量的值

(6) 返回值：無，賦值正常；INVALID_OPERATION，沒有當前的program對象；INVALID_VALUE：location大於等於attribute變數的最大數目（默認為8）

例：

……

//將頂點位置傳輸給attribute變數

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

8. 同理，還有獲取uniform變數存儲地址的函數：gl.getUniformLocation(program, name)；為uniform傳值的函數：gl.uniform4f(location, v0, v1, v2, v3)

例：

/片元著色器程序

var FSHADER_SOURCE =

precision mediump float;
+//變數的變化範圍 中等精度

uniform vec4 u_FragColor;
+//uniform變數

void main() {
+

gl_FragColor = u_FragColor;
+//設置顏色

}
;

//獲取u_FragColor存儲位置

var u_FragColor = gl.getUniformLocation(gl.program, u_FragColor);

//將顏色信息傳輸給uniform變數

gl.uniform4f(u_FragColor, 0.0, 0.0, 1.0, 1.0);

9. gl.createBuffer()

(1) 創建緩衝區對象

(2) 返回值：非null，新創建的緩衝區對象；null，創建失敗

(3) gl.deleteBuffer(buffer)：刪除buffer表示的緩衝區對象

例：

//創建緩衝區對象

var vertexBuffer = gl.createBuffer();

if(!vertexBuffer) {

console.log(failed to create the buffer object);

return -1;

}

10. gl.bindBuffer(target, buffer)

(1) 將buffer表示的緩衝區對象綁定到target目標上

(2) Target取值：gl.ARRAY_BUFFER，表示緩衝區對象中包含了頂點的數據；gl.ELEMENT_，表示緩衝區對象中包含了頂點的索引值；gl.buffer，指定之前由gl.createBuffer()返回的待綁定的緩衝區對象；null，禁用

(3) 返回值：無，正常；INVALID_ENUM，target無效

例：

……

//將緩衝區對象綁定到目標

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

11. gl.bufferData(target, data, usage)

(1) 開闢存儲空間，向綁定在target上的緩衝區對象寫入數據data

(2) Target：gl.ARRAY_BUFFER或者gl.ELEMENT_ARRAY_BUFFER

(3) Data：寫入緩衝區對象的數據，是個類型化數組

(4) Usage：使用數據的方式。gl.STATIC_DRAW，只向緩衝區對象寫入一次數據，繪製多次；gl.STREAM_DRAW，只向緩衝區對象寫入一次數據，繪製若干次；gl.DYNAMIC_DRAW，向緩衝區對象寫入多次數據，繪製多次；

(5) 返回：無，正常；INVALID_ENUM，target無效

例：

……

//向緩衝區對象中寫入數據

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

12. gl.vertexAttribPointer(location, size, type, normalized, stride, offset)

(1) 將綁定到gl.ARRAY_BUFFER的緩衝區對象分配給由location指定的attribute變數

(2) Size：指定緩衝區中每個頂點的分量個數（1-4）

(3) Type：指定數據格式。gl.UNSIGNED_BYTE(無符號位元組);gl.SHORT(短整型);gl.UNSIGNED_SHORT(無符號短整型);gl.INT(整型);gl.UNSIGNED_INT(無符號整型);gl.FLOAT(浮點型)

(4) Normalized：true或false，表示是否將非浮點型數據歸一化到[0, 1]或[-1, 1]區間

(5) Stride：指定相鄰兩個頂點間的位元組數，默認0

(6) Offset：指定緩衝區對象中的偏移量（以位元組為單位）

(7) 返回：無，正常；INVALID_OPERATION，不存在當前程序對象；INVALID_VALUE，location大於等於attribute變數的最大數目（默認為8）或stride或offset是負值

例：

//將緩衝區對象分配給a_Position變數

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

13. gl.enableVertexAttribArray(location)

(1) 開啟location指定的attribute變數

(2) 返回：無，正常；INVALID_VALUE, ocation大於等於attribute變數的最大數目

例：

//連接a_Position變數與分配給它的緩衝區對象

gl.enableVertexAttribArray(a_Position);

推薦閱讀：

TAG:WebGL | 科技 | 函數 |