Combining 2-D and 3-D techniques

Hi, my name is Peer. When I am not studying Media Design at the DHBW Ravensburg, I’m one of the busy artists working on Rough Sea Games’ premiere browser game. I have known the majority of the people here for years and I very much enjoy being part of this great team. This is my first blog post.

What if you wanted to create a lot of 2-D graphic assets, like for a map, which need to be very detailed and have a painterly look?

There are two ways. One is to paint; the second is to do it in 3-D and use the pre-rendered graphics. Sadly, pre-rendered objects in browser games tend to look very lifeless, sterile and, well, pre-rendered. The result is reminiscent of mid-nineties PC games.

Painted objects often carry more expression, more color, and more variation. To achieve that in a 3-D model would require a lot of small detail work. To get a highlight or a crack at exactly the location you want it to be is quite cumbersome in 3-D (it is also like shooting sparrows with cannons  if the final graphic asset won’t be very large). But painting everything while keeping a good amount of detail and coherence would be an enormous task.

Both approaches have their advantages, so why not combine them? What you are after when you need to produce dozens of objects is:

- Detail
- Coherence
- Reusability
- and of course, it needs to be done fast.

Over time you produce a huge amount of reusable assets. Those can be used in other objects to quickly add detail while maintaining a coherent style. By using the same lighting setup and materials you ensure a coherent style, even if you have to create dozens of models. Because of the similar ‘base’ for each model, it’s also very easy to split work between several artists.

Another important aspect is that, during the 3-D phase of the workflow, it’s very easy and quick to rotate, scale and retexture objects to create variations before deciding on the one you want to finalize.

Let me demonstrate my workflow with an example:
(The small lighthouse used in this post doesn’t have anything to do with our title; I did it tonight for demonstration purpose only)

1) First, you build a 3-D model while keeping in mind the camera position and scale it will have in the game. Don’t try to be too exact in the 3-D model. Everything can be quite rough and blocky. Details like surface imperfections, interesting highlights and minor details come later, in the painting stage. Very faint textures can be mapped onto the objects to create some ‘meat’ for the paintover. Don’t be too perfect with the mapping: simple boxmapping is often quite enough.

2) The first stage in painting over is to get some more variation in the shading. Because of the small scale, a very simple brush is enough. I just picked up some colors from the render and tried to get rid of perfect shading and all too straight edges. Then I painted some small details like cracks, dents and highlights. The 3-D rendered base model is a solid foundation, because the perspective and the lighting is already there. You can also experiment with blending textures of the picture to dirty up some areas.

3) The final stage is the color correction. Always do some color correction afterwards to make some areas pop, or to mute some others. I added some levels and selective color corrections with layer masks to further emphasize the lighting direction and to get some more bluish tint into the shadows. Then I selectively sharpened some areas to increase the contrast.

The lighthouse took me a little more than 1 1/2 hours from start to finish.

I hope you enjoyed my debut as a blogger : )

Best regards,
Peer

Popularity: 42% [?]