
## How To Use TrailMesh

`TrailMesh` creates a new `Mesh` that trails another.

```javascript
let options = {
    diameter: 1.5,
    length: 100,
    segments: 10,
    sections: 4,
    doNotTaper: false,
    autoStart: true
};
const trail = new BABYLON.TrailMesh(name, generator, scene, options);

trail.start(); // Starts the trailing mesh.
trail.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.                          |
| options              | The object containing trail parameters.                 |



There are a variety of parameters you can set to create different types of trails to suit your needs. If you do not specify `segments`, it will default to the `length` of the trail; i.e., a trail with a length of 60 will have 60 segments.

| options property     | value                                               | default value |
| -------------------- | --------------------------------------------------- |---------------|
| diameter (optional)  | _(number)_ Diameter of trailing mesh.                 | 1             |
| length (optional)    | _(number)_ Length of trailing mesh.                   | 60            |
| segments (optional)  | _(number)_ Segments of trailing mesh.                 | length        |
| sections (optional)  | _(number)_ Cross-section of trailing mesh. Min 2.     | 4             |
| doNoTaper (optional) | _(boolean)_ Whether the trail should taper.           | false         |
| autoStart (optional) | _(boolean)_ Automatically starts the trailing mesh.   | 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.

## Resetting the TrailMesh

As of 7.21.0, you can now reset the `TrailMesh` via `trail.reset()`. Use this in conjunction with `trail.stop()` and `trail.start()`. This is ideal when the trail appears distorted because of sudden, large changes in the generator position, for example when firing and reloading projectile meshes.

## 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);

// Trail options
let options = {
    diameter: 1.5,
    length: 100,
    segments: 10,
    sections: 4,
    doNotTaper: false,
    autoStart: true
};
const trail = new BABYLON.TrailMesh("new", cube, scene, options);

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."/>

- <Playground id="#1640Q5#1" title="Trailmesh vfx" description="An example of adding vfx using the trailmesh."/>



# 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.webp)

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);
```

`enableEdgesRendering` can be called with a custom epsilon (the default value is 0.95).

```javascript
box.enableEdgesRendering(0.9999);
```

The dot product is the cosine of the angle between the vectors, so for the default epsilon of 0.95 the angle is acos(.95) ~= 18 degrees. If the angle between two faces is less than that, no line is 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 affect 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.webp)

<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 edge renderers are rendering on top of the front, partially transparent mesh. That happens because edge rendering occurs after all other steps in the scene, even after 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 object's rendering group id to a higher value than the meshes with the edge renderer:

![Solution 1](/img/features/edgesRenderer/edgesRenderer2.webp)

And another is to set `forceDepthWrite = true` on the transparent material:

![Solution 2](/img/features/edgesRenderer/edgesRenderer3.webp)

Note that in this case, the edges renderer won't show up behind the transparent 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.
options	The object containing trail parameters.

options property	value	default value
diameter (optional)	(number) Diameter of trailing mesh.	1
length (optional)	(number) Length of trailing mesh.	60
segments (optional)	(number) Segments of trailing mesh.	length
sections (optional)	(number) Cross-section of trailing mesh. Min 2.	4
doNoTaper (optional)	(boolean) Whether the trail should taper.	false
autoStart (optional)	(boolean) Automatically starts the trailing mesh.	true

Trail Mesh

How To Use TrailMesh

Resetting the TrailMesh

Example Usage

Examples