文字描述
首先，webgl裡有頂點著色器和片元著色器兩種著色器。頂點著色器和片元著色器是相互依賴的，缺一不可，並且首先被呼叫的是頂點著色器。
可以把頂點相關的所有情報都傳給頂點著色器。比如，頂點的位置，頂點法線，紋理座標，頂點顏色等等，跟頂點相關的所有情報都可以傳給頂點著色器。在這裡，我們可以自由決定傳入著色器的內容，這種靈活性就是可編輯渲染管線的好處。但是，雖然說傳入著色器的內容是自由決定的，但是頂點的位置情報是必須的，因為如果不知道頂點的位置的話，是沒有辦法繪製模型的。
頂點著色器就跟他的字面上的意思一樣，接受頂點相關的情報，最後決定如何處理這些頂點。而片元著色器則決定了畫面上用什麼顏色來輸出。片元著色器的英文是fragment，其實就是斷片，碎片的意思。而畫面上的畫素則是畫面上的最小的斷片，所以片元著色器操作的是顏色。
最通俗的說就是，頂點著色器就是處理頂點相關的資訊，片元著色器就是處理畫面上的顏色資訊。
頂點著色器是用來描述頂點特性（如位置、顏色等）的程式。頂點（vertex）是指二維或三維空間中的乙個點，比如二維或三維圖形的端點或交點。
進行逐片元處理過程如光照（後續教程繼續解釋光照）的程式。片元（fragment）是乙個webgl術語，你可以將其理解為畫素（影象的單元）。
WebGL 紋理顏色原理
本文由雲 社群發表 webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cl...
WebGL 紋理顏色原理
本文由雲 社群發表webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cle...
WebGL 紋理顏色原理
本文由雲 社群發表 webgl繪製影象時，往著色器中傳入顏色資訊就可以給圖形繪製出相應的顏色，現在已經知道頂點著色器和片段著色器一起決定著向顏色緩衝區寫入顏色資訊並最終呈現出來，那麼這個過程是什麼樣，如果圖形的顏色需要用現有來渲染那麼又該如何操作？在繪製開始前，經常見到呼叫函式清空畫布的 gl.cl...