Wednesday, March 13, 2013

An easy way to work with separate channels in a "combined texture"

Combined texture, Multitexture, RGB Texture, whatever you want to call it.

I'm referring to the process in which multiple greyscale textures are in the red, green, and blue channels of a single image file.  People have been doing this for a while, but lately it has been becoming an increasingly popular practice.

If your not sure what I'm talking about, here is a fairly recent, very popular example by Tor Frick.  This environment was made using a single diffuse and normal texture.  (Here is a breakdown of his textures.)


I have had several friends experimenting with putting multiple greyscale images into the channels of a single texture, but they get frustrated because they author these in a tedious way.  Usually by making one of the textures, then copy/pasting it into the individual channel..or creating the texture, then going into channels, and painting out the detail of the other channels.  If that isn't awkward enough, the process has to be redone anytime a change is made to any of the textures.


While it seems like a simple thing, I've seen enough people do it the hard way to warrant a simple tutorial showing how I work with these combined textures.


So what I'm going to do is use the Red, Green, and Blue channels to store greyscale values for Emissive, Specular, and Gloss:




This is how I have my layers set up in my Photoshop document:



So basically, I make a new group for the whole combined texture, then make a new sub-group for each of the 3 channels (R, G, and B).  Its also important to have a black background layer underneath these 3 sub-groups.  This acts as a constant value of zero, so any pixels without a value added in any of your layers will default to black.


Next, we change the blending options for the three groups.  You can either double click on the folder icon, or click the layer styles button at the bottom of the layers tab and select blending options (the button says "fx".).


In the Layer Style dialog, under the Advanced Blending section, there are 3 checkboxes for R,G,and B (highlighted above).  Set it so each group only has one channel box checked...the one that corresponds to the channel you are putting it in.

Now, your 3 textures are combining together correctly..so, while your texture might look funky (like the combined texture in the first image), looking in your channels tab...you can see that each individual channel is holding a separate greyscale texture!



So now that this works, you can tweak the textures within these groups instead of having to regrab the texture and drop it into the correct channel.

When going back to edit the textures, its easier to work in black and white...so you could turn all the channels back on for the group your working on, then turn them back off when your finished...but I have a neat little trick to make this easier.




Above the three color groups, I added a Black & White adjustment layer.  The values wont be completely accurate when you first use the layer...everything will appear darker.  Go into the adjustment layer's properties (double click the adjustment layer icon) and change the present to Neutral Density.  This will give a more accurate result.  With the adjustment layer visible, your groups will appear black and white again, so you can work on your textures, then just hide the adjustment layer when you are finished.

I like to keep this layer in my document and keep it hidden just in case I need to tweak my textures in the future.


And thats how I like to work with combined textures.  Its a pretty simple process, but one that a surprising amount of people don't know about, so I hope this helps make it easier for people to work with these types of textures.

Sunday, March 3, 2013

Another Mobile Environment for From Beneath

Just finished up another level for the mobile game I've been working on.

I did not make the vehicles...they were provided for me, but they were each on a separate texture sheet, so I had to combine the textures and re-UV map them.

The top 2 images are viewport screengrabs from Unity3d, the rest are screenshots from the game running on a Nexus 7 tablet.