01 片元与数据

mix：在两个值之间插值

把比例从 0 推到 1，观察两个端点之间的颜色。

混合比例 t0.50

习题调参数0%

让颜色停在 80% 的薄荷绿

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec3 a = vec3(0.96, 0.43, 0.30);
  vec3 b = vec3(0.48, 0.83, 0.69);
  vec3 color = mix(a, b, 0.500);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 a = vec3(0.96, 0.43, 0.30);
  vec3 b = vec3(0.48, 0.83, 0.69);
  vec3 color = mix(a, b, 0.500);
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

mix(a, b, t) = a×(1−t) + b×t。t 为 0 得到 a，为 1 得到 b。

试一试

把 t 拉到 0.5，正好一半
在代码里把 t 改成 vUv.x，变成渐变