Jump to content

Create gradient filter on sprite.


Rodrigo
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...
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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...