[OpenGL ES 08]Per-Pixel Light及卡通效果

[OpenGL ES 08]Per-Pixel Light及卡通效果

羅朝輝 (http://www.cnblogs.com/kesalin/)

本文遵循“署名-非商業用途-保持一致”創作公用協議

 

這是《OpenGL ES 教程》的第九篇，前八篇請參考如下鏈接：

[OpenGL ES 01]iOS上OpenGL ES之初體驗
[OpenGL ES 02]OpenGL ES渲染管線與着色器
[OpenGL ES 03]3D變換：模型，視圖，投影與Viewport
[OpenGL ES 04]3D變換實踐篇：平移，旋轉，縮放
[OpenGL ES 05]相對空間變換及顏色
[OpenGL ES 06]使用VBO:頂點緩存
[OpenGL ES 07-1]光照原理
[OpenGL ES 07-2]Per-Vertex Light及深度緩存

前言

本文是基於前文《光照原理》以及《Per-Vertex Light及深度緩存》兩篇文章的，如果你還不熟悉光照相關的基礎知識，請先閱讀那兩篇文章。在今天的這篇文章中，我們來研究 Per-Pixel 光照效果以及卡通效果。Per-Pixel 光照效果就是在片元着色階段針對每個像素進行光照計算，而卡通效果是將散射光因子“分級”從而不再是連續（打個比方說，考試成績上百分制是連續的，而分級制：好/良好/及格/不及格就不是連續的），這樣就能獲得漫反射跳躍的卡通效果。Per-Pixel Light 示例源碼在這里，運行效果如下：

 

一，創建工程

Per-Vertex light 與 Per-Pixel 的光照計算基本上相同，只是進行的時機不同，Per-Vertex Light 在頂點着色階段針對每個頂點進行光照計算，而 Per-Pixel 是在片元着色階段針對每個像素進行光照計算。因此，本文將在前文《Per-Vertex Light及深度緩存》源碼的基礎上繼續進行。

 

二，Per-Pixel Light

1，修改頂點着色

這次，頂點着色腳本非常簡單，因為光照計算工作都將轉移到片元着色腳本中進行。為了方便與前文中的腳本進行對比，在這里，保留前文中的腳本，新建 PerPixelVertex.glsl 以及 PerPixelFragment.glsl 腳本。

PerPixelVertex.glsl 腳本內容如下:

uniform mat4 projection;
uniform mat4 modelView;
uniform mat3 normalMatrix;

attribute vec4 vPosition;
attribute vec3 vNormal;
attribute vec3 vDiffuseMaterial;

varying vec3 vEyeSpaceNormal;
varying vec3 vDiffuse;

void main(void)
{
    gl_Position = projection * modelView * vPosition;
    
    vEyeSpaceNormal = normalMatrix * vNormal;
    vDiffuse = vDiffuseMaterial;
}

從上面的代碼中可以看到，頂點着色器只是簡單地轉換 local space 中的法線到 view space，然后將相關 varying 傳遞給片元着色器。

PerPixelFragment.glsl 腳本內容如下:

varying mediump vec3 vEyeSpaceNormal;
varying mediump vec3 vDiffuse;

uniform highp vec3 vLightPosition;
uniform highp vec3 vAmbientMaterial;
uniform highp vec3 vSpecularMaterial;
uniform highp float shininess;

void main()
{
    highp vec3 N = normalize(vEyeSpaceNormal);
    highp vec3 L = normalize(vLightPosition);
    highp vec3 E = vec3(0, 0, 1);
    highp vec3 H = normalize(L + E);

    highp float df = max(0.0, dot(N, L));
    highp float sf = max(0.0, dot(N, H));
    sf = pow(sf, shininess);

    mediump vec3 color = vAmbientMaterial + df * vDiffuse + sf * vSpecularMaterial;
    
    gl_FragColor = vec4(color, 1);
}

從上面的代碼可以看到，原先在頂點着色器中進行的光照計算被轉移到片元着色器中了。這里沒有什么特別的，光照計算過程還是前面兩篇文章介紹的那些內容，因此在這里就不再累述了。

為了方便在不同着色腳本之間進行切換，我定義了一個 LightMode 枚舉：

enum LightMode {
    PerVertex,
    PerPixel,
    PerPixelToon,
};
const LightMode CurrentLightMode = PerPixel;

並在 setProgram 中根據當前的光照計算模式來載入對應的腳本：

- (void)setupProgram
{
    // Load shaders
    //
    NSString * vertexShaderPath = nil;
    NSString * fragmentShaderPath = nil;

    if (CurrentLightMode == PerVertex) {
        vertexShaderPath = [[NSBundle mainBundle] pathForResource:@"VertexShader"
                                                           ofType:@"glsl"];
        fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"FragmentShader"
                                                             ofType:@"glsl"];
    }
    else if (CurrentLightMode == PerPixelToon) {
        vertexShaderPath = [[NSBundle mainBundle] pathForResource:@"PerPixelVertex"
                                                           ofType:@"glsl"];
        fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"PerPixelToonFragment"
                                                             ofType:@"glsl"];
    }
    else  {
        // default per-pixel light
        vertexShaderPath = [[NSBundle mainBundle] pathForResource:@"PerPixelVertex"
                                                           ofType:@"glsl"];
        fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"PerPixelFragment"
                                                             ofType:@"glsl"];
    }
    
    //......
}

編譯運行，效果如下圖。細心的童鞋可以比較 Per-Vertex 與 Per-Pixel 兩種光照的效果。Per-Vertex 光照計算是在頂點着色階段進行，然后在光柵化階段進行線性插值；而 Per-Pixel 光照計算是在片元着色階段針對每一個像素進行，因此后者要比前者更加細致逼真，效果更好一些，當然計算量自然也要大。

 

三，卡通效果

前面說過，卡通效果是將散射光因子“分級”從而不再是連續的，打個比方說，考試成績上百分制是連續的，而分級制：好/良好/及格/不及格就不是連續的，這樣就能獲得漫反射跳躍的卡通效果。

新建 PerPixelToonFragment.glsl 腳本，其內容如下：

varying mediump vec3 vEyeSpaceNormal;
varying mediump vec3 vDiffuse;

uniform highp vec3 vLightPosition;
uniform highp vec3 vAmbientMaterial;
uniform highp vec3 vSpecularMaterial;
uniform highp float shininess;

void main()
{
    highp vec3 N = normalize(vEyeSpaceNormal);
    highp vec3 L = normalize(vLightPosition);
    highp vec3 E = vec3(0, 0, 1);
    highp vec3 H = normalize(L + E);

    highp float df = max(0.0, dot(N, L));
    highp float sf = max(0.0, dot(N, H));
    sf = pow(sf, shininess);
    
    if (df < 0.1) df = 0.0; else if (df < 0.2) df = 0.2; else if (df < 0.4) df = 0.4; else if (df < 0.6) df = 0.6; else if (df < 0.8) df = 0.8; else df = 1.0;

    mediump vec3 color = vAmbientMaterial + df * vDiffuse + sf * vSpecularMaterial;
    
    gl_FragColor = vec4(color, 1);
}

注意看粗體部分，這就是新增的部分。這部分代碼將漫反射因子調整為五個級別：0.0，0.2，0.6，0.8，1.0，因此漫反射就有層次效果了。如下圖所示：

 

四，總結

Per-Vertex 與 Per-Pixel 兩種光照的異同：兩者都是基於相同的光照原理來進行光照計算的，Per-Vertex 光照計算是在頂點着色階段進行，然后在光柵化階段進行線性插值；而 Per-Pixel 光照計算是在片元着色階段針對每一個像素進行。因此后者要比前者效果更好，看上去更加細致逼真，當然計算量自然也要多一些。

卡通效果是將漫反射因子分級，從而形成不連續的跳躍的漫反射效果。在本文中，是在片元着色階段進行卡通效果處理的，它也可以在頂點着色階段進行。

在這個系列的介紹中，只提及了一些簡單的光照效果，還有很多更加逼真的光照算法或技巧沒有涉及，比如菲涅爾效果或使用光照貼圖。

菲涅爾效果：根據觀察者的觀察表面來調整反射率來實現的。比如你從水面，油漆表面或者絲綢的正上方看，反射光澤的柔和效果基本沒有，如果側着或平着看的話，反射光澤的柔和效果就很明顯。

光照貼圖：使用預先處理好的明暗紋理來模擬光照，這樣可以減少實時的光照計算，但這樣的技巧只適用於靜態場景。