Front and Back

In Babylon.js, applying different textures to the front and back faces of a mesh allows for enhanced visual detail and realism. This technique is particularly useful for creating objects that have distinct appearances on each side, such as leaves, flags, or double-sided materials.

Having a front and a back makes most sense when talking about flat meshes such as a plane, a disc or a polygon. All of which have exactly two sides both of which can be seen only when the option sideOrientation={Mesh.DOUBLESIDE}. However, many meshes have the option sideOrientation and this method applies to them as well. In which case think of the front as outside and the back as inside.

Both frontUVs and backUVs properties have the form Vector4(u0, v0, u1, v1) with 0<= u0, v0, u1, v1 <= 1 and (u0, v0) are the bottom left coordinates and (u1, v1) the top right coordinates of the clipping rectangle of the image.

<plane name='card' options={{ height: 1, width: 0.66, sideOrientation: Mesh.DOUBLESIDE, frontUVs: new Vector4(0.5, 0, 1, 1), backUVs: new Vector4(0, 0, 0.5, 1) }}>
    <standardMaterial name='material'>
        <texture kind='diffuseTexture' url={uvCard} />
    </standardMaterial>
</plane>

Learn More

For additional info, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/frontAndBackUVs.