Rodrigo

Create gradient filter on sprite.

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.