[Effect] Opacity Gradient

I was thinking it would be cool for architecture to fade at the top when you walk behind it, but for it to stay solid at the bottom. I asked around, but noone knew anything, so i created a shader! https://www.dropbox.com/s/fv94dulcw62vl ... adient.png

You can set the Opacity at the top, and you can also set the width of the gradient, in case the sprite is supposed to have a base that never fades. In this example, I have the opacity at the top set to 0 and the width set to 50%. I also threw in an X axis component just because.

https://www.dropbox.com/s/5lja8h5cnwy7h ... addon?dl=0

This does everything I need, but I think it would be good if I could reverse it somehow, so the faded part shows up at the bottom. It would make sense for it to do that when negative widths are entered, and it would be really easy to do this with an if statement, but I heard that branches are a bad thing to stick into the rendering pipeline. I'd love for some of the pros to weigh in and show me how it's done!

bladedpenguin

"This does everything I need, but I think it would be good if I could reverse it somehow, so the faded part shows up at the bottom."

Use the following to reverse it-

/////////////////////////////////////////////////////////

// Opacity Gradient effect

varying mediump vec2 vTex;

uniform lowp sampler2D samplerFront;

//uniform lowp float pixelWidth; not needed //

//uniform lowp float pixelHeight; not needed //

uniform lowp float opacityx;

uniform lowp float heightx;

uniform lowp float opacityy;

uniform lowp float heighty;

void main(void)

{

lowp vec4 front = texture2D(samplerFront, vTex);

mediump float ay = (1.-vTex.y) *((1. - opacityy) / heighty) + opacityy;

mediump float ax = vTex.x*((1. - opacityx) / heightx) + opacityx;

gl_FragColor = front*min(ax*ay,1.0);

}

------------------------------

This bit ... (1.-vTex.y).... Flips it.