# Different Textures On The Front And Back Of A Mesh

> Learn how to apply different textures to the front and back of a mesh.

Source: https://doc.babylonjs.com/features/featuresDeepDive/materials/using/frontAndBackUVs

Having a front and a back makes the most sense when talking about flat meshes such as a plane, a disc, or a polygon. All of these 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 on the front and back, the front and back images must be in the same file, like the one below.

![front and back images](https://doc.babylonjs.com/img/how_to/different-material-front-back/card.webp)

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, where
(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 define two variables:

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

and then place them in the options

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

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

You then simply create a _StandardMaterial_ and set the texture to the image.

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

## Two Sided Examples

- [Playground: Different Images On A Plane](https://playground.babylonjs.com/#LXZPJK#3) - Simple example of applying different images to the front and back of a plane.
- [Playground: Different Images On A Polygon](https://playground.babylonjs.com/#4G18GY#909) - Simple example of applying different images to the front and back of a Polygon.

## Inside and Outside Examples

- [Playground: Different Images On A Tube](https://playground.babylonjs.com/#165IV6#74) - Simple example of applying different images to the front and back of a tube.
- [Playground: Image On The Outside Of A Sphere](https://playground.babylonjs.com/#K6M44R#3) - Simple example of applying an image to the outside of a sphere.
- [Playground: Image On The Inside Of A Sphere](https://playground.babylonjs.com/#K6M44R#4) - Simple example of applying an image to the inside of a sphere.