android - OpenGL ES 2.0 中滚动列表的淡入淡出效果

Question

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

这是我的着色器

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 来确定方向。

Answer 1

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

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

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