Hey, I'm Simon and I made a game!! :)
Support me: BUY & Demo on Steam

Below, you can see a traffic light in GTA V at night. It has a nice glow. You might think this is nothing special but look at the scrollbar of this website. There is a lot to talk about! Get yourself a tea and then let’s go!

Traffic Light at Night in GTA V

Foreword

First, we’ll talk about different solutions to create such a glow and why one could run into problems when trying to replicate it (depending on the engine; keyword: Tone mapping). Next, we’ll learn about billboards and see an example of Rockstars amazing attention to detail. At the end, I’ll present four little knowledge nuggets which I learned about game development and myself.

Bloom & Tone MappingBillboardsTips & Thoughts

Introduction

To get a glow like in GTA V, one could:

  1. Use a billboard (with a blob-texture to fake volumetric lighting)
  2. Use post FX Bloom
  3. Use real volumetric lighting

As far as I can tell, small light sources like this traffic light do not render as real volumetrics in GTA V (so we can rule out number 3). So let’s talk about bloom first:

Bloom

Bloom is basically blurring the image and slapping it as an additional layer on top of the existing image. Important: To get such a glow in Unreal or Unity, you need to set your emissive material to a very bright value, which normally leads to a desaturation of the core. In the video below, you can see how the sphere tends more and more toward white, the higher its emissive values go:

Bloom Demo in Unreal

But that’s weird, isn’t it? GTA achieved the glow without the having the core desaturated!

Question: Maybe they didn’t use high emissive values at all?

Answer: They did! When looking at the draw call (where the base geometry and the bloom are combined), we can see that both buffers use values far above 1.0!

But remember, if we’d do this in Unreal, it would immediately burn out into desaturated versions of red like shown above!

Or would it?

I’ve asked Froyok (because she wrote amazing articles about bloom and lens flares!) and she said: “Could be the tone mapper which doesn’t let the colors burn into white.”

So I’ve tried to find more information about tone mapping, stumbled across this cool video from tharlevfx about GT Tone mapper which led me to two very interesting information:

1. Unreal has not always done the bloom like they do it today! Their documentation shows (see video below) the old version, where the colors do not desaturate and the new filmic version, where the behavior is more realistic:

Unreal 4.27: Color Grading and Filmic Tone mapper

2. There are indeed Tone mappers which do not let the colors burn into whites! Using them is an artistic decision to strive for a certain look instead of realism. Here is an example from Grand Tourismo:

Gran Turismo Tonemapper by Meshula

Here is a wonderful breakdown example from Alex Beddows which shows how artistic direction leads to an active choice for a different tone mapper.

According to the amazing GTA V frame study by Adrian Courrèges the game (GTA V) uses a Tone mapper created for Uncharted 2 and this works differently from what we see in (the new) filmic version from Unreal:

“These operators apply the same calculation to R, G, B independently. One channel has no influence on the other. A component which is at zero will stay at zero after tonemapping. Which is why a very bright pure red, will stay pure red, and never turn white.”

Adrian Courrèges

Adrian even provides this Shadertoy Example where you can see how different tone mappers react to the high emissive values (I’ve changed line 52 to vec3 color = HDRColor * (sin(iTime) * 0.5 + 0.5); to have it animated):

Tonemapper Comparison by Adrian Courrèges

Summary: The traffic lights in GTA V use high emissive values to get a nice glow, but the tone mapper prevents the color from burning into white.

By the way: Whenever we see the usual behavior of light sources turning toward white, it’s painted directly into the texture. Here are some examples:

By the way, the texture for the pizza place is based on a photo and this place really exists! Check out my tweet about it!

But there’s something else: When one disables the post FX, there is still a little bit of glow around the light. It’s based on billboards and also a bit fascinating.

Traffic Light at Night in GTA V

Billboards

Using billboards to visualize lens flares or glows is nothing special (we will see an old-school example later). But: In GTA V, instead of only one, they use two billboards. There is also a nice texture and everything together is another great example on how much detail the people at Rockstar put into their work.

Traffic Light at Night in GTA V

Why am I so fascinated with that? Look at this video below! It shows what exactly happens in our eye: We see fine glare patterns with subtle movements because of little particles in our lens. And the Rockstar artists did not only make a texture with a lot of detail to replicate the pattern (see above, I’ve increased the luminance a bit for better visibility) …

Temporal Glare: Real-Time Dynamic Simulation of the Scattering in the Human Eye (Eurographics 2009 Supplemental Video)

…they also use the two billboards to rotate them against each other to add the subtle movement which we saw in the video above. Here is an example on their cars:

Car Light at Night in GTA V

That’s very nice, isn’t it?

By the way: The billboards shrink and grow depending on the viewing angle:

Traffic Light at Night in GTA V

The same goes for the car lights:

Traffic Light at Night in GTA V

Summary: In addition to the existing bloom, GTA V uses billboards to mimic effects which we know from our real-world eye vision. I love that these billboards also serve as a fallback in case someone disables the bloom.

Tips & Thoughts

I’d like to share some knowledge nuggets and personal experiences now.

1. Sparkly Tip

Sometimes one may want sparkles with a nice glow, but they shall not be super outstanding. In these cases, you can use a bigger particle and a texture where the glow is painted in (left) instead of relying on glow through post FX. This has more overdraw as the particles are bigger, but you get a nice subtle fairy dust. In the middle, you can see the unspectacular particles without glow and on the right an example of how much you’d have to push the emissive values to get the same size of glow by relying on post FX Bloom – but these sparkles now really SCREAM for attention, which is something you may not always want.

2. Old School

Game Dev History Lesson: Billboards for lens flares were used very early. Below is an example from Unreal 1.

Source: Unreal

Did you notice, that the lens flares take a little time to fade out and sometimes appear through the floor? This is a little artifact from trying to replicate an effect which we know from the real world: Lens flares do not just disappear, but they get gradually smaller depending on how much of the light source is covered:

Sunset [Source]

3. New Tech != Always Better

New technologies don’t make games always look better. Here is an example from NFS (which has exceptional good-looking lighting in my eyes!) and we can see the volumetric light around the streetlights far in the distance. Very nice!

Need for Speed

But turns out: They are not volumetric. It’s just billboards. Lol, old-school!!

Need for Speed

Now let’s look at a modern game. This is Watch Dogs®: Legion and it offers real volumetric lights! Must look way better than these weird billboards, mustn’t it?

Watch Dogs Legion Night Drive Around London In Foggy Wet Streets

You may notice, that the volumetric cones of the streetlamps are not visible in the distance. They fade in quite close to the player. This is most likely an optimization which is described in this fantastic video.

I made another video where is effect is seen even better because I’ve set the game to low settings so that we can even see the big voxels “flicker” a bit (but I don’t understand why they also fade the volume out when the camera comes closer):

Watch Dogs®: Legion

Another example: The blue spotlights from these drones just disappear in the distance (and reappear when I come closer again). With old-school billboards, this wouldn’t happen (except you want to cull them):

Watch Dogs®: Legion

Summary: I don’t want to talk bad about the Watch Dogs Tech! It’s just that sometimes it takes a while, until new technology is performing well (or until graphic cards allow everyone to enjoy it in great detail). But until this is the case, old-school tricks like billboards can sometimes look better than the more advanced tech.

4. Being Cocky

This is a personal story: I work(ed) for many years in custom engines and sometimes, when I hear about cool new features (for example from Unreal), I start to look down on our own tech.

Example: A long time ago, I heard that Unreal now supports post FX lens flares and from that moment I just assumed (without verifying if this is true) that all of their lens flares are now done with this cool new tech. I was laughing about our own engine, which still used old school billboards – rofl rofl lol lol!

But then the brand new Infiltrator Demo came out and guess what: They use old school billboards as well! In the video below, you can see how the billboard cuts into the geometry (which usually doesn’t happen with “real” lens flares because they arise in the camera and in games are rendered on top of everything):

So, turns out: I was wrong to look down on our little custom engine. I was arrogant, didn’t educate myself, and there is nothing wrong with using old school methods. Don’t be like past-Simon.

Thanks for reading until here, I hope you liked the article. Let me know in the comments.

Thank you Adrian Courrèges, Froyok & Tharlsvfx for your help and your work in form of articles/videos/examples! You helped me a ton!

Have a very nice day!
Simon ♥