ilomilo

Apart from all the talented artists at SouthEnd, we have some techie guys. Me being one of them. Simon entrusted the rendering and visual programming to me in this project. In a visually strong game such as ilomilo it’s imperative to have shading and effects which fit seamlessly into the world and enhances the visual style.

The shading concepts were created early in the project and visualized in our first concept movie of the production. The movie was rendered through Maya and used loads of effects. What I needed to do was analyze the movie, separate all the different components and effects used, and finally choose which ones were viable to use in a real-time rendering environment on our target platform(-s).

Breaking down the shading into it’s components will give you an insight in why ilomilo looks the way it does:

Lighting
1. Ambient & diffuse lighting
To achieve the soft base lighting of the scene we use an ambient light and two directional lights for diffuse shading.

2. Rim light & specular lighting
The most characteristic shading effect in ilomilo would probably be the strong “rim light” effect, creating a soft velvet look to objects in the scene. Different materials in the game receive different variations of the rim light, creating a diversity between the objects.

3. Shadows & bumping
Shadows in ilomilo are rendered using shadow maps. An easy way of creating dynamic shadows on a large scene. We chose to use only one lamp for shadow casting creating a feeling of being outside in the bright sun (or moonlight). Bump maps were added as an important element, being enhanced by the strong rim lighting of the objects.

4. Textures
Putting it all together by adding textures, the final result would look like this! The textures in ilomilo contain occlusion shadowing, giving the objects a hint of self-shadowing.

Post effects
Apart from the lighting on the scene ilomilo uses a couple of post effects, added onto the final rendering of the scene. Without post effects the levels can look slightly desaturated and dull, also some depth in the image is lost.

A. Vignette & saturation
To correct the colors, and also create a feeling that the game is being watched through an old camera, we saturate the image and add a vignette. Resulting in something that looks like this.

B. Depth of field
Finally, to create depth in the image, a depth of field effect is added. Objects closer than the focused objects and far into the distance become out of focus using a seperable (2 pass) Gaussian blur. The large filter size (9×9 pixels) gives the effect a smooth look, making the level and scenery blend together nicely.

So, there you have it! The current rendering in ilomilo. But don’t forget that the game is still in development, so expect more cool rendering stuff further into the production!

Oh, and all shaders and effects were created in NVIDIA’s shader IDE; FX Composer 2.5. It’s a great tool in our tool chain, and gives both artists and programmers easy access to tweaking the parameters of all the lighting and materials.