从 bookofshaders 关于算法绘图整形函数的章节了解设置颜色数学的工作原理？

Question

book of shaders 有十几个例子，他们以复杂的方式设置颜色

color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

问题：

你认为它们 pct 代表什么？
为什么数学要减 1 (1.0-pct)？
为什么数学乘以颜色加pct color+pct?
如何将数字与向量相乘 x*vec3(0.0,1.0,0.0);？
为什么数学要将一个数和一个向量相乘？

完整代码示例

#ifdef GL_ES
precision mediump float;
#endif

#define PI 3.14159265359

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float plot(vec2 st, float pct){
  return  smoothstep( pct-0.02, pct, st.y) - 
          smoothstep( pct, pct+0.02, st.y);
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;

    // Smooth interpolation between 0.1 and 0.9
    float y = smoothstep(0.1,0.9,st.x);

    vec3 color = vec3(y);

    float pct = plot(st,y);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

    gl_FragColor = vec4(color,1.0);
}

Answer 1

它是形式的线性插值

interpolated = (1 - t) * source + t * target

t是0和1之间的插值参数。如果它是 0，你最终得到源值，如果它是 1，你最终得到目标值。介于两者之间的任何值混合两个值。您可以使用任意数量的值进行插值。重要的是你的插值权重总和为1（这被称为仿射组合，这就是上面公式中权重为1 - t和t的原因；1 - t + t = 1).

您还可以在 [0, 1] 之外使用插值参数 t。这就是所谓的外推，如果这个概念有意义，它是非常具体的问题。

GLSL 函数 mix 已经实现了这个插值。所以您可以将其替换为以下内容：

color = mix(color, vec3(0.0,1.0,0.0), pct);

通过将向量的所有分量与标量相乘，即可将标量与向量相乘。

从 bookofshaders 关于算法绘图整形函数的章节了解设置颜色数学的工作原理？

Understanding how setting color math works from bookofshaders chapter on Algorithmic drawing Shaping functions?

math

colors

glsl

webgl

fragment-shader