1

我正在尝试在 Android 上的 OpenGL ES 2.0 中创建一个滚动列表，并且我希望列表的内容在列表到达顶部或底部时淡出。现在我正在片段着色器中实现它，但它非常慢。

这是我的着色器

precision mediump float;

uniform bool uEnableTexture;
uniform sampler2D uTexture;
uniform bool uEnableFade;
uniform float uTopFade;
uniform float uBottomFade;
uniform float uFadeWidth;

varying vec4 vPosition;
varying vec2 vTexCoord;
varying vec4 vColor;

void main(){
    if (uEnableTexture) {
        gl_FragColor = texture2D(uTexture, vTexCoord) * vColor;
    } else {
        gl_FragColor = vColor;
    }

    if (uEnableFade) {
        if (vPosition.y > uTopFade) {
            gl_FragColor = gl_FragColor * 0.0;
        } else if (vPosition.y > uTopFade - uFadeWidth) {
            gl_FragColor = gl_FragColor * (1.0 - (vPosition.y - (uTopFade - uFadeWidth)) / uFadeWidth);
        } else if (vPosition.y < uBottomFade) {
            gl_FragColor = gl_FragColor * 0.0;
        } else if (vPosition.y < uBottomFade + uFadeWidth) {
            gl_FragColor = gl_FragColor * (1.0 + (vPosition.y - (uBottomFade + uFadeWidth)) / uFadeWidth);
        }
    }
}

这是我想要达到的效果。 效果截图

有没有更有效的方法来实现这一目标？

编辑：我可以通过使用单独的程序并仅在需要淡入淡出时使用此着色器来改进这一点。

void main(){
    gl_FragColor = texture2D(uTexture, vTexCoord) * vColor;

    if (vPosition.y > uTopFade - uFadeWidth) {
        gl_FragColor = gl_FragColor * (1.0 - (vPosition.y - (uTopFade - uFadeWidth)) / uFadeWidth);
    } if (vPosition.y < uBottomFade + uFadeWidth) {
        gl_FragColor = gl_FragColor * (1.0 + (vPosition.y - (uBottomFade + uFadeWidth)) / uFadeWidth);
    }
}

我可以通过将其拆分为另外两个着色器来加快速度，一个用于顶部，一个用于底部，或者使用 uFadeWidth 来确定方向。

4

1 回答 1

1

您最好的选择可能不是在着色器中进行数学运算，而是预先计算一个 1 像素宽且与视口一样“高”的“渐变纹理”。

在这个纹理中，您可以存储每个屏幕y的淡入淡出值。

然后，在您的着色器中，您将得到另一个texture2D调用和一个乘法。

于 2012-07-07T00:16:32.390 回答