Different Textures On The Front And Back Of A Mesh

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 is set to BABYLON.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.

To have different textures front and back the front and back image must be in the same file, like the one below

This is then split using the frontUVs and backUVs options.

FrontUVs and BackUVs

Both frontUVs and backUVs 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.

To split the image above you can form two variables

var f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the width 
var b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width

and then place in the options

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:1, width: 0.665, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: f, backUVs: b}, scene);

taking into account width to height ratio of section of image.

It is then just a case of creating a StandardMaterial and setting the texture to the image.

var mat = new BABYLON.StandardMaterial("", scene);
mat.diffuseTexture = new BABYLON.Texture("URL to Image File", scene);
plane.material = mat;

Two Sided Examples

Inside and Outside Examples