## 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.Debug.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"/>

## What Is Smart Filter Editor?

The Smart Filter Editor (SFE) is a visual tool, much like the Node Material Editor, designed to make it easy to rapidly build and preview Smart Filters.

It is available at https://sfe.babylonjs.com, and you can run it locally if you clone the [BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js) repo, then:

- Run `npm install`
- Choose one of these approaches to build the Smart Filter Editor:
 - Select `Smart Filter Editor development (Edge)` or `Smart Filter Editor development (Chrome)` in Visual Studio Code's `Run and Debug` menu then hit F5
 - Run `npm run watch:assets:smart-filters` in a terminal, then `npm run watch:source:smart-filters` in another terminal, and finally `npm run serve -w @tools/smart-filters-editor` in a third terminal

It includes the blocks from the @babylonjs/smart-filters-blocks package (also in the [BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js)) repo, and can also use custom blocks you upload as JSON or GLSL files. These custom blocks are persisted in local storage, so you can load your own blocks once, then make use of them each time you return to SFE.

You can save the Smart Filters you create with SFE as local JSON files or as custom URLs you can share with others.

<Alert severity="Info">
Note that if you share a Smart Filter that uses custom assets or blocks, the person you are sharing it with will need to load those custom assets and blocks before loading your Smart Filter.
</Alert>

## Navigating SFE

![LAYOUT](/img/how_to/smart-filters/sfe-layout.webp)

1. The Block Library is on the left
 - Click "Add..." in "Custom Blocks" to add a custom block to the library (see _Custom Blocks_ below for details)
 - Drag a block you'd like to use onto the canvas in the middle to create an instance of it
2. The canvas is in the middle of the tool, and shows your current Smart Filter visually
 - Drag from one connection point to another to form connections
 - You can zoom in/out with the mouse scroll wheel
 - Click on the background of the canvas to see Smart Filter level properties and actions in the right pane
3. The right pane contains properties and actions relevant to the selected block (or the whole Smart Filter if nothing is selected), as well as a real-time preview of the Smart Filter output
 - When no block is selected, you can choose to Load a Smart Filter from a local JSON file, Save to a local JSON file, or save to a unique URL
 - If you save to a unique URL, the URL in your address bar will update to that new unique URL which you can use in the future to load this Smart Filter from any browser
4. The console at the bottom shows timestamped status messages, including helpful details if an error occurs (such as a required connection isn't made)

## Custom Blocks

By default, SFE populates the block library with the blocks found in the @babylonjs/smart-filters-blocks package. You can add your own custom blocks to SFE without building it yourself by clicking the "Add..." button in the "Custom Blocks" section.

Custom blocks are saved in local storage, so you don't have to add them each time you visit SFE, but you will need to add them again if you need to open a Smart Filter that uses them in another browser or another computer.

There are 3 types of custom blocks that SFE supports adding:

1. Annotated GLSL block definitions
1. JSON block definitions
1. JSON aggregate block definitions (saved Smart Filters themselves)

### Annotated GLSL block definitions

These are fragment shaders defined in GLSL files with certain annotations in them to be loaded as Smart Filter blocks.

For example:

```annotated-GLSL
// { "smartFilterBlockType": "AnnotatedGlslTintBlock" }

uniform sampler2D input;
// { "default": { "r": 1, "g": 0, "b": 0 } }
uniform vec3 tint;
// { "default": 0.25 }
uniform float amount;

vec4 mainImage(vec2 vUV) { // main
 vec4 color = texture2D(input, vUV);
 vec3 tinted = mix(color.rgb, tint, amount);
 return vec4(tinted, color.a);
}
```

See [Creating New Blocks](/features/featuresDeepDive/smartFilters/creatingNewBlocks) for details of the annotation format.

### JSON block definitions

Block definitions can be serialized `SerializedShaderBlockDefinition` objects, such as this example:

```JSON
{
 "format": "shaderBlockDefinition",
 "formatVersion": 1,
 "blockType": "JSONTintBlock",
 "namespace": "Babylon.Demo.Effects",
 "shaderProgram": {
 "fragment": {
 "uniform": "
 uniform sampler2D _input_;
 uniform vec3 _tint_;
 uniform float _amount_;",
 "mainFunctionName": "_mainImage_",
 "functions": [
 {
 "name": "_mainImage_",
 "code": "
 vec4 _mainImage_(vec2 vUV) {
 vec4 color = texture2D(_input_, vUV);
 vec3 tinted = mix(color.rgb, _tint_, _amount_);
 return vec4(tinted, color.a);
 }"
 }
 ]
 }
 },
 "inputConnectionPoints": [
 {
 "name": "input",
 "type": 2
 },
 {
 "name": "tint",
 "type": 3,
 "defaultValue": {
 "r": 1,
 "g": 0,
 "b": 0
 }
 },
 {
 "name": "amount",
 "type": 1,
 "defaultValue": 0.25
 }
 ],
 "disableOptimization": false
}
```

### JSON aggregate block definitions

Entire Smart Filters themselves can be imported into other Smart Filters as custom aggregate blocks! Try saving a Smart Filter to a local JSON file, then add it as a custom block to SFE.

Notes:

1. The input blocks in the imported Smart Filter will become input connection points on the custom aggregate block
1. The name and namespace of the Smart Filter (see the top right of SFE when no block is selected) becomes the block name and namespace of the custom aggregate block

## Special Input Blocks

SFE contains some special input blocks for testing your Smart Filters:

1. WebCamBlock
 - This is really a texture InputBlock which SFE automatically connects to your webcam as an easy way to preview live video in your Smart Filter
 - Note that when integrating a Smart Filter that uses a WebCamBlock into an application, that application will need to supply a texture for that InputBlock, which could come from a webcam or any other source
1. TimeBlock
 - This is really a float InputBlock which SFE automatically increments as a simple animation
 - Like with the WebCamBlock, when integrated into an application, this will behave as a regular InputBlock (this one of type float) whose value could be animated by the hosting application

## Assets

SFE contains some built-in assets for testing your Smart Filters, which you will see in the properties panel on the right when a texture InputBlock is selected.

You can use those built-in assets, or:

1. Upload your own image asset, which will be base64 encoded and saved in the Smart Filter for SFE to use later
1. Enter a URL to an image or video asset you'd like to use

## How To Create Points on the Mesh Surface

This utility enables you to create and store Vector3 points, each of which is positioned uniformly at random 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, 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 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 give a point inside the facet. The range of values for &lambda; and &mu; determines all points within the facet. Hence, random values for &lambda; and &mu; give random points on the facet plane.

![Find point](/img/samples/manypoints.webp)

```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 this for density * area random points on each facet.

## The Whole Function

Set the point density, then generate, store, and return the points 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(let 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 (let 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=""/>

Display Axes

Axes

Further reading