Page 1 of 1

Shader relative to camera

Posted: Thu Aug 18, 2016 7:10 pm
by veethree
Hello.

So i have this shader

Code: Select all

extern vec2 screen;
		extern Image map;
		extern number t;
		vec4 effect(vec4 color, Image tex, vec2 tc, vec2 sc)
		{
			vec4 m = Texel(map, tc);
			if (m.r == 1)
				{
					tc.x = tc.x + (sin((tc.y * 0.08) * screen.x + (t * 5)) * 0.002);
					tc.y = tc.y + (sin((tc.x * 0.08) * screen.y + (t * 5)) * 0.002);
					return Texel(tex, tc) * color;
				} else {
					return Texel(tex, tc) * color;
				}
		}

		]]
Not the greatest glsl code but that's not my problem, The shader is applied only to certain areas of the screen, Based on a canvas, That would be the "map" extern. And all that works fine, However, The game also has a camera, And when said camera is moving the area of the screen that has the shader applied to it looks weird. I know why this is happening, But i don't know how to fix it. Any ideas would be appreciated.

I'm not great at explaining things, There's a .love attached. The problem becomes very apparent if you jump (w) and look at the water (blue stuff above the player)
All the relative code is in src/state/game.lua
Blob.love

Re: Shader relative to camera

Posted: Thu Aug 18, 2016 10:23 pm
by Nuthen224
The water distortion is based on the onscreen coordinates, tc, which shifts every time the camera is moved. The sine wave is only supposed to be based on time here it seems, and tc is changing when it should not be, every time the camera is moving. So, you just need to account for that by subtracting the camera displacement when calculating sine. (Displacement here defined as the camera position divided by screen size). You just need to pass in the camea position each frame.

Code: Select all

extern vec2 screen;
extern vec2 camera;
extern Image map;
extern number t;
vec4 effect(vec4 color, Image tex, vec2 tc, vec2 sc)
{
	vec2 displacement = camera/screen;
	vec4 m = Texel(map, tc);
	if (m.r == 1)
	{
		tc.x = tc.x + (sin(( (tc.y-displacement.y) * 0.08) * screen.x + (t * 5)) * 0.002);
		tc.y = tc.y + (sin(( (tc.x-displacement.x) * 0.08) * screen.y + (t * 5)) * 0.002);
		return Texel(tex, tc) * color;
	} else {
		return Texel(tex, tc) * color;
	}
}
:awesome: