Post news RSS Basement: Fog of war

Here's a post about Fog of war post fx, i've done a few days ago for our upcoming game. I give a short walkthrough with lots of screenshots on how to achieve a good fog of war fx, with shader sources for Unity. There are also some tiny tips, like blend max, to avoid cloud outlines effect. Go check it out. Would appreciate your questions and feedback

Posted by on

We have had a lot of thoughts on different graphics enhancements for Basement last times. And a few days ago, i've made one. It's like fog of war post effect, that hides out what is happening outside of explored areas. Here is how it looks in current build.

image

Technically it's easy effect, but i'd like to describe it in details below.[[MORE]]As you may already noticed, we're using Unity for our game. But it won't matter, cause it can be easily reproduced in any other framework with an access to framebuffer or more user-friendly render textures.This effect is based on a simple principle: we want to render highlights in already observed points and make everything else dimmed. If you'd draw such fx in photoshop, you'll just create a new layer with overlay blending and highlighted drown in white.

image image

To achieve similar effect we'll need to render that texture with highlights. In Unity i've added a new rendering Layer, called FogFX, and attached quad with simple texture to each view, that should be highlighted.

image

Those shadow circles are overlapping each other. In our case, to avoid clouds effect ( Multiply overlapped edges of circles would be more lightened ), so i've fixed blending in shader, that takes maximal value from alpha channel for current fragment. Here are sources:
All circles are rendered to separate camera. In Unity Pro you have an access to Render Textures, so you don't have to mungle with framebuffers, getting what was rendered that camera. This is what has been rendered to that cam:

image

The last step is to draw that texture again with proper blending to a usual camera. As we rendered highlights as shadows, i need to subtract color value from that texture. I've also added a float uniform to control fog density. Here is shader source for inverted fx used to render that fog.

Final view:

image

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.