SurfaceAppearance

Show Deprecated

SurfaceAppearance objects allow developers to override the appearance of a MeshPart with advanced graphics options. Most notably, a SurfaceAppearance can apply a set of PBR textures to a mesh.

PBR is short for Physically Based Rendering, which refers to a common texture format for defining extra physical details in games. Because this format is widely used, it's easy to take meshes and textures made in 3rd party editing software and import them into Roblox. It's also easy to find PBR format content from various 3rd party stores such as SketchFab, TurboSquid, CGTrader.

For PBR textures to be visible in-game, when you change a texture property of SurfaceAppearance you should wait until you see the "Successfully uploaded compressed SurfaceAppearance." message in the output window. If your PBR textures are not visible, try changing a texture property.

Here is a mesh with PBR textures found on Turbosquid imported into Roblox.

TextureId vs SurfaceAppearance

Pine trees

SurfaceAppearance's AlphaMode property can also be to improve the look of partially transparent textures on MeshParts by fixing various sorting issues.

How a MeshPart with a SurfaceAppearance looks to users depends on their device and their graphics quality level. You may want to preview your content with different quality level settings.

Note:

  • Most SurfaceAppearance properties cannot be modified by scripts in-game. This is because the Roblox engine needs to do some pre-processing to display a SurfaceAppearance, and this is usually too expensive to perform in-game.

Summary

Properties

Determines how the alpha channel of the SurfaceAppearance.ColorMap of a SurfaceAppearance is used.

Determines the color and opacity of the surface.

Determines which parts of the surface are metal and are non-metal.

Modifies the lighting of the surface by adding bumps, dents, cracks, and curves without adding more polygons.

Determines the apparent roughness across the surface.

Events

Methods

Properties

AlphaMode

This property determines how the alpha channel of the SurfaceAppearance.ColorMap of a SurfaceAppearance is used.

When AlphaMode is set to Transparency and the MeshPart.Transparency is set to 0, opaque pixels in the SurfaceAppearance's ColorMap will render as completely opaque in the 3D scene. This solves various problems for textures with different transparent and opaque areas, such as foliage. When parts of the surface are fully opaque, the Roblox engine can render them with proper depth-based occlusion. Opaque surfaces also generally work better with depth-based effects like DepthOfField, glass and water refraction, and water reflection.

MeshPart.TextureId vs SurfaceAppearance:

Foliage comparison

Here is an example of a fern color map. Only the pixels on the leaves have full alpha.

Alpha fern

ColorMap

This property determines the color and opacity of the surface. This texture is sometimes called the albedo texture. The alpha channel of this texture controls its opacity, which behaves differently based on the SurfaceAppearance.AlphaMode setting.

MetalnessMap

This property determines which parts of the surface are metal and are non-metal. A metalness map is a grayscale image where black pixels correspond to non-metals and white pixels correspond to metals.

Metals only reflect light the same color as the metal, and they reflect much more light than non-metals. Most materials in the real world can be categorized either metals or non-metals. For this reason, most pixels in a metalness map will be either pure black or pure white. Values in between are typically used to simulate dirt or grunge on top of an underlying metal area.

Here's an example of a piece of metal with a layer of paint on top. Most paints are non-metallic, so the metalness map is black everywhere except on unpainted metal parts and spots where the paint has chipped away and the underlying metal is visible.

Metalness jetpack

Map explanation

Note

NormalMap

This property modifies the lighting of the surface by adding bumps, dents, cracks, and curves without adding more polygons.

Normal maps are RGB images that modify the surface's normal vector used for lighting calculations. The R, G, and B channels of the NormalMap correspond to the X, Y, and Z components of the local surface vector respectively, and byte values of 0 and 255 for each channel correspond linearly to normal vector components of -1 and 1.016 respectively. This range is stretched slightly from -1 to 1 so that a byte value of 127 maps to exactly 0. The normal vector's Z axis is always defined as the direction of the underlying mesh's normal. A uniform (127,127,255) image translates to a completely flat normal map where the normal is everywhere perpendicular to the mesh surface. This format is called "tangent space" normal maps. Roblox does not support world space or object space normal maps.

Incorrectly flipped normal components can make bumps appear like indents. If you import a normal map and notice the lighting looks off, you may need to invert the G channel of the image. The X and Y axes of the tangent space frame correspond to the X and Y directions in the image after it's transformed by the mesh UVs. If you view your normal map in an image editor as if it were displayed on a surface, normals pointing towards the right side of the screen should appear more red, and normals pointing towards the top side of your screen should appear more green.

Bread normal map

The terms "DirectX format" and "OpenGL format" are sometimes used to describe whether the G channel of the normal map is inverted or not. Roblox expects the OpenGL format.

Note

Roblox expects imported meshes to include tangents. Modeling software may also refer to this as "tangent space" information. If you apply a normal map and it does not seem to make any visual difference, you may need to re-export your mesh along with its tangent information from modeling software.

RoughnessMap

This property determines the apparent roughness across the surface. A roughness map is a grayscale image where black pixels correspond to a maximally smooth surface, and white pixels correspond to a maximally rough surface.

Roughness refers to how much variation the surface has on a very small scale. Reflections on smooth surfaces are sharp and concentrated. Reflections on rough surfaces are more blurry and dispersed.

TexturePack

Events

Methods