
## Transformations About the Local Origin

When a mesh is created the position vector for each vertex is given from (0, 0, 0) the _created origin_ of the mesh and its _local origin_ for translation, rotation and scaling. In this section the center of transformation of a mesh will always be its _local origin_. For changes to the center of transformation visit [Parents and Pivots](/features/featuresDeepDive/mesh/transforms/parent_pivot). As well as simply assigning vector values to change the position, rotation and scale of a mesh it is also possible to use the method of cooordinate transformation to transform one mesh in terms of the frame of reference of another. It is also possible to transform the mesh vertices coordinates and effectively change the _local origin_, this process of _baking transformations_ is described although it should only be necessary in exceptional circumstances.



## Transformation, Pivots and Parents

Should you wish to rotate or scale a mesh, or other object, about a point other than its own _local origin_ then this can be done by changing its center of transformation using either a parent or a pivot. Whilst in general conversation, and some 3D applications, a center of transformation may be referred to as a pivot point, in Babylon.js the term _pivot_ is used when setting a center of transformation with a specific method. The effects of using a parent or a pivot are different. To obtain the behavior of a pivot point as described for example by 3DS Max or Maya then set a parent on the mesh to act as the pivot point rather than using _setPivotPoint_.

When a parent is set on a child mesh, transforming a parent will apply the same transformations to the child. Translations, rotations and scaling of the child will take place relative to the _local origin_ of the child. Setting the position of the child will be relative to the _local origin_ of the parent. In simpler terms, moving the child will not move the parent and moving the parent will move the child.

Depending on the method used to produce the parent child relationship any transformations made to the parent prior to assigning it  children may also be applied to the children when the parent is assigned. It usually makes sense not to rotate or move a child until after you've assigned it to the parent.

When a pivot is set on a mesh, re-positioning the mesh will re-position the pivot so that its placement relative to the mesh is not changed. Rotation and scaling of the mesh take place relative to the pivot. More simply, moving the mesh will move the pivot and moving the pivot will not move the mesh.

Using a pivot can be tricky and a number of methods are available. Some of these methods, but not all, may actually change the _local origin_ of a mesh.



## Transformations
Transformations are the actions that change an object's position, rotation and scale. Although this section largely covers transformations applied to meshes some can also apply to other Babylon.js objects.

Applying transformations can seem straightforward and in many cases they are, such as changing position. Others aspects may appear easy but in practice can be difficult either in concept, execution or both. In 3D something as simple as a rotation can prove tricky, once you have rotated a mesh about x and y then its z axis may not be where you think it should be since a mesh's local frame of reference rotates with it.

Frames of reference, in 3D, are formed by an origin and three mutually perpendicular axes through the origin. When created in Babylon.js objects are placed using a frame of reference in **World Space** where there are two horizontal axes, x and z, and a vertical y axis in a left handed system.

Each mesh also has its own **Local Space**.  Meshes built within Babylon.js are created with their local space origin at the world space origin and with their local space axes x, y and z aligned with the x, y and z axes of the world space. The local origin acts as the center of transformation unless pivots or parents are added to the mesh. Both of these cases will be described.

Meshes created in other packages and imported may use different frames of reference.





## Vertex Normals

Each triangular facet of a mesh comprises three vertices. Besides a position each vertex has another important vector3 called a normal. These vertex normals are used by the [shader code](/features/featuresDeepDive/materials/shaders/introToShaders) in calculating how the mesh is lit. Unlike a mathematical normal there is no necessity for them to be set at right angles and for curved shapes such as a sphere they may not be. In the case of a sphere they are set as the mathematical normal of the sphere surface rather than that of the flat facets of the mesh that create the sphere.

At first the vertex normals are calculated as the mathematical normals for the facet. It then depends whether you want to view the facets as flat surfaces or as part of curve. For flat surfaces the vertex normals remain as the mathematical normals. To enhance the curve when viewed under light where triangular facets share vertices with the same positions each shared vertex normal is recalculated to be the average of the mathematical normals of the shared vertex normals.

These effects are explored below.

In the following two playgrounds see how the changing directions within the normals array affect how it is lit:

<Playground id="#VKBJN#18" title="Vertex Normals Varying In Unison" description="Simple example of vertex normals varying in unison."/>

<Playground id="#VKBJN#19" title="Showing Normals Varying" description="Simple example of showing vertex normal variation."/>

##Normals and Minimum Vertices

![Wireframe](/img/how_to/Mesh/box1.jpg)

The box above has 8 vertices. If we want to keep the indices to the minimum they will be 0, 1, 2, 3, 4, 5, 6, 7.

Facets 0, 3, 7 and 3, 7, 6 and 0, 3, 2 all have vertex 3 in common and vertex 3 can only have one
entry in the normals array associated with it.

How doesBabylon.js calculate the `normal` for vertex 3?

The diagram below shows that the average of the three mathematical normals at each vertex is used:

![Normals](/img/how_to/Mesh/box4.jpg)

Besides minimising the number of vertices needed there are other advantages as will be seen when creating a sphere.

Keeping the indices to a minimum the normals at each corner are an average of the mathematical normals of the three faces that meet at that corner. So 8 corners and 8 unique vertex normals.

## Table of Unique Indices, Positions and Normals for Box with Minimum Vertices

| index | position         | normal                                                              |
| ----- | ---------------- | ------------------------------------------------------------------- |
| 0     | ( -1 , 1 , -1 )  | ( -0.5773502691896258 , 0.5773502691896258 , -0.5773502691896258 )  |
| 1     | ( 1 , 1 , -1 )   | ( 0.8164965809277261 , 0.4082482904638631 , -0.4082482904638631 )   |
| 2     | ( 1 , -1 , -1 )  | ( 0.4082482904638631 , -0.4082482904638631 , -0.8164965809277261 )  |
| 3     | ( -1 , -1 , -1 ) | ( -0.4082482904638631 , -0.8164965809277261 , -0.4082482904638631 ) |
| 4     | ( -1 , 1 , 1 )   | ( -0.4082482904638631 , 0.4082482904638631 , 0.8164965809277261 )   |
| 5     | ( 1 , 1 , 1 )    | ( 0.4082482904638631 , 0.8164965809277261 , 0.4082482904638631 )    |
| 6     | ( 1 , -1 , 1 )   | ( 0.5773502691896258 , -0.5773502691896258 , 0.5773502691896258 )   |
| 7     | ( -1 , -1 , 1 )  | ( -0.8164965809277261 , -0.4082482904638631 , 0.4082482904638631 )  |

## Normals and Flat Shaded Meshes.

There are times, such as needing each face of a box to be covered in a [different material](/features/featuresDeepDive/mesh/facetData),
when it is better to have the box constructed from separate faces each of which are constructed by two facets and no two faces
sharing a vertex indices. They will of course share vertex positions.

![Seperate Faces](/img/how_to/Mesh/box3.jpg)

InBabylon.js this can be achieved using the `convertToFlatShadedMesh` function. The results are shown below:

![Flat Shaded Normals](/img/how_to/Mesh/box5.jpg)

For a flat shaded mesh each of the triangular facets making a face of the box has mathematical normals as their vertex normals. For simplicity of illustration we will only consider the the six faces making up the box than the full range of triangular facets used in the mesh construction. Each face has 4 corners, each corner has a unique normal at right angles to the face. There are 6 faces on a box and so 24 unique corner normals.

## Table of Faces, Corners, Positions and Normals for Flat Shaded Box

| Face  | corner | position         | normal           |
| ----- | ------ | ---------------- | ---------------- |
| Front | 0      | ( -1 , 1 , -1 )  | ( 0 , 0 , -1 )   |
| Front | 1      | ( 1 , -1 , -1 )  | ( 0 , 0 , -1 )   |
| Front | 2      | ( 1 , 1 , -1 )   | ( 0 , 0 , -1 )   |
| Front | 3      | ( -1 , 1 , -1 )  | ( 0 , 0 , -1 )   |
| Back  | 4      | ( -1 , 1 , 1 )   | ( 0 , 0 , 1 )    |
| Back  | 5      | ( 1 , -1 , 1 )   | ( 0 , 0 , 1 )    |
| Back  | 6      | ( -1 , -1 , 1 )  | ( 0 , 0 , 1 )    |
| Back  | 7      | ( -1 , 1 , 1 )   | ( 0 , 0 , 1 )    |
| Right | 8      | ( 1 , 1 , -1 )   | ( 1 , -0 , 0 )   |
| Right | 9      | ( 1 , -1 , 1 )   | ( 1 , -0 , 0 )   |
| Right | 10     | ( 1 , 1 , 1 )    | ( 1 , -0 , 0 )   |
| Right | 11     | ( 1 , 1 , -1 )   | ( 1 , 0 , 0 )    |
| Left  | 12     | ( -1 , 1 , -1 )  | ( -1 , 0 , 0 )   |
| Left  | 13     | ( -1 , -1 , 1 )  | ( -1 , 0 , 0 )   |
| Left  | 14     | ( -1 , -1 , -1 ) | ( -1 , 0 , 0 )   |
| Left  | 15     | ( -1 , 1 , -1 )  | ( -1 , -0 , -0 ) |
| Top   | 16     | ( -1 , 1 , -1 )  | ( 0 , 1 , 0 )    |
| Top   | 17     | ( 1 , 1 , 1 )    | ( 0 , 1 , 0 )    |
| Top   | 18     | ( -1 , 1 , 1 )   | ( 0 , 1 , 0 )    |
| Top   | 19     | ( 1 , 1 , -1 )   | ( 0 , 1 , -0 )   |
| Base  | 20     | ( -1 , -1 , -1 ) | ( 0 , -1 , -0 )  |
| Base  | 21     | ( 1 , -1 , 1 )   | ( 0 , -1 , -0 )  |
| Base  | 22     | ( 1 , -1 , -1 )  | ( 0 , -1 , -0 )  |
| Base  | 23     | ( -1 , -1 , 1 )  | ( 0 , -1 , 0 )   |

## Playground Showing Box Normals

<Playground id="#1H7L5C#37" title="Box Normals" description="Simple example of box normals."/>

## Advantage of Shared Normals

Sharing normals means that the shader produces a rounder looking sphere since the vertex normals are the mathematical normals of the sphere surface.

Applying the function `converToFlatShadedMesh` shows the individual faces making up the sphere. For a flat shaded sphere the normals of each facet are the mathematical normals of the facet.

<Playground id="#1H7L5C#38" title="Comparing Shading of Spheres" description="Simple example comparing shading of spheres."/>


Mesh Transformations

Transformations

Coming next

Centered on Created Origin

Learn origins and pivots in Babylon.js.

Parents and Pivots

Learn all about parent relationships and pivots in Babylon.js.