Unity風(fēng)格化場景之：The Illustrated Nature (二)

資源地址：The Illustrated Nature

上文說到，這個風(fēng)格化場景的Color Grading可以媲美喬碧蘿殿下的美顏，其實(shí)光說Color Grading并不確切，應(yīng)該說整個后處理。本文就來學(xué)習(xí)一下他的后處理是怎么做的。

打開和關(guān)閉后處理，效果對比如下：

卸妝前.png

卸妝后.png

關(guān)閉后處理的場景明顯平了很多，霧沒了，另外整個色調(diào)變化都很大。下面我們就一步一步的上妝，把美顏重新打開。

上妝前

仔細(xì)檢查場景發(fā)現(xiàn)，作者并沒有做烘培，只有一盞直線光，沒有布置任何探頭，植物部分的光照就是最簡單的Lambert。全局光照？不存在的。

作者主要設(shè)置了環(huán)境光，如下：

Environment Lighting.png

場景設(shè)置平淡無奇，下面，開始上妝。

打開AO

AO.png

開了AO之后，環(huán)境光不再是無差別的疊加，場景立體了很多。

不過像我們這種做移動設(shè)備開發(fā)的，后處理的AO過于昂貴，還是貼圖留AO通道比較實(shí)惠。另外如果做烘培，AO也可以烘到lightmap里。

打開輝光

Bloom.png

當(dāng)前場景并沒有強(qiáng)烈的光照，更沒有高光表現(xiàn)，即便輝光的門檻設(shè)置的比較低，但是場景依然幾乎沒有受到影響。主要的改變是遠(yuǎn)處的太陽產(chǎn)生了明顯的光暈。這應(yīng)該也是作者想要的效果。

在移動設(shè)備上，如果RenderTexture的分辨率適當(dāng)，采樣次數(shù)適當(dāng)，輝光是可以開的。配合hdr的話，基本可以讓游戲的表現(xiàn)上一個檔次。

打開Vignette

Vignette.png

Vignette是一個比較省的后處理效果，挺多游戲用它來做睜眼效果的，他的代碼也很簡單：Classic模式下，越遠(yuǎn)離Vignette Center(默認(rèn)屏幕中心)的屏幕顏色，其Vignette Color(默認(rèn)黑色)的比重就越大。

            #if VIGNETTE 
            {            
                UNITY_BRANCH              
                if (_Vignette_Mode < 0.5) 
                {        
                    half2 d = abs(uvDistorted - _Vignette_Center) * _Vignette_Settings.x;
                    d.x *= lerp(1.0, _ScreenParams.x / _ScreenParams.y, _Vignette_Settings.w);
                    d = pow(saturate(d), _Vignette_Settings.z); // Roundness
                    half vfactor = pow(saturate(1.0 - dot(d, d)), _Vignette_Settings.y);
                    color.rgb *= lerp(_Vignette_Color, (1.0).xxx, vfactor);
                    color.a = lerp(1.0, color.a, vfactor);
                }
                else
                {
                    half vfactor = SAMPLE_TEXTURE2D(_Vignette_Mask, sampler_Vignette_Mask, uvDistorted).a;

                    #if !UNITY_COLORSPACE_GAMMA
                    {
                        vfactor = SRGBToLinear(vfactor);
                    }
                    #endif                    

                    half3 new_color = color.rgb * lerp(_Vignette_Color, (1.0).xxx, vfactor);
                    color.rgb = lerp(color.rgb, new_color, _Vignette_Opacity);
                    color.a = lerp(1.0, color.a, vfactor);
                }
            }
            #endif

我們可以把Vignette的強(qiáng)度調(diào)高，效果如下：

Vignette2.png

霧

Fog.png

作者用到的霧是自己定制的，添加了霧效之后，場景的遠(yuǎn)近層次就出來了。

其實(shí)我應(yīng)該先介紹霧，因?yàn)殪F的計(jì)算是放在輝光之前的。

[Serializable]
[PostProcess(typeof(IL3DNFogPPPPSRenderer), PostProcessEvent.BeforeStack, "IL3DN/Fog", true)]
public sealed class IL3DN_Fog_PP : PostProcessEffectSettings
{
  ...
}

作者霧的實(shí)現(xiàn)類似線性霧，額外提供了近/中/遠(yuǎn)三種霧色以供選擇。

Fog2.png

此外，你還可以控制霧是否影響天空盒，做法也很簡單，判斷一下屏幕像素的深度(線性)是否超過0.999998，超過則認(rèn)為是天空盒。

    float4 lerpResult128 = lerp( screenCol90 , combinedColors130 , step( clampDepth139 , 0.999998 ));

    #ifdef _EXCLUDESKYBOX_ON
      float4 staticSwitch114 = lerpResult128;
    #else
      float4 staticSwitch114 = combinedColors130;
    #endif

讓我隨意調(diào)整一下近/中/遠(yuǎn)的霧色，來看一下效果。我把近處的霧調(diào)整為黃色，遠(yuǎn)處的霧綠色，中間過渡的霧為藍(lán)色，霧的濃度保持不變，效果如下：

Fog3.png

Fog4.png

好了，終于到Color Grading了

讓我們看一下在打開Color Grading之前，我們的美顏效果如何。

卸妝后.png

除了Color Grading，全部打開.png

妝畫了一半，肯定差點(diǎn)意思。

不過，我餓了。Color Grading留待下文介紹。

上一篇
下一篇