tales from the art side #5

"The Colour Out of Space"

Well folks, here it is, the final part of our little journey, we’ve gone all the way from the concepting phase all the way up until this moment where we have the final completed thing. Where we last left off, we finished the low polygon mesh and I stated that there were a few steps left and that i was going to change gears a bit and show you guys some shader stuff this time. Well, Chris made quite a few changes to the very basic shader I set up so it seems more appropriate that he covers that in Binary Nightmare. On the upside this frees this blog post to cover the final steps, time to get comfortable, this is going to be a long one.


Those of you somewhat familiar with 3D modeling might know what our next step is but for the sake of those who are not quite so familiar, we are going to need to be able to texture our model. In order to do that we need to take the 3D shape and make it into a 2D flat image, this process is somewhat like how earth being a roughly spherical object can be made into paper maps. XKCD has a great example of different kinds of map projections which might give you a better insight into exactly what it is we are doing.

Firstly we take our largest continuous shapes and make them into flat UV Shells as shown in the above example. Personally, i tend to get all of my UV shells sorted first with as little distortion (in the map example this would be Africa looking the same size as Greenland) as this will cause us a lot of headaches later.Then I move onto the next stage which is taking all of these shells and fitting them into the UV space.

Packing is a bit like playing Tetris or filling the boot of your car with as much stuff as possible and having as few gaps left over. Now because the size of each UV shell is also important (the bigger shells have more pixels on the texture) we need to make sure that we keep the size of the shells as consistent as possible to maintain a decent texel density. Texels are basically a way of measuring the texture space on a 3d object - basically, higher texel density = better looking small details.

There are a few tricks we can do in order to save as much space as possible, firstly, not every part of the mesh needs to have unique coordinates and we can double up some repeated detail. Nearly every game will use this technique and the easiest way to notice it is if an object has symmetrical texture detail (we are going to use this to great effect). If you aren't careful this can cause some problems but they are relatively easy to fix in most cases. With that said, let's have a look at what we have finally come up with.

All of the shells in red mean we have overlapping UV shells, the brighter the red the more shells we have overlapped. As you can see we managed to double up a lot of these shells, as the ship itself is largely symmetrical in detail we can get away with only texturing one side. This allows us to keep a really high texel density and should make everything come out nice and detailed when we get to texturing.


Now that we have the UV’s laid out we can commence the baking. If you aren't familiar with the process, we aren't going to have a quick intermission to make a cake. What we are doing is using our high resolution model and “baking” down the detail from that onto our low polygon mesh. for this I use a program called xNormal.

Using xnormal we create a cage mesh that surrounds our high polygon mesh and encapsulates all of the detail that we wish to bake down, after this we can begin the bake process and bake all of the different maps we need to go on with the texturing. The Main ones being Normal maps and Ambient Occlusion maps. Normal maps allow us to create fine details on the surface without the use of extra geometry, things like screws bolts and small panel lines, where ambient occlusion maps give us some soft shadowing that really helps to make the final in engine result look much more realistic.

From left to right we have the Ambient Occlusion map, the normal map and lastly, we have a colour ID map. The colour ID map is something we specifically use in quixel suite to differentiate between the different material areas that we have. for example, the armour colours are Red, Green and Blue and the chrome is Purple.


Texturing is more or less the last major step of us creating the mesh and getting it game-ready. We use a PBR (physically based rendering) workflow (Chris explains it a lot better over in his latest Binary Nightmare) In short, it makes things looks really quite pretty and mostly quite realistic. PBR workflows have quite a stringent set of rules compared to traditional texturing workflows and while we could do this by hand, it is much, much faster if we use a tool to help us just concentrate on doing the art.

We use a program called Quixel Suite to help us with the texturing, and because i was unable to record a video sadly, here is one of their promotional videos to give you an idea how it works for us.

Final Result

With all that said, here is the final result:

Feel free to have a play around with the colours and patterns and post down below how you decorated the Rat. Next time, we’ll have some new things to show you all ;).

- Dan

< Previous Tale

Next Tale >

Wickerman Games: Rat

We use Unity 3D WebGL which is currently in it's early stages of development. If you experience any problems, please let use know.Load Rat