大家好,我是阿赵。
继续说一下屏幕后处理的做法,这一期讲的是Vignette暗角效果。
一、Vignette效果介绍
Vignette暗角的效果可以给画面提供一个氛围,或者模拟一些特殊的效果。
还是拿这个角色作为底图
添加了Vignette效果后,屏幕的四边会产生一个像老式电视机一样的压暗的效果,
通过调节参数,可以做出形状比较夸张的压暗效果
如果加上闪烁和横纹之类,也可以模拟老式电影的效果。
二、实现原理
1、以屏幕中心点计算每个像素点的距离
float2 screenUV = abs(i.uv - float2(0.5f,0.5f))*_VignetteIntensity;
float dist = length(screenUV);
col.rgb *= dist;
这时候,由于屏幕靠中间的点离屏幕中心点(0.5f,0.5f)近,然后边缘的点里屏幕中心点远,所以得到的效果是中间黑,四周白。
2、给距离做power计算,让边缘形状变成接近矩形
float2 screenUV = abs(i.uv - float2(0.5f,0.5f))*_VignetteIntensity;
screenUV = pow(saturate(screenUV), _VignetteSmoothness);
float dist = length(screenUV);
col.rgb *= dist;
经过计算后,现在的黑白变成了比较接近屏幕矩形。当然,这个和pow的参数有关,调节不同的参数,可以得到不同的形状。
3、给黑白做反向
float2 screenUV = abs(i.uv - float2(0.5f,0.5f))*_VignetteIntensity;
screenUV = pow(saturate(screenUV), _VignetteSmoothness);
float dist = length(screenUV);
float vfactor = pow(saturate(1 - dist * dist), _VignetteSmoothness);
col.rgb *= vfactor;
这时候,可以看到,暗角的效果就做出来了。
三、完整代码
1、C#代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class VignetteCtrl : MonoBehaviour
{[Range(0, 3)]public float vignetteIntensity = 1.8f;[Range(0, 5)]public float vignetteSmoothness = 5;private Material vignetteMat;// Start is called before the first frame updatevoid Start(){}// Update is called once per framevoid Update(){}private void OnRenderImage(RenderTexture source, RenderTexture destination){if (vignetteMat == null){vignetteMat = new Material(Shader.Find("Hidden/AzhaoVignette"));}if (vignetteMat == null || vignetteMat.shader == null || vignetteMat.shader.isSupported == false){return;}vignetteMat.SetFloat("_VignetteIntensity", vignetteIntensity);vignetteMat.SetFloat("_VignetteSmoothness", vignetteSmoothness);Graphics.Blit(source, destination, vignetteMat, 0);}
}
2、Shader
Shader "Hidden/AzhaoVignette"
{CGINCLUDE
#include "UnityCG.cginc"sampler2D _MainTex;float4 _MainTex_TexelSize;float _VignetteIntensity;float _VignetteSmoothness;half4 fragVignette(v2f_img i) : SV_Target{half4 col = tex2D(_MainTex, i.uv);//暗角float2 screenUV = abs(i.uv - float2(0.5f,0.5f))*_VignetteIntensity;screenUV = pow(saturate(screenUV), _VignetteSmoothness);float dist = length(screenUV);float vfactor = pow(saturate(1 - dist * dist), _VignetteSmoothness);col.rgb *= vfactor;return col;}ENDCGProperties{_MainTex("Texture", 2D) = "white" {}_VignetteIntensity("VignetteIntensity", Range(0, 3)) = 1_VignetteSmoothness("VignetteSmoothness", Range(0, 5)) = 1}SubShader{// No culling or depthCull Off ZWrite Off ZTest Always//0校色Pass{CGPROGRAM#pragma vertex vert_img#pragma fragment fragVignette ENDCG}}
}