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