Guide to Textures/Materials

Glouriouscott96 · February 6, 2022, 10:51pm

Intro
For most games textures are a big part of them and can often make or break it. Whilst that’s not always the case its important to get a basic understanding on what is actually going on and how to properly utilise it!

From what I have observed it seems to be a bit of a dark spot, I haven’t managed to come across any full tutorials or explanations on how to get the most out of textures here yet. So I thought I’d share some of my knowledge I’ve gained over the few years in game development.

This thread is still WIP so some stuff might be missing!

Basics of what a texture and material is

To start things off I thought it would be appropriate to cover off some of the basics of textures and materials and just give a little info on some terminology commonly used.

Textures - At the heart of it, they’re just a big line of numbers which represent values of each ‘pixel’, these long lists are referred to as colour matrices, or a colour matrix. There are typically 3-4 of these matrix tables in an image file and each one represents a colour channel. Images are broken down into these 3-4 channels which are : Red, Green, Blue, Alpha/Transparency or RGBA. When put together they make up all the values needed to produce the desired image!
Materials - Materials are a more broad definition but can be summed up into this; Materials most commonly hold all the information such as the textures that will be used to make up the final result. And often some other values to effect other types of data which will effect the final result such as a ‘Colour’ value to change the colour of the resulting image. They are a combination of textures, values, sometimes even shaders!

Terms

Colour matrix - Refers to the table in which pixel values are stored
Colour channel - A colour channel is the matrix table assigned to either RGBA (They aren’t actually in colour and are just greyscale images but combined make a full colour image)
Map - Commonly refers to a type of texture file

So, great we now know a little bit about how each are made-up as well as a few terms which can be handy when talking to others for debugging.

Lets go get our textures!.. but not so fast, what ones do we need? well, luckily for us Roblox has kept it pretty simple at the time of writing this. When it comes to just a decal/texture component in Roblox then only one colour image is needed. This is not the case however for SurfaceAppearance’s, you’ll notice that they want 4 textures. So lets cover off what each of those is whilst also giving a rundown on some other common types found in games.

Texture types and their purpose

Colour - This is contains colour data and is probably needed if you want the end product to look good! There are a few variations of this as listed below
- Albedo - Holds base colour info and usually will be solid colours with no diffuse shading added
- Diffuse - Holds the base colour info as well as diffuse lighting added on top, sometimes has AO combined as well
- BaseColor - This one is a bit tricky to explain as it has a lot to do with the workflow used, but just know it exists and if anyone wants to learn more on this map I’ll list a few resources that can explain it
Normal - These are very handy maps and tell light how to interact with a surface making it look 3d, they however do not actually make the object 3d! It is also important to know the types of normals
- NormalGL - This refers to the OpenGL format and can be recognised by where the ‘light’ is coming from. For this format it is Y+(bottom up) and the ‘light’ looks like it is shining from the top right!
- NormalDX - This refers to the DirectX format and can also be recognised by the ‘light’ direction, it is Y-(top down) and the ‘light’ looks like it is shining from the bottom up!
Metallic - Used by Roblox for its SurfaceAppearance it is a greyscale texture with values usually 0 or 1. It is not ideal to have a value as 0.5 but can be done
Roughness - Also used by SurfaceAppearance it is a greyscale texture with values anywhere between 0 - 1 and controls how light diffuses over the material (Makes it look smooth or matte)

These 4 are the main ones you need to know about when using SufaceAppearance, and are the only ones thus far that make an appearance in Roblox at this time. If you want to learn about the others such as; Height, Gloss, AO, Mixmaps, Specular, Displacement etc then I would suggest taking a read through Texture Types [Polycount.com] There are seriously loads and some of them are really interesting!

Regarding the Normal map format, while it is not directly required it is good practice to use the correct one with the correct software. Roblox uses OpenGL format so if you do have to decide between the two go for the OpenGL one. If there is only one then just use it unless it looks really wrong, in which case you will need to research how to convert normal maps! If I do come across a converter I shall link it [Here]

Ok, that was a lot to take in I’ll admit, so to summarize all the above;

Textures are made up of 3-4 large tables which tell the renderer what colour is what, on their own each channel is just a greyscale image but when combined make up the full colour image. The channels are RGBA / RGB.

Theres 4 texture maps you need to worry about, Colour, Normal, Metallic, Roughness. If there are 2 normal maps named something like ‘Normal_GL & Normal_DX’, use the Normal_GL one as it is most compatible with Roblox!

In the next part I’ll cover off texture resolution and understanding what size is best fit for your needs!

Glouriouscott96 · February 8, 2022, 11:34pm

Texture Resolution/Compression/Formats

This is actually quite a large factor in performance especially if neglected and will build up more over the games development with each new texture added to it.

That’s why it is important to understand how to properly manage thse things before even adding textures to your game! If you already have textures but want to clean them up just keep reading and I’ll cover off some ways in which I fix up problematic textures.

Terms

Resolution - The pixel density, or how many pixels in the rows/columns, example 1024x1024 or 1K image res
Bit depth - Refers to the colour information stored within the image, the higher the bit-depth the more colours it can store

Resolution

As a bit of background into how textures are manged in a game, they are stored in the VRAM, which is the GPU memory, most GPUs have around 2GB-8GB of VRAM which seems like a decent amount but can easily disappear when you introduce textures to a game.

Calculating the amount of VRAM used by a texture
Texture specs : 1024x1024, RGB channels

Our texture has 3 channels RGB, each of those channels can store values between 0-255, this is 8-bit colour as 2^8 (2x2x2x2x2x2x2x2) = 256, but we have 3 channels so its 3 x 8 (channels x bits per channel) which gives us a bit-depth of 24.

Now some math:
1024x1024 = 1,048,576 pixels
1,048,576 x 24 bits per pixel = 25,165,824 bits total in the image!
25,165,824 / 8 bits per byte = 3,145,728 bytes
3,145,728 bytes / 1024 = 3,072Kb
3,072Kb / 1024 = 3MB

So our texture actually takes up 3MB of VRAM! if we’re going to use SurfaceAppearance which requires 4 textures, Colour, Metallic, Roughness, Normal that’s 4 x 3MB = 12MB of VRAM. Now this may not sound like much, but when you have 4 or 5 of these unique assets in a game, you have just used up 50MB - 60M. This can be remedied by just reducing the overall resolution of the textures down to 512 or less which will reduce its VRMA storage by over 50%

Deciding on a resolution can be a tricky process, as you’ll need to factor in many different things about what that texture will be applied to such as;

Size of the texture when applied to something, if its on the side of a building then it might need to be bigger.
How detailed is it, is it just a subtle fade between two colours, if so then you can get away with less.
Is is that visible from in game? if your only going to see it from far away or just for a few seconds then it can be smaller.

If you are not sure what resolution an image is then just ‘right click > properties > details’ on windows, for mac its a little bit more complex and it uses Preview inspector.
Example : This texture is 1K or 1024, usually the standard size for most

Another thing to remember is that computers like powers of 2 thanks to binary. The excess space is wasted so its good to use up what would be wasted space, therefor when you make textures, and are setting up the size of the image. Keep it to powers of 2

Handy guide:
8 - 16 - 32 - 64 - 128 - 256 - 512 - 1024 - 2048 - 4096
The last 3 are most common and are referred to as 1k, 2k, 4k

Screen-space coverage

Screen-space coverage is a good thing to take into account when deciding on a final resolution for a texture. For example, these two blocks have a resolution of 512x512 and 1024x1024, and this is as close as you would get to them in-game, as you can see they only occupy 400 pixels on an average screen 1920x1080, making it useless to keep its resolution as 1024x1024 as most of that resolution can’t be displayed and is just wasted!

So for this case we can safely say that the most needed is 512x512.
Its good to get into the habit of doing this with most assets such as a sword or a plant, as you could be wasting VRAM by storing a resolution that will never be seen.

Compression/Format

Compression is useful for making file sizes shrink down to a much more manageable amount, and in this case for Roblox its good to try keep things to a minimal amount as it all has to be sent over internet. It is however not necessarily needed unless you are dealing with files greater than a few MBs.

First you could just run it through some online image compressor, which will work most of the time but yield some interesting results with edge cases. Personally I prefer to manually compress them through the export settings as you often get more control over what actually gets thrown away.

If you feel the need to you can clamp the amount of colours per channel when exporting through software like Photoshop or Affinity, these can help to remove some excess values that won’t be noticed on the final texture. However if you go a bit harsh on the clamping value it will be very noticeable so I wouldn’t mess with it unless you are sure of what you are doing.

When it comes time to export your texture, picking a format is important, it may not seem like much but could be helpful in the long run when you want to re-edit it or find out that your image got compressed too much and now looks very bad!

Ideally you should always use PNG as its a lossless format meaning you can always edit it later on and not have to deal with thrown away data. Which can be seen when using a lossy format such as JPEG which will throw away ‘unused’ data when compressing and you will not be able to get that data back! so its usually not a good idea to use that format.

You may be drawn to it because it has a smaller file size, but smaller file size does not mean less VRAM, so even if your file is 3Kb its still gonna take up 3MB of VRAM. So it is generally advised to optimise VRAM storage over file size.

If you texture is greyscale most exporters will have an option to just export as a greyscale image which can help as it cuts down on unnecessary data being stored in the file such as full RGB values.

Unfortunately Roblox does not support DDS (Direct-draw-surface) as far as I know so this section is a little shorter than intended but maybe that will change in the future. But ideally all textures should be saved as DDS format as it is DirectX’s native format, meaning that any other file type you put in, DDS will actually come out when rendering.

Fixing up textures

Fixing up textures can be a bit of a pain at first but the end result is worth it. If you’re downloading textures and their formats or resolution are not optimal here are a few things you can do to fix that:

Format
This is generally quite an easy thing to achieve, it just requires you to run it through an image editor like Photoshop and export as the desired format PNG. And can usually be done in less than a minute, if you don’t have access to Photoshop then you can use another well known image editor GIMP, which is a free image editor that is very powerful!

Resolution
This is also quite a simple thing as it requires similar steps to the format section above, and can usually be done along side it. When you go to export the image make sure to adjust the final size of the image to the desired amount powers of 2, and you should be good to go!

And that is a semi-detailed guide on what size,format,compression should be used when creating or using textures.

In the next part I’ll cover off setting up and using Decals,SurfaceAppearances and Textures in Roblox, and how to keep draw calls to a minimum!