实现思路
像素化就是使许多相邻像素都变成一个像素,自然看上去就会有像素化的效果了。
根据这个思路,马上可以想到一种做法就是将屏幕分成若干个区域,每个区域由若干个相邻的像素组成,每个区域都是一个正方形,然后计算正方形的卷积作为这个区域的颜色。
这种做法会稍微麻烦一些,今天我们写的这个shader单纯采样了这个区域里的一个像素代表这整个区域的颜色。
可能听上去有些不靠谱,但是实际看起来还是效果不错的,毕竟都是像素化效果了,有些误差说不定还会更好看一些。
代码实现
编写一个函数传入uv返回颜色,我们这个先把uv转化为屏幕坐标方便计算,之后除以我们需要的像素块大小,再使用floor函数向下取整,之后再乘回像素块大小,就可以得到某一块区域的颜色都相同的效果了。这样一个像素化shader就完成了,没错就是这么简单。
half4 pixel(half2 uv){half2 screenPos = floor(uv * _ScreenParams.xy / _PixelSize) * _PixelSize;return tex2D(_MainTex, screenPos / _ScreenParams.xy);}
原图
像素化之后
我们最后再增加一个条纹效果。使屏幕上可以出现45度的斜线条纹。
这个计算也是根据简单的线性函数y=x+nk ,其中x,y为坐标,n为像素大小,k为任意整数。我们的目标是是把满足这个函数的x,y坐标涂黑。
变换该式之后可以发现(y-x)%n=0
我们根据该式进行测试就可以了,还有一个y=-x+nk也是同理
half2 stitch(half2 uv){half2 screenPos = floor(uv * _ScreenParams.xy);half2 reminder;reminder.y = (screenPos.y - screenPos.x) % _PixelSize;reminder.x = (screenPos.y + screenPos.x) % _PixelSize;return reminder;}
最后在片元着色器里判断余数是不是0
return (reminder.y == 0 || reminder.x == 0)&&_AddStrip==1 ? half4(0, 0, 0, 1) : color;
添加条纹之后的效果
完整代码
c#代码
namespace Colorful{using UnityEngine;[ExecuteInEditMode]public class Pixelate : MonoBehaviour{public Shader shader;public int PixelSize = 8;public bool AddStrip;protected void OnRenderImage(RenderTexture source, RenderTexture destination){Material material = new Material(shader);material.SetInt("_PixelSize", PixelSize);material.SetInt("_AddStrip", AddStrip ? 1 : 0);Graphics.Blit(source, destination, material);}}}
shader代码
Shader "LX/Pixelate"{Properties{_MainTex ("Base (RGB)", 2D) = "white" {}}CGINCLUDE#include "UnityCG.cginc"sampler2D _MainTex;int _PixelSize;int _AddStrip;half2 stitch(half2 uv){half2 screenPos = floor(uv * _ScreenParams.xy);half2 reminder;reminder.y = (screenPos.y - screenPos.x) % _PixelSize;reminder.x = (screenPos.y + screenPos.x) % _PixelSize;return reminder;}half4 pixel(half2 uv){half2 screenPos = floor(uv * _ScreenParams.xy / _PixelSize) * _PixelSize;return tex2D(_MainTex, screenPos / _ScreenParams.xy);}half4 frag(v2f_img i) : SV_Target{half2 reminder = stitch(i.uv);half4 color = pixel(i.uv);return (reminder.y == 0 || reminder.x == 0)&&_AddStrip==1 ? half4(0, 0, 0, 1) : color;}ENDCGSubShader{ZTest Always Cull Off ZWrite OffFog{Mode off}Pass{CGPROGRAM#pragma vertex vert_img#pragma fragment fragENDCG}}FallBack off}
另外代码也传到github仓库里了,大家也可以关注一下哦~
我的github