GLSL 内置函数
mix()
在 x 和 y 之间做线性插值:a 为 0.0 时返回 x,为 1.0 时返回 y,中间值按比例混合。
函数签名
float mix(float x, float y, float a)
vec2 mix(vec2 x, vec2 y, float a)
vec3 mix(vec3 x, vec3 y, float a)
vec3 mix(vec3 x, vec3 y, vec3 a)
vec4 mix(vec4 x, vec4 y, float a)参数
- x
- 起始值,a 为 0.0 时返回它。
- y
- 结束值,a 为 1.0 时返回它。
- a
- 混合比例,通常在 0.0 到 1.0 之间。传入向量时可以让每个分量用不同的比例。
返回值
x * (1.0 - a) + y * a,类型与 x 相同。
在线示例
修改右侧代码,左侧预览会实时更新。
工作原理
mix(x, y, a) 随着 a 从 0 变到 1,从 x 平滑过渡到 y。可以把 a 理解成百分比:
| a | 结果 |
|---|---|
| 0.0 | 100% 的 x |
| 0.25 | 75% 的 x,25% 的 y |
| 0.5 | 各一半 |
| 1.0 | 100% 的 y |
公式是 x * (1.0 - a) + y * a。示例上半部分的 a 是 uv.x,颜色从红到蓝均匀过渡;下半部分的 a 来自 smoothstep,混合只发生在一条窄窄的、来回移动的区域里。
常见用法
- 渐变:
mix(colorA, colorB, uv.y)做一个竖直方向的天空渐变。 - 把图形画到背景上:
mix(background, shapeColor, mask),mask在图形外是 0、图形内是 1。 - 状态之间的动画:
mix(start, end, progress),用时间驱动progress。 - 分通道混合:
mix(a, b, vec3(0.0, 0.5, 1.0))让红、绿、蓝三个通道用不同的比例。
常见错误
- 参数顺序写错。混合比例是第三个参数:
mix(colorA, colorB, t),不是mix(t, colorA, colorB)。 a超出 0 到 1。mix不会自动截断,a = 1.5会冲过 y。输入可能越界时,先用clamp包一下。- 把
vec3和vec4混在一起。x 和 y 的类型必须相同。