Create gradient filter on sprite.

[Rodrigo]

Hi,

I've been struggling to create a gradient filter over an sprite using shaders.

I have this and is working fine:

http://codepen.io/rhernando/pen/ORxWwO?editors=1010

On the other hand this code creates a nice gradient:

precision mediump float;

// start and end colors
vec3 color1 = vec3(0.0,0.0,1.0);
vec3 color2 = vec3(1.0,0.5,0.0);

void main( void ) {
    vec2 uvs = vTextureCoord.xy;
    vec3 mixCol = mix( color2, color1, uvs.y );
    gl_FragColor = vec4(mixCol, 1.0);
}

But I can't apply that gradient to the image as the first sample. I tried this, but it still generates a solid color on top of the image:

precision mediump float;

varying vec2 vTextureCoord;
varying vec4 vColor;

// start and end colors
vec3 color1 = vec3(0.0,0.0,1.0);
vec3 color2 = vec3(1.0,0.5,0.0);

uniform sampler2D uSampler;
uniform float customUniform;

void main(){
  vec2 uvs = vTextureCoord.xy;

  vec3 mixCol = mix( color2, color1, uvs.y );

  vec4 fg = texture2D(uSampler, vTextureCoord);

  fg = vec4(mixCol, 0.5);

  gl_FragColor = fg;
}

I'm not very familiar with the Shaders specific stuff, but definitely I'm missing something here. Any help will be appreciated.

Thanks,

Rodrigo.

[xerver]

You are very close, you mostly just forgot to mix the fg color at the end there. Additionally your colors will need to be vec4 so everything mixes properly.

Here is the fixed shader:

precision mediump float;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

uniform sampler2D uSampler;

// start and end colors
vec4 color1 = vec4(0.0,1.0,0.0,1.0);
vec4 color2 = vec4(1.0,0.0,0.0,1.0);

void main(){
	vec4 mixCol = mix(color2, color1, vFilterCoord.y);
	vec4 fg = texture2D(uSampler, vTextureCoord);
	
	gl_FragColor = mix(fg, mixCol, 0.5);
}

And a codepen showing it off (notice I removed the `customUniform` uniform since it seemed unused):

http://codepen.io/anon/pen/dpVvpR?editors=1010

[Rodrigo]

Thanks Xerver, you're a rockstar!!!

[ruslanchek]

On 10/1/2016 at 7:30 PM, xerver said:

You are very close, you mostly just forgot to mix the fg color at the end there. Additionally your colors will need to be vec4 so everything mixes properly.

Here is the fixed shader:

Sorry, can't understand, why in this example bottom color (green) do not fully drawed - a whole gradient just draws on it's two-thirds.

[ruslanchek]

It seems that gradient is height aware. Look at this example: 
http://codepen.io/anon/pen/ORwmWR?editors=1010 - here is 248 px of height
and here is 249 http://codepen.io/anon/pen/BLPRWp?editors=1010.

Strange thing isn't it? 

[Exca]

30 minutes ago, ruslanchek said:

It seems that gradient is height aware. Look at this example: 
http://codepen.io/anon/pen/ORwmWR?editors=1010 - here is 248 px of height
and here is 249 http://codepen.io/anon/pen/BLPRWp?editors=1010.

Strange thing isn't it? 

The uv mapping in shader goes through the whole filter texture which might be larger than the area shown on screen. You can fix this by calculating matrix to map the correct area. Example can be seen in this thread

 

[ruslanchek]

Quote

The uv mapping in shader goes through the whole filter texture which might be larger than the area shown on screen. You can fix this by calculating matrix to map the correct area. Example can be seen in this thread

Thank you It works!

[ruslanchek]

But, i have an issue. Look at this. https://codepen.io/rshashkov/pen/NROjdx?editors=1010

My NVIDIA GeForce GTX 750 Ti render perfect, but on some machines (like MacBook or MacMini with Intel Iris or 5000) gradient has glitches (see attachment).

May be somebody know what is it?

[Exca]

Have you tried changing the precision from mediump to highp?

[ruslanchek]

9 minutes ago, Exca said:

Have you tried changing the precision from mediump to highp?

Yes, no effect.

[Fatalist]

 

43 minutes ago, ruslanchek said:

some machines (like MacBook or MacMini with Intel Iris or 5000) gradient has glitches (see attachment).

Does this version work? https://codepen.io/anon/pen/mAzrAX?editors=1010

[ruslanchek]

16 minutes ago, Fatalist said:

 

Does this version work? https://codepen.io/anon/pen/mAzrAX?editors=1010

I change it and no effect too.

gl_FragColor = vec4(1.0, 1.0, 0.1, alpha);

BTW, iPhone have same glitch.

On Intel HD 5000 glitch on Safari and chrome, on Iris Pro only Safari.

[ruslanchek]

With this code

gl_FragColor = vec4(1.0, 1.0, 0.1, alpha);

It looks like attachment pic

[ruslanchek]

if(result.a > 0.0) {
   ...
   gl_FragColor = mix(fg, mixCol, alpha);
} else {
   gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}

I've found out. The problem is that shader must draw no color in else block.