如何创建多个停止渐变片段着色器？答案

【问题标题】：How to create multiple stop gradient fragment shader?如何创建多个停止渐变片段着色器？
【发布时间】：2013-04-02 20:11:45
【问题描述】：

我正在尝试创建一个 OpenGL ES 2.0 片段着色器，它沿一个轴输出多个停止渐变。它应该在以百分比定义的点上的多种颜色之间进行插值。

我通过使用ifs 片段着色器实现了这一点，如下所示：

float y = gl_FragCoord.y;
float step1 = resolution.y * 0.20;
float step2 = resolution.y * 0.50;

if (y < step1) {
    color = white;
} else if (y < step2) {
    float x = smoothstep(step1, step2, y);
    color = mix(white, red, x);
} else {
    float x = smoothstep(step2, resolution.y, y);
    color = mix(red, green, x);
}

他们说片段着色器中的分支会影响性能。是否有一些巧妙的技巧可用于在不使用ifs 的情况下在许多值之间进行插值？它真的值得吗（我知道这是非常主观的，但根据经验）？

为了说明我的问题，此 GLSL 沙盒链接中的完整源代码（尽管仍然很短）：http://glsl.heroku.com/e#8035.0

【问题讨论】：

据我了解，GPU 上的所有内核都希望同时执行相同的操作。如果您有分支，则存在不同核心需要执行不同操作的风险，因此某些核心实际上会被阻塞。这就是扼杀性能的原因。在着色器中避免分支确实是一种好习惯。

标签： opengl-es opengl-es-2.0 glsl gradient interpolation

【解决方案1】：

如果您想消除分支，您可以执行以下操作（取自 Heroku）；

color = mix(white, red, smoothstep(step1, step2, y));
color = mix(color, blue, smoothstep(step2, step3, y));
color = mix(color, green, smoothstep(step3, resolution.y, y));

但我完全不确定这是否比 if/elses 更快。

【讨论】：

这种我其实一直在寻找的答案！如果我遇到性能问题，那么我将对这些方法的性能进行基准测试。