This tutorial requires two programs outside of Roblox Studio: Photoshop & Substance Painter
SurfaceAppearance, also known as PBR textures, is an amazing feature that Roblox has released recently. It allows game developers to create stunning models with detail previously unachievable.
Despite how amazing this new feature is, there currently isn’t any feature that allows you to apply any recoloring or tint changes on your uploaded colormap.
I’ve discovered a way to get that effect however, it’s not a perfect method. That being said, this tutorial should allow you to achieve an effect like this:
If you haven’t already set up your Substance Painter settings for Roblox, I highly recommend Caladude’s tutorial.
Without Caladude’s inspiring work and tutorial(s), I wouldn’t have been able to learn what I know now!
Before we get into my method, there’s technically an easier way to allow your PBR texture to be recolorable, by simply not uploading any ColorMap to it. Although this does achieve the effect, once a device has their graphics set at 1 or 2, it no longer renders Normal, Roughness, or Metalness maps.
With my method, you still retain the look of your intended texture. Although, like I’ve said, it’s not perfect. Here’s an example on a low-poly brick wall, with and without the colormap:
Lets continue on with my method.
I’ll assume that you already the workflow of baking and texturing a 3D Model in Substance Painter. As a walkthrough for this post, I’ll be using the low-poly stone wall I’ve been showing up above.
At this point, I’ve gone through the workflow and textured the wall to a satisfactory point. Just a few layers that bring out enough detail needed for the model.
What we’ll need to do next is prep this texture for editing in Photoshop, where we’ll turn this texture into a transparent overlay that allows recoloring in-studio.
To start off, turn all your colormap layer blend modes to multiply.
Doing this allows all your beautiful colormap textures to blend onto any bright contrasting fill layer that we’ll stick at the very bottom. For fun, lets make that bright contrasting fill layer green.
At this point, the Colormap texture is all prepared for Photoshop! Go ahead and export your textures into a destination of your liking.
Once you’re in Photoshop, go ahead and open up your newly made Colormap. You should get this awful looking abomination:
Don’t worry, the ugly green color is here to help us. We want to use Photoshop’s Color Range Select tool to turn this into a recolorable texture. Head over to the top bar and click on Select and navigate down to Color Range...
The Color Range window should pop up. Go ahead and select a bright green spot in your texture and change the Fuzziness to around 16 or so. You may need to adjust it based off your texture and your desired result.
Then, press OK
A good portion of your green area should be selected now. Press the Delete (del) key or Ctrl + X on your keyboard to delete all the selected pixels. You should get something like this:
Next, at the top bar again, navigate to the Hue/Saturation window. Image > Adjustments > Hue/Saturation.
And set the saturation all the way down to -100 like so:
This removes all the green and turns all your lovely texture data into something that’ll turn into shading. Your texture should end up looking like this:
It’s looking good, but there’s a few more steps to go. You can skip this step if you want, but I want my rock wall to be more defined. In order to achieve this, I’ll up the contrast and lower the brightness.
Same window flow as the Hue/Saturation. Image > Adjustments > Brightness/Contrast
Now the shading’s looking a lot more darker.
Last few steps now. Create a Solid Color layer and place it below your texture. You can do this by selecting the little half-circle icon and navigating to Solid Color. You can then make it into any color you’d like.
Next, turn your texture’s blending mode to Multiply and adjust the Opacity to your liking. In my case, I’ll set it to 46%
Now, this’ll give you some clue onto how your texture will look like in-studio. It’s at this point that you would adjust the Opacity, Brightness/Contrast, or adjust the Fuzziness if you want to repeat the color selection step.
Once you have everything to your liking, turn the Solid Color layer Invisible by clicking the Eye icon, letting you save and export only your recolorable texture.
Once in studio, insert a SurfaceAppearance object into your mesh, upload all the maps, and the final product should come out to something like this!
I hope that this tutorial could help a lot of developers out there who are looking to create flexible PBR textures for their games. Going through with this method allows a lot of my textures to be re-used in a multitude of ways for building and scene creation in-studio.
If anyone has Questions or a better method than what’s shown here, please do add it in below! After all, I’m only a beginner to Substance Painter and PBR Textures and I’ve barely scratched the surface.
Thanks for reading!