Rodrigo Posted October 1, 2016 Share Posted October 1, 2016 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. Quote Link to comment Share on other sites More sharing options...
xerver Posted October 1, 2016 Share Posted October 1, 2016 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 1 Quote Link to comment Share on other sites More sharing options...
Rodrigo Posted October 1, 2016 Author Share Posted October 1, 2016 Thanks Xerver, you're a rockstar!!! Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 14, 2016 Share Posted October 14, 2016 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. Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 14, 2016 Share Posted October 14, 2016 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? Quote Link to comment Share on other sites More sharing options...
Exca Posted October 14, 2016 Share Posted October 14, 2016 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 1 Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 18, 2016 Share Posted October 18, 2016 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! Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 18, 2016 Share Posted October 18, 2016 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? Quote Link to comment Share on other sites More sharing options...
Exca Posted October 18, 2016 Share Posted October 18, 2016 Have you tried changing the precision from mediump to highp? Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 18, 2016 Share Posted October 18, 2016 9 minutes ago, Exca said: Have you tried changing the precision from mediump to highp? Yes, no effect. Quote Link to comment Share on other sites More sharing options...
Fatalist Posted October 18, 2016 Share Posted October 18, 2016 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 Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 18, 2016 Share Posted October 18, 2016 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. Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 18, 2016 Share Posted October 18, 2016 With this code gl_FragColor = vec4(1.0, 1.0, 0.1, alpha); It looks like attachment pic Quote Link to comment Share on other sites More sharing options...
ruslanchek Posted October 22, 2016 Share Posted October 22, 2016 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.