Unity3D-Shader-复古电影荧幕特效

2022-11-12 21:57:03

【旧博客转移 - 2015年12月6日 18:12】

今天用Shader做了一个复古荧幕效果，老电视机放映的感觉，写篇文章记录一下

原始图片：

没错，这就是电影《泰坦尼克号》的剧照。船撞到冰山上翻了，气温非常低，男主角杰克，找到了一块木板，让女主角睡在上面保住了性命，自己被冻成冰块沉入海底，还是蛮感人的。

实现原理就是用到几张特效图，加入一些抖动效果

1.晕影图（Vignette effect）

2.屏幕划痕Scratches和灰尘污点Dust

Unity3D-Shader-复古电影荧幕特效

Shader实现：

 half2 mainTexUV = half2(i.uv.x, i.uv.y+(_RandomValue*_SinTime.z * 0.005));

 fixed4 mainTex = tex2D(_MainTex, mainTexUV);

采样主纹理，UV值y加上了一个随机值，实现上下抖动的效果。

_SinTime是Unity内置的一个变量，用来获取一个-1到1范围的sin函数值

 half2 scratchesUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _ScratchesXSpeed),

 i.uv.y + (_RandomValue * _Time.x * _ScratchesYSpeed));

 fixed4 scratchesTex = tex2D(_ScratchesTex, scratchesUV);

采样划痕纹理，这里的UV值，采用随机数乘以X,Y轴分别的速度，来实现屏幕随机位置的闪动效果，灰尘纹理也是一样的处理

 //转成YIQ色彩空间，取出亮度值

 fixed lum = dot(fixed3(0.299, 0.587, 0.114), mainTex.rgb);

 fixed4 finalColor = lum + lerp(_SepiaColor, _SepiaColor + fixed4(0.1f, 0.1f, 0.1f, 0.1f), _RandomValue);

这一步是把RGB颜色空间转换成YIQ颜色空间，YIQ色彩空间通常被电视系统所采用，在YIQ系统中，Y分量代表图像的亮度信息，I、Q两个分量则携带颜色信息，I分量代表从橙色到青色的颜色变化，而Q分量则代表从紫色到黄绿色的颜色变化。将彩色图像从RGB转换到YIQ色彩空间，可以把彩色图像中的亮度信息与色度信息分开，分别独立进行处理。

再加上一个棕褐色调_SepiaColor，这里用lerp函数做一个线性插值，实现明暗之间的渐变

fixed3 constantWhite = fixed3(, , );

finalColor = lerp(finalColor, finalColor * vignetteTex, _VignetteAmount);

finalColor.rgb *= lerp(scratchesTex, constantWhite, _RandomValue);

finalColor.rgb *= lerp(dustTex, constantWhite, (_RandomValue * _SinTime.z));

finalColor = lerp(mainTex, finalColor, _EffectAmount);

最后把颜色汇总，用一些线性插值实现渐变，然后把颜色值相乘得到最后的结果。返回给fragment着色器输出，就可以得到上面的效果。

完整Shader：

Shader "lijia/OldEffect" {

 Properties {

 //原图

 _MainTex("MainTex", 2D) = "white" {}

 //晕影图

 _VignetteTex("VignetteTex", 2D) = "white" {}

 _VignetteAmount ("Vignette Opacity", Range(, )) =

 //划痕

 _ScratchesTex("ScratchesTex", 2D) = "white" {}

 _ScratchesXSpeed("ScratchesXSpeed", float) =

 _ScratchesYSpeed("ScratchesYSpeed", float) =

 //灰尘

 _DustTex("DustTex", 2D) = "white" {}

 _DustXSpeed("_DustXSpeed", float) =

 _DustYSpeed("_DustYSpeed", float) =

 //老旧的褐色调

 _SepiaColor("_SepiaColor", Color) = (, , , )

 _RandomValue("RandomValue", float) = 1.0

 _EffectAmount ("Old Film Effect Amount", Range(, )) =

 }

 SubShader {

 Tags{"RenderType" = "Opaque"}

 Pass {

 CGPROGRAM

 #pragma vertex vert

 #pragma fragment frag

 #include "UnityCG.cginc"

 sampler2D _MainTex;

 float4 _MainTex_ST;

 sampler2D _VignetteTex;

 sampler2D _ScratchesTex;

 sampler2D _DustTex;

 float _EffectAmount;

 float _RandomValue;

 float _VignetteAmount;

 float _ScratchesXSpeed;

 float _ScratchesYSpeed;

 float _DustXSpeed;

 float _DustYSpeed;

 fixed4 _SepiaColor;

 struct v2f {

 float4 pos : SV_POSITION;

 float2 uv : TEXCOORD0;

 };

 v2f vert(appdata_base v)

 {

 v2f o;

 o.pos = mul(UNITY_MATRIX_MVP, v.vertex);

 o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);

 return o;

 }

 fixed4 frag(v2f i): COLOR

 {

 //采样主纹理 uv.y值加上一些随机因素实现抖动的效果 _SinTime是Unity内置的变量 用来获取一个-1到1的正弦值

 half2 mainTexUV = half2(i.uv.x, i.uv.y+(_RandomValue*_SinTime.z * 0.005));

 fixed4 mainTex = tex2D(_MainTex, mainTexUV);

 fixed4 vignetteTex = tex2D(_VignetteTex, i.uv);

 half2 scratchesUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _ScratchesXSpeed),

 i.uv.y + (_RandomValue * _Time.x * _ScratchesYSpeed));

 fixed4 scratchesTex = tex2D(_ScratchesTex, scratchesUV); 

 half2 dustUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _DustXSpeed),

 i.uv.y + (_Time.x * _DustYSpeed));

 fixed4 dustTex = tex2D(_DustTex, dustUV);

 //变成YIQ 值

 fixed lum = dot(fixed3(0.299, 0.587, 0.114), mainTex.rgb);

 fixed4 finalColor = lum + lerp(_SepiaColor, _SepiaColor + fixed4(0.1f, 0.1f, 0.1f, 0.1f), _RandomValue);

 fixed3 constantWhite = fixed3(, , );

 finalColor = lerp(finalColor, finalColor * vignetteTex, _VignetteAmount);

 finalColor.rgb *= lerp(scratchesTex, constantWhite, _RandomValue);

 finalColor.rgb *= lerp(dustTex, constantWhite, (_RandomValue * _SinTime.z));

 finalColor = lerp(mainTex, finalColor, _EffectAmount);

 return finalColor;

 }

 ENDCG

 }

 }

 FallBack "Diffuse"

}

扩展：

上面讲的是基于一张原图做的处理，如果我们想实现在动态内容上加上这种老电影效果呢？比如游戏中播放剧情的时候，在屏幕上加上一个老电影特效，提高带入感。

这时我们可以用混合模式

Unity3D-Shader-复古电影荧幕特效

官方文档的解释

Blend DstColor Zero是乘以Color缓冲区的颜色的，而这个特效刚好是用到乘法

分了两个Pass来实现

第一个Pass先处理色调

Pass {

Blend DstColor Zero

CGPROGRAM

#pragma vertex vert_img

#pragma fragment frag

#include "UnityCG.cginc"

fixed4 _SepiaColor;

float _RandomValue;

fixed4 frag(v2f_img i): COLOR

{

fixed4 color = fixed4(0.299, 0.587, 0.114, );

color = color + lerp(_SepiaColor, _SepiaColor + fixed4(0.1f, 0.1f, 0.1f, 0.1f), _RandomValue);

return color;

}

ENDCG

}

第二个Pass再把剩下的图片叠加上去，跟之前一样处理就行了。

fixed4 frag(v2f_img i): COLOR

{

fixed4 vignetteTex = tex2D(_VignetteTex, i.uv);

half2 scratchesUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _ScratchesXSpeed),

i.uv.y + (_RandomValue * _Time.x * _ScratchesYSpeed));

fixed4 scratchesTex = tex2D(_ScratchesTex, scratchesUV);

half2 dustUV = half2(i.uv.x + (_RandomValue * _SinTime.z * _DustXSpeed),

i.uv.y + (_Time.x * _DustYSpeed));

fixed4 dustTex = tex2D(_DustTex, dustUV);

fixed3 constantWhite = fixed3(, , );

fixed4 finalColor = fixed4(, , , );//这里使用1，因为混合模式会乘Color缓冲的颜色

finalColor = lerp(finalColor, finalColor*vignetteTex, _RandomValue);

finalColor.rgb *= lerp(scratchesTex, constantWhite, _RandomValue);

finalColor.rgb *= lerp(dustTex, constantWhite, _RandomValue*_SinTime.z);

return finalColor;

}

感谢http://blog.csdn.net/candycat1992，读你的文章让我学到了很多知识

码农公寓

相关文章