PDA

View Full Version : Translating a light's "screen coordinate" in the fragment shader



clarenx
02-21-2014, 10:58 AM
I have a 2D sprite-based scene and I'm implementing lights that hover just above the 2D plane. Each sprite has a normal map, so I have a fragment shader that shades each sprite according to the lights' position and color.

I pass the lights' coordinates in via a uniform - the coordinates are in exact screen pixel coordinates (e.g. 900, 600), so I apply my ortho matrix to them to get the normalized position. My problem is that the "radius" of the lights is affected by the size of the screen/window, and I'm not sure why. I want the lights to be the same size no matter what.

I have removed all but the necessary code and posted it on an interactive GLSL editor - you can modify the window size to see the undesired effect (sorry, can't post URLs?): glsl.heroku.com/e#14464.0

I'll also post the code here:


uniform vec2 resolution;

void main(void)
{
//orthographic matrix
mat4 ortho_matrix = mat4(
2.0/resolution.x, 0, 0, 0,
0, 2.0/-resolution.y, 0, 0,
0, 0, -1, 0,
-1, 1, 0, 1
);

//surface normal of the 2D plane (looking straight down)
vec3 surface_normal = normalize(mix(vec3(-1), vec3(1), vec3(0.5, 0.5, 1.0)));

//screen position of the light
vec2 light_screen_pos = vec2(650, 150);

//translate light's position to normalized coordinates
//the z value makes sure it is slightly above the 2D plane
vec4 light_ortho_pos = ortho_matrix * vec4(light_screen_pos, -0.03, 1.0);

//calculate the light for this fragment
vec3 light_direction = light_ortho_pos.xyz - vec3(gl_FragCoord.x / resolution.x, gl_FragCoord.y / resolution.y, 0);
float dist = length(light_direction);
light_direction = normalize(light_direction);
vec3 light = clamp(dot(surface_normal, light_direction), 0.0, 1.0) * vec3(0.5, 0.5, 0.5);
vec3 cel_light = step(0.15, (light.r + light.g + light.b) / 3.0) * light;

gl_FragColor = vec4(pow(light + cel_light, vec3(0.4545)), 1.0);
}

Thanks for any advice or insight.

Brokenmind
02-21-2014, 02:30 PM
You should not delimit the light's radius according to the screen size (although that would make more sense, I admit). In your code above, you compute the direction (on which some calculations depend) like this:

vec3 light_direction = light_ortho_pos.xyz - vec3(gl_FragCoord.x / resolution.x, gl_FragCoord.y / resolution.y, 0);
This makes the light dependent on the screen size. I changed the code (nice tool by the way) to the following:

vec3 light_direction = light_ortho_pos.xyz - vec3(gl_FragCoord.x / 100.0, gl_FragCoord.y / 100.0, 0);
This at least made the light a circle which appeared to be independent from the size. Maybe this effect occurs due to some double balancing of the aspect ratio, but I'm not sure. I hope this helps ;)

clarenx
02-21-2014, 02:52 PM
You should not delimit the light's radius according to the screen size (although that would make more sense, I admit). In your code above, you compute the direction (on which some calculations depend) like this:

vec3 light_direction = light_ortho_pos.xyz - vec3(gl_FragCoord.x / resolution.x, gl_FragCoord.y / resolution.y, 0);
This makes the light dependent on the screen size. I changed the code (nice tool by the way) to the following:

vec3 light_direction = light_ortho_pos.xyz - vec3(gl_FragCoord.x / 100.0, gl_FragCoord.y / 100.0, 0);
This at least made the light a circle which appeared to be independent from the size. Maybe this effect occurs due to some double balancing of the aspect ratio, but I'm not sure. I hope this helps ;)

Thank you. After some more experimentation, I realized that the light direction needed to be scaled according to the screen resolution. I just did something like:


light_direction *= vec3(resolution.x / brightness, resolution.y / brightness, 1.0);

That makes the light a circle and keeps it independent of screen size.