前端之圖形學-2 着色器

前端圖形學篇爲隨手記，在學習推動過程會根據我的瞭解進行二次修改，文章中的觀點可能來自看到的各個網站書籍，存在的錯誤或不完善的地方請諒解

It's not what you look at that matters, it's what you see.
重要的不是你正看着的是什麼，而是你從中所看到的是什麼。——亨利·戴維·梭羅

頂點

頂點是指二維或三維空間中的一個點，好比二維或者三維圖形的端點或交點

片元

能夠了解成像素，但包括大小、顏色、光源等元素。

頂點着色器（Vertex shader） 用於描述頂點特徵（如位置、顏色等）的程序，它能改變幾何形狀的位置。它處理每一個頂點的數據，例如頂點座標，法線，色彩，和紋理座標。

片元着色器（Fragment shader）進行逐片元處理過程如光照的程序

例子中繪製一個10像素大小的點

着色器採用GLSL ES編程語言，其是OpenGL中GLSL全稱是 Graphics Library Shader Language （圖形庫着色器語言）的一個子集，但其採用類C的寫法並不難理解。

注意：
GLSL ES是大小寫敏感的強類型語言，語句必須以分號（；）結束

GLSL ES是從main()函數開始執行，程序只能有一個mian()函數

頂點着色器指定點的位置及大小

var VSHADER_SOURCE =

'void main() {\n}' +

' gl_Position = vec4(0.0, 0.0, 0.0, 1.0)\n' + //齊次座標，浮點數，必須

' gl_PointSize = 10.0;\n' + //浮點數，非必須，默認爲10.0

'}\n';

片元着色器指定點的顏色

var FSHADER_SOURCE =

'void main() {\n}' +

' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)'\n' +

'}\n';

着色器以JavaScript字符串形式編寫，主程序就能夠將其傳給webGL進行編譯

初始化着色器

輔助函數initShaders()對字符串編寫的着色器進行初始化

initShaders(gl, vshader, fshader)
參數
gl 指定渲染的上下文
vshader 指定頂點着色器字符串
fshader 指定片元着色器字符串
返回值
true 初始化着色器成功
false 初始化着色器失敗

注意：着色器運行在webGL中，而不是在javascript中。

完整代碼

var VSHADER_SOURCE =

'void main() {\n}' +

' gl_Position = vec4(0.0, 0.0, 0.0, 1.0)\n' +

' gl_PointSize = 10.0;\n' +

'}\n';

var FSHADER_SOURCE =

'void main() {\n}' +

' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)\n' +

'}\n';

function main () {

// 獲取節點元素

var canvas = document.getElementById('webGL');

// 獲取webgl上下文

var gl = getWebGLContext(canvas);

if (!gl) {

console.log('Failed to get the rendering context for webgl');

return;

}

// 初始化着色器

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

console.log('Failed to init shaders');

return;

}

// 設置背景色

gl.clearColor(0.0, 0.0, 0.0, 1.0);

//清空

gl.clear(gl.COLOR_BUFFER_BIT);

//繪製

gl.drawArrays(gl.POINTS, 0, 1);

}

JavaScript和着色器間的數據通訊

WebGL程序將頂點的位置座標從JS傳到着色器，而後在對於位置上進行繪製。

attribute變量 傳輸的是頂點相關的數據，全局變量，只能用在頂點着色器

uniform變量 傳輸的是對於全部頂點都相同的數據，全局變量，如顏色

varying變量 是從頂點着色器向片元着色器傳輸數據，須在兩種着色器中共同聲明

主要步驟：

1.着色器中聲明attribute變量

'attribute vec4 a_Position;\n' +複製代碼

<存儲限定符><類型><變量名>

詞attribute爲存儲限定符，聲明成全局變量

2.獲取attribute變量的位置，賦值js中的變量

var a_Position = gl.getAttribLocation(al.program, 'a_Position');複製代碼

3.對attribute變量進行賦值

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);複製代碼

vertexAttrib3f(location, v1, v2, v3)做爲傳值函數，第一個參數爲傳值參數的地址，後面爲傳遞的數值
同理，存在
vertexAttrib1f(location, v1)
vertexAttrib2f(location, v1, v2)
vertexAttrib4f(location, v1, v2, v3, v4)
vertexAttrib3f中的3f爲參數個數+參數類型，「f」爲浮點數，「i」爲整數
複製代碼

以上步驟能夠動態設置webgl着色器的參數，所以這裏就能夠構成用戶與圖形交互的一個基礎，如鼠標移動，獲取移動的軌跡點，並經過attribute賦值着色器進行繪製。 相對應，若是須要對片元着色器進行處理，則使用uniform進行聲明，getUniformLocation獲取變量存儲地址，uniform4f傳輸數據。

齊次座標

經過(x, y, z, w)描述，等價於三維座標上的(x/w, y/w, z/w)，w爲齊次座標系中度量份量，當w爲1時等同三維座標系。