
## How To Use TrailMesh

`TrailMesh` creates a new `Mesh` that trails another.

```javascript
const newTrail = new BABYLON.TrailMesh(name, generator, scene, diameter, length, autoStart);

newTrail.start(); //Starts the trailing mesh.
newTrail.stop(); //Stops the trailing mesh.
```

| variable             | description                                             |
| -------------------- | ------------------------------------------------------- |
| name                 | The value used by scene.getMeshByName() to do a lookup. |
| generator            | The mesh to generate a trail.                           |
| scene                | The scene to add this mesh to.                          |
| diameter (optional)  | Diameter of trailing mesh. Default is 1.                |
| length (optional)    | Length of trailing mesh. Default is 60.                 |
| autoStart (optional) | Automatically start trailing mesh. Default true.        |

TrailMesh will be affected by all modifications to the generator mesh. Using `bakeCurrentTransformIntoVertices` on the generator after scaling (and before a position shift) will prevent the TrailMesh from scaling.

## Example Usage

```javascript
let alpha = Math.PI;
// Create a mesh for the trail to follow.
const cube = BABYLON.MeshBuilder.CreateBox("cube", {}, scene);
cube.scaling.y = 2;
cube.bakeCurrentTransformIntoVertices();
cube.position.x = Math.sin(alpha) * 10;
cube.position.z = Math.cos(alpha) * 10;
cube.computeWorldMatrix(true);

const trail = new BABYLON.TrailMesh("new", cube, scene, 0.5, 60, true);

const sourceMat = new BABYLON.StandardMaterial("sourceMat", scene);
sourceMat.emissiveColor = sourceMat.diffuseColor = new BABYLON.Color3.Red();
sourceMat.specularColor = new BABYLON.Color3.Black();

trail.material = sourceMat;

const observer = scene.onBeforeRenderObservable.add(animate);
function animate() {
  alpha += Math.PI / 120;
  cube.position.x = Math.sin(alpha) * 10;
  cube.position.z = Math.cos(alpha) * 10;
  cube.rotation.x = (Math.PI * alpha) / 2;
  cube.rotation.y = alpha;
}
```

## Examples

- <Playground id="#1F4UET#33" title="Glowing orbs with trail" description="Simple example of using trailmesh in your scene."/>



## How To Use MeshExploder

`MeshExploder` takes an array of meshes and increases/decreases distance to a center `Mesh`.

```javascript
const newExplosion = new BABYLON.MeshExploder(meshes, centerMesh);

newExplosion.explode(); //Explodes meshes away from center. Default 1.0.
```

| variable              | description                                                                               |
| --------------------- | ----------------------------------------------------------------------------------------- |
| meshes                | The array of meshes to explode/implode.                                                   |
| centerMesh (optional) | The mesh to be the center of explosion. Defaults to mesh closest to center of all meshes. |

`MeshExploder` explode function takes a number parameter to multiply the distance of explosion. Negative numbers implode. Zero resets meshes to original positions.

```javascript
newExplosion.explode(-2); //Implodes
newExplosion.explode(0); //Resets
```

## Example Usage

```javascript
const toExplodeArray = [];
const sphere1 = BABYLON.MeshBuilder.CreateSphere("sphere1", { segments: 12, diameter: 2 }, scene);
sphere1.position.y += 2;
toExplodeArray.push(sphere1);

for (let alpha = 0; alpha < Math.PI * 2; alpha += Math.PI / 10) {
  const sphere0 = BABYLON.MeshBuilder.CreateSphere("sphere0", { segments: 8, diameter: 0.5 }, scene);
  sphere0.position.y = 2;
  sphere0.position.z = Math.cos(alpha) * 1.25;
  sphere0.position.x = Math.sin(alpha) * 1.25;
  toExplodeArray.push(sphere0);
}

const newExplosion = new BABYLON.MeshExploder(toExplodeArray);

newExplosion.explode(2);
```

<Playground id="#SFI0DQ" title="Simple explosion" description="Simple example of creating an explosion." /> <Playground id="#PTT7L9#2" title="Larger explosion" description="Example of creating an explosion with thousands of meshes." />

# Example With Imported Objects

```javascript
const assetsManager = new BABYLON.AssetsManager(scene);
const meshTask = assetsManager.addMeshTask("model", "", "./", "model.gltf");

let meshes;

meshTask.onSuccess = function(task) {
    meshes = task.loadedMeshes;
}
assetsManager.load();
const newExplosion;
scene.executeWhenReady(function() {
    newExplosion = new BABYLON.MeshExploder(meshes);
    newExplosion.explode(2);
});
```

## Example Using the Babylon.js Viewer

```javascript
BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function (viewer) {
  viewerObservables(viewer);
});
let newExplosion;
function viewerObservables(viewer) {
  viewer.onModelLoadedObservable.add(function (model) {
    model.rootMesh.getScene().executeWhenReady(function () {
      newExplosion = new BABYLON.MeshExploder(model.meshes, model.meshes[0]);
      newExplosion.explode(2);
    });
  });
}
```



# Edges Renderer

BABYLON.EdgesRenderer is a tool used to render edges on top of a mesh. Edges are rendered between two faces if the dot product of their normals is less than epsilon.

## How to use it

![Edge Renderer](/img/edgesRenderer.jpg)

You can enable edges rendering like this:

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box1", { size: 2 }, scene);
box.enableEdgesRendering();
box.edgesWidth = 4.0;
box.edgesColor = new BABYLON.Color4(0, 0, 1, 1);
```

The `enableEdgesRendering` can be called with a custom epsilon (default value is 0.95).

```javascript
box.enableEdgesRendering(0.9999);
```

Dot product is the cosine of the angle between the vectors, so for default epsilon 0.95 the angle is acos(.95) ~= 18 degrees - so if the angle between two faces is less than that no line gets drawn.

If you need to turn-off edges rendering:

```javascript
box.disableEdgesRendering();
```

You can try edges rendering here: <Playground id="#TYAHX#10" title="Edge Rendering Example 1" description="Simple example of edge rendering."/>

If your mesh has instances, you can either use a renderer for each instance by enabling the edges rendering for each instance as explained above, or by using the source mesh renderer for all instances.

To do this, just set:

```javascript
sourceMesh.edgesShareWithInstances = true;
```

PG: <Playground id="#7BY3TM" title="Edge Rendering Example 2" description="Simple example of edge rendering."/>

## EdgesRenderer and Transparent meshes

The EdgesRenderer is the last component of a [rendering group](/features/featuresDeepDive/materials/advanced/transparent_rendering#rendering-groups) to be rendered, which can effect rendering when there are transparent meshes other than the one using the renderer. See this scene for an example:

![Edges rendering over transparent object](/img/features/edgesRenderer/edgesRenderer1.png)

<Playground id="#TYAHX#282" title="Edge renderer and Transparent Meshes" description="Shows the interaction between an edge renderer in an object and another, transparent, object."/>

You may notice that both the back box and the ground's edges renderers are rendering on top of the front, partially transparent mesh. That happens because the edges rendering happen after all other steps in the scene, even after the transparent (alpha blended) meshes are rendered. For more information on the rendering order of meshes, check the [Transparent Rendering](features/featuresDeepDive/materials/advanced/transparent_rendering#rendering-order) page. There are two possible solutions to this. One is to set the transparent objects' rendering group id to a higher value than the meshes with the edges renderer:

![Solution 1](/img/features/edgesRenderer/edgesRenderer2.png)

And another is to set `forceDepthWrite = true` on the transparent material:

![Solution 2](/img/features/edgesRenderer/edgesRenderer3.png)

Note that in this case, the edges renderer won't show up behind the transparent mesh.


variable	description
variable name	description The value used by scene.getMeshByName() to do a lookup.
variable generator	description The mesh to generate a trail.
variable scene	description The scene to add this mesh to.
variable diameter (optional)	description Diameter of trailing mesh. Default is 1.
variable length (optional)	description Length of trailing mesh. Default is 60.
variable autoStart (optional)	description Automatically start trailing mesh. Default true.

Trail Mesh

How To Use TrailMesh

Example Usage

Examples