需要原始碼可以Q群：828202939 或者點選這裡  希望可以和大家一起學習、一起進步！！純手打！！

書籍是PDF電子檔，也在Q群裡，所有的課程原始碼在我上傳的資源裡面，本來想設定開源，好像不行！

如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下會及時修改！！！！！

本文開始介紹著色器的一些基礎 知識！

webgl中一般涉及到兩種著色器：

頂點著色器：頂點著色器是用來描述頂點特性的（如位置、顏色等）的程式。頂點是指二維或者三維空間裡面的一個點，比如二維或者三維圖形的端點或者交點

片元著色器：進行逐片元處理過程（如光照）的程式。片元是一個webgl的術語，暫且可以理解為畫素（影象的單元）

下圖是從執行JS程式到瀏覽器顯示結果的過程（有時間給你們畫個流程圖）：

--瀏覽器執行

--執行載入的JS

--JS執行相關程式（從main主方法開始，一般主方法裡面會有呼叫著色器初始化的函式）

--執行著色器初始化方法

--頂點著色器逐頂點操作

--片元著色器逐片元操作

--清空顏色快取

--繪製

--顯示到瀏覽器螢幕

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!乾貨來了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

                                                                     頂點著色器初步講解：

上面說到，頂點著色器是控制頂點的位置和大小，那麼問題來了，頂點著色器怎麼通過來控制的呢？

頂點著色器的內建變數：

（float  ） gl_PositSize  表示點的尺寸（畫素數，這個不是必須的，預設為1.0）

（vec4）  gl_Position     表示頂點的位置（這個變數必須被賦值，否則著色器無法工作）

其中vec4和float是GLSL中的一種資料型別，和Java的8種基本型別差不多

float  表示浮點數的資料型別

vec4 表示由4個浮點陣列成的向量（實際是由3個X,Y,Z的座標值加一個W分量組成的向量，有關向量後面會有講到，別急）

特別注意：因為webgl是基於OpenGL的，OpenGL是類C或者是C的語言，屬於強制型語言；

上述的變數正確賦值格式如下：

（float ）gl_PositSize=10.0   //浮點型

如寫成

（float  ）gl_PositSize=10   會報錯的，這個新入坑的朋友們請注意了  

另外一個內建變數gl_Position 表示點的位置，他的型別是vec4型別，通過內建函式

vec4 vec4 (v0,v1,v2,v3)方法來建立vec4的型別建立

其中v0,v1,v2分別代表x,y,z座標軸的座標，V3第4分量W之所以存在，是因為這樣做可以提高處理三維資料的效率（後面會講到）

X,Y,Z,W 4個分量組成的向量叫   齊次座標   ，至於啥是齊次座標，各位童鞋可以百度一下

齊次座標存在的意義在於，它能夠讓矩陣乘法來描述頂點變化成為可能

                                                          片元著色器初步講解：

前面提到片元著色器控制點的顏，或者理解為片元就是顯示在螢幕上面的一個畫素（嚴格來講，片元包括這個畫素的位置、顏色和其他資訊）

片元著色器把點的顏色賦值gl_FragColor，該變數是片元著色器中的唯一內建變數，它控制著畫素在螢幕上呈現的最終顏色

(vec4 ) gl_FragColor     指定片源顏色（RGBA格式  0.0- 1.0）

大概就是這樣了

接下來就是繪製方面的東西了

通過 gl.drawArrays()這個函式來繪製各種各樣的影象，具體的可以搜狗一下。本文只對著色器做初步講解！！！！