前言
一、简单介绍
Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言，“赋予程序员灵活而方便的编程方式”，并“尽可能的控制渲染过程”同时“利用图形硬件的并行性，提高算法效率”。
本节介绍，使用shader 像素化风格，或者叫做马赛克风格。
二、实现原理
1、方法一：对UV进行放大，然后截取整数部分，然后再缩回原大小，UV精度丢失，就形成马赛克效果
float ratio_u = (int)(i.uv.x * _pixelSize)/_pixelSize;
float ratio_v = (int)(i.uv.y * _pixelSize)/_pixelSize;
2、方法二：素风格的纹理跟我们正常看到的纹理是一样的，只是把一张图的精细分布像素格重新取样得到一个比较大的区域的新纹理而已。简单来说，同个大小的区域，填充的精细度越高，真实的图像还原度就越高了。就是把一张2维的纹理根据长跟宽取样数量成一个个固定的像素格填充到原纹理中
fixed ratio_u = _EachPixelSize.x*(1.0/ _PixelationArea.x);
fixed ratio_v = _EachPixelSize.y*(1.0/ _PixelationArea.y);
fixed2 pixel_uv = fixed2(ratio_u * ceil(i.uv.x/ratio_u),ratio_v * ceil(i.uv.y/ratio_v));
三、注意实现
1、两种方法都能实现效果，根据需要选取即可；
四、效果预览
五、实现步骤
1、打开Unity，新建一个空工程
2、在工程中添加shader，并对应新建材质Material，记得导入一张测试图作为测试效果使用
3、编辑shader，保证编译正确，对应材质添加图片，并设置值
4、在场景中添加两个 Quad，并对应把两个材质赋值给他们
5、运行效果，如预览
六、关键代码
1、PixelStyle
Shader "Custom/PixelStyle"{ Properties { _Color ("Color", Color) = (1,1,1,1) _MainTex ("Albedo (RGB)", 2D) = "white" {} _pixelSize("Pixel Size",Range(1,256)) = 128 } SubShader { Tags { "Queue"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha pass{ CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" sampler2D _MainTex; float4 _MainTex_ST; float _pixelSize; fixed4 _Color; struct appdata{ float4 vertex:POSITION; float2 uv: TEXCOORD0; }; struct v2f{ float2 uv:TEXCOORD0; float4 vertex:SV_POSITION; }; v2f vert(appdata v){ v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv,_MainTex); return o; } fixed4 frag(v2f i):SV_Target{ fixed4 col = fixed4(0,0,0,0); // 先放大uv,然后缩小到原来的大小，在int 然他丢失精度，从而实现像素风格（马赛克风格） float ratio_u = (int)(i.uv.x * _pixelSize)/_pixelSize; float ratio_v = (int)(i.uv.y * _pixelSize)/_pixelSize; col = tex2D(_MainTex,fixed2(ratio_u,ratio_v)); // 这里给a处理，好似多余（可删） if(col.a<0.5){ col.a = 0; } // 混合颜色返回 return col * _Color; } ENDCG } } FallBack "Diffuse"}
2、PixelStyle_02
Shader "Custom/PixelStyle_02"{ Properties { _Color ("主色", Color) = (1,1,1,1) _MainTex ("主贴图", 2D) = "white" {} _PixelationArea("取样区域",Vector) = (256,256,0) _EachPixelSize("像素画大小",Vector) = (3,3,0) } SubShader { Tags { "Queue"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha pass{ CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" sampler2D _MainTex; float4 _MainTex_ST; float3 _PixelationArea; float3 _EachPixelSize; fixed4 _Color; struct appdata{ float4 vertex:POSITION; float2 uv: TEXCOORD0; }; struct v2f{ float2 uv:TEXCOORD0; float4 vertex:SV_POSITION; }; v2f vert(appdata v){ v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv,_MainTex); return o; } fixed4 frag(v2f i):SV_Target{ fixed4 col = fixed4(0,0,0,0); // uv各个方向取样参数 fixed ratio_u = _EachPixelSize.x*(1.0/ _PixelationArea.x); fixed ratio_v = _EachPixelSize.y*(1.0/ _PixelationArea.y); //先缩小uv,然后放大到原来的大小，在ceil 然他丢失精度，从而实现像素风格（马赛克风格） // ceil 去上色相（可以试试 floor效果） fixed2 pixel_uv = fixed2(ratio_u * ceil(i.uv.x/ratio_u),ratio_v * ceil(i.uv.y/ratio_v)); col = tex2D(_MainTex,pixel_uv); // 混合颜色返回 return col * _Color; } ENDCG } } FallBack "Diffuse"}
网友评论