Metaverse ProTips: New Tricks for Old SL Textures - Creating Normal Maps the Easy Way with xNormal

Update, April 8: Bumped up for weekend building inspiration!

Brookston Holiday has been building in Second Life for 10 years. You can view his work on the SL Marketplace here and his ProMaterials brand.   

In April of 2013 the materials project allowed Second Life builders to import custom normal maps for the first time. Fast forward to three years later and few builders are taking advantage of it, even though, as you can see in the above picture, normal maps impart a level of realism that a flat texture can’t. However, with some great free software, I’ll show you how you can create your own custom normal maps for your favorite textures:

Custom Normal Maps - de-boring-ing the bricks

If you’ve been building within Second Life for any amount of time you’ve probably collected a fair number of textures like this one:

It’s tileable, and looks great on the patio outside of the Italian Villa you’re building, but it comes from an era before normal maps could be imported. So let’s bring it up to date by creating one. Here's how: 

My favorite tool for the job is a free program called xNormal. xNormal is a great piece of software used by professionals and amateurs alike for baking all sorts of game maps. It is ostensibly for transferring details from high polygon meshes to their low poly counterparts. We aren’t concerned with those advanced features though, today we’ll be using a small sub-tool within xNormal for converting images into normal maps. There are better tools for converting photos into normal maps (ahem, crazybump), but none of them quite so free.

Before we create the normal map, we’ll want to prep the image in our favorite photo editing software. I use Photoshop, but open source hippies can do it just as easily in GIMP, while smoking pot drugs and complaining about “the man.”

Preparing our image - desaturation and levels

The first step will be to desaturate the bricks. This removes all the color information, leaving only luminance, which is the information xNormal will use to create the normal map. Working with only shades of gray also makes it easier to see what we are doing.

Looking at the desaturated bricks, we see that the mortar is discolored in certain places. xNormal will “see” the darker areas as being lower than the lighter areas, but I would like all of the mortar be at the same height when we create the normal map. In order to do that, all of the mortar would have to be the same color. Rather than try to select all the little cracks and crevices, we can just adjust the levels.

In photo editing, we adjust levels using a visual tool called a histogram. A histogram is simply a visual representation of numerical data. In this case, photoshop looks at every pixel within our image and lays it on the histogram depending on how bright it is. The brick texture is made up of mostly dark pixels for the mortar, and mostly lighter pixels for the bricks. This is reflected in the histogram by a big bump on the left, the mortar, and a big bump on the right, the bricks.

Adjusting levels allows us to pick a brightness level, and tell photoshop anything darker than this level, just go ahead and make that pure black. When I slide the arrow in between the two bumps on the histogram, I’m making all of the mostly dark mortar pixels black. I don’t make the mostly light pixels all white, however, because when I make the normal map, all those different shades of gray translate to jagged, interesting looking bricks.

xNormal - why the f*** is this program free?

Our image is now ready to be taken into xNormal. You’ll want to open the tools section and find the Height map to normal map tool. You may be asking yourself, “what’s a height map?” Well, it’s sort of what we made in the last step. A height map is a way to store 3d model information in a texture format. All you need to know about it right now is that whiter parts of a height map image are higher than darker portions of the image.  

(Actually, if you own photoshop, xNormal will install some photoshop filters, including the height map to normal map converter. You can save time by doing all the editing within Photoshop.)

Once you're inside the tool, you load the image by right clicking on the left box and selecting ‘browse height map’. To create the normal map, you right click on the right side and select ‘Generate.’ You can play around with the different settings until you get a result you like. The most important settings, that you have to get right, are the Swizzle Coordinates.

Swizzle coordinates are different in different games. The basic idea is that games that use OpenGL (like Second Life) use X+, Y+, Z+ and games that use Direct3D use X+, Y-, Z+. If you come across a normal map in Second Life that just looks wonky, chances are you’ve run into one created for Direct3D. The solution is pretty simple though. Open the texture in photoshop, invert the green channel, and you’ve changed the Y- into a Y+.  

Caveats - when this won’t work so well

We got lucky with these bricks. They happened to be light where we wanted them to bump up, and dark everywhere else. It’s almost as if someone created this texture especially so that they could then go on and write a tutorial about it.

In the real world, game textures don’t always have light bits corresponding to high points, and dark bits to depressions. You know what the image is and can tell the difference, but the conversion tool only knows bright = high, dark = low. You may have a nice texture that has white scratches all over it that shouldn’t necessarily stick up from the surface, or dark rust spots that shouldn’t sink down into it. What works in that situation is using the texture as a guide and then drawing a grayscale template over it, which then gets converted into the normal map.

source: a more technical tutorial. It’s a great next step to continue learning about this

Image-generated normal maps may never look quite as good as “properly” created normal maps, but they can get damn close. And for anyone with a collection of Second Life textures, this can be a quick way to bring them up to date and add more details.

Brookston Holiday (@ProMaterials on Twitter) has been building in Second Life for over a decade. In his first life, he is a freelance 3d Artist.

His work has never been featured in a triple A game title, but he thinks it would be “really neat” if it was.

Please share this post:

Tweet

 

Comments

[Bellahyae]

Thank you! many people would love to know about this, it is really hard for newcomers to 3d texturing to get great results . it is hindering all of us. there is a lack of development in many ways in sl. and in 3d work like baking, making normals , working with different 3d programs. i myself had to take years to learn what little i do know, and because newcomers are not giving a helping hand to start out, they are mostly left to figure out things on there own, not an easy task:/. i wish sl would make tutorials on how to do in depth things in 3d programs like working with maya and blender in animation, texturing and rigging? if more people knew, i think they would visit sl to have a place to create. did you know you can also use xnormal to bake textures? the baking textures i made were simple, but i made clothing. for furniture i think they will be more effective. they have a tutorial on this from Digital-Tutors -" Texturing a Stylized Game Environment in Photoshop" also, they have a normal map online creator. it's free! i use it all the time : http://cpetry.github.io/NormalMap-Online/ . thank you again for the tutorial!! your helping allot of people with this ~

[Brookston Holiday]

Thanks for the kind words Bellahyae, I really appreciate the feedback!

And that online normal map generator is a neat little tool.

[Clara Seller]

This was an inspiring bit of information. I immediately went to my land and scouted for things I've built to try it on.

I ended up using Bellahyae's suggested Normal Map Online. It was simple and the results were stunning.
I feel like a kid in a candy store.

Thanks to both of you!

[Melissa Yeuxdoux]

Sadly, xNormal appears to be Windows-only. If you use GIMP, it does have a normal map plugin, and there are videos on YouTube demonstrating its use.

[Connie Arida]

There is also a collection of texture tools generating normal maps, texture compression, mip map generation and cube map formatting packaged as a plugin for Adobe Photoshop 5.0, 5.1, 6.0, 7.0, CS, CS2, CS3, CS4, CS5 and CS6 that is freely available from NVIDIA
https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop

[Brookston Holiday]

I tried the nVidia ones and they didn't give me results as good as the xNormal tools.

[Shiromani akali dal]

very very thankful to you! many people would love to know about it, this is really hard for newbie to 3d texturing to get best results . it is crimp to all of us.