URP管线下使用Dither做像素化风格

什么是Dither

基本概念

• v. 犹豫不决；对（录音）进行噪声处理；抖色
• n. 犹豫不决；紧张，颤抖

 

 

用有限的颜色来表示出多种色阶变化的技术就叫做Dither

上面那句话其实并不严谨，只是在此方便理解，Dither不是新型技术，它在视频，信号处理，音频等领域都有应用

图形中的应用

基于上述的简单且并不严谨的描述，下图是在一个2x2的像素格中，从左到右依次排列出一个黑白色阶的效果

对应黑白色阶

没看出来？我们将像素格缩小平铺

这下就对味了！

现在我们对Dither在图形上的应用已经有了初步的了解，并且我们可以看得到，2x2的像素格只有5种颜色过渡，那么4x4呢？

• 2x2像素格有5种颜色
• 4x4像素格有17种颜色

• 8x8像素格有65种颜色

有序抖动与无序抖动

这里我们不涉及更深的底层逻辑，直观一些，直接看图

这张图展示了不同算法呈现出的结果，其中下面

这张，就是有序Dither的效果，也是我们下面要实现的效果（有点像素画的感觉哈）

Dither的实现

这里我们的主要目标是先绘制一个2x2像素格的矩阵，然后再想办法将这些像素格填充平铺到屏幕中去

有了目标，下面我们开干！

像素格矩阵

首先我们想要绘制下面这样一个2x2的像素格，对应的矩阵应该是什么样的？

显而易见

平铺到屏幕中

方法其实很简单，只需要将上面那个2x2矩阵作为一个贴图一样目标，再用0,1,0,1,0,1不断重复的坐标值采样它就行了

说起来有点抽象，首先我们先看采样它的值从哪来

i.positionCS.xy

没错，就是它，我们知道裁剪空间下的坐标值，从顶点着色器输出到片段着色器后，它的值就是屏幕上每一个像素的值

且值非常大，不是简单的0-1，而且我们的矩阵只能取到0和1，即0行0列、0行1列.....所以必须将这些值映射为0和1，只需要除以2取余即可

直接输出