If you have checked our Ludum Dare entry, Egress you might be wondering how we created the glow and screen-warping effect.

If you haven't played it yet, give it a go! https://lunatic-games.itch.io/egress

The Glow Effect

To create the glow, we applied a Gaussian Blur additively to the screen. By doing it additively, it created a glow effect rather than just blurring the entire screen. While attempting to optimize the shader code, I discovered that if it was applied in steps, 4 pixels in this case, it created a diode look:

The complete code (written in Godot's native shading language): ``` shadertype canvasitem;

uniform float radius = 8.0; // Radius of pixels to consider uniform float stepsize = 4.0; // Larger steps give it a more pixel-y look uniform float sd = 10.0; // See Gaussian Blur algorithm uniform float additivestrength = 24.0; // How much to include of the blur output uniform float center_strength = 1.0; // How much to include of the un-blurred pixel color

void fragment() { float pi = 3.141592653; float e = 2.71828; float multiplier = 1.0 / (2.0 * pi * pow(sd, 2)); vec4 sum = vec4(0.0); for (float x = -radius; x <= radius; x += stepsize) { for (float y = -radius; y <= radius; y += stepsize) { vec4 value = texture(SCREENTEXTURE, SCREENUV + SCREENPIXELSIZE * vec2(x, y)); float p = -(pow(x, 2) + pow(y, 2)) / (2.0 * pow(sd, 2)); sum += value * multiplier * pow(e, p); } } COLOR = sum * additivestrength + texture(SCREENTEXTURE, SCREENUV) * centerstrength; } ```

The Screen-Warping Effect

It took a bit of testing to find the best functions to use for creating a convincing screen warp. We ended up offsetting the UV coordinates of the screen using two different cosine waves: one based off the distance from the horizontal center, and another one using the distance from the vertical center. If the UV coordinates ended up being outside the boundaries, the screen was simply colored black.

The complete code: ``` shadertype canvasitem;

uniform float margin; uniform vec2 strength = vec2(10.0, 1.0); uniform vec4 backgroundcolor: hintcolor;

void fragment() { float x = SCREENUV.x - 0.5; float y = SCREENUV.y - 0.5; y *= strength.y * (1.0 - cos(x)); // How much to offset the y UV coordinate x *= strength.x * (1.0 - cos(y)); // How much to offset the x UV coordinate if (SCREENUV.y + y > 1.0 - margin * SCREENPIXELSIZE.y || SCREENUV.y + y < margin * SCREENPIXELSIZE.y || SCREENUV.x + x > 1.0 - margin * SCREENPIXELSIZE.x || SCREENUV.x + x < margin * SCREENPIXELSIZE.x) { COLOR = backgroundcolor; } else { COLOR = texture(SCREENTEXTURE, SCREEN_UV + vec2(x, y)); }

} ```

If you haven't checked out our game yet, we would love for you to give a shot and give some feedback!

It can be played in your browser here: https://lunatic-games.itch.io/egress