像素化

我们知道马赛克都是应为采样率不够，导致的。

而采样率我们是可以控制的。

在上述的后处理效果中，仅仅将uv的过渡处理成失真似的就可以了。

核心处理失真代码：

                float2 th = i.uv / _PixelInterval;  // 按interval划分中，属于第几个像素float2 th_int = th - frac(th);      // 去小数，让采样的第几个纹素整数化，这就是失真UV关键th_int *= _PixelInterval;           // 再重新按第几个像素的uv坐标定位float2 use_uv = lerp(i.uv, th_int, _PixelItensity); // 应用像素化的强度return tex2D(_MainTex, use_uv);

先看看未处理的uv的与分辨率的对应该系，假设500x500的分辨率，采样的纹素sample_U与uv.x的对应关系是这样的：

处理后的失真纹理distortion_sample_u与uv.x的对应关系：(_PixelInterval=0.1)

看看由_PixelInterval=0.1，设置成0.3，再到0.05（目前我划分uv.x的最小值），再回复0.1的关系图：

_PixelInterval参数作用是：像素化时纵横向的像素大小都为屏幕*_PixelInterval的尺寸。
如，w:500,h:500,_PixelInterval:0.1，说明，每个像素的宽高就是(w*_PixelInterval,h*_PixelInterval)==(5,5)。

Shader

按PixelInterval的方式

// jave.lin 2020.03.13 - 像素化风格
Shader "Custom/PixelStylePP" {Properties {_MainTex ("Texture", 2D) = "white" {}_PixelInterval ("PixelInterval", Range(0.0001,0.1)) = 0.001_PixelItensity ("PixelIntensity", Range(0, 1)) = 1}SubShader {// No culling or depthCull Off ZWrite Off ZTest AlwaysPass {CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata {float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f {float4 vertex : SV_POSITION;float2 uv : TEXCOORD0;};v2f vert (appdata v) {v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = v.uv;return o;}sampler2D _MainTex;float _PixelInterval;float _PixelItensity;fixed4 frag (v2f i) : SV_Target {float2 th = i.uv / _PixelInterval;  // 按interval划分中，属于第几个像素float2 th_int = th - frac(th);      // 去小数，让采样的第几个纹素整数化，这就是失真UV关键th_int *= _PixelInterval;           // 再重新按第几个像素的uv坐标定位float2 use_uv = lerp(i.uv, th_int, _PixelItensity); // 应用像素化的强度return tex2D(_MainTex, use_uv);}ENDCG}}
}

按PixelSize方式

// jave.lin 2020.03.13 - 像素化风格的另一种参数控制方式
Shader "Custom/PixelStyle1PP" {Properties {_MainTex ("Texture", 2D) = "white" {}_PixelSize ("PixelSize", Range(1, 100)) = 1}SubShader {// No culling or depthCull Off ZWrite Off ZTest AlwaysPass {CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata {float4 vertex : POSITION;float2 uv : TEXCOORD0;};struct v2f {float4 vertex : SV_POSITION;float2 uv : TEXCOORD0;};v2f vert (appdata v) {v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = v.uv;return o;}sampler2D _MainTex;float4 _MainTex_TexelSize;float _PixelSize;fixed4 frag (v2f i) : SV_Target {float2 interval = _PixelSize * _MainTex_TexelSize.xy;float2 th = i.uv / interval;    // 按interval划分中，属于第几个像素float2 th_int = th - frac(th);  // 去小数，让采样的第几个纹素整数化，这就是失真UV关键th_int *= interval;             // 再重新按第几个像素的uv坐标定位return tex2D(_MainTex, th_int);}ENDCG}}
}

两种控制方式的区别

PixelInterval：不管屏幕分辨率多少，纵横向的马赛克的数量都是1/PixelInterval个，PixelInterval=0.1就是1/0.1=10个。但是窗口屏幕不是正方形的话，马赛克尺寸会变形。
PixelSize：不管屏幕的分辨率是多少，每个马赛克的大小都是PixelSize指定的大小，1就是无像素化。

Project

backup：UnityShader_PixelStyleTesting_2019.3.1f1

Unity Shader PostProcessing - 5 - PixelSyle 像素化风格相关推荐

Unity Shader PostProcessing - 8 - Bloom 泛光
文章目录实现提取亮度图将提取的像素模糊将模糊的像素与原图叠加 Project References 事情一大堆,要拿快递,又要寄快递,还要帮人板家具,还要去买菜,还要偶尔做饭,还要做包子,拖地 ...
Unity Shader PostProcessing - 7 - DepthOfField(DOF)景深
文章目录基本概念实现列举需要的参数在Scene视图下显示Gizmos 在Shader中标出有效景深深度添加高斯模糊处理将提取的景深与高斯模糊图混合再次将平滑过的景深与模糊的图片进行融合 ...
Unity Shader PostProcessing - 11 - Depth Fog/Height Fog - 雾效/深度雾效/高度雾/深度+高度雾
文章目录观察生活中的雾 Scenario 1 - Pure Depth Fog - 纯深度雾提取有用信息 Scenario 2 - Height Fog - 带高度的雾提取有用信息 Scenar ...
Unity Shader - Planar Shadow - 平面阴影
文章目录整体运行效果思路 Shader 问题 Z-Fighting,解决:按法线方向偏移一丢丢绘制 Alpha 混合重叠,解决:使用 stencil buffer 来规避为何出现这个问题解决 ...
Unity Shader - 模仿RenderImage制作全屏Quad，可以制作自定义后处理的流程
文章目录先尝试GL类来制作 Shader CSharp 画个三角型画个全屏的Quad 发现GL没有RenderTarget之类的使用CommandBuffer来绘制全屏的Quad GL渲染到目标 ...
Unity Shader - Post Processing 15 - Height Fog (Plus) - 后效高度雾改进版 (Parallax)、模拟闪电在云层中SSS
文章目录环境问题 Parallax 原理 GGB 效果模拟闪电在云层中SSS 测试脚本效果 GIF Project References 环境 Unity : 2018.2.11f1, 201 ...
【Unity Shader】新书封面 — Low Polygon风格的渲染
写在前面最近又开心又担心,因为我的书马上就要上市了,开心当然是因为等了这么久终于可以如愿了,担心是因为不少人对它的期待都很大,我第一次写书,能力也有限,不知道能不能让大家满意,让大家也都喜欢上它.不 ...
Unity Shader 学习笔记（27）渲染轮廓线（描边）方法、卡通风格渲染、素描风格渲染
Unity Shader 学习笔记(27)渲染轮廓线(描边)方法.卡通风格渲染.素描风格渲染参考书籍:<Unity Shader 入门精要> 渲染轮廓线(描边) 五种方法: 基于观察角度 ...
Unity Shader 之像素风格（马赛克风格）的简单实现
Unity Shader 之像素风格(马赛克风格)的简单实现目录 Unity Shader 之像素风格(马赛克风格)的简单实现一.简单介绍

Unity Shader PostProcessing - 5 - PixelSyle 像素化风格

像素化