The guys behind Tiny and Big: Johannes Spohr (engine programmer) news

Cheers fellow indie friends,

welcome to the second issue of our “The guys behind Tiny and Big” series, introducing Johannes Spohr - engine programmer.

Johannes got into graphics programming at the age of 14, when he started coding graphics demos on a 486 with 25 MHz and a whole megabyte of RAM. When a company called 3DFX brought graphics acceleration to consumer PCs around 1997, he switched from writing software rasterizers to a 3D graphics API still used by the Scape Engine today: OpenGL.

He recently presented the renderer used in Tiny & Big during a small graphics convention at the University of Kassel. For those interested in graphics and 3D, here is an excerpt from that presentation: A Single Frame of Tiny & Big.

1. Shadowmap
This is an image of the level as seen from the light source, basically a bird’s eye view. It’s used to check which areas are in shadow (the dark ones).

2. Shadow buffer
In this texture, the shadows are projected into the world, so black pixels are those that are in shadow.

This texture is processed with a small blur filter to achieve fake soft shadows:

3. View space normals
This fancy texture contains the normal vectors for each pixel. Here, these 3D vectors are represented as RGB colors.

This texture is used to detect where cartoon crease lines must be placed.
To do this, an edge detection pass is performed, which results in a grayscale image containing object silhouettes:

4. View space depth
Similar to the colorful image above, this one stores the distance from the camera for each pixel. Bright pixels are further away than dark pixels. This information is needed to determine which pixels are in the focus area of the camera. Pixels that are very far away or very close to the camera appear out-of-focus (also called depth-of-field, we’ll get to that in a second).

5. The actual scene with textures
After all those strange intermediary buffers, the actual scene is rendered:

Now this is where it gets interesting! To achieve our distinctive, comic-style rendering, we apply a bunch of effects which use the buffers generated previously.

6. Hatching
This uses hand-drawn hatch textures and a pixel shader to generate pencil strokes based on light and shadow.

7. Outlines and crease lines
Based on the edges from the texture generated earlier.

8. Depth-of-field
This post-processing effect uses a blurred version of the scene to simulate the focus of a camera lens. It also applies a slight color shift to simulate “sfumato”.

9. Color grading
Another post-processing pass to ensure that the colors of the final image match those that the artist has in mind. In this case, it makes the scene look more bleak and desert-like.
Before:

After:

10. Anti-aliasing
This (optional) pass applies a soft anti-aliasing filter. This implementation was contributed by Timothy Lottes of NVIDIA to the public domain, and is used by a lot of games lately, as it’s fast and easy to use.
So this is what the finished frame looks like:

Now, the job of Johannes is convincing your graphics card to do all that 60 times per second...

In the next issue of “The guys behind Tiny and Big” we’ll introduce to you Mr. Florian Grolig, game-designer.

Regards from Black Pants headquarters! Feel free to vote for Tiny and Big in the Indie of the Year 2011 competition.

For more ramblings on rendering, feel free to follow Johannes Spohr on:

If you wanna follow Tiny and Big, you can do so on: