Abstract art!

Many games seem to share the same set of movies and comics as their main source of inspiration, but for Proun I went an uncommon (for games) and very different route: my starting point was the abstract art from the first half of the 20th century. As long is the Fauvists play dead, I suppose this is pretty much my favourite art period.

When I had the core gameplay up and running, I was looking for an art style for it and quickly came across Mondriaan:



However, although awesome, this doesn't really fit Proun: characteristic to style is that there are no diagonal lines or curves. Making playable levels for Proun like this would be almost impossible.

So I looked a bit further and stumbled into Kandinsky. His work went through a couple of phases, from his early figurative art, to very expressive abstract art, to the more geometric abstracts of his later years. The expressive stuff is definitely my favourite, so after discarding Mondriaan, I decided to try something like this:



I started experimenting with shaders to achieve this art style, but at the time (wow, four years ago already!) I didn't have the slightest clue how to achieve this. The best image I have of those experiments shows what abominations I was creating (of course, the background grid was not intended to remain that way):



Today I have some ideas for how to tackle such a style, but at the time I lacked the skill, so I jumped into something a lot simpler in terms of shapes and colours:



Still Kandinsky, but later in his life. To me, this period in Kandinsky's work misses the intensity of earlier work, but replaces this with an incredible liveliness, and through the jumble of shapes comes a beautiful balance and unity in composition and colour. Kandinsky always surprises me with that such an amount of hues and shapes can somehow form something coherent.

What interests me most here is that while translating such paintings to a 3D game, I ended up somewhere pretty different. Even though Kandinsky's influence is clearly visible in Proun, I think my game has a new and unique vibe that is totally it's own. In this image the similarities may be at their most visible, but it is still very different:



Funny thing is that the discarded Mondriaan kept floating in my mind unconsciously. Only after finishing the second track did I realize that some parts of it were very similar to De Stijl, the group that Mondriaan and Rietveld were members of:



(Woohoo, a good reason to put my name next to such great artists! How insanely pretentious!)

Overbright colours, blur and faking it

Last week I talked about depth of field blur, a very obvious and visible graphical effect in Proun. Now let's look at one that is a lot more subtle: blurred HDRI.

In computer games, colours are usually stored with values from 0 to 255, with 0 being black and 255 being white. Few people realise that this introduces some limitations.

The problem is that when an object is lit by a very bright light, its colour might actually have brightness 400 instead of 255. To solve this, graphics cards usually just round this down to 255, since your monitor or television cannot show anything brighter than that anyway.

But what happens when we blur such a bright area with its dark surroundings? Without blur, a white square with value 255 looks the same as one with value 400, because monitors cannot show anything brighter than 255. However, when blurred, there is a big difference, as you can see in this image:



As you can see here, when blurred, really bright objects should look like they grow: they overshine the area around them. Dark details around overbright objects can even totally disappear this way. In Proun, this can be seen clearly in the white boxes at the start of the first track: in the distance, their black outlines disappear. I love to look at this effect:



Allowing colours to go beyond 255 is called HDRI (High Dynamic Range Lighting). On the graphics hardware, to make this happen, you can simply turn this on. (In technical terms: switch the render buffer from 8 bit fixed point per colour channel to 16 bit floating point).

However, that is pretty slow, especially on slightly older videocards. So to save a lot of performance in Proun, I faked the HDRI in a pretty easy way. Objects are simply rendered half as bright as they really are and then after the depth of field blur has been applied, the pixels are made twice as bright again. The end result looks just like HDRI, but without the slowness.

There are two drawbacks to this, though: values cannot go above 511, so there is still some rounding down of the colours going on, and when made more extreme (as is done in the tunnels in Proun), artefacts become visible because everything is made so much brighter. Those artefacts are rarely visible in Proun, but they are in this specific tunnel (still quite subtle, so this may be difficult to see on some monitors):



An extra benefit of doing HDRI, is that bright colours combine into new colours when blurred. This is kind of a weird side effect, but it looks really cool in the places where the spheres overlap in this image:



Which reminds me: I need to do something with explicitly coloured glow in a future game. Maybe have a bright brown object with a green glow or something like that. :)

Depth of field blur in Proun

Proun may not look like it with it's abstract graphics, but there is a whole lot of subtle technology working together to create the distinct visual style of the game. Perhaps the most obvious is the depth of field blur, and since I used a different technique then what is used in most games, let's have a look at that.

Depth of field blur is the effect that certain objects in an image are in focus, while others are blurred. It is used a lot in film and photography to create pretty images and to focus the viewer's attention on certain parts of an image. In Proun, the depth of field blur has two goals: one is that it makes the game look a lot better, and the other is that it helps the user to focus on the objects that are important, i.e. the ones close to the vehicle.

Since Proun has an abstract art style, judging the size and thus distance of objects is difficult. In a normal game, if you see a person, you know how large that person is compared to yourself and based on that, you also know how far away that person is. But how large is a cube in Proun compared to your own sphere? The depth of field blur greatly helps to solve this problem.



For a couple of years now, real-time depth of field blur has been used a lot in games. One game was way ahead of its time, though: Outcast already did it in 1999 (as that awesome game did lots of things years before anyone else).



Precise depth of field blur takes a lot of time to calculate, so as with almost everything, games have to do some kind of estimate that looks good enough. The most used solution is quite simple: first a sharp render of the scene is made, then this is copied and heavily blurred, and finally the sharp image and the blurred image are combined based on the distance to the camera.

The problem here is that most objects are slightly blurred, so something halfway between two images. Taking an average of a heavily blurred image and a sharp one is not the same as doing a smaller blur, as you can see in this image:



So, what would be much better, is if we could change the size of the blur based on how sharp an object should be. Ati proposed this in a paper of their's called Advanced Depth Of Field. Their solution is simple: for each pixel, we take an average of a lot of samples of the vicinity, and the distance of these samples is based on the distance of the object, since that determines how sharp the object should be. This means that for slightly blurred objects, we really do a smaller blur. This works really well and allows for a much better blur. The drawback here is that this is a lot more expensive to render, so this can really only be used if you are willing to spend a lot of performance on depth of field blur.

Another problem that is addressed by ATI's paper is that sharp objects in the foreground should not leak over the background. Almost all modern games have this problem and it adds an unwanted glow around sharp objects, which makes the image look a bit washed. Even the incredibly beautiful cutscenes of Starcraft II have this problem, as you can see here:



One problem with ATI's technique is that it is difficult to do a lot of samples. If the blur would have been the same on the entire image, you could first do a horizontal blur and then a vertical blur. If you do 9 samples horizontally and then 9 samples vertically, then with just 18 samples in total, the result looks the same as if you would have done 81 samples in one step. Splitting horizontal and vertical is not possible with ATI's technique, so to get the same smooth blur, we would need to really do 81 samples per pixel. Way too much for good performance!

Since doing that many samples is a problem, I tried applying a noise to the samples to hide this problem. Although this work technically, it looks bad with Proun's stylised art style. Many games today use noise to hide that they don't do enough samples in something, but these games contain lots of details in the image already, so the noise does not stand out that much. In Proun however, there are hardly any small details in the image to hide the noise, so the noise becomes very visible. Therefore I removed the noise and accepted that Proun's depth of field blur looks slightly less smooth.



In the end, the depth of field blur eats 90% of the total performance in Proun. Since the rest of the game is really simple to render and because depth of field blur is so important for the visual style of the game, I don't mind about that. To compensate, I did add several graphics settings: on Very High, you get 64 samples per pixel, on High 32, on Medium 16 and on Very Low there is no depth of field blur at all. Hopefully older computers are still able to run the game this way.

(For those interested in checking the actual shader code: if you install Proun, you can see the depth of field blur shaders in the file "DofPostEffect.cg".)

As a result of using this technique, the depth of field blur in Proun looks really smooth and precise. Nice! :)

Failed/fixed leashing in Proun

Any level designer knows the word leashing: to lure the player into the right direction using things like light, colour and bright shiny power-ups. If you put the player in a large, open forest, you can still be almost certain where the player will go by making the entire forest slightly dark and lighting one patch really brightly. The player feels like he has the freedom to go where he wants, but he is on a psychological leash and the level designer gets to pull it. Come here, doggy, fetch the stick!

In track 2 in Proun, at the end of the lap there is a tunnel. There are obstacles in this tunnel and the player needs to avoid them, like this big yellow circle thingie:



Oddly, during playtests, I saw that about one in four players would rotate towards the obstacles, instead of avoiding them. Really strange, because in every other part of that track they immediately understood where they needed to go.

Then one of my testing victims (Marlies Barends, accidentally also the creator of this awesome animation) explained to me what was going wrong: the obstacle that you need to avoid has a bright colour, while the tunnel is a dull grey. Also known as: bad leashing!

The solution is simple: I put the light behind the obstacle instead of in front of it. Now the obstacle is in shadow and the tunnel behind it is brightly lit:



I haven't tested this on real dogs yet, but I expect them to know where to fetch the stick now! :)