How to make high quality PBR textures

With the recent release of RobloxStudioBeta, which you can get from the Roblox GitHub page, a bunch of features were added. One of those was PBR, or Physically Based Rendering. This means that light will now behave and react in a more realistic way depending on the texture, depth and color, resulting in an almost hyper realistic look. This tutorial is here to help you get these amazing textures.

  1. Firstly, Go to the following thread and download the zip file. Extract the zip file into a new folder called Roblox Beta, and once its done, click on the new folder and scroll down until you see RobloxStudioBeta.exe
    image
    image
    Introducing the "Avatar Evolution" Studio Beta Build!

  2. Open this new version of studio. It may take some time to load, but afterwards, you will be greeted with the generic Studio screen.

Click on new, and select baseplate.
image
image

  1. Now go into your game, and put a new part into the workspace. Then go to Lighting, and enable shadow Map.
    image
    image

Enabling shadow map will result in a more realistic result as the sun has more realistic behavior in that mode.

  1. Now, we will be using a software called Materialize to make our textures. Its free, and reasonably small. Download it in the link here: http://www.boundingboxsoftware.com/materialize/getkey.php

Extract the zip file into a folder called Material Maker. Once that is finished, make a separate folder called materials. This is where we will make and store all of our materials.
image

  1. Now open materialize. It may be overwhelming at first, but take a deep breath, and follow the following instructions. It should look like this when opened up:

    The controls are right click to move, and scroll wheel to zoom.
    No hover your mouse over diffuse map.
    image

click the O, which stands for open. Select the texture you want to make PBR. i will be using a brick wall, But any texture will do as long as it is square.

Now your workspace should look like this:

But you will realize that the texture looks a bit flat.That brings us on to the next step, which is to add a heightmap!

  1. On the left of the Diffuse panel, you will see a heightmap panel. Click on create, and you image should look like this:
    image

    Now all those sliders may look confusing, but you don’t need half of them. All you should care about at the moment is the Final Gain, Final Contrast, and Final Bias. The way height maps work is the the darker and blacker the color, the lower that part will be rendered. The whiter it is, the higher it will be rendered. This gives the illusion of a 3D look on the texture.

Mess around until it looks about right. Make sure the cracks on the brick wall, if you are using it, are as black as can be, so that they are as low as can be. You can do this by messing around with the contrast.
Once it looks good, like mine

Then click Set As Height Map at the bottom of the slider panel.

  1. Now, to preview your texture, click on Show full material.
    image
    This will show a preview of what you texture should look like. And as you will see, if you have done the heightmap correctly, it should look 3D.

  2. But we are not finished yet! Roblox Studio requires three different Maps to make PBR look so special. And the last one is called Normal Map, to the Right of Diffuse.
    image
    Normal Map calculates how the object will react with sun light, and how the sun light will travel through and on to that object and texture. Click create, and your workspace should look like this:

The is no real need to change anything with the sliders, and if you do, only do it if you know what you are doing.
Click set as Normal Map, and now preview your material. Mine looks like this:


Now you are finished with Masterialize, export this by going here:
image
and select PNG. Then, click Save Project and save it to your materials folder you made earlier with whatever name you want.

  1. Now close Materialize. Publish your place so you can import Images and assets, and open up the game explorer.
    image

image

After this, you should see the game explorer.
image

Hover your cursor over Images, right click and add assets. Then, you to your materials folder, and import the Diffuse, Normal and Height Maps.

  1. Create a Surface Appearance for your part
    image
    Now the Surface Appearances properties should look like this:
    image
    The color map is the Diffuse map. So click on ColorMap, and select your Diffuse Map from the drop down menu.

I will cover metal objects in another tutorial soon!

Normal Map is the Normal Map that you made. select it from the drop down menu.
Roughness Map is the HeightMap. Select it from the drop down menu. If all has been done correctly, your brick PBR object should look like this:


Look at how light only goes in levitated areas, and how realistic it can look!
Its Amazing.

Here are some examples of what can be done with PBR: (All done by me)




Common Issues: My PBR texture looks stretched.
Answer: Thats because you item that you are putting the texture on to is too big for the texture, and stretches it.
How to combat it. Turn you brick into a Union, or just copy and paste the High resolution brick over and over again.

This is the end of my Tutotial :smiley:
If you have any questions, i will be ready to Answer.

PS: This is not live yet, so when you play your game, the textures won’t appear. Don’t worry, They will appear in 2020

101 Likes

Hi is there a version of that app for Mac ?

2 Likes

I use PixPlant which you can get for Windows or Mac OS for free also. It works best in tandem with Photoshop, as a plug-in, as you edit the image there (adjusting the contrast and exposures to get those bumps). It also runs as a standalone program where you can directly extract from an image the Diffuse Map, Specular Map (as the MetalnessMap), Normal Map, and Displacement Map (as the RoughnessMap), though it has less settings you can mess around with. I’ve been using it on other projects and it does the job.

4 Likes

Wait is hight and roughness the same thing?

2 Likes

At the moment, I substitute roughness for height since it seems to have some nice effect.

4 Likes

where did you get a Big Texture?

2 Likes

What do you mean by a ‘Big texture’?

2 Likes

some texture that has High Resolutions. that can Fit in a 5x5 Blocks.
i tried to find it, but all i found was 1028*1028 ones, and its very small that i cant even see the difference when i make it PBR

2 Likes

I went on to google, and simply searched up Brick Texture, or any other texture. I then downloaded it. It always seemed to work.

2 Likes

If you have Photoshop, you can go to Filter > 3D > Generate Normal Map and most of the time it makes a pretty good one. I usually increase the contrast of the result many times just so it is more visible in Roblox.

2 Likes

This app is a Unity project, and my old computer can’t even run it because the specs are trash. Is there a similar alternative that doesn’t require performance-consuming 3D graphics?

1 Like

Let me check the website. It is true I should have put it in the description that you require a pretty beefy computer to run this, so my apologies!

1 Like

Hey, that looks helpful! :smile:

1 Like

Does this build of Roblox studio lag significantly more than regular studio?

1 Like

On my six year old PC, i don’t see any difference. So i don’t think so.

1 Like

At the moment, There is no clear idea to make them act like textures. If you look at the post, someone actually asked that question, and the Admin staff replied that they were not thinking of it this early on.

1 Like

Do these textures currently affect performance?

1 Like

At the moment, they can cause minor lag for less up-to-date computers. Its like running Grand Theft Auto Graphics.

1 Like

My computer is probably a potato for most modern games, but it can handle GTA 5 and the infamous RAM-eating game Cities: Skylines. GTA 5 runs just flawlessly while with CS I only get occasional lag.
I guess my PC will be able to handle this feature.

1 Like

Something you should have added:

If you want to create your own Materials using photo-scanned methods (taking a picture and generating maps from an Albedo map), the best results are obtained by having neutral lighting, i.e., overcast, even lighting, such that the algorithm used to generate normals, AO, and specular channels can easily extrapolate that data.

1 Like