Flutter & GLSL#9 | 函数曲线

张风捷特烈

发布于 2024-03-28 09:07:05

730

发布于 2024-03-28 09:07:05

文章被收录于专栏：Android知识点总结Android知识点总结

张风捷特烈 Flutter & GLSL 系列文章：

案例代码开源地址【skeleton】

1. 复习 smoothstep 函数

在第六篇中，我们已经认识了 smoothstep 函数，它可以让一指定的区间内平滑过渡。下面先通过一个小例子回顾一下:

左图 smoothstep(0.4, 0.4 + 0.1, coo.y)

表示: 纵坐标小于 0.4 时，返回 0 展示黑色；纵坐标大于 0.5 时，返回 1 展示白色。在 0.4,0.5 之间平滑过渡。

我们将 0.4 记为一个变量值 y，那么 smoothstep(y, y + 0.1, coo.y) 就可以表示：

y 在 [0,y) 返回 0 展示黑色。 y 在 [y,y+0.1] 之间从 0~1 平滑过渡。 y 在 (y+0.1,1] 返回 1 展示白色.

上面右图中 y=0.8 时，就可以将黑色区域下移：

#version 460 core
#include <flutter/runtime_effect.glsl>
precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;

void main() {
    vec2 coo = FlutterFragCoord() / uSize;
    float y = 0.4;
    //float y = 0.8;
    float ret = smoothstep(y, y + 0.1, coo.y);
    fragColor = vec4(vec3(ret), 1.0);
}

同理我们可以分析出 smoothstep(y-0.1, y, coo.y) 就可以表示：

y 在 [0,y-0.1) 返回 0 展示黑色。 y 在 [y-0.1,y] 之间从 0~1 平滑过渡。 y 在 (y,1] 返回 1 展示白色.

仔细观察这两个图，想一想，如果让右侧减去左侧会发生什么呢?

提示：黑色是 0，白色时 1 ，渐变是 0~1 之间.

2. 生成线条

白色区域相减 1-1 =0 ,会呈现黑色，黑色区域 0 - 0 也是黑色。左侧白色区域减去过渡区域，相当于 1-过渡值，也就是反向过渡。左侧过渡区域对应的右侧是黑色，也就是减 0 ,保持不变。于是乎可以得到如下的光线。当控制 y 的数值，可以控制光线在的纵向位置：

#version 460 core
#include <flutter/runtime_effect.glsl>
precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;


void main() {
    vec2 coo = FlutterFragCoord() / uSize;
    float y = 0.8;
    float ret0 = smoothstep(y, y + 0.1, coo.y);
    float ret1 = smoothstep(y - 0.1, y, coo.y);
    float ret =  ret1-ret0;
    fragColor = vec4(vec3(ret), 1.0);
}

如果我们把过渡区域改小，就可以看到更明显的线条。顺便可以把光线的生成逻辑封装成一个函数，效果如下：

#version 460 core
#include <flutter/runtime_effect.glsl>
precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;

float plot(vec2 coo, float y, float e) {
    float ret0 = smoothstep(y, y + e, coo.y);
    float ret1 = smoothstep(y - e, y, coo.y);
    return ret1 - ret0;
}

void main() {
    vec2 coo = FlutterFragCoord() / uSize;
    float y = 0.4;
    float ret = plot(coo,y,0.005);
    fragColor = vec4(vec3(ret), 1.0);
}

3. 函数曲线

上面只是画了一条线，那这和函数曲线有什么关系呢？其实仔细信息，上面的曲线不就是 y =0.4 这个特殊函数的曲线表现吗？如果我们通过 coo.x 控制 y 的数值，会发生什么化学反应呢？比如我们最熟悉的 y = x:

#version 460 core
#include <flutter/runtime_effect.glsl>
precision mediump float;

out vec4 fragColor;
uniform vec2 uSize;

float plot(vec2 coo, float y, float e) {
    float ret0 = smoothstep(y, y + e, coo.y);
    float ret1 = smoothstep(y - e, y, coo.y);
    return ret1 - ret0;
}

void main() {
    vec2 coo = FlutterFragCoord() / uSize;
    float x = coo.x;
    float y = x;
    float ret = plot(coo,y,0.005);
    fragColor = vec4(vec3(ret), 1.0);
}

这样我们就可以设置任意的函数，通过自变量 x 的变化，影响 y 值：