Chromatic aberration shader

[Noba]

Does anyone have any idea how to make these? I tried using an existing one but for whatever reason I can't seem to get it to work, and I'd imagine most of these shaders don't work because of how I scale my game. I don't know much in terms of how shaders work, so keep that in mind if you try to explain anything to me.

 

[DukeSoft]

I have made one Its pretty easy. You just offset the R G and B x/y positions of the input. I'll post it here in a bit when I have access to my computer.

 

[Noba]

I have made one Its pretty easy. You just offset the R G and B x/y positions of the input. I'll post it here in a bit when I have access to my computer.

Oh thank you!
Does it use any other scaling techniques, or disables the drawing of the application surface? If it does it'll probably mess up things again... (I really should work out a better way to scale it...)

 

[DukeSoft]

I'm using the shader as a full-screen effect (So I apply it on the application_surface and draw that at some end step event). I combine this with (motion) blur and bloom to add post-screen FX for explosions / impacts etc.
It should be fairly easy to apply to a scaled sprite or whatever. Its really about 4 lines of shader code.

Here's a GLSL chromatic aberration shader: https://www.shadertoy.com/view/Mds3zn
should be fairly easy to convert to GM.

As you can see;
vec3 col;
col.r = texture( iChannel0, vec2(uv.x+amount,uv.y) ).r;
col.g = texture( iChannel0, uv ).g;
col.b = texture( iChannel0, vec2(uv.x-amount,uv.y) ).b;
that is basically everything thats happening inside.

 

[Noba]

I'm using the shader as a full-screen effect (So I apply it on the application_surface and draw that at some end step event). I combine this with (motion) blur and bloom to add post-screen FX for explosions / impacts etc.
It should be fairly easy to apply to a scaled sprite or whatever. Its really about 4 lines of shader code.

Here's a GLSL chromatic aberration shader: https://www.shadertoy.com/view/Mds3zn
should be fairly easy to convert to GM.

As you can see;
vec3 col;
col.r = texture( iChannel0, vec2(uv.x+amount,uv.y) ).r;
col.g = texture( iChannel0, uv ).g;
col.b = texture( iChannel0, vec2(uv.x-amount,uv.y) ).b;
that is basically everything thats happening inside.

Well I do need it for the whole screen, that was why I was worried about the scaling thing.
Thanks though! Hopefully I'll be able to convert it- As I said, don't really know too much about shaders

 

[DukeSoft]

It should be something simple like so;

gl_FragColor = vec4(texture2D(gm_BaseTexture, vec2(v_vTexcoord.x - shakex*0.142, v_vTexcoord.y - shakey*0.0948)).r, texture2D(gm_BaseTexture, vec2(v_vTexcoord.x + shakex*0.0943, v_vTexcoord.y - shakey*0.05829)).g, texture2D(gm_BaseTexture, vec2(v_vTexcoord.x - shakex*0.042, v_vTexcoord.y + shakey*0.0624)).b, 1.0);

where shakex and shakey are uniform floats that you can change

 

[MeltingCat]

It should be something simple like so;

gl_FragColor = vec4(texture2D(gm_BaseTexture, vec2(v_vTexcoord.x - shakex*0.142, v_vTexcoord.y - shakey*0.0948)).r, texture2D(gm_BaseTexture, vec2(v_vTexcoord.x + shakex*0.0943, v_vTexcoord.y - shakey*0.05829)).g, texture2D(gm_BaseTexture, vec2(v_vTexcoord.x - shakex*0.042, v_vTexcoord.y + shakey*0.0624)).b, 1.0);

where shakex and shakey are uniform floats that you can change

This works great, but could you explain how you come to these numbers? I'm trying to understand how it works and I can't see the pattern behind it.

 

[klaudio]

Please answer this . Is it still possible to create games in Gm studio 1.4 and upload in Google play and to pass the level 28 api requirements ? If yes please any Guide of needed sdk and other configurations ?

 

[NightFrost]

The numbers seem mostly arbitrary, but the most important thing with them is to have the vectors for each color be sufficiently different. They all are work from same base values (shakex, shakey) so if multipliers were the same, each color would be offset to same position. If you look at the linked shadertoy shader, it takes circular motion and multiplies various frequencies together for a quasi-random value, then converts it to horizontal offset by applying the result as positive and negative x-offset to red and blue, rspectively.

 

[DukeSoft]

its very simple - the output pixel (gl_FragColor) will consist out of 3 new values, the Red thats offset by 0.142 in the X direction and 0.0948 in the Y direction, the Green thats offset by 0.0943 X and 0.05829 in Y, and Blue in 0.042 and 0.0624.

These numbers are multiplied by the "shake" factor to offset them more. So, yeah, those numbers are just arbitrary and you can change them however you like. Just make sure they each point in a little different direction, for best effect. You can make a different effect by making the Y very small and the X very big, this way you just have a horizontal offset.

Also, @klaudio , you're best off asking somewhere else and not in this topic which is completely unrelated to your question.

 

[MeltingCat]

Thanks @NightFrost and @DukeSoft , I guess I've been trying to make it more complicated than it was

 

[Mert]

https://marketplace.yoyogames.com/assets/3046/chromatic-aberration-shader