Following this Godot Tutorial I've been implementing a shader for 2D global illumination. In the tutorial it mentions adding a UV to World aspect ratio change within the raymarching function to correct distances that are biased towards either X or Y axis (depending on resolution). This method works, but is it possible to apply this correction within the distance field shader itself?

Hopefully most of this makes sense if you’ve been paying attention up until now. One possibly obscure part might be transforming the UV to world aspect ratio. We need to do this if our viewport is rectangular or our distances will be different depending on whether they’re biased towards the X or X axis. We’ll need to translate back to UV space before sampling any input textures.

My original thought was to apply this transform to the coordinates themselves within the distance field shader, but I've not gotten anywhere with that implementation.

This is my current distance field fragment shader: (converts the output distance to a vec2 for increased precision--because I'm using GameMaker which uses 8-bit RGBA components for surface textures which cannot be modified)

varying vec2 in_Coord; // UV coordinate of the current pixel fragment.
uniform vec2 in_Resol; // Width,Height of the render resolution.

// Converts a float to a normalized vec2().
float V2_F16(vec2 v) { return v.x + (v.y / 255.0); }
// Converts a normalized vec2() to a float.
vec2 F16_V2(float f) { return vec2(floor(f * 255.0) / 255.0, fract(f * 255.0)); }

void main() {
    // Distance Field from Jump Flood texture.
    vec4 jfuv = texture2D(gm_BaseTexture, in_Coord);
    vec2 jumpflood = vec2(V2_F16(jfuv.rg),V2_F16(jfuv.ba));
    gl_FragColor = vec4(F16_V2(distance(in_Coord, jumpflood)), 0.0, 1.0);

FIGURE A: (Rectangular Viewport/Resolution) enter image description here FIGURE B: (Square Viewport/Resolution) enter image description here

The square output produces a much more uniform lighting output while the rectangular viewport has a biased x-component when sampling the distance texture which causes light to spread horizontally more. (FIGBURE C) While the square viewport is more visually uniform. (FIGURE D)

FIGURE C: enter image description here FIGURE D: enter image description here

  • \$\begingroup\$ could you use an oversized square dist field texture sized that would cover the rectangular viewport & exclude the excess at the top & bottom from calculations? Or use an oversized rendering target & clip it against the viewport? \$\endgroup\$
    – Pikalek
    Aug 27 at 16:45


You must log in to answer this question.

Browse other questions tagged .