什么是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取余即可
直接输出