
# 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 example 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(let 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(let 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(let p = 0; p < nbPoints; p++) {
		extrusionPaths = [];
		for(let 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)<sup>2</sup>.

**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(let _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(let _i = 0; _i<_meshIndices.length; _i+=3) {
        _vertexIndex[0] = _meshIndices[_i];
        _vertexIndex[1] = _meshIndices[_i + 1];
        _vertexIndex[2] = _meshIndices[_i + 2];        
        for(let _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(let _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(let _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(let _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(let _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(let _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(let _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(let _k = 1; _k<_gaps; _k++) {
            for(let _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."/>


## 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 (let 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 (let 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];
    }
}
```