到目前為止，我們繪製過點、三角形、矩形等，但使用的都是單色系。之前曾經說過著色器的概念，著色器分為頂點著色器和片元著色器，我們一直在使用頂點著色器，而對片元著色器基本沒有提及過，本小節將展開對片元著色器的簡單介紹。
之前提到過，頂點著色器決定點的大小、位置和顏色，而片元著色器是用於給畫素著色的，初步看，片元著色器的任務好像給頂點著色器完成了，但實際上不然，頂點著色器只能決定點的顏色，如果繪製成了圖形，圖形填充的顏色就該由片元著色器處理了。
先來看一下我們將要繪製的彩色點的效果圖：
我們一共繪製了三個點，而且三個點的顏色不同，接下來分析下**，先來看下頂點著色器的**：
// 頂點著色器**(決定頂點的位置、大小、顏色)
var vshader_source =
'attribute vec4 a_position;\n' +
'attribute vec4 a_color;\n' +
'varying vec4 v_color;\n' +
'void main() \n';
接著看看片元著色器的**：
// 片元著色器**（給畫素上色）
var fshader_source =
'precision
mediump
float;\n' +
'varying
vec4 v_color;\n' +
'void main() \n';
我們會定義好乙個頂點顏色緩衝區，然後逐頂點傳遞給頂點著色器中的a_color變數，而a_color賦值給了v_color變數。最需要關注的就是，在頂點著色器和片元著色器中，兩個varying變數直接關聯賦值了，這是兩種不同著色器傳遞資訊的方式，以後介紹紋理時也會使用此種方式來傳遞座標資訊。最後在片元著色器中的v_color變數就獲取到了乙個線性化的顏色值，然而最終決定畫素顏色值的是gl_fragcolor這個內建變數，所以最後進行了賦值。
我初步看到的時候也發現實在是複雜，但沒辦法，底層就是這樣處理的，我們要確保需要傳值的兩個varying變數名稱是一致的。varying用於著色器間資訊的傳遞，它命名為varying，表示變化的意思，還有更加深層次的應用，稍後我們會繼續解釋。
初始化顏色資訊跟初始化頂點資訊非常的類似，**如下：
// 三個頂點的顏色
var verticescolors = new
float32array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
]);// 建立乙個快取物件，用於存放頂點顏色資料
var colorbuffer = context.createbuffer();
// 繫結快取物件
context.bindbuffer(context.array_buffer, colorbuffer);
// 把資料寫到緩衝物件中
context.bufferdata(context.array_buffer, verticescolors, context.static_draw);
// 獲取頂點著色器**中的頂點顏色變數
var a_color = context.getattriblocation(context.program, 'a_color');
// 設定變數獲取資料規則
context.vertexattribpointer(a_color, 3, context.float, false, 0, 0);
// 允許變數從 array_buffer目標上繫結的緩衝區物件獲取資料
context.enablevertexattribarray(a_color);
// 繪製乙個三角形
context.drawarrays(context.********s, 0, n);
是不是感覺很驚訝，咱們只在三個頂點中定義了顏色，結果看起來像是自動會漸變的。這就是片元著色器之所以叫片元的地方了。我們先來看渲染原理圖：
頂點著色器用於決定頂點的位置、大小和顏色(嚴格上來講，是頂點關聯了乙個顏色值)
確定了頂點資訊後，便可以繪製出三角形圖形
有了三角形圖形，webgl內部會對三角形進行光柵化，簡單來講，就是把三角形拆解成乙個乙個的畫素點，然後發現了varying修飾的v_color變數，利用頂點顏色資訊，以及使用線性化計算方式，給每個畫素點計算乙個線性化的v_color值，這就是varying有變化的意思的由來。在頂點中定義的varying變數，實際上，對於每個畫素點，都有不同的值，最後呼叫片元著色器，把每個畫素的顏色值(獨有的v_color值)傳遞給了片元著色器，最後設定到了顏色緩衝區，以便於最終在瀏覽器上顯示。
通過前面的學習，我們一共接觸了三種型別的著色器變數，分別是 attribute，uniform和 varying，現在簡單回顧一下。
1. attribute 變數用於頂點著色器中，表示普通的變數。
2. uniform 變數用於頂點著色器和片元著色器中，用於表示不變的變數，比如，在頂點著色器中，表示點大小的變數，可以使用uniform，如果所有的頂點大小一致。
3. varying 變數用於頂點著色器和片元著色器之間的傳遞資訊，通常用於傳遞顏色資訊和座標資訊（比如紋理座標）。
理解片元著色器是按照逐畫素進行著色是非常關鍵的，而頂點著色器則是逐頂點執行的。我們使用varying變數在頂點著色器和片元著色器之間共享資料，而且要注意的是，varying針對第個畫素都有乙個線性化的值，參考彩色三角形效果圖就知道了。varying不僅僅用於傳遞顏色資訊，它還經常用於傳遞紋理座標資訊，以便進行貼圖。
<>
WebGL著色器discard捨棄片元
本文是webgl電子書的2.15節內容 discard關鍵字通常出現在片元著色器的if語句或for語句中，discard的使用語法就像for語句中的continue和break關鍵字一樣，直接編寫discard 即可,但是discard的功能比較特殊，專門用於著色器片元處理。如果想理解discard...
webgl學習 著色器
著色器是一段使用glsl語言 一種類c的高階語言 編寫的簡短程式，它定義了3d物件的畫素點實際繪製到螢幕上的方式，webgl要求開發者要為每個待繪製的物件提供乙個著色器，乙個著色器可以應用於多個物件，因此在實際的應用中，整個場景通常提供乙個統一的 著色器。乙個著色器，通常由兩個部分組成 頂點著色器 ...
頂點著色器與片元著色器
頂點著色器 在管線中的位置 1號 這圖作的跟病毒似的 可以替代下面這些傳統的操作 頂點變換 法線變化及規範化 紋理座標生成 紋理座標變換 光照彩色材質應用 頂點著色器可以用來指定一系列完全通用的 並將應用於各個頂點及相關資料上的操作。理解這點很重要。頂點著色器不會取代一次需要多個頂點的情況或者需要拓...