Zombie Hunter, Inc. can be described as Left 4 Dead meets Golden Axe. It is a top-down PC shooter set in Washington, DC. Your job is to rescue survivors from the zombie apocalypse . . . for a reasonable fee, of course. More than an arcade shooter, Zombie Hunter, Inc. also includes gear customization, quests, and non-linear storytelling with branching paths to deliver the most exciting top-down shooting you’ve ever seen.

Post news Report RSS Zombie Hunter inc: How we made an HQ bloom system like in Battlefield 3

Now Zombie Hunter inc features a badass fullscreen bloom system, similar to the one used in Battlefield 3. Here we will tell you how it was done.

Posted by on

Hi guys!I am glad to let you know that Zombie Hunter inc Alpha has now been released on Desura. Moreover, we have recently uploaded a patch that fixes the issue when blood was not rendered in game at all. Now you can finally play the game the way it meant to be. Try it out:

Desura Digital Distribution
Zombie Hunter in Alpha hotfix.

Our next milestone is the campaign mode, which we are now working on and our first campaign level is scheduled for this summer so you will soon be able to have a first look at it. Stay tuned!

In this article I will tell you how we solved a mystery of the badass bloom from Battlefield 3 and implemented a similar system in Zombie Hunter inc.There are plenty of resources out there that tell you how to add bloom to your game, but there are almost none telling how to make it right. The standard explanation you will find on the net will be something like this:- downscale your screen to 1/4 of it’s size (width and height) and perform two separable gaussian blur passes;- upscale the result and add it to the main picture.The problem is, if you do it this way, you get a pretty crappy bloom :). It’s quite small (that is it will not reach out too far from the source), and quite often it flickers and has a squarish shape. That was the kind of bloom Zombie Hunter inc used to have. It was pretty decent and I was more or less content with it. Untill I saw this:


Battlefield 3 features one of the most badass bloom systems up to date

That is just another screenshot from Battlefield 3 showcasing one of the most awesome bloom system you will ever see in a video game. No wonders that the game with one of the best graphics in history can do it.For a very long time after seeing this picture I thought that such system can only be implemented by an AAA company. I simply could not think of a way to achieve such a smooth and round fullscreen bloom without performing very large Gaussian blur over the final image (that would make any game VERY slow). But then one day I found a way to look under the game’s hood.With modern tools like Intel GPA or NVidia NSight you can actually decompose a frame from any videogame and look how it was drawn. That is, you can see what 3d models were used there with what textures and in what order they were drawn on the screen. You cannot see the shader code though :) but… you can guess it if u’r guud :).


Intel GPA allows you to see how videogames draw their pretty pictures

Armed to the teeth and ready to conquer I started digging. I quickly made a good frame where my screen was completely covered with juicy bloom as a result of firing from and RPG launcher. Here it is:


Frostbite 2 engine can make a mere spark bloom like a sun over the entire screen

As I looked into the steps they made to achieve this bloom I was surprised: their technique was not complex at all! There were two main differences between their approach and mine. Firstly, they downscaled their scene down to a 1/64 size instead of just 1/4. That allowed them to actually make the bloom fullscreen. But, to make it smooth, they did another thing: as they upscaled their blurred texture, they were adding the intermediate downscale result into it AND performed the two blur passes after each addition. To make it clear, this is how they did it step-by-step:
1. Downscale your scene picture step-by-step to 1/2, 1/4, 1/8, 1/16, 1/32 and 1/64 of it’s original size (that is down to originalWidth/64, originaHeight/64).2. Blur the 1/64 image.3. Add the result into the 1/32 image.4. Blur the resulting 1/32 image.5. Continue the steps 3 and 4 until you reach 1/2 image, the latter should also be blurred.6. Copy the results into the final image.7. Profit :).


Downscale first


Afterwards, blur the textures and then, consecutively add them up, upscale and blur again

However, when I actually started implementing this, the first results were aweful as the bloom formed huge ugly suqares :). I quickly realized that the problem was in the type of images I used to capture bloom. You simply cannot use ordinary 8-bit per channel textures here as their precision is not enough, because of the precision loss, some colors are lost and you get squares. Even 10 bits were not enough, only switching to 16-bit precision textures allowed me to solve the problem.Then there was another issue – the flickering. The bloom flickered as the camera moved. To solve this I started filtering the data at every downscaling and upscaling step. That means I started manually reading four values from the bigger texture before averaging them and writing into the smaller one. I am coding on XNA 4.0, which does not support 64-bit texture filtering and because of that I cannot use hardware texture filtering, so I had to write the code myself and suffer a slight performance loss. But as I did that final step, I was finally able to achieve the most awesome bloom in the universe:


HQ fullscreen bloom in Zombie Hunter inc

So right now Zombie Hunter inc enjoys superbadass bloom which our artists are happy to utilize with endless creativity!

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: