了解如何在算法绘制成形函数的bookofshaders一章中设置颜色数学的工作原理？

Question

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

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

问题：

1. 什么他们PCT代表呢，你觉得呢？
2. 为什么数学减1 (1.0-pct)？
3. 为什么按颜色加上pct color+pct？
4. 你如何乘以一个数字和一个向量x*vec3(0.0,1.0,0.0);？
5. 为什么数学乘数和矢量？

完整代码示例

#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); 

您可以通过与标量的向量的所有分量乘以乘以标量和矢量。