Flutter & GLSL - 肆 | 从条纹到马赛克

1. 实现条纹

之前我们实现过黑色到红色的渐变效果，让像素颜色的 r 值根据坐标从 0~1 均匀变化即可。现在想要实现如下的 渐变条纹 ，该怎么办呢？条纹可以指定个数，如下是 10 个条纹从黑到红的渐变效果：

对于 shader 要解决抓住一点：通过坐标控制像素的颜色信息。下面着色器代码中通过 count 表示条纹的数量；floor 函数是一个内置函数，用于对数字取整。 比如 floor(0.9) = 0 、floor(1.9) = 1 ; 利用这个性质通过 floor(coo.x * count)， 可以将 [0->1] 连续的 coo.x 变成：在某个取值范围间是恒定值。比如

count =10 时，coo.x 在 [0,0.1) 时， floor(coo.x * 10) 恒为 0 ； count =10 时，coo.x 在 [0.1,0.2) 时， floor(coo.x * 10) 恒为 1 ； count = 8 时，coo.x 在 [3/8,4/8) 时， floor(coo.x * 8) 恒为 3 ；

于是 floor(coo.x * count)/ count 在 coo.x 从 0->1 取值时，会依次形成 count 个从 0->1 依次增加的恒值。将不同的恒值作为 r 通道的数据，就可以得到在 某段横坐标区域 内颜色相同的效果：

#version 460 core
#include <flutter/runtime_effect.glsl>

precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;

void main() {
    vec2 coo = FlutterFragCoord().xy / uSize;
    float count = 10.0;
    float x = floor(coo.x * count)/ count;
    fragColor = vec4(x,0,0,1);
}

2. 对贴图进行类似操作

图片本质上就是一个个像素颜色信息，着色器中通过 texture 函数根据坐标值拾取颜色。如果坐标值不按常规操作，让横坐标在某些区域内相同，会有什么效果呢？

下面代码中，对横坐标 x 进行运算，使得在某段横坐标区域内，取用同一横坐标值，纵坐标 y 维持原状。这样就可以得到 count 个图片条纹，视觉上每段区域的效果是：最左侧的边线向右平移擦出的痕迹。 当 count 越大时，条纹越多，看起来图片就越清晰。这里已经有点马赛克的味道了。

#version 460 core
#include <flutter/runtime_effect.glsl>

precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;
uniform sampler2D uTexture;

void main() {
    vec2 coo = FlutterFragCoord().xy / uSize;
    float count = 10.0;
    float x = floor(coo.x * count)/ count;
    fragColor = texture(uTexture, vec2(x,coo.y));
}

3. 矩形马赛克

上面只对横轴 x 进行操作，得到了图片 条纹；那么同时对 x,y 坐标进行操作，就可以得到图片 点阵。也就是我们常见的马赛克：

代码的实现也非常简单，对于 y 进行类似的操作即可：

#version 460 core
#include <flutter/runtime_effect.glsl>

precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;
uniform sampler2D uTexture;

void main() {
    vec2 coo = FlutterFragCoord().xy / uSize;
    float rowCount = 50.0;
    float x = floor(coo.x * rowCount)/ rowCount;
    float y = floor(coo.y * rowCount)/ rowCount;
    fragColor = texture(uTexture, vec2(x,y));
}

从条纹到马赛克，我们通过一个小小的、普通的 floor 函数，就实现图片的特效。是不是非常有趣，后面还会带来其他马赛克效果的解析。最后还是想强调一点：着色器的奥义是 通过坐标控制像素的颜色信息，一定要牢牢抓住这点。那本文就到这里，谢谢观看 ~ 我们下次再见