1、canvas 2d和webgl繪圖的差異
webgl 的繪圖邏輯和canvas 2d 的繪圖邏輯還有一個(gè)本質(zhì)的差別。
大家在學(xué)習(xí)html 的時(shí)候應(yīng)該知道，瀏覽器有三大線程： js 引擎線程、GUI 渲染線程、瀏覽器事件觸發(fā)線程。
其中GUI 渲染線程就是用于渲圖的，在這個(gè)渲染線程里，有負(fù)責(zé)不同渲染工作的工人。比如有負(fù)責(zé)渲染HTML+css的工人，有負(fù)責(zé)渲染二維圖形的工人，有負(fù)責(zé)渲染三維圖形的工人。
2、webgl 的繪圖思路
找一臺(tái)電腦 - 瀏覽器里內(nèi)置的webgl 渲染引擎，負(fù)責(zé)渲染webgl 圖形，只認(rèn)GLSL ES語言。
找一塊手繪板 - 程序?qū)ο螅休dGLSL ES語言，翻譯GLSL ES語言和js語言，使兩者可以相互通信。
找一支觸控筆 - 通過canvas 獲取的webgl 類型的上下文對(duì)象，可以向手繪板傳遞繪圖命令，并接收手繪板的狀態(tài)信息。
開始畫畫 - 通過webgl 類型的上下文對(duì)象，用js 畫畫。
3、webgl 的繪圖步驟
3.1、在html中建立canvas 畫布
3.2、在js中獲取canvas畫布
3.3、使用canvas 獲取webgl 繪圖上下文
3.4、在script中建立頂點(diǎn)著色器和片元著色器，glsl es
3.5、在js中獲取頂點(diǎn)著色器和片元著色器的文本
3.6、初始化著色器
3.7、指定將要用來清空繪圖區(qū)的顏色
3.8、使用之前指定的顏色，清空繪圖區(qū)
3.9、繪制頂點(diǎn)
4、著色器
4.1、著色器的概念
webgl 繪圖需要兩種著色器：
- 頂點(diǎn)著色器（Vertex shader）：描述頂點(diǎn)的特征，如位置、顏色等。
- 片元著色器（Fragment shader）：進(jìn)行逐片元處理，如光照。
看了這兩個(gè)名詞的解釋，我想很多初學(xué)者會(huì)是懵的。
我給大家翻譯翻譯：
補(bǔ)間動(dòng)畫大家知道不？頂點(diǎn)著色器里的頂點(diǎn)就是補(bǔ)間動(dòng)畫里的關(guān)鍵幀，片元著色器里的片元就是關(guān)鍵幀之間以某種算法算出的插值。當(dāng)然，咱們webgl里的片元是像素的意思。
再給大家舉一個(gè)更簡單、更貼切的例子：
兩點(diǎn)決定一條直線大家知道不？頂點(diǎn)著色器里的頂點(diǎn)就是決定這一條直線的兩個(gè)點(diǎn)，片元著色器里的片元就是把直線畫到畫布上后，這兩個(gè)點(diǎn)之間構(gòu)成直線的每個(gè)像素。
4.2、著色器語言
webgl 的著色器語言是GLSL ES語言
void main() {…… } 是主體函數(shù)。
在頂點(diǎn)著色器中，gl_Position 是頂點(diǎn)的位置，gl_PointSize 是頂點(diǎn)的尺寸，這種名稱都是固定的，不能寫成別的。
在片元著色器中，gl_FragColor 是片元的顏色。
vec4() 是一個(gè)4維矢量對(duì)象。
將vec4() 賦值給頂點(diǎn)點(diǎn)位gl_Position 的時(shí)候，其中的前三個(gè)參數(shù)是x、y、z，第4個(gè)參數(shù)默認(rèn)1.0，其含義我們后面會(huì)詳解；
將vec4() 賦值給片元顏色gl_FragColor 的時(shí)候，其中的參數(shù)是r,g,b,a。
5、著色器初始化
5.1、建立程序?qū)ο?，目前這只是一個(gè)手繪板的外殼。
5.2、建立頂點(diǎn)著色器對(duì)象和片元著色器對(duì)象，這是手繪板里用于接收觸控筆信號(hào)的零部件，二者可以分工合作，把觸控筆的壓感（js信號(hào)）解析為計(jì)算機(jī)語言(GLSL ES)，然后讓計(jì)算機(jī)(瀏覽器的webgl 渲染引擎)識(shí)別顯示。
5.3、將頂點(diǎn)著色器對(duì)象和片元著色器對(duì)象裝進(jìn)程序?qū)ο笾?，這就完成的手繪板的拼裝。
5.4、連接webgl 上下文對(duì)象和程序?qū)ο?，就像連接觸控筆和手繪板一樣（觸控筆里有傳感器，可以向手繪板發(fā)送信號(hào)）。
5.5、啟動(dòng)程序?qū)ο?，就像按下了手繪板的啟動(dòng)按鈕，使其開始工作。
暫無評(píng)論，快來評(píng)論吧!