瞭解如何在算法繪製成形函數的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); 

您可以通過與標量的向量的所有分量乘以乘以標量和矢量。