Variance Shadow Maps

This was a decision that came in pretty late in the process. We had been using regular PCF Shadow Maps for a while, but as our hand-painted textures got better and better, the filtering artifacts that come with PCFSM became more of a nuisance. I thus started looking into alternative shadowing methods and ended up landing on Variance Shadow Maps. The separate filtering and the smoothness that this method brings immediately caught my attention considering our art style.

Variance Shadow Maps #1

Though as with all shadow mapping techniques, VSM isn’t without flaws. Its most significant one being light bleeding on overlapping occluders. This is particularly bad when your game has a free 3D camera, but in our case the fixed-angle camera allowed for careful crafting of the environment and let us work around most of the usual artifacts brought by VSM.

Variance Shadow Maps #2 Large

If you look closely you may notice that the penumbra boasts a warm colored fringe.

Another part of this technique that really sold it to our art team is how these smooth shadows could be carefully parameterized alongside self-shadowing to fake ambient occlusion in our particular scenarios like on the cube trees’ canopies:

Variance Shadow Maps #3 AO

Here’s a cropped shot of what our floating point depth + depth² shadow buffer looks like before and after blurring if you’re curious:

Variance Shadow Maps #4 Blur

Distortion and Chromatic Aberrations for VFX

Another one of my favorites, this technique alongside some camera shakes add a lot of oompf to our big and impactful VFX sequences. The main difficulty here was to not overdo it, and keep it for the key story-creating moments in the game (Titans spawning, structures falling down, etc.).

Distortion and Chromatic Aberrations GIF

And here’s a quick breakdown of what the process looks like:

Distortion and Chromatic Aberrations Breakdown

We basically maintain a 2-component distortion buffer that both regular geometry and particles can render to. This buffer is then used to offset our texture lookups in the uber post-process shader.


Nothing too extreme here, but I spent a decent amount of time polishing our outline rendering until we were really satisfied. Guardians of Atlas uses outlines both for visual style and readability. I’m not going to dive into readability too much here because it would require its own article, but we’re basically using outlines as another readability layer on top of ground selection halos to highlight what is currently under the cursor, as well as what the enmity of the unit/structure currently being hovered. Another readability goal with outlines was to further highlight intractable entities in the game from the static environment. Lastly, and that one came later in the process, careful parametrization of the sobel filter allows for a very subtle smooth edge to the outlines, which further helps edge anti-aliasing.

Colored unit outlines

Here’s a quick reconstructed breakdown of the process:

Outlines process

Closing words

One of the most challenging parts of this work was maintaining a consistent look between all platforms (WebGL, OpenGL, and later DirectX11) which we achieved by sticking to a smaller subset of features, mostly based on OpenGLES 2.0 plus some extensions.

Another interesting part of the work was making sure the game ran at a smooth 60fps across all ranges of hardware and platforms, from integrated Intel GPUs on Mac and Browser to high-end discrete GPUs on Windows. This was achieved by carefully selecting with the art team which features to toggle or downgrade for lower-end machines, while keeping most of these settings exposed to the players for more granular tweaking.