Unity风格化场景之：The Illustrated Nature (二)

资源地址：The Illustrated Nature

上文说到，这个风格化场景的Color Grading可以媲美乔碧萝殿下的美颜，其实光说Color Grading并不确切，应该说整个后处理。本文就来学习一下他的后处理是怎么做的。

打开和关闭后处理，效果对比如下：

卸妆前.png

卸妆后.png

关闭后处理的场景明显平了很多，雾没了，另外整个色调变化都很大。下面我们就一步一步的上妆，把美颜重新打开。

上妆前

仔细检查场景发现，作者并没有做烘培，只有一盏直线光，没有布置任何探头，植物部分的光照就是最简单的Lambert。全局光照？不存在的。

作者主要设置了环境光，如下：

Environment Lighting.png

场景设置平淡无奇，下面，开始上妆。

打开AO

AO.png

开了AO之后，环境光不再是无差别的叠加，场景立体了很多。

不过像我们这种做移动设备开发的，后处理的AO过于昂贵，还是贴图留AO通道比较实惠。另外如果做烘培，AO也可以烘到lightmap里。

打开辉光

Bloom.png

当前场景并没有强烈的光照，更没有高光表现，即便辉光的门槛设置的比较低，但是场景依然几乎没有受到影响。主要的改变是远处的太阳产生了明显的光晕。这应该也是作者想要的效果。

在移动设备上，如果RenderTexture的分辨率适当，采样次数适当，辉光是可以开的。配合hdr的话，基本可以让游戏的表现上一个档次。

打开Vignette

Vignette.png

Vignette是一个比较省的后处理效果，挺多游戏用它来做睁眼效果的，他的代码也很简单：Classic模式下，越远离Vignette Center(默认屏幕中心)的屏幕颜色，其Vignette Color(默认黑色)的比重就越大。

            #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的强度调高，效果如下：

Vignette2.png

雾

Fog.png

作者用到的雾是自己定制的，添加了雾效之后，场景的远近层次就出来了。

其实我应该先介绍雾，因为雾的计算是放在辉光之前的。

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

作者雾的实现类似线性雾，额外提供了近/中/远三种雾色以供选择。

Fog2.png

此外，你还可以控制雾是否影响天空盒，做法也很简单，判断一下屏幕像素的深度(线性)是否超过0.999998，超过则认为是天空盒。

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

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

让我随意调整一下近/中/远的雾色，来看一下效果。我把近处的雾调整为黄色，远处的雾绿色，中间过渡的雾为蓝色，雾的浓度保持不变，效果如下：

Fog3.png

Fog4.png

好了，终于到Color Grading了

让我们看一下在打开Color Grading之前，我们的美颜效果如何。

卸妆后.png

除了Color Grading，全部打开.png

妆画了一半，肯定差点意思。

不过，我饿了。Color Grading留待下文介绍。

最后编辑于：2019.11.05 23:38:15