## Extract Submeshes as Meshes
This snippet takes a mesh and splits its subMeshes into individual meshes. Returns array of new meshes.

```javascript
function deconstructMesh(mesh) {
 if (mesh.subMeshes.length > 1) {
 var otherVertexData = BABYLON.VertexData.ExtractFromMesh(mesh, true, true);
 var indices = otherVertexData.indices;
 var normals = otherVertexData.normals;
 var positions = otherVertexData.positions;
 var uvs = otherVertexData.uvs;
 var newMeshArray = [];
 for (var index = 0; index < mesh.subMeshes.length; index++) {
 var newVertexData = new BABYLON.VertexData();
 
 var newI = indices.slice(mesh.subMeshes[index].indexStart, mesh.subMeshes[index].indexStart+mesh.subMeshes[index].indexCount);
 var newN = normals.slice(mesh.subMeshes[index].verticesStart * 3, mesh.subMeshes[index].verticesStart * 3 + mesh.subMeshes[index].verticesCount * 3);
 var newP = positions.slice(mesh.subMeshes[index].verticesStart * 3, mesh.subMeshes[index].verticesStart * 3 + mesh.subMeshes[index].verticesCount * 3);
 var newU = uvs.slice(mesh.subMeshes[index].verticesStart * 2, mesh.subMeshes[index].verticesStart * 2 + mesh.subMeshes[index].verticesCount * 2);
 for (var subIndex = 0; subIndex < newI.length; subIndex++) {
 newI[subIndex] = newI[subIndex] - mesh.subMeshes[index].verticesStart;
 }

 newVertexData.indices = newI;
 newVertexData.normals = newN;
 newVertexData.positions = newP;
 newVertexData.uvs = newU;
 
 var meshSubclass = new BABYLON.Mesh(mesh.name+'-'+index, scene);
 
 newVertexData.applyToMesh(meshSubclass);
 
 newMeshArray.push(meshSubclass);
 }
 return newMeshArray;
 } else {
 return [mesh];
 }
}
```

# Making a Frame

## Using Frame Maker

var frame = frameMaker("frame", options, scene);

option|value|default value
--------|-----|-------------
path|_(Vector3[])_ array of Vector3 points forming outer edge of the frame, z must be 0, **REQUIRED**
profile|_(Vector3[])_ array of Vector3 points forming the frame profile, z must be 0, **REQUIRED**

The profile or cross section of the frame, has to be a consecutive sequence of points in the XoY giving the corners of the profile. The left most point or points will follow the path and form the outer edge of the frame. The following profile is a square with a rebated corner.

```javascript
var profilePoints = [
	new BABYLON.Vector3(-15, 15, 0),
	new BABYLON.Vector3(-15, -15, 0),
	new BABYLON.Vector3(15, -15, 0),
	new BABYLON.Vector3(15, 10, 0),
	new BABYLON.Vector3(10, 10, 0),
	new BABYLON.Vector3(10, 15, 0)
];
```

The path defines the outer edge of the frame and again is given as points in the XoY plane. The following exxample produces a rectangular frame.

```javascript
path = [
 new BABYLON.Vector3(-150, -100, 0),
 new BABYLON.Vector3(150, -100, 0),
 new BABYLON.Vector3(150, 100, 0),
 new BABYLON.Vector3(-150, 100, 0)
]; 
```

The direction of the path (clockwise or counter-clockwise) determines the orientation of the profile around the frame. If it turns out you need to flip the profile then reverse the path array before passing to frameMaker.

```javascript
path.reverse();
```

### Playground Examples

<Playground id="#ZGVYNB" title="Window With Rebate" description="Window With Rebate."/>
<Playground id="#ZGVYNB#1" title="Triangular Frame with L Shape Profile" description="Triangular Frame with L Shape Profile."/>
<Playground id="#ZGVYNB#2" title="Oval Frame" description="Oval Frame"/>

## Code

```javascript
var frameMaker = function(name, options, scene) {	

	var path = options.path;
	var profile = options.profile;
	
	var originX = Number.MAX_VALUE;
	
	for(var m = 0; m < profile.length; m++) {
		originX = Math.min(originX, profile[m].x);
	}

	var innerData = [];
 var outerData = [];
	var angle = 0;
	var extrusion = 0;
	var width = 0;
	var cornerProfile = [];
	
	var nbPoints = path.length;
	var line = BABYLON.Vector3.Zero();
	var nextLine = BABYLON.Vector3.Zero();
	path[1].subtractToRef(path[0], line);
	path[2].subtractToRef(path[1], nextLine); 
	
	for(var p = 0; p < nbPoints; p++) { 
		angle = Math.PI - Math.acos(BABYLON.Vector3.Dot(line, nextLine)/(line.length() * nextLine.length())); 
		direction = BABYLON.Vector3.Cross(line, nextLine).normalize().z; 
		lineNormal = new BABYLON.Vector3(line.y, -1 * line.x, 0).normalize();
		line.normalize();
		extrusionLength = line.length();
		cornerProfile[(p + 1) % nbPoints] = [];
		//local profile
		for(m = 0; m < profile.length; m++) {
			width = profile[m].x - originX;
			cornerProfile[(p + 1) % nbPoints].push(path[(p + 1) % nbPoints].subtract(lineNormal.scale(width)).subtract(line.scale(direction * width/Math.tan(angle/2))));			
		} 
		
		line = nextLine.clone(); 
		path[(p + 3) % nbPoints].subtractToRef(path[(p + 2) % nbPoints], nextLine); 
	}
	
	var frame = [];
	var extrusionPaths = []
	
	for(var p = 0; p < nbPoints; p++) {
		extrusionPaths = [];
		for(var m = 0; m < profile.length; m++) {
			extrusionPaths[m] = [];
			extrusionPaths[m].push(new BABYLON.Vector3(cornerProfile[p][m].x, cornerProfile[p][m].y, profile[m].y));
			extrusionPaths[m].push(new BABYLON.Vector3(cornerProfile[(p + 1) % nbPoints][m].x, cornerProfile[(p + 1) % nbPoints][m].y, profile[m].y));
		}
		
		frame[p] = BABYLON.MeshBuilder.CreateRibbon("frameLeft", {pathArray: extrusionPaths, sideOrientation: BABYLON.Mesh.DOUBLESIDE, updatable: true, closeArray: true}, scene);
	}
	
	return BABYLON.Mesh.MergeMeshes(frame, true).convertToFlatShadedMesh();
}

```

## Increasing Vertices of a Mesh

The appearance of a softbody or the effect of a shader depends on the number of facets the mesh has. Some meshes 
such as a ground or sphere can have smaller or larger numbers of facets depending on the parameters set during their 
creation. For other meshes such as a box or disc there can be no or little choice. In these circumstances it may 
be useful to have a function that can increase the facets.

When n is the number of points per side added to each side of a facet the number of facets is increased by (n + 1)2.

**NOTE** From Babylon.js version 4.0 onwards this utility now exists as a standard method on a mesh.

```javascript
mesh.increaseVertices(n);
```

## The Playground

The disc at the top left has the number of facets made when it was created. The lower right has had the facets increased.

<Playground id="#5ITGBA#1" title="Increase Facets 1" description="Simple example of increasing facets of a mesh."/>

## Prior to Version 4.0

Use the function below. Any examples found in the playground then used the term 'increaseFacets' rather than 'increaseVertices'.

## The Function

```javascript
BABYLON.Mesh.prototype.increaseFacets = function(pps) { //pps points per side 
 var _gaps = pps+1;
 var _n = _gaps + 1;
 var _fvs =[];
 for(var _i=0; _i<_n; _i++) {
 _fvs[_i] = [];
 } 
 var _A,_B;
 var _d ={x:0,y:0,z:0};
 var _u ={x:0,y:0};
 var _indices = [];
 var _vertexIndex = [];
 var _side = [];
	var _l; //holds lengths
 var _uvs = this.getVerticesData(BABYLON.VertexBuffer.UVKind);
 var _meshIndices = this.getIndices();
 var _positions = this.getVerticesData(BABYLON.VertexBuffer.PositionKind); 
 var _normals =[]; 

 for(var _i = 0; _i<_meshIndices.length; _i+=3) {
 _vertexIndex[0] = _meshIndices[_i];
 _vertexIndex[1] = _meshIndices[_i + 1];
 _vertexIndex[2] = _meshIndices[_i + 2]; 
 for(var _j = 0; _j<3; _j++) {
 _A = _vertexIndex[_j];
 _B = _vertexIndex[(_j+1)%3]; 
 if(_side[_A] === undefined && _side[_B] === undefined) { 
 _side[_A] = [];
 _side[_B] = []; 
 }
 else {
 if(_side[_A] === undefined) { 
 _side[_A] = [];
 }
 if(_side[_B] === undefined) { 
 _side[_B] = []; 
 }
 }
 if(_side[_A][_B] === undefined && _side[_B][_A] === undefined) { 
 _side[_A][_B] = [];
 _d.x = (_positions[3 * _B] - _positions[3 * _A])/_gaps;
 _d.y = (_positions[3 * _B + 1] - _positions[3 * _A + 1])/_gaps;
 _d.z = (_positions[3 * _B + 2] - _positions[3 * _A + 2])/_gaps;
 _u.x = (_uvs[2*_B] - _uvs[2*_A])/_gaps;
 _u.y = (_uvs[2*_B + 1] - _uvs[2*_A + 1])/_gaps;
 _side[_A][_B].push(_A); 
 for(var _k=1; _k<_gaps; _k++) { 
 _side[_A][_B].push(_positions.length/3); 
 _positions.push(_positions[3 * _A] + _k*_d.x, _positions[3 * _A + 1] + _k*_d.y, _positions[3 * _A + 2] + _k*_d.z);
 _uvs.push(_uvs[2*_A] + _k*_u.x, _uvs[2*_A + 1] + _k*_u.y);
 } 
 _side[_A][_B].push(_B);
 _side[_B][_A]=[];
 _l = _side[_A][_B].length;
 for(var _a=0; _a<_l; _a++) {
 _side[_B][_A][_a] = _side[_A][_B][_l-1-_a];
 }
 }
 else {
 if(_side[_A][_B] === undefined) { 
 _side[_A][_B]=[];
 _l = _side[_B][_A].length;
 for(var _a=0; _a<_l; _a++) {
 _side[_A][_B][_a] = _side[_B][_A][_l-1-_a];
 }
 }
 if(_side[_B][_A] === undefined) { 
 _side[_B][_A]=[]; 
 _l = _side[_A][_B].length;
 for(var _a=0; _a<_l; _a++) {
 _side[_B][_A][_a] = _side[_A][_B][_l-1-_a];
 }
 }
 } 
 } 
 _fvs[0][0] = _meshIndices[_i];
 _fvs[1][0] = _side[_meshIndices[_i]][_meshIndices[_i + 1]][1];
 _fvs[1][1] = _side[_meshIndices[_i]][_meshIndices[_i + 2]][1]; 
 for(var _k = 2; _k<_gaps; _k++) {
 _fvs[_k][0] = _side[_meshIndices[_i]][_meshIndices[_i + 1]][_k];
 _fvs[_k][_k] = _side[_meshIndices[_i]][_meshIndices[_i + 2]][_k]; 
 _d.x = (_positions[3 * _fvs[_k][_k]] - _positions[3 * _fvs[_k][0]])/_k;
 _d.y = (_positions[3 * _fvs[_k][_k] + 1] - _positions[3 * _fvs[_k][0] + 1])/_k;
 _d.z = (_positions[3 * _fvs[_k][_k] + 2] - _positions[3 * _fvs[_k][0] + 2])/_k;
 _u.x = (_uvs[2*_fvs[_k][_k]] - _uvs[2*_fvs[_k][0]])/_k;
 _u.y = (_uvs[2*_fvs[_k][_k] + 1] - _uvs[2*_fvs[_k][0] + 1])/_k;
 for(var _j = 1; _j<_k; _j++) { 
 _fvs[_k][_j] = _positions.length/3; 
 _positions.push(_positions[3 * _fvs[_k][0]] + _j*_d.x, _positions[3 * _fvs[_k][0] + 1] + _j*_d.y, _positions[3 * _fvs[_k][0] + 2] + _j*_d.z);
 _uvs.push(_uvs[2*_fvs[_k][0]] + _j*_u.x, _uvs[2*_fvs[_k][0] + 1] + _j*_u.y);
 } 
 }
 _fvs[_gaps] = _side[_meshIndices[_i + 1]][_meshIndices[_i + 2]];

 _indices.push(_fvs[0][0],_fvs[1][0],_fvs[1][1]);
 for(var _k = 1; _k<_gaps; _k++) {
 for(var _j = 0; _j<_k; _j++) { 
 _indices.push(_fvs[_k][_j],_fvs[_k+1][_j],_fvs[_k+1][_j+1]);
 _indices.push(_fvs[_k][_j],_fvs[_k+1][_j+1],_fvs[_k][_j+1]);
 } 
 _indices.push(_fvs[_k][_j],_fvs[_k+1][_j],_fvs[_k+1][_j+1]);
 }

 } 

 var vertexData = new BABYLON.VertexData();
 vertexData.positions = _positions;
 vertexData.indices = _indices;
 vertexData.uvs = _uvs;

 BABYLON.VertexData.ComputeNormals(_positions, _indices, _normals);
 vertexData.normals = _normals;
	
 vertexData.applyToMesh(this);

}
```

## The Playground

The disc at the top left has the number of facets made when it was created. The lower right has had the facets increased.

<Playground id="#2322Y7#14" title="Increase Facets 2" description="Simple example of increasing facets of a mesh."/>

## How To Create Points Inside a Mesh

This utility enables you to create and store Vector3 points each of which is randomly positioned inside a given mesh.

## Design Outline.

1. Take a random triangular facet belonging to the mesh;
2. Choose a random point inside this triangle;
3. For the facet construct an inward pointing random vector;
4. Using that point as ray origin and the vector as ray direction find the hit point of the ray on the mesh;
5. Determine a random point on the line segment joining the origin point to the hit point.

## Design Method.

1. For the mesh get the vertex positions and indices using

```javascript
var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
var indices = mesh.getIndices();
```
Select a facet, F, at random.

2. Obtain the three facet vertex positions, vertex0, vertex1 and vertex2 using the positions array. From these construct vectors, vec0 and vec1, along two sides of the triangle one following the other. For a value 0 &le; &lambda; &le; 1,&nbsp; &lambda;vec0 and &lambda;vec1 will form two sides of a triangle similar to the facet. So when also given a value 0 &le; &mu; &le; 1,&nbsp; &lambda;vec0 and &lambda;&mu;vec1 will give a point inside the facet. The range of values for &lambda; and &mu; will determine all points within the facet. Hence random values for &lambda; and &mu; will give random points on the facet plane.

![Find point](/img/samples/manypoints.jpg)

```javascript
lamda = BABYLON.Scalar.RandomRange(0, 1);	
mu = BABYLON.Scalar.RandomRange(0, 1);
facetPoint = vertex0.add(vec0.scale(lambda)).add(vec1.scale(lambda * mu));
```

3. In order to generate a vector pointing inwards get the normal vector of the facet (which points outward), reverse it to get the vector n, use t = vec0 as one vector in the plane and, b, the cross product of the normal and vec0 as the other. For an angle 0 &le; &theta; &le; 2&pi;, &nbsp;&nbsp; f = tcos(&theta;) + bsin(&theta;) will give a vector in the facet plane. For an angle 0 &le; &phi; &le; &pi;, &nbsp;&nbsp; fcos(&phi;) + nsin(&phi;) will give a vector whose direction is towards the inside of the mesh. 

```javascript
mesh.updateFacetData(); // needed to use getFacetNormal

norm = mesh.getFacetNormal(index).normalize().scale(-1);	
tang = vec0.clone().normalize();
biNorm = BABYLON.Vector3.Cross(norm, tang);
angle = BABYLON.Scalar.RandomRange(0, 2 * Math.PI);
facetPlaneVec = tang.scale(Math.cos(angle)).add(biNorm.scale(Math.sin(angle)));
angle = BABYLON.Scalar.RandomRange(0.1, Math.PI);
direction = facetPlaneVec.scale(Math.cos(angle)).add(norm.scale(Math.sin(angle)));
```

4. Construct a ray using the facet point, direction and a distance equal to the diameter of the mesh's bounding sphere to ensure it is long enough to hit another facet of the mesh and find the hit point.

```javascript
var boundInfo = mesh.getBoundingInfo();
var diameter = 2 * boundInfo.boundingSphere.radius;

var ray = new BABYLON.Ray(facetPoint, direction, diameter);
var hitPoint = ray.intersectsMesh(mesh).pickedPoint;
```

5. Take some random fraction, 0 *le; r &le; 1, of the distance between the hit point and facet point and use this to determine a position of a point along this line using facetPoint + r(hitPoint - facetPoint) to determine a point within the mesh.

```javascript
var ray = new BABYLON.Ray(facetPoint, direction, diameter);
var pickInfo = ray.intersectsMesh(this);	
	if (pickInfo.hit) {			
		var distance = pickInfo.pickedPoint.subtract(facetPoint).length();
		var gap = BABYLON.Scalar.RandomRange(0, 1) * distance;
		var point = facetPoint.add(direction.scale(gap));
	}
	else { // just in the rare case the facet point randomly chosen is on the adjoining axis of two concave meeting facets
			point.set(0, 0, 0);
	}
```

## The Whole function

Set how many inside points to generate and store and return them in an array.

```javascript
BABYLON.Mesh.prototype.createInnerPoints = function(pointsNb) {
	var boundInfo = this.getBoundingInfo();
	var diameter = 2 * boundInfo.boundingSphere.radius;
	this.updateFacetData();

	var positions = this.getVerticesData(BABYLON.VertexBuffer.PositionKind);
	var indices = this.getIndices();
	
	var point = BABYLON.Vector3.Zero();
	var points = [];
	var directions = [];
	
	var randX = 0;
	var randY = 0;
	var randZ = 0
	
	var index = 0;
	var id0 = 0;
	var id1 = 0; 
	var id2 = 0;
	var v0X = 0;
	var v0Y = 0;
	var v0Z = 0;
	var v1X = 0;
	var v1Y = 0
	var v1Z = 0;
	var v2X = 0;
	var v2Y = 0;
	var v2Z = 0;
	var vertex0 = BABYLON.Vector3.Zero();
	var vertex1 = BABYLON.Vector3.Zero();
	var vertex2 = BABYLON.Vector3.Zero();
	var vec0 = BABYLON.Vector3.Zero();
	var vec1 = BABYLON.Vector3.Zero();
		
	var lamda = 0;	
	var mu = 0;
	var norm = BABYLON.Vector3.Zero();
	var tang = BABYLON.Vector3.Zero();
	var biNorm = BABYLON.Vector3.Zero();
	var angle = 0;
	var facetPlaneVec = BABYLON.Vector3.Zero();

	var gap = 0;
	var distance = 0;
	var ray = new BABYLON.Ray(BABYLON.Vector3.Zero(), BABYLON.AxisX);
	var pickInfo;
	var facetPoint = BABYLON.Vector3.Zero();
	var direction = BABYLON.Vector3.Zero();
	var particleDirection = BABYLON.Vector3.Zero();
	var particleDistance = 0;
	var testPoint = BABYLON.Vector3.Zero();

	for(var p = 0; p <pointsNb; p++) {			
		index = Math.floor(BABYLON.Scalar.RandomRange(0, indices.length / 3));		
		id0 = indices[3 * index];
		id1 = indices[3 * index + 1]; 
		id2 = indices[3 * index + 2];
		v0X = positions[3 * id0];
		v0Y = positions[3 * id0 + 1];
		v0Z = positions[3 * id0 + 2];
		v1X = positions[3 * id1];
		v1Y = positions[3 * id1 + 1];
		v1Z = positions[3 * id1 + 2];
		v2X = positions[3 * id2];
		v2Y = positions[3 * id2 + 1];
		v2Z = positions[3 * id2 + 2];
		vertex0.set(v0X, v0Y, v0Z);
		vertex1.set(v1X, v1Y, v1Z);
		vertex2.set(v2X, v2Y, v2Z);
		vertex1.subtractToRef(vertex0, vec0);
		vertex2.subtractToRef(vertex1, vec1);
		
		norm = this.getFacetNormal(index).normalize().scale(-1);	
		tang = vec0.clone().normalize();
		biNorm = BABYLON.Vector3.Cross(norm, tang);
		angle = BABYLON.Scalar.RandomRange(0, 2 * Math.PI);
		facetPlaneVec = tang.scale(Math.cos(angle)).add(biNorm.scale(Math.sin(angle)));
		angle = BABYLON.Scalar.RandomRange(0.1, Math.PI);
		direction = facetPlaneVec.scale(Math.cos(angle)).add(norm.scale(Math.sin(angle)));
		
		//form a point inside the facet v0, v1, v2;
		lamda = BABYLON.Scalar.RandomRange(0, 1);	
		mu = BABYLON.Scalar.RandomRange(0, 1);
		facetPoint = vertex0.add(vec0.scale(lamda)).add(vec1.scale(lamda * mu));

		gap = 0;
		distance = 0;
		pickInfo;	
		ray.origin = facetPoint;
		ray.direction = direction;
		ray.length = diameter;	
		pickInfo = ray.intersectsMesh(this);	
		if (pickInfo.hit) {			
			distance = pickInfo.pickedPoint.subtract(facetPoint).length();
			gap = BABYLON.Scalar.RandomRange(0, 1) * distance;
			point = facetPoint.add(direction.scale(gap));
		}
		else {
			point.set(0, 0, 0);
		}
		points.push(point);	
	}
	
	return points;
}
```

<Playground id="#2K3T61#8" title="Points Inside a Twelve Pointed Star" description="Points Inside a Twelve Pointed Star"/>

## Examples of Use 

<Playground id="#2K3T61#2" title="Using SPS" description="Using SPS"/>
<Playground id="#2K3T61#7" title="Using Particles" description="Using Particles"/>

## How To Check When Point is Inside a Mesh

This mesh method takes a Vector3 point and checks if it inside the mesh.

## Design Outline

1. Check if point inside or outside of bounding box, when inside continue with following checks;
2. Cast a ray from the point in the positive and negative x directions;
3. When there is a hit, move forward from hit point a very small amount along ray direction and recast ray from new point;
4. Count hits, when zero or an odd number of hits then point is inside mesh and for a even number of hits > 0 non zero then point is outside of mesh. 

## Design Method

1. Check bounding box;

```javascript
var boundInfo = this.getBoundingInfo();
var max = boundInfo.maximum;
var min = boundInfo.minimum;
if(point.x < min.x || point.x > max.x) {
	return false;
}
if(point.y < min.y || point.y > max.y) {
	return false;
}
if(point.z < min.z || point.z > max.z) {
	return false;
}
```

2. Use the diameter of the mesh's bounding sphere as the distance to cast the ray

```javascript
var diameter = 2 * boundInfo.boundingSphere.radius;
ray = new BABYLON.Ray(point, direction, diameter);
```

3. Set hit count to zero, while hits occurring increment hit count

```javascript
var hitCount = 0;
var pickInfo = ray.intersectsMesh(this);
while (pickInfo.hit) {	
	hitCount++;
	pickInfo.pickedPoint.addToRef(direction.scale(0.00000001), point); //move point a small amout in ray direction
	ray.origin = point;
	pickInfo = ray.intersectsMesh(this);
}
```

4. Count hits.

```javascript
if((hitCount % 2) === 1) {
	var pointFound = true;
}
else if ((hitCount % 2) === 0 && hitCount > 0) {
	var pointFound = true;
}

return pointFound;
```

## The Whole Function

Returns true if point is inside mesh, false otherwise.

```javascript
BABYLON.Mesh.prototype.pointIsInside = function (point) { 
	var boundInfo = this.getBoundingInfo();
	var max = boundInfo.maximum;
	var min = boundInfo.minimum;
	var diameter = 2 * boundInfo.boundingSphere.radius;
	if(point.x < min.x || point.x > max.x) {
		return false;
	}
	if(point.y < min.y || point.y > max.y) {
		return false;
	}
	if(point.z < min.z || point.z > max.z) {
		return false;
	}

	var pointFound = false;
	var d = 0;
	var hitCount = 0;
	var gap = 0;
	var distance = 0;
	var ray = new BABYLON.Ray(BABYLON.Vector3.Zero(), BABYLON.Axis.X, diameter);;
	var pickInfo;
	var direction = point.clone();
 var refPoint = point.clone();

	
	hitCount = 0;
	ray.origin = refPoint;
 ray.direction = direction;
 ray.distance = diameter;		
	pickInfo = ray.intersectsMesh(this);
	while (pickInfo.hit) {	
		hitCount++;
		pickInfo.pickedPoint.addToRef(direction.scale(0.00000001), refPoint);
		ray.origin = refPoint;
		pickInfo = ray.intersectsMesh(this);
	}	
	if((hitCount % 2) === 1) {
		pointFound = true;
	}
	
	return pointFound;
};
```

## Playground Example

Generate random points in a volume around a twelve pointed star mesh. Place a sphere at each point and turn it red when inside the star.

<Playground id="#XJEG9A#4" title="Twelve Pointed Star" description="Twelve Pointed Star"/>

## Force Shared Vertices

This function will remove some indices and vertices from a mesh. It removes facets where two of its vertices 
share the same position and forces vertices to share normals. So it will, therefore, also change a flat shaded mesh to a smooth (for the 
want of a better word) shaded mesh. 

Sometimes the additional facets and vertices are necessary, for example to prevent seams when using textures. So use carefully. 

More information on the need for extra facets, which turn out to be lines, can be found in [Materials and Facets](/features/divingDeeper/materials/using/texturePerBoxFace).

**NOTE** From Babylon.js version 4.0 onwards this utility now exists as a standard method on a mesh.

```javascript
mesh.forceSharedVertices();
```
## Playground

Using the Inspector in the Playground below with the minimise vertices function applied you will see that there are 366 vertices. However you can also see how the texture has been split and it does not seam correctly. This seaming would also happen if you used an image of the earth for example.

If you comment out line 12 and so no longer apply the force shared vertices function you can use the Inspector to check that there are 435 vertices. In this case though the image is applied correctly.

<Playground id="#5ITGBA#2" title="Force Shared Vertices 1" description="Force shared vertices example."/>

## Prior to Version 4.0

Use the function below. Any examples found in the playground then used the term 'minimizeVertices' rather than 'forceSharedVertices'.

## The Function

```javascript
BABYLON.Mesh.prototype.minimizeVertices = function() {

		var _decPlaces = Math.pow(10, 8);

 var _pdata = this.getVerticesData(BABYLON.VertexBuffer.PositionKind);
 var _ndata = this.getVerticesData(BABYLON.VertexBuffer.NormalKind);
 var _idata = this.getIndices(); 

 var _newPdata = []; //new positions array
 var _newIdata =[]; //new indices array

 var _mapPtr =0; // new index;
 var _uniquePositions = {}; // unique vertex positions
 for(var _i=0; _i<_idata.length; _i+=3) {
 var _facet = [_idata[_i], _idata[_i + 1], _idata[_i+2]]; //facet vertex indices
 var _pstring = []; //lists facet vertex positions (x,y,z) as string "xyz""
 for(var _j = 0; _j<3; _j++) { //
 _pstring[_j] = "";
 for(var _k = 0; _k<3; _k++) {
 //small values make 0
 if (Math.abs(_pdata[3*_facet[_j] + _k]) < 0.0001) {
 _pdata[3*_facet[_j] + _k] = 0;
 }
 _pstring[_j] += Math.round(_pdata[3*_facet[_j] + _k] * _decPlaces)/_decPlaces + "|";
 }
 }
 //check facet vertices to see that none are repeated
 // do not process any facet that has a repeated vertex, ie is a line
 if(!(_pstring[0] == _pstring[1] || _pstring[0] == _pstring[2] || _pstring[1] == _pstring[2])) { 
 //for each facet position check if already listed in uniquePositions
 // if not listed add to uniquePositions and set index pointer
 // if listed use its index in uniquePositions and new index pointer
 for(var _j = 0; _j<3; _j++) { 
 var _ptr = _uniquePositions[_pstring[_j]];
 if(_ptr === undefined) {
 _uniquePositions[_pstring[_j]] = _mapPtr;
 _ptr = _mapPtr++;
 //not listed so add individual x, y, z coordinates to new positions array newPdata
 //and add matching normal data to new normals array newNdata
 for(var _k = 0; _k<3; _k++) {
 _newPdata.push(_pdata[3*_facet[_j] + _k]);
 }
 }
 // add new index pointer to new indices array newIdata
 _newIdata.push(_ptr);
 }
 }
 }

 _newNdata =[]; //new normal data

 BABYLON.VertexData.ComputeNormals(_newPdata, _newIdata, _newNdata);

 //create new vertex data object and update
 var _vertexData = new BABYLON.VertexData();
 _vertexData.positions = _newPdata;
 _vertexData.indices = _newIdata;
 _vertexData.normals = _newNdata;

 _vertexData.applyToMesh(this);

 }	
```

## Playground

<Playground id="#1JBMJ3#18" title="Minimizing Vertices" description="Simple example of minimizing vertices."/>

## Extrude Shape with Mitred Corners

Neither [CreateTube](/features/divingDeeper/mesh/creation/param#tube) nor [ExtrudeShape](/features/divingDeeper/mesh/creation/param#extruded-shapes) were designed to handle sharp corners but to perform well over smooth curves. This can be seen by the tube and extruded shapes narrowing at the corner in the following

<Playground id="#PDRDFA" title="Bend In Tube" description=""/>
<Playground id="#PDRDFA#1" title="Bend In Extruded Tube" description=""/>
<Playground id="#PDRDFA#2" title="Bend in Extruded Shape" description=""/>

Whereas they are very good for smooth curves giving a bend as you would get in a physically bent tube

<Playground id="#PDRDFA#6" title="Slow Bend In Tube" description=""/>
<Playground id="#PDRDFA#2" title="Slow Bend In Extruded Shape" description=""/>

The function `mitredExtrude` allows an extrusion path with sharp corners such as you would get by cutting and forming a mitre join.

<Playground id="#PDRDFA#4" title="Right Angle in Extruded Tube With Mitre" description=""/>
<Playground id="#PDRDFA#5" title="Right Angle in Extruded Shape" description=""/>

## Using Mitre Extrude

The function has the form

```javascript
var extrude = mitredExtrude("name", options, scene);
```

| option | value | default value |
| ------ | ------------------------------------------------------------------------------------------------ | ------------- |
| path | _(Vector3[])_ array of Vector3 points forming the extrusion path | **REQUIRED** |
| shape | _(Vector3[])_ array of Vector3 points (x, y, 0) forming the shape to be extruded in the XY plane | **REQUIRED** |
| close | _(boolean)_ true if the first and last points are to be joined to form a closed extrusion | false |

## Playground Examples

To form a mitre the bend must take place along a line that is in the plane of one of the extruded faces (ie one formed by the edges of the shape to be extruded) and that line must be perpendicular to the edges of that face. For a closed extrusion to have a proper mitre when joining the first and last point the path for the extrusion must have a series of turns that allows the bend line to meet this requirement. When the requirement is not met the final join will be twisted.

<Playground id="#376T60#2" title="Open" description=""/>
<Playground id="#376T60#3" title="Closed With Twist" description=""/>
<Playground id="#376T60#4" title="Closed Meeting Requirements" description="\"/>

## The Code

```javascript
var mitredExtrude = function (name, options, scene) {
 var shape = options.shape;
 var path = options.path;
 var closed = options.close || false;

 var nbPoints = path.length;
 var line = BABYLON.Vector3.Zero();
 var nextLine = BABYLON.Vector3.Zero();
 var axisX = BABYLON.Vector3.Zero();
 var axisY = BABYLON.Vector3.Zero();
 var axisZ = BABYLON.Vector3.Zero();
 var nextAxisX = BABYLON.Vector3.Zero();
 var nextAxisY = BABYLON.Vector3.Zero();
 var nextAxisZ = BABYLON.Vector3.Zero();
 var startPoint = BABYLON.Vector3.Zero();
 var nextStartPoint = BABYLON.Vector3.Zero();
 var bisector = BABYLON.Vector3.Zero();
 var point = BABYLON.Vector3.Zero();
 var prjctZ = 0;
 var distance = 0;
 var ray;

 var allPaths = [];

 for (var s = 0; s < shape.length; s++) {
 path[1].subtractToRef(path[0], line);
 axisZ = line.clone().normalize();
 axisX = BABYLON.Vector3.Cross(scene.activeCamera.position, axisZ).normalize();
 axisY = BABYLON.Vector3.Cross(axisZ, axisX);
 startPoint = path[0].add(axisX.scale(shape[s].x)).add(axisY.scale(shape[s].y));
 var ribbonPath = [startPoint.clone()];
 for (var p = 0; p < nbPoints - 2; p++) {
 path[p + 2].subtractToRef(path[p + 1], nextLine);
 nextAxisZ = nextLine.clone().normalize();
 nextAxisX = BABYLON.Vector3.Cross(scene.activeCamera.position, nextAxisZ).normalize();
 nextAxisY = BABYLON.Vector3.Cross(nextAxisZ, nextAxisX);
 nextAxisZ.subtractToRef(axisZ, bisector);
 planeParallel = BABYLON.Vector3.Cross(nextAxisZ, axisZ);
 planeNormal = BABYLON.Vector3.Cross(planeParallel, bisector);
 plane = BABYLON.Plane.FromPositionAndNormal(path[p + 1], planeNormal);
 ray = new BABYLON.Ray(startPoint, axisZ);
 distance = ray.intersectsPlane(plane);
 startPoint.addToRef(axisZ.scale(distance), nextStartPoint);
 ribbonPath.push(nextStartPoint.clone());

 axisX = nextAxisX.clone();
 axisY = nextAxisY.clone();
 axisZ = nextAxisZ.clone();
 startPoint = nextStartPoint.clone();
 }
 // Last Point
 if (closed) {
 path[0].subtractToRef(path[nbPoints - 1], nextLine);
 nextAxisZ = nextLine.clone().normalize();
 nextAxisX = BABYLON.Vector3.Cross(scene.activeCamera.position, nextAxisZ).normalize();
 nextAxisY = BABYLON.Vector3.Cross(nextAxisZ, nextAxisX);
 nextAxisZ.subtractToRef(axisZ, bisector);
 planeParallel = BABYLON.Vector3.Cross(nextAxisZ, axisZ);
 planeNormal = BABYLON.Vector3.Cross(planeParallel, bisector);
 plane = BABYLON.Plane.FromPositionAndNormal(path[nbPoints - 1], planeNormal);
 ray = new BABYLON.Ray(startPoint, axisZ);
 distance = ray.intersectsPlane(plane);
 startPoint.addToRef(axisZ.scale(distance), nextStartPoint);
 ribbonPath.push(nextStartPoint.clone());

 axisX = nextAxisX.clone();
 axisY = nextAxisY.clone();
 axisZ = nextAxisZ.clone();
 startPoint = nextStartPoint.clone();

 path[1].subtractToRef(path[0], nextLine);
 nextAxisZ = nextLine.clone().normalize();
 nextAxisX = BABYLON.Vector3.Cross(scene.activeCamera.position, nextAxisZ).normalize();
 nextAxisY = BABYLON.Vector3.Cross(nextAxisZ, nextAxisX);
 nextAxisZ.subtractToRef(axisZ, bisector);
 planeParallel = BABYLON.Vector3.Cross(nextAxisZ, axisZ);
 planeNormal = BABYLON.Vector3.Cross(planeParallel, bisector);
 plane = BABYLON.Plane.FromPositionAndNormal(path[0], planeNormal);
 ray = new BABYLON.Ray(startPoint, axisZ);
 distance = ray.intersectsPlane(plane);
 startPoint.addToRef(axisZ.scale(distance), nextStartPoint);
 ribbonPath.shift();
 ribbonPath.unshift(nextStartPoint.clone());
 } else {
 planeNormal = axisZ;
 plane = BABYLON.Plane.FromPositionAndNormal(path[nbPoints - 1], planeNormal);
 ray = new BABYLON.Ray(startPoint, axisZ);
 distance = ray.intersectsPlane(plane);
 startPoint.addToRef(axisZ.scale(distance), nextStartPoint);
 ribbonPath.push(nextStartPoint.clone());
 }
 allPaths.push(ribbonPath);
 }
 var ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", { pathArray: allPaths, sideOrientation: BABYLON.Mesh.DOUBLESIDE, closeArray: true, closePath: closed }, scene);

 return ribbon;
};
```

## Show Mesh Vertex Normals
This snippet allows you to add lines showing the normals for each vertex of a mesh. The colour and size of the lines can be set.

```javascript
function showNormals(mesh, size, color, sc) {
 var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
 var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
 color = color || BABYLON.Color3.White();
 sc = sc || scene;
 size = size || 1;

 var lines = [];
 for (var i = 0; i < normals.length; i += 3) {
 var v1 = BABYLON.Vector3.FromArray(positions, i);
 var v2 = v1.add(BABYLON.Vector3.FromArray(normals, i).scaleInPlace(size));
 lines.push([v1.add(mesh.position), v2.add(mesh.position)]);
 }
 var normalLines = BABYLON.MeshBuilder.CreateLineSystem("normalLines", {lines: lines}, sc);
 normalLines.color = color;
 return normalLines;
}
```
## Playground

<Playground id="#1ENDNT" title="Displaying Vertex Normals" description=""/>

## Open an URL with Action Manager

Since any Javascript can be called when executing code action with the action manager it is straight forward to open a new web page using 

```javascript
window.open(URL)
```
to open a new window or

```javascript
window.location = URL
```
to replace the contants of the current window.

<Playground id="#INB624#1" title="Open URL On Single Mesh Click" description=""/>
<Playground id="#INB624#2" title="Open URL On Mesh Click Of Multiple Meshes" description=""/>

## Displays a Path3D Curve.

This snippet displays a path3D curve and for on each point its tangent, normal and binormal in red, green and blue respectively. 
The size parameter, default 0.5, sets the length for the tangents, normals and binormals.

```javascript
function showPath3D(path3d, size) {
 size = size || 0.5;
 var curve = path3d.getCurve();
 var tgts = path3d.getTangents();
 var norms = path3d.getNormals();
 var binorms = path3d.getBinormals();
 var vcTgt, vcNorm, vcBinorm;
 var line = BABYLON.Mesh.CreateLines("curve", curve, scene);
 for (var i = 0; i < curve.length; i++) {
 vcTgt = BABYLON.Mesh.CreateLines("tgt"+i, [curve[i], curve[i].add(tgts[i].scale(size))], scene);
 vcNorm = BABYLON.Mesh.CreateLines("norm"+i, [curve[i], curve[i].add(norms[i].scale(size))], scene);
 vcBinorm = BABYLON.Mesh.CreateLines("binorm"+i, [curve[i], curve[i].add(binorms[i].scale(size))], scene);
 vcTgt.color = BABYLON.Color3.Red();
 vcNorm.color = BABYLON.Color3.Green();
 vcBinorm.color = BABYLON.Color3.Blue();
 }
};
```
## Playground

<Playground id="#2IX4FB" title="Display Path3D Info" description=""/>

## Rotating and Enlarging Relative to a Centre.
The following two code snippets give the opportunity to place a centre of rotation or enlargement, or pivot, at any time and have a mesh rotate or enlarge relative to that centre.


## Rotate
 
```javascript
BABYLON.Mesh.prototype.rotateAroundPivot = function(pivotPoint, axis, angle) {
	if(!this._rotationQuaternion) {
		this._rq = BABYLON.Quaternion.RotationYawPitchRoll(this.rotation.y, this.rotation.x, this.rotation.z);
	}		
	var _p = new BABYLON.Quaternion(this.position.x - pivotPoint.x, this.position.y - pivotPoint.y, this.position.z - pivotPoint.z, 0);
	axis.normalize();
	var _q = BABYLON.Quaternion.RotationAxis(axis,angle); //form quaternion rotation		
	var _qinv = BABYLON.Quaternion.Inverse(_q);	
	var _pdash = _q.multiply(_p).multiply(_qinv);
	this.position = new BABYLON.Vector3(pivotPoint.x + _pdash.x, pivotPoint.y + _pdash.y, pivotPoint.z + _pdash.z);
	this.rotationQuaternion = this._rq.multiply(_q);
	this._rq = this.rotationQuaternion;
}

mesh.rotateAroundPivot(new BABYLON.Vector3(1, 2, -1), new BABYLON.Axis.Y, Math.PI/4);
```

The parameters are the position of the pivot (centre of rotation) as a Vector3, axis of rotation as a Vector3 and an angle of rotation a number in radians.

Succesive rotations are accumulative.

## Enlargement

```javascript
BABYLON.Mesh.prototype.scaleFromPivot = function(pivotPoint, sx, sy, sz) {
	var _sx = sx / this.scaling.x;
	var _sy = sy / this.scaling.y;
	var _sz = sz / this.scaling.z;
	this.scaling = new BABYLON.Vector3(sx, sy, sz);	
	this.position = new BABYLON.Vector3(pivotPoint.x + _sx * (this.position.x - pivotPoint.x), pivotPoint.y + _sy * (this.position.y - pivotPoint.y), pivotPoint.z + _sz * (this.position.z - pivotPoint.z));
}

mesh.scaleFromPivotnew BABYLON.Vector3(1, 2, -1), 2, 6, 0.5);
```

The parameters are the position of the pivot (centre of enlargemen) as a Vector3, scaling in the x, y and z directions as numbers.

## Playground

<Playground id="#1MKHR9#2" title="Rotating and Enlarging Relative to a Centre" description=""/>

## Draw an Arc Between Two Vectors

Given an origin O and two vectors OA and OB this snippet draws an arc between the two vectors with a given radius. The arc can be drawn in three types 0 (default) a solid line, 1 a dashed line, 2 filled between arc and vectors.

```javascript
function showAngleSector(origin, vector1, vector2, radius, sectorType) {
 radius = radius || 1;
 sectorType = sectorType || 0;
 var cross = BABYLON.Vector3.Cross(vector1, vector2);
 var dot = BABYLON.Vector3.Dot(vector1, vector2);
 var angle = Math.acos(dot / (vector1.length() * vector2.length()));
 var points = [];
 var minNb = 4;
 var factor = 2;
 var nbPoints = Math.floor(radius * angle * factor);
 nbPoints = (nbPoints < minNb) ? minNb : nbPoints;

 var firstPoint = ((BABYLON.Vector3.Normalize(vector1)).scale(radius));
 var lastPoint = ((BABYLON.Vector3.Normalize(vector2)).scale(radius));
 var matrix;
 var ang = angle / nbPoints;
 var rotated;
 for (var i = 0; i < nbPoints; i++) {
 matrix = BABYLON.Matrix.RotationAxis(cross, ang * i);
 rotated = BABYLON.Vector3.TransformCoordinates(firstPoint, matrix);
 points.push(rotated.add(origin));
 }
 points.push(lastPoint.add(origin));
 
 var sector;
 switch (sectorType) {
 case 0:
 sector = BABYLON.Mesh.CreateLines("sector", points, scene);
 break;
 case 1:
 sector = BABYLON.Mesh.CreateDashedLines("sector", points, 3, 1, nbPoints , scene);
 break;
 case 2:
 var pointO = [];
 for (var j = 0; j < points.length; j++) {
 pointO.push(origin);
 }
 sector = BABYLON.Mesh.CreateRibbon("sector", [points, pointO], null, null, 0, scene);
 break;
 default:
 sector = BABYLON.Mesh.CreateLines("sector", points, scene);
 break;
 }
 return sector;
}
```
## Playground

<Playground id="#FUK3S#8" title="Draw an Arc Between Two Vectors" description=""/>

## Spherical Panning for 360 Camera Rotation

This snippet shows a way to add spherical panning behavior to a scene. The behavior is similar to the interactions from viewing 3D images on Facebook, Google Maps, etc. The function contains several constants, such as INERTIA_DECAY_FACTOR, which can be tuned to customize the default feel of the interaction.

Note that this function uses quaternion math which is not available in Babylon.js v3.3.0 or earlier.

```javascript
var addSphericalPanningCameraToScene = function (scene, canvas) {
 // Set cursor to grab.
 scene.defaultCursor = "grab";

 // Add the actual camera to the scene. Since we are going to be controlling it manually,
 // we don't attach any inputs directly to it.
 // NOTE: We position the camera at origin in this case, but it doesn't have to be there.
 // Spherical panning should work just fine regardless of the camera's position.
 var camera = new BABYLON.FreeCamera("camera", BABYLON.Vector3.Zero(), scene);

 // Ensure the camera's rotation quaternion is initialized correctly.
 camera.rotationQuaternion = BABYLON.Quaternion.Identity();

 // The spherical panning math has singularities at the poles (up and down) that cause
 // the orientation to seem to "flip." This is undesirable, so this method helps reject
 // inputs that would cause this behavior.
 var isNewForwardVectorTooCloseToSingularity = v => {
 const TOO_CLOSE_TO_UP_THRESHOLD = 0.99;
 return Math.abs(BABYLON.Vector3.Dot(v, BABYLON.Vector3.Up())) > TOO_CLOSE_TO_UP_THRESHOLD;
 }

 // Local state variables which will be used in the spherical pan method; declared outside 
 // because they must persist from frame to frame.
 var ptrX = 0;
 var ptrY = 0;
 var inertiaX = 0;
 var inertiaY = 0;

 // Variables internal to spherical pan, declared here just to avoid reallocating them when
 // running.
 var priorDir = new BABYLON.Vector3();
 var currentDir = new BABYLON.Vector3();
 var rotationAxis = new BABYLON.Vector3();
 var rotationAngle = 0;
 var rotation = new BABYLON.Quaternion();
 var newForward = new BABYLON.Vector3();
 var newRight = new BABYLON.Vector3();
 var newUp = new BABYLON.Vector3();
 var matrix = new BABYLON.Matrix.Identity();

 // The core pan method.
 // Intuition: there exists a rotation of the camera that brings priorDir to currentDir.
 // By concatenating this rotation with the existing rotation of the camera, we can move
 // the camera so that the cursor appears to remain over the same point in the scene, 
 // creating the feeling of smooth and responsive 1-to-1 motion.
 var pan = (currX, currY) => {
 // Helper method to convert a screen point (in pixels) to a direction in view space.
 var getPointerViewSpaceDirectionToRef = (x, y, ref) => {
 BABYLON.Vector3.UnprojectToRef(
 new BABYLON.Vector3(x, y, 0), 
 canvas.width, 
 canvas.height,
 BABYLON.Matrix.Identity(),
 BABYLON.Matrix.Identity(), 
 camera.getProjectionMatrix(),
 ref);
 ref.normalize();
 }

 // Helper method that computes the new forward direction. This was split into its own
 // function because, near the singularity, we may to do this twice in a single frame
 // in order to reject inputs that would bring the forward vector too close to vertical.
 var computeNewForward = (x, y) => {
 getPointerViewSpaceDirectionToRef(ptrX, ptrY, priorDir);
 getPointerViewSpaceDirectionToRef(x, y, currentDir);

 BABYLON.Vector3.CrossToRef(priorDir, currentDir, rotationAxis);

 // If the magnitude of the cross-product is zero, then the cursor has not moved
 // since the prior frame and there is no need to do anything.
 if (rotationAxis.lengthSquared() > 0) {
 rotationAngle = BABYLON.Vector3.GetAngleBetweenVectors(priorDir, currentDir, rotationAxis);
 BABYLON.Quaternion.RotationAxisToRef(rotationAxis, -rotationAngle, rotation);

 // Order matters here. We create the new forward vector by applying the new rotation 
 // first, then apply the camera's existing rotation. This is because, since the new
 // rotation is computed in view space, it only makes sense for a camera that is
 // facing forward.
 newForward.set(0, 0, 1);
 newForward.rotateByQuaternionToRef(rotation, newForward);
 newForward.rotateByQuaternionToRef(camera.rotationQuaternion, newForward);

 return !isNewForwardVectorTooCloseToSingularity(newForward);
 }

 return false;
 }

 // Compute the new forward vector first using the actual input, both X and Y. If this results
 // in a forward vector that would be too close to the singularity, recompute using only the
 // new X input, repeating the Y input from the prior frame. If either of these computations
 // succeeds, construct the new rotation matrix using the result.
 if (computeNewForward(currX, currY) || computeNewForward(currX, ptrY)) {
 // We manually compute the new right and up vectors to ensure that the camera 
 // only has pitch and yaw, never roll. This dependency on the world-space
 // vertical axis is what causes the singularity described above.
 BABYLON.Vector3.CrossToRef(BABYLON.Vector3.Up(), newForward, newRight);
 BABYLON.Vector3.CrossToRef(newForward, newRight, newUp);

 // Create the new world-space rotation matrix from the computed forward, right, 
 // and up vectors.
 matrix.setRowFromFloats(0, newRight.x, newRight.y, newRight.z, 0);
 matrix.setRowFromFloats(1, newUp.x, newUp.y, newUp.z, 0);
 matrix.setRowFromFloats(2, newForward.x, newForward.y, newForward.z, 0);

 BABYLON.Quaternion.FromRotationMatrixToRef(matrix.getRotationMatrix(), camera.rotationQuaternion);
 }
 };

 // The main panning loop, to be run while the pointer is down.
 var sphericalPan = () => {
 pan(scene.pointerX, scene.pointerY);

 // Store the state variables for use in the next frame.
 inertiaX = scene.pointerX - ptrX;
 inertiaY = scene.pointerY - ptrY;
 ptrX = scene.pointerX;
 ptrY = scene.pointerY;
 }

 // The inertial panning loop, to be run after the pointer is released until inertia
 // runs out, or until the pointer goes down again, whichever happens first. Essentially
 // just pretends to provide a decreasing amount of input based on the last observed input,
 // removing itself once the input becomes negligible.
 const INERTIA_DECAY_FACTOR = 0.9;
 const INERTIA_NEGLIGIBLE_THRESHOLD = 0.5;
 var inertialPanObserver;
 var inertialPan = () => {
 if (Math.abs(inertiaX) > INERTIA_NEGLIGIBLE_THRESHOLD || Math.abs(inertiaY) > INERTIA_NEGLIGIBLE_THRESHOLD) {
 pan(ptrX + inertiaX, ptrY + inertiaY);

 inertiaX *= INERTIA_DECAY_FACTOR;
 inertiaY *= INERTIA_DECAY_FACTOR;
 }
 else {
 scene.onBeforeRenderObservable.remove(inertialPanObserver);
 }
 };

 // Enable/disable spherical panning depending on click state. Note that this is an 
 // extremely simplistic way to do this, so it gets a little janky on multi-touch.
 var sphericalPanObserver;
 var pointersDown = 0;
 scene.onPointerDown = () => {
 pointersDown += 1;
 if (pointersDown !== 1) {
 return;
 }

 // Disable inertial panning.
 scene.onBeforeRenderObservable.remove(inertialPanObserver);

 // Switch cursor to grabbing.
 scene.defaultCursor = "grabbing";

 // Store the current pointer position to clean out whatever values were left in
 // there from prior iterations.
 ptrX = scene.pointerX;
 ptrY = scene.pointerY;
 
 // Enable spherical panning.
 sphericalPanObserver = scene.onBeforeRenderObservable.add(sphericalPan);
 }
 scene.onPointerUp = () => {
 pointersDown -= 1;
 if (pointersDown !== 0) {
 return;
 }

 // Switch cursor to grab.
 scene.defaultCursor = "grab";

 // Disable spherical panning.
 scene.onBeforeRenderObservable.remove(sphericalPanObserver);

 // Enable inertial panning.
 inertialPanObserver = scene.onBeforeRenderObservable.add(inertialPan);
 }
};
```
## Playground

<Playground id="#21UPR3#30" title="Spherical Panning Camera" description=""/>

## How To Create Points on the Mesh Surface

This utility enables you to create and store Vector3 points each of which is randomly positioned uniformly on the surface of a mesh.

## Design Outline.

1. Take a random triangular facet belonging to the mesh;
2. Calculate the area of the triangle;
3. Calculate the number of random points to place on the facet using density * area;
4. Choose random points inside this triangle;


## Design Method.

For the mesh get the vertex positions and indices using

```javascript
var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
var indices = mesh.getIndices();
```

For each facet, F, in turn obtain the three facet vertex positions, vertex0, vertex1 and vertex2 using the positions array. From these construct vectors, vec0, vec1 and vec2, along each side of the triangle. Using the lengths of the sides calculate the area of the triangle. For a value 0 &le; &lambda; &le; 1,&nbsp; &lambda;vec0 and &lambda;vec1 will form two sides of a triangle similar to the facet. So when also given a value 0 &le; &mu; &le; 1,&nbsp; &lambda;vec0 and &lambda;&mu;vec1 will give a point inside the facet. The range of values for &lambda; and &mu; will determine all points within the facet. Hence random values for &lambda; and &mu; will give random points on the facet plane.

![Find point](/img/samples/manypoints.jpg)

```javascript
lamda = BABYLON.Scalar.RandomRange(0, 1);	
mu = BABYLON.Scalar.RandomRange(0, 1);
facetPoint = vertex0.add(vec0.scale(lambda)).add(vec1.scale(lambda * mu));
```

Repeat for density * area random points for each facet.

## The Whole function

Set the density for the points and generate the points and store and return them in an array.

```javascript
BABYLON.Mesh.prototype.createSurfacePoints = function(pointDensity) {
	var positions = this.getVerticesData(BABYLON.VertexBuffer.PositionKind);
	var indices = this.getIndices();
	
	var point = BABYLON.Vector3.Zero();
	var points = [];
	
	var randX = 0;
	var randY = 0;
	var randZ = 0
	
	var index = 0;
	var id0 = 0;
	var id1 = 0; 
	var id2 = 0;
	var v0X = 0;
	var v0Y = 0;
	var v0Z = 0;
	var v1X = 0;
	var v1Y = 0
	var v1Z = 0;
	var v2X = 0;
	var v2Y = 0;
	var v2Z = 0;
	var vertex0 = BABYLON.Vector3.Zero();
	var vertex1 = BABYLON.Vector3.Zero();
	var vertex2 = BABYLON.Vector3.Zero();
	var vec0 = BABYLON.Vector3.Zero();
	var vec1 = BABYLON.Vector3.Zero();
 var vec2 = BABYLON.Vector3.Zero();

 var a = 0; //length of side of triangle
 var b = 0; //length of side of triangle
 var c = 0; //length of side of triangle
 var p = 0; //perimeter of triangle
 var area = 0;
 var nbPoints = 0; //nbPoints per triangle
		
	var lamda = 0;	
	var mu = 0;

	for(var index = 0; index <indices.length / 3; index++) { 				
		id0 = indices[3 * index];
		id1 = indices[3 * index + 1]; 
		id2 = indices[3 * index + 2]; 
		v0X = positions[3 * id0];
		v0Y = positions[3 * id0 + 1];
		v0Z = positions[3 * id0 + 2];
		v1X = positions[3 * id1];
		v1Y = positions[3 * id1 + 1];
		v1Z = positions[3 * id1 + 2];
		v2X = positions[3 * id2];
		v2Y = positions[3 * id2 + 1];
		v2Z = positions[3 * id2 + 2];
		vertex0.set(v0X, v0Y, v0Z);
		vertex1.set(v1X, v1Y, v1Z);
		vertex2.set(v2X, v2Y, v2Z);
		vertex1.subtractToRef(vertex0, vec0);
		vertex2.subtractToRef(vertex1, vec1);
 vertex2.subtractToRef(vertex0, vec2);
 a = vec0.length();
 b = vec1.length();
 c = vec2.length();
 p = (a + b + c) / 2; 
 area = Math.sqrt(p * (p - a) * (p - b) * (p - c));
 nbPoints = Math.round(pointDensity * area);
 for (var i = 0; i < nbPoints; i++) {
 //form a point inside the facet v0, v1, v2;
 lamda = BABYLON.Scalar.RandomRange(0, 1);	
		 mu = BABYLON.Scalar.RandomRange(0, 1);
		 facetPoint = vertex0.add(vec0.scale(lamda)).add(vec1.scale(lamda * mu));
 points.push(facetPoint);
 }	
	}
	return points;
}
```

<Playground id="#NFSGWT#2" title="Drawing Points on a Mesh Surface" description=""/>

## Axes
It is often useful to be able to quickly display world and local axes to see position and rotation for example. For world axes use

```javascript
const axes = new BABYLON.AxesViewer(scene, length_of_axes)
```

To make any of the x, y and z axes local to a mesh (or other appropriate object) use

```javascript
axes.xAxis.parent = mesh;
axes.yAxis.parent = mesh;
axes.zAxis.parent = mesh;
```

<Playground id="#T8UQTA" title="AxesViewer" description="Display Axes"/>

You can customise the axes, which do not have to be orthogonal, using 

```javascript
axes.update(position, xAxis, yAxis, zAxis) //all parameters are Vector3s
```

<Playground id="#T8UQTA#1" title="Update AxesViewer" description="Display Custom Axes"/>

## Surface Area Of a Mesh

This functions will together find the surface area of a mesh.

```javascript
var surfaceArea = function(mesh) {
 if (!mesh) {
 return 0.0;
 }
 var ar = 0.0;
 
 var indices = mesh.getIndices();
 var nbFaces = indices.length / 3;
 
 for (var i = 0; i < nbFaces; i++) {
 ar = ar + facetArea(mesh, i);
 }
 return ar;
};

var facetArea = function(mesh, faceId) {
 if(!mesh) {
 return 0.0;
 }
 var indices = mesh.getIndices();
 if(faceId < 0 || faceId > nbFaces) {
 return 0.0;
 }
 var nbFaces = indices.length / 3;
 var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
 var v1x = 0.0;
 var v1y = 0.0;
 var v1z = 0.0;
 var v2x = 0.0;
 var v2y = 0.0;
 var v2z = 0.0;
 var crossx = 0.0;
 var crossy = 0.0;
 var crossz = 0.0;
 var ar = 0.0;
 var i1 = 0;
 var i2 = 0;
 var i3 = 0;

 i1 = indices[faceId * 3];
 i2 = indices[faceId * 3 + 1];
 i3 = indices[faceId * 3 + 2];
 v1x = positions[i1 * 3] - positions[i2 * 3];
 v1y = positions[i1 * 3 + 1] - positions[i2 * 3 + 1];
 v1z = positions[i1 * 3 + 2] - positions[i2 * 3 + 2];
 v2x = positions[i3 * 3] - positions[i2 * 3];
 v2y = positions[i3 * 3 + 1] - positions[i2 * 3 + 1];
 v2z = positions[i3 * 3 + 2] - positions[i2 * 3 + 2];
 crossx = v1y * v2z - v1z * v2y;
 crossy = v1z * v2x - v1x * v2z;
 crossz = v1x * v2y - v1y * v2x; 

 return Math.sqrt(crossx * crossx + crossy * crossy + crossz * crossz) * 0.5;
}
```
The function surfaceArea has been written so that you can use the function facetArea to find the area of an individual facet should you wish to.

Run the following playgrounds directly and view the results in the console.

<Playground id="#3VV5IV" title="Surface Area of a Box" description="Simple example of how to get the surface area of a box."/>
<Playground id="#3VV5IV#2" title="Surface Area of a Sphere" description="Simple example of how to get the surface area of a sphere."/>


**NOTE** For double sided meshes the surface area will be the sum of the exterior and interior areas.


# Utilities

These are JavaScript functions that can be added to your Babylon.js project if they are useful. Each is given a brief explanation and a Playground example of its use.

Generate letters in BABYLON meshes.

## Basic-Usage

```javascript
Writer = BABYLON.MeshWriter(scene, { scale: scale });
text1 = new Writer("ABC", {
 anchor: "center",
 "letter-height": 50,
 color: "#1C3870",
 position: {
 z: 20,
 },
});
```

PG: <Playground id="#PL752W#150" title="Mesh Writer Example 1" description=""/>

## Getting the code

Copy https://github.com/BabylonJS/features/extensions/blob/master/MeshWriter/meshwriter.min.js or https://github.com/BabylonJS/features/extensions/blob/master/MeshWriter/meshwriter.js and build it into your load sequence. 
Maintenance of Mesh Writer is the responsibility of the author.

## If you prefer npm

### npm i meshwriter

Import in your React/Angular component:

`import { MeshWriter } from "meshwriter";`

With **meshwriter** you can use MeshWriter directly like this:

```javascript
let Writer = MeshWriter(this.scene, { scale: 0.25, defaultFont: "Arial" });
let textMesh = new Writer("Hello World", {
 "font-family": "Arial",
 "letter-height": 30,
 "letter-thickness": 12,
 color: "#1C3870",
 anchor: "center",
 colors: {
 diffuse: "#F0F0F0",
 specular: "#000000",
 ambient: "#F0F0F0",
 emissive: "#ff00f0",
 },
 position: {
 x: 0,
 y: 10,
 z: 0,
 },
});
```

## Superconstructor - BABYLON.MeshWriter()

After MeshWriter is loaded, BABYLON.MeshWriter is defined. It is called with one or two parameters.

- **scene** &nbsp; required
- **preferences** &nbsp; optional &nbsp; The preferences object may specify up to three values

 FIELD DEFAULT
 default-font Helvetica
 scale 1
 letter-origin "letter-center"

The call to BABYLON.MeshWriter returns a constructor. Call it "**Writer**".

## Constructor - new Writer()

new Writer() is called with a string and an (optional) options parameter.&nbsp; The options object conforms to normalBabylon.js structures and terminology.

 FIELD DEFAULT
 font-family default-font
 anchor left
 letter-height 100
 letter-thickness 1
 color #808080 # hits emissive only
 alpha 1
 position
 x 0
 y 0
 z 0
 colors # if you need to control more than just emissive
 diffuse #F0F0F0
 specular #000000
 ambient #F0F0F0
 emissive color # from option field 'color' above

**new Writer()** builds a mesh with material that is inserted into the scene.&nbsp; This is a multi-step process with interim meshes and holes per letter.&nbsp; These meshes are sucked into an SPS and then disposed.&nbsp; At the end, one mesh, one material and one SPS have been added to the scene.

**new Writer()** also returns a **writer** instance with useful methods.&nbsp; See below.

## Instance

Each **writer** instance has methods to allow one to retrieve theBabylon.js objects or to get/set attributes of the SPS.

 getSPS
 getMesh
 getMaterial
 color # sets or gets color but no change to material
 alpha # sets or gets alpha but no change to material
 setColor # set emissive color and change color value
 setAlpha # change value and material
 overrideOpac # change material but not value
 resetOpac # sets material to current value
 dispose

## Usage Hints

If you wish to do extensive things with position, rotation or animation, retrieve the meshes and materials from the instance using the methods shown above.&nbsp; The output from **new Writer()** is an SPS with one particle for each character.

Example:
PG: <Playground id="#PL752W#151" title="Mesh Writer Example 2" description=""/>

```javascript
const SCALE = 0.25;
const TEXT_SIZE = 35;
const TEXT_THICKNESS = 10;

Writer = BABYLON.MeshWriter(scene, { scale: SCALE, defaultFont: "Arial" });
textMesh = new Writer("BABYLON JS", {
 "font-family": "Arial",
 anchor: "center",
 "letter-height": TEXT_SIZE,
 "letter-thickness": TEXT_THICKNESS,
 color: "#1C3870",
 colors: {
 diffuse: "#F0F0F0",
 specular: "#000000",
 ambient: "#F0F0F0",
 emissive: "#ff00f0",
 },
 position: {
 x: 0,
 y: 5,
 z: 70,
 },
});

//Text Writer create SPS with Particle for each letter
SPS = textMesh.getSPS();

//Update animation
SPS.updateParticle = (particle) => {
 particle.rotation.x -= 0.06;
};

scene.registerBeforeRender(() => {
 SPS.setParticles();
 //sps.mesh.rotation.y = k;
});
```

Colors:&nbsp; With most lighting, it is enough just to use the "color" field to specify the letter coloring.&nbsp; However, programmers may specify all four color types by putting a "colors" object in the options object.

Unless you have a specific need, do not specify a font.&nbsp; The default font, Helvetica, has the most extensive characters and the fewest faces; it will be the most efficient if you have a lot of text.&nbsp; Jura was added because the author likes it for numbers.

Utilities

In This Category

Mesh Surface Area

Helpful code snippet for finding the surface area of a mesh in Babylon.js.

Deconstruct A Mesh

Helpful code snippet for deconstructing a mesh in Babylon.js.

Making A Frame

Helpful code snippet for a frame in Babylon.js.

Increasing Facets

Helpful code snippet for increasing facets of a mesh in Babylon.js.

Create Points Inside A Mesh

Helpful code snippet for creating points inside of a mesh in Babylon.js.

Check When a Point is Inside a Mesh

Helpful code snippet for checking when a point is inside of a mesh in Babylon.js.

Draw a Line With a Set Width

Helpful code snippet for drawing a line of a set width in Babylon.js.

Forcing Shared Vertices

Helpful code snippet for forcing mesh to share vertices in Babylon.js.

Extrusion With Sharp Corners

Helpful code snippet for extruding with sharp corners in Babylon.js.

Display Vertex Normals

Helpful code snippet for displaying vertex normals in Babylon.js.

Open A URL On An Event

Helpful code snippet for opening a url on an event in Babylon.js.

Display Tangent, Normal, and Binormal of a Path3D

Helpful code snippet for displaying helpful information about a Path3D object in Babylon.js.

Rotate and Scale About a Point

Helpful code snippet for rotating and scaling about a point in Babylon.js.

Draw a Sector of a Circle

Helpful code snippet for drawing a sector of a circle in Babylon.js.

Spherical Panning Camera

Helpful code snippet for creating a spherical panning camera in Babylon.js.

Draw Points on a Mesh Surface

Helpful code snippet for drawing points on a mesh surface in Babylon.js.

Display Axes

Helpful feature for displaying world axes in Babylon.js.