Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
August 31, 2014
arrowPress Releases
August 31, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Crafting Madness #1: Volufaketric Fog in Asylum
by Francisco Tufro on 07/14/14 02:32:00 pm   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

If you've been following Asylum's development, you already know that the game's graphics are based on pre-rendered textures projected on top of a cube with inverted normals. Since gouraud shading is avoided in these faces, you have the illusion of a panoramic view. Using this technique instead of 3D rendering allows the game to have great looking graphics without the need of costly (in development and computational time) real-time rendering techniques. A clever trade off if you ask me. The downside of this technique is that you lose all the benefits of dynamic lighting and depth provided by the third dimension, and with it, a lot of realism. I had been thinking that with some shader-level magic we could re-create some stuff needed for a few visual effects we wanted to implement. This post is about one of those visual effects...

A horror game without fog? No way!

This was basically the feeling of the whole team. We needed to have animated fog and it should be realistic, it couldn't be just an overlay on top of each cube's face, that wouldn't look good enough. Pablo and I started discussing the idea of using a Z-Depth mask exported from 3D Studio Max in some way to simulate depth in each face. For you to understand, Pablo exported an image where he defined white as far and black as near and all the distances in between as shades of grey. You can see an example here:

original_vs_zdepth

The idea is that I could use the depth information inside a shader to control the fog's opacity. To give you an idea, if fog is represented by a white square the result would look something like this:

volumetric_fog_white

This was the first test we did, and it already looked promising! The second step was to use a cloud texture instead of a white square, which ended up looking fine but if we were going to use a cloudy fog, we couldn't use a static one, it needed to be animated.

Screen Shot 2014-07-10 at 4.22.05 PM

Let's move!

I've done some post-processing effects in the past, so I was already familiar with using framebuffers as textures. This approach worked like charm. In Unity we solved this using Render Textures in a few steps (sorry, but this is a Pro-Only feature):

Create a fog particle system

The particles move really slow and have their alpha changing slowly during its lifespan, they also rotate a little bit over time. We added a layer called "Fog" and selected it in the particle system. Screen Shot 2014-07-10 at 5.32.21 PM  

Create a camera

We created another camera (without the main camera tag), and positioned it to look at the particle system, and limited its Culling Mask to 'Fog' only. The background of the camera was set to black too, in this way we were able to sum the fog texture on top of the original one. Screen Shot 2014-07-10 at 4.30.40 PM

Create and assign a render texture

We created a Render Texture (in the project browser Create->Render Texture) and assigned it as the Render Texture to the camera. Then also assigned it as the Fog texture to send to our custom shader and...

Enjoy fog

In this video you can see the result of the technique, it added a really nice looking and animated fog that is consistent in terms of depth. [youtube]https://www.youtube.com/watch?v=3eo9XSO4rQM[/youtube]

Conclusion

This was the first experiment to achieve a set of ideas we have about re-creating some 3D visual effects on our 2D projected space in Asylum. Using a texture with z-depth as an opacity mask for an animated fog texture proved to work really well and the results looked good enough. In the future we're planning to use similar techniques to simulate dust particles and dynamic lights. We started to evaluate using normals to recreate specular highlights and other interesting stuff like that. We'll see how far we'll be able to take this! Is there any interesting idea that this post has brought to your mind? What do you think about the technique? Any optimization that you may think about? It would be great to read some comments!


Related Jobs

Raven Software / Activision
Raven Software / Activision — Madison, Wisconsin, United States
[08.30.14]

Sr. Software Engineer (Gameplay)
Infinity Ward / Activision
Infinity Ward / Activision — Woodland Hills, California, United States
[08.30.14]

Senior AI Engineer
Infinity Ward / Activision
Infinity Ward / Activision — Woodland Hills, California, United States
[08.30.14]

Lead Tools Engineer - Infinity Ward
Insomniac Games
Insomniac Games — Burbank , California, United States
[08.29.14]

Senior Engine Programmer






Comments


Ian Morrison
profile image
Using the particle effects on a render texture is an interesting approach. I used similar particles for background fog in a few levels of Life Goes On and found it was a reasonable approximation (for a 2.5D sidescrolling view, anyhow). It's funny how much just a little bit of particle rotation does! I also found that randomly varying particles between two slightly different shades and hues of colour helped add some nice texture and variation, instead of just having a solid colour fog. Correctly chosen, they helped give the impression of shadows or lighting within the cloud.

I wonder if this'd hold up in a full 3D game as a post effect or something. You'd need to figure out some approach for managing the particles as you change orientation or it'd look strange... maybe making the particles in a sphere around the camera and then orienting the camera with the player?

Could be interesting to experiment with!


none
 
Comment: