Как создать несколько шейдеров фрагментов градиента stop?

Я пытаюсь создать шейдер фрагментов 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

10
glsl gradient interpolation opengl-es opengl-es-2.0

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

но я совсем не уверен, что это быстрее, чем если/elses или нет.

8