creator shader: 从零开始片元着色器制作顺滑的颜色变换

822100870 · 2021年08月10日 05:45

做一个顺滑的渐变色

从一个图片不能直观看出rgb三个分量的变化曲线，需要借助一下ps，分别显示三个颜色通道就可以

照一张想要的图，用ps打开，查看对应通道的颜色变换。

可以看到，其实最终的一张变换色彩的图片，就是由这三张不同通道的图组合而成，红色图的白色值填入 gl_FragColor.r 绿蓝分别填入gl_FragColor.gl

那么，这三张图的值怎么模拟呢？

用函数模拟颜色的变换

这个是一个很有用的网站desmos.com，可以根据输入的函数，显示函数的曲线。
图片左侧，三行公式，分别就是图的rgb三通道值，放一下最终代码：

  void main () {
    vec3 color = vec3(0.);

    float x = v_uv0.x;float y = v_uv0.y;
    color = vec3(
                 sin(4.*x+0.85)*2.-0.5,
                 sin(5.*x-1.),
                 sin(3.*x-1.5) *1.5
                 );
    vec4 o = vec4(color, 1);
    gl_FragColor = o;
  }

善用数学公式。

valiancer · 2021年08月10日 05:19

老师，我对这句话有一点点疑问

822100870 · 2021年08月10日 05:29

盗个贴

valiancer · 2021年08月10日 05:32

图里也说了，实际上处理的是片元，而不是像素点
片元 != 像素点
两者之间是有明显的区别的

822100870 · 2021年08月10日 05:46

感谢指正，去掉那一块描述了

caogtaa · 2021年08月11日 12:06

推荐一个很直观的在线调色板工具
http://dev.thi.ng/gradients/

用法：

  vec3 Pallete(float t) {
    // t范围[0, 1]
    vec3 dcOffset = vec3(0.938, 0.328, 0.718);
    vec3 amp = vec3(0.659, 0.438, 0.328);
    vec3 freq = vec3(0.388, 0.388, 0.296);
    vec3 phase = vec3(2.538, 2.478, 0.168);
    return dcOffset + amp * cos(2. * 3.14159 * (freq * t + phase));
  }

hsy5201118 · 2021年08月10日 07:25

膜拜前面的大佬们

991149467 · 2021年08月10日 09:56

膜拜前面的佬大们

872391968 · 2021年08月19日 08:39

822100870:

  void main () {
    vec3 color = vec3(0.);

    float x = v_uv0.x;float y = v_uv0.y;
    color = vec3(
                 sin(4.*x+0.85)*2.-0.5,
                 sin(5.*x-1.),
                 sin(3.*x-1.5) *1.5
                 );
    vec4 o = vec4(color, 1);
    gl_FragColor = o;
  }

大哥，想问一下这三行公式是推导出来的还是说就是固定这公式的

822100870 · 2021年08月19日 09:05

有图，用图上的颜色变化，反推sin曲线，弄个sin(x)曲线摆在那，从sin(x)开始加不同参数让曲线形状往图上颜色的曲线靠拢，参数调到满意为止。

872391968 · 2021年08月19日 09:06

soga，懂了懂了大佬

creator shader: 从零开始 片元着色器制作顺滑的颜色变换

做一个顺滑的渐变色

用函数模拟颜色的变换

creator shader: 从零开始片元着色器制作顺滑的颜色变换