1、管線

片段著色器在OpenGL ES 3.0的可程式設計管線的位置如下圖所示。

2、輸入輸出

片段著色器為片段操作提供了通用功能的可程式設計方法，輸入和輸出如下圖所示。

輸入或者可變值，in，是頂點著色器生成的插值資料，頂點著色器輸出跨圖元進行插值，並作為輸入傳遞給片段著色器。
統一變數，uniform，是片段著色器使用的狀態，為常量值，在每個片段上不會變化。
取樣器，sampler2D，用於訪問著色器中的紋理物件。
輸入，還包括程式碼，即片段著色器原始碼或者二進位制程式碼，描述在片段上執行的操作。
輸出，是一個或多個片段顏色，傳遞到管線的逐片段操作部分，輸出顏色的數量取決於使用了多少個顏色附著。

3、內建特殊變數

片段著色器中可用的內建特殊變數包括gl_FragCoord、gl_FrontFacing、gl_PointCoord、gl_FragDepth。
gl_FragCoord，只讀，儲存片段的相對視窗座標(x, y, z, 1/w)。例如，用於較少陰影貼圖鋸齒失真的技術，可以使用視窗座標作為某個隨機噪聲貼圖紋理讀取的偏移量，噪聲貼圖的值用於旋轉陰影貼圖的過濾核心。
gl_FrontFacing，只讀，片段屬於圖元的正面時為ture，否則為false。
gl_PointCoord，只讀，儲存點的紋理座標，在點的光柵化階段自動生成，處於[0, 1]區間內。
gl_FragDepth，只寫，覆蓋片段的固定功能深度值。這個功能可能禁用許多GPU的深度優化，應該謹慎使用，因為許多GPU有所謂的Early-Z功能，在執行片斷著色器之前進行深度測試，這樣不能通過深度測試的片段永遠不會被著色，從而保護了效能，所以使用gl_FragDepth時，必須禁用Early-Z功能。

4、內建常量

片段著色器相關的內建常量如下，每個內建常量所指定的值是所有OpenGL ES 3.0實現必須支援的最小值。

const mediump int glMaxFragmentInputVectors = 15;
const mediump int glMaxTextureImageUnits = 16;
const mediump int glMaxFragmentUniformVectors = 224;
const mediump int glMaxDrawBuffers = 4;
const mediump int glMinProgramTexelOffset = -8
 
;
const mediump int glMaxProgramTexelOffset = 7;

5、精度限定符

精度限定符，在頂點著色器和片段著色器中不同，片段著色器中沒有預設精度，每個片斷著色器必須宣告一個預設精度或者對所有變數宣告提供精度限定符。

6、多重紋理

#version 300 es
precision mediump float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D s_baseMap;
uniform sampler2D s_lightMap;
void main()
{
    vec4 baseColor;
    vec4 lightColor;
    baseColor = texture( s_baseMap, v_texCoord );
    lightColor = texture( s_lightMap, v_texCoord );
    outColor = baseColor * (lightColor + 0.25);
}

這裡使用了兩個取樣器，每個紋理使用一個，它們共用一個紋理座標，在典型的紋理貼圖照明中，基本貼圖和照明貼圖應該有一組單獨的紋理座標，照明貼圖通常混合到單一的大型紋理中，紋理座標可以使用離線工具生成。例子中，載入了一個基本紋理貼圖和照明紋理貼圖，這兩個紋理貼圖以及最後的兩重紋理效果如下圖。

7、霧化

霧化，是渲染3D場景的一種常用技術，可以用於減小繪圖距離，並且清除靠近觀看者的幾何體的突現現象。霧化的計算有幾種可能的方式，使用可程式設計片段著色器，就不必侷限於任何特定的方程式。要計算任何型別的霧化，需要兩個輸入，畫素到眼睛的距離以及霧化的顏色。要計算線性霧化，還需要霧化所覆蓋的最小和最大距離範圍。線性霧化因子方程式為（最大距離-眼睛距離）/（最大距離-最小距離）。計算一個線性霧化因子，用於乘以霧化顏色，這個顏色限制在[0.0, 1.0]的區間內，然後和片段的總體顏色進行線性插值，以算出最終的顏色。到眼睛的距離最好在頂點著色器中算出，然後用可變變數進行跨圖元插值。下面例子的頂點著色器計算了到眼睛的距離。

#version 300
uniform mat4 u_matViewProjection;
uniform mat4 u_matView;
uniform vec4 u_eyePos;
in vec4 a_vertex;
in vec2 a_texCoord0;
out vec2 v_texCoord;
out float v_eyeDist;
void main( void )
{
    // Transform vertex to view-space
    vec4 vViewPos = u_matView * a_vertex;
    // Compute the distance to eye
    v_eyeDist = sqrt( (vViewPos.x - u_eyePos.x) *
                      (vViewPos.x - u_eyePos.x) +
                      (vViewPos.y - u_eyePos.y) *
                      (vViewPos.y - u_eyePos.y) +
                      (vViewPos.z - u_eyePos.z) *
                      (vViewPos.z - u_eyePos.z) );                      
    gl_Position = u_matViewProjection * a_vertex;
    v_texCoord  = a_texCoord0.xy;
}

下面例子的片段著色器渲染了線性霧化。

#version 300
precision mediump float;
uniform vec4 u_fogColor;
uniform float u_fogMaxDist;
uniform float u_fogMinDist;
uniform sampler2D baseMap;
in vec2 v_texCoord;
in float v_eyeDist;
layout( location = 0 ) out vec4 outColor;
float computeLinearFogFactor()
{
   float factor;
   // Compute linear fog equation
   factor = (u_fogMaxDist - v_eyeDist) /
            (u_fogMaxDist - u_fogMinDist );   
   // Clamp in the [0,1] range
   factor = clamp( factor, 0.0, 1.0 );           
   return factor;            
}
void main( void )
{
    float fogFactor = computeLinearFogFactor();
    vec4 baseColor = texture( baseMap, v_texCoord );   
    // Compute final color as a lerp with fog factor
    outColor = baseColor * fogFactor + 
               u_fogColor * (1.0 - fogFactor); 
}

線性霧化效果圖如下。

8、Alpha測試

Alpha測試，是傳統的固定功能管線中的功能，在OpenGL ES 3.0中不存在，不過可以使用discard關鍵字實現相同的效果。下面是通過著色器實現Alpha測試功能的例子。

#version 300
uniform mat4 u_matViewProjection;
in vec4 a_vertex;
in vec2 a_texCoord0;
out vec2 v_texCoord;
void main( void )
{
    gl_Position = u_matViewProjection * a_vertex;
    v_texCoord = a_texCoord0.xy;
}

#version 300
precision mediump float;
uniform sampler2D baseMap;
in vec2 v_texCoord;
layout( location = 0 ) out vec4 outColor;
void main( void )
{
   vec4 baseColor = texture( baseMap, v_texCoord );
   if( baseColor.a < 0.25 )
   {
      discard;
   }
   else
   {
      outColor = baseColor;
   }
}

Alpha測試的效果圖如下。

9、使用者裁剪平面

一般情況下，所有圖元根據組成視錐的六個平面進行裁剪，但是，使用者有時候可能想要根據一個或者多個額外的使用者裁剪平面進行裁剪。例如，渲染反射時，需要根據反射平面翻轉幾何形狀，然後將其渲染到螢幕外紋理中，在渲染到紋理時，需要根據反射平面裁剪幾何形狀，這就需要使用者裁剪平面。下面的例子用到了使用者裁剪平面，以及效果圖如下所示。

#version 300
uniform vec4 u_clipPlane;
uniform mat4 u_matViewProjection;
in vec4 a_vertex;
out float v_clipDist;
void main( void )
{
    // Compute the distance between the vertex and
    // the clip plane
    v_clipDist = dot( a_vertex.xyz, u_clipPlane.xyz ) + 
                 u_clipPlane.w;
    gl_Position = u_matViewProjection * a_vertex;
}

#version 300
precision mediump float;
in float v_clipDist;
layout( location = 0 ) out vec4 outColor;
void main( void )
{
    // Reject fragments behind the clip plane
    if( v_clipDist < 0.0 )
       discard;
    outColor = vec4( 0.5, 0.5, 1.0, 0.0 );    
}