Time to tackle PBR

By | Tutorial | No Comments

PBR! It’s short for: Physical Based Rendering!  It’s important and if you’re planning on going into games, you need to start learning about it because it’s going to dominate the industry very quickly! Unreal Engine 4 uses it for starters and hoo boy that engine’s gonna get some use with those features and that price point! Let’s look at some games with PBR:



Killzone Shadowfall


The Order 1886





*ahem* aaanyway. Let’s get analytical here. Even if you’re not an expert on games graphics, you should notice a few things. The lighting looks fantastic!!! (this is partially thanks to IBL which I discussed in my last post, IBL and PBR are BFFs), the characters have a somehow more solid and less plasticky appearance than we were accustomed to last gen, and finally OH MY GOD, THOSE METALS.

So what is PBR and how does it work? Well, the best I can manage is that it’s a new type of rendering which simulates light in a much more realistic way than we used to be able to. How it does this I….er… I don’t…know. Or rather, my knowledge of physics doesn’t really go deep enough to explain it! Here’s a clever person explaining it though! (top comment).

Now even though I don’t really know how it works on a deep level, that doesn’t really matter because basically: materials behave like real things. This actually means that it doesn’t matter if you know all the clever computery stuff going on arguably to a lesser degree than with the old rendering!

There are new maps, so let’s look at those. With PBR, the maps are all on the different RGBA channels of a single image. The easiest way to work with them is to make them individually and then pack them with a program. I use Alloy’s texture packer which came with the alloy package for Unity. So here are some clothes for a certain dapper character in an upcoming game sitting in the Unity editor here (still needs some work on the AO and other tweaks)…


So… what are the new maps?

Diffuse Map

Almost identical to the diffuse you’d have on any other model! Easy! The only difference is that you shouldn’t cheat shadows. At all. It’ll look weird. So just do purely what the colour of that part of the model is! You don’t even need to cheat things like fabric weave unless it’s a fabric like denim where the raised parts tend to go lighter, since the weave detail will be on your normal and AO.

The Normal Map

Unchanged. Hooray!

The Specular Map

Gloss is now obsolete, so it’s just spec. Pretty much unchanged, though you may find slightly higher values work better.

Ambient Occlusion (AO)

Unchanged, a core part of PBR, so if you’re not accustomed to them, start getting used to using them!

Metal Map

…Well this is new! Fortunately it’s super simple. On the metal map, anything that is metal colour it white. If it’s not metal, make it black. There are next to no instances where a thing is kind of metal (if it’s a non-metal thing coated in metal, it’s metal, if it’s a metal thing coated in non-metal, it’s non-metal). Basically “Is this part of the map made of metal? Y/N


Here we see links of the chain, the buckles etc. marked out in white. Everything else is black.


Roughness is the new gloss. Also known as “microsurface” because “roughness” can be a bit misleading, after all, when I ask you to think of a “rough” surface, you might be thinking of burlap or gritstone, but in this case we’re talking on a much more subtle scale.

Here are some Alloy assets. An ingot of gold and a basic sphere I’ve put a nice rock material of theirs onto:


Now If I lower the roughness:


Notice how the rock now looks wet, and the gold looks very smooth and shiny and highly polished, like a piece of aluminium foil or gold leaf? Remember how a couple of posts ago, I said that wet things look more glossy because water fills in all the small indentations on the surface making light reflect more directly? Basically “roughness” is talking about very small indentations on the surface of an object that make the shine less crisp. An object can still be bumpy but have a low roughness value, like this slate material:


Or be smooth but have a high roughness like this steel which has a kind of brushed finish:


To make a roughness map, I find inverting your spec then bumping up the brightness is a pretty effective quick solution. I don’t recommend ever going any darker than about a light-mid grey personally unless you want a thing to look wet, like very smooth glass or very very highly polished metal. Generally most metals will oxidise very quickly in contact with air and gain microsurface roughness, so it’s unrealistic in most cases to have roughness too low. Too low a roughness value and everything in your game will look as though it’s been shrinkwrapped in clingfilm or is soaking wet or made of jelly!


Yeah, let’s try to avoid this.

The glow map

Thankfully works exactly the same as ever.

So there you go! PBR looks great when it’s used all together and it’s definitely the future of games graphics! Try it yourself! Even if you can’t afford Alloy, there are some free resources now, like Lux! ????

Understanding IBL

By | Tutorial | No Comments

Okay, so before I talk about PBR, I need to talk about IBL.

If you’re saying “whuuuut” I don’t blame you! Unless you’re friends with a game graphic artist or a 3D animator, it is unlikely that you hear terms like Specularity or Normal Map on a daily basis, never mind these new specialist technologies!

I’m going to put this in simple terms because honestly I am not a physicist and couldn’t explain in detail how anything works on more than a very basic level!

IBL = Image based lighting

Or, in other words: IBL = make everything shiny in my game look twice as awesome.

Okay, so as I said last time, specularity is how reflective a thing is. It’s very important to understand that everything is reflective. Some things are more reflective than others, but if a thing reflected literally no light, it’d look like a weird black shape cut out of reality. So, everything reflects light, okay.

Let me just show you a picture of the stuff from the last post I did, but instead of the Marmoset IBL shaders, using just generic shaders…



Compared to IBL…



Pay particular attention to that little barbell looking metal dealie on the right there (it’s an earring, looks a little weird out of context and blown up big so I can see it!).

Why does image 2 look so much more realistic and also more modern!?

Okay, well, in the first image, the computer is throwing our simulated light at the models and it’s reflecting off appropriate to what we’ve told it is reflective with our spec map. If you were in a hypothetical situation in which your object was floating in a blank black void with no walls or floor, no atmosphere and just a single source of yellow light projected from a circular light source, this is how it would look.

The closest thing I can think of to those conditions would be…


So here we have a cool guy on the moon! There’s no atmosphere to diffuse or colour the light, so the light is coming very strongly from one direction and is very harsh (that’s why his visor is gold-plated to stop it blinding him!) with very dark ,crisp, black shadows. There IS a floor however, and those grey moon rocks and just are reflecting some light back, so we have a reflection in his visor and can see a small amount of light being reflected back on the underside of his gloves etc. HMMM…


Yessss… are you getting it now? The thing that makes a shiny thing in CG art look more realistic? The light around you isn’t just coming straight from the sun or a lamp! It’s bouncing all around your surroundings and you and everything around you are reflecting that reflected light, and that’s why when you look at a shiny thing in real life, you don’t just see a round point shine, you see a distorted image of what’s nearby, coloured appropriately!

BUT. When we’re making a game in real time, we can’t calculate reflections from the environment in real time like that! The processing power would be too much! So…as usual… we cheat!

IBL works by using a pre-made static panorama image, and using that as a guide for the lighting. It’s not 100{bea7752067925c33ccbba0b143945eb5f050c98892607a9111f548bbc646f319} accurate, but it’s a lot more realistic looking than lighting coming from a flat coloured source! So this:


Is reflecting based on this:


We can change the image too:

tumblr_inline_n5z2waT0JA1qh79fh tumblr_inline_n5z2wyXbKo1qh79fh

Notice how the shirt behind ALSO changes based on the colour, shape and intensity of the light shining on it because, while the effect is more subtle on a matte fabric surface, it’s still there!

Obviously for the BEST result, it’d be best to take a picture of the actual surroundings in your game and use those as your image.

So if you’re wondering why there’s this jump in graphical quality between the PS3/XB360 and the PS4/XB1 that seems greater than a mere increase in polys would allow for, especially on metal things, but can’t place your finger on why, the short answer is Image Based Lightning plus Physical Based Rendering, which I’ll go into next time!

A beginners guide on texturing 3D models

By | Tutorial | No Comments

One of my primary jobs at Project BC is texturing. Texturing is what changes a 3D model from something that looks like a statue into something the player can believe is a person or an object within the world of the game.

When I started texturing, I was absolutely clueless about what the different “maps” actually did, so I’m gonna explain here in simple terms what they do and hopefully it’ll help!

Okay so here’s a fancy render of a model:


And here are the clothes I textured for it in Unity Editor (so this is closer to how they’d look in game):


These were pretty much the last textures I did before we moved to working in Physical Based Rendering, which uses different textures. I will talk about PBR and how to work with it in another post and just explain the standard texture maps this time. These are set up with Marmoset Occlusion shaders and Skyshop, so use Image Based Lighting (IBL) hence those gorgeous reflections.

The Diffuse Map:

This is the map that will always be there, even if the others are not. Diffuse is how much light the object scatters when light hits it. In layman’s terms, that roughly boils down to “what colour is it?”

Some engines only allow for a diff map, and that’s what gives old games that distinctive kind of flat, cartoonish look.

There’s a reason Vaan’s abs look painted on…


…It’s because Vaan’s abs are painted on:


(Thanks to Ultimecia for ripping all these texture files and making them accessible! These are, of course, from Final Fantasy XII, one of the best looking games on the PS2. The textures are absolutely fantastic.)

As you can see, if all you have is a diff map, you have to paint fine shadows and detail onto the model (I guess unless you had a phenomenal polycount which just isn’t feasible for games) and also you had to paint on shine to the metal to give the illusion of shinyness. This method can look quite nice if you’re aiming for a distinctive painterly or cartoon look like WoW or FFXII, though limits you to certain light intensities, colours and directions to look right!

The Diff map for our jeans here looks like:



IMPORTANT NOTE: While it appears I’ve painted on shadows like the FF12 characters here, in actuality I’ve simply used the AO shadows as a guide to make the denim appear faded on the creases. You can see what I mean about a diff being just colour if I show you the shirt:


…yeah that sure is some plaid pattern, huh?

If we take out everything but the Diff on our clothes here we get:


PS2tastic! (I had to turn up the light a bit because they reflect so much less light now!) these still look a bit more detailed than PS2 graphics because the textures are about 2x or more the resolution a PS2 game would use, but they still have that flat “the details have been painted onto the fabric” look.

So next comes, all together now…

The Normal map:

Normal maps allow us to make the computer’s simulated light behave as though there are details on the model that are not on the poly mesh. We use them to add things like seams and winkles to garments, or even weave texture, pores and creases to skin, to smooth out polygon edges etc. Usually a normal map is made by making the original model very high poly using something like zbrush, lowering the polycount to something a game can handle, but applying the data for how light interacted with the high poly version to the low poly version giving the illusion of extra detail.

Normal maps look like this:


This one was created through a combined effort. Bishop took the jeans model and exported the fabric wrinkles from the high poly version to apply to the low poly version, then I took my diff map and used the denim texture, seams and zips I’d put into place and ran them through a fantastic program called nDo, which plugs into photoshop, to export these small texture details, and then to mix it together with the existing map.

Adding the normals, we get some nice detail:


…but those metal things still look kind of dull, don’t they? If we want to really feel PS3/360 era, we want the metals to shine as we move through an environment! How do we do that?

The Specular (and Gloss!) map:

Specularity is something I had trouble understanding because it’s “Shinyness”, but then you’re told that Gloss is ALSO Shinyness and it’s like “Dammit, I’m an artist, not a physicist!” So let me try to explain this as best I can. If Diffuse is how much light and what wavelengths your modelscatters around all over the place, specularity is how much light and what wavelengths it reflectsback the way they came. So the most specular a thing could get would be a very clear mirror and…about the least specular thing I can think of off the top of my head would be…a piece of felt. It is perfectly plausible to have a thing have a dark diffuse texture but still be shiny, like say, a piece of coal! So what’s gloss? Gloss is how smooth the surface the light is reflecting off is. A glossy surface will reflect light back more sharply, resulting in crisper reflections. Surfaces that are wet will be more glossy looking because the liquid gets into all the little cracks and fills them in making the surface smoother for light to reflect off. Rough surfaces, even if they’re shiny and reflect a lot of light, distort the light so that the reflections aren’t mirror crisp.

A spec map looks like this:



The lighter it is, the more shiny, or, to be more accurate, the more reflective that part is. So our metal bits, like the zips and studs are considerably brighter than the fabric here. I also made the studs a nice gold colour so they’d reflect with a brassy sheen. I made this spec using nDo, which can generate it from a normal map, but then brightened the metal bits and coloured the studs manually because nDo is automated and wouldn’t know on its own that those bits I want to be metallic.

Applied to our models…





So what can I do to go better than that!? I mean, they’re looking pretty good now, right? Well, there’s one last subtle thing we can do to just make them a bit nicer and it’s called…

The Ambient Occlusion (AO) map:

Okay so the AO is a map that at first I really didn’t get, but now I love them. Let me explain. When your computer simulates light, particularly light in a game, the simulation is really limited compared to real life light. You will simply not be able to have that number of photons bouncing around in real time, it’s not feasible. This means that your graphics will lack the kind of subtle shadows we’re used to seeing every day in our environment, So to make our models look more realistic we… cheat. We make a map that tells the computer, “even if your lights don’t put a shadow here, I want you to put a shadow here, ok?”

And so we get the AO map. They’re often quite subtle looking:



This one is relatively dark and detailed to get the rough fabric of the jeans looking nice, but also makes sure that we get a nice defined shadow under Auria’s bum to get the shape to define well. I’ve used this technique before on a face to make sure a shadow would fall under the character’s hair too.

Resulting in:


Ooooh. Let’s turn that light down a touch…


Not too shabby!

BUT WAIT! WE MISSED A MAP! A really cool map! One that isn’t on here, but…

Remember how in FFXIII, Lightning had a shoulderpad with glowing bits on?


Look at all this glowing stuff! We have Lightning’s shoulderpad, but we also have the eyes and details on those Psicom guys glowing too. How do we do that!? Well, it may sound surprising, but if you want something to glow, you use…

The Glow (and Emissive!) Map:

The great thing about glow maps is that they’re actually super-easy to make. They look so cool that I’d assumed they’d be really difficult, but no, they’re not. Just make a map that’s all black except for what’s glowing. The brighter the colour you put down, the brighter it’ll glow. Wow, yeah, it’s seriously that simple. Just consider making sure your diff map isn’t too bright already under the glow, or whenever light shines on the glowing area, it’ll go extra bright, which isn’t very realistic. So what’s the emission map? It’s an additional map that tells the computer if it should treat that glowing part of the texture as a light source when you’re baking in lightmaps (which I’m not gonna go into here because they’re more a level building thing) for characters and standalone models, they’re not really essential.

So here’s a lightmap of some things that glow in a furniture pack, ie. TV, monitor, clock, phone, lamp, ceiling light:


So in the scene…



These things are “self-Illuminated” and will always glow, even if no light shines on them (note, there’s a little bloom effect added here too in post, that’s not a consequence of just the glow map, but glow combined with a touch of bloom looks really nice!)

So I hope that was educational! There are more maps, like heightmaps etc. but I’m not gonna go into them. You can make pretty good looking models just with these!