如何创建多个停止渐变片段着色器? [英] How to create multiple stop gradient fragment shader?

问题描述

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

I'm trying to create an OpenGL ES 2.0 fragment shader that outputs multiple stop gradient along one axis. It should interpolate between multiple colors at points defined in percents.

我已经通过使用if s片段着色器来实现了，就像这样:

I've achieved this by using ifs the fragment shader, like this:

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

他们说，片段着色器中的分支会降低性能.是否有一些巧妙的技巧可用于在不使用if的情况下在多个值之间进行插值?真的值得吗(我知道这是非常主观的，但是根据经验)?

They say that branching in fragment shader can kill performance. Is there some clever trickery that can be used to interpolate between many values without using ifs? Is it actually worth it (this is highly subjective, I know, but as rule of thumb)?

为说明我的问题，请在此GLSL沙盒链接中提供完整资源(尽管仍很简短): http://glsl.heroku.com/e#8035.0

To illustrate my problem, full source (still short though) in this GLSL Sandbox link: http://glsl.heroku.com/e#8035.0

推荐答案

如果要消除分支，可以执行以下操作(摘自Heroku)；

If you want to eliminate branches you can do following (taken from 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快.

But I'm not sure at all whether this is any faster than if/elses or not.

这篇关于如何创建多个停止渐变片段着色器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！