> Learn all about the edge renderer in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/mesh/edgeRenderer

# 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](https://doc.babylonjs.com/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: Edge Rendering Example 1](https://playground.babylonjs.com/#TYAHX#10) - 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: Edge Rendering Example 2](https://playground.babylonjs.com/#7BY3TM) - Simple example of edge rendering.

## EdgesRenderer and Transparent meshes

The EdgesRenderer is the last component of a [rendering group](https://doc.babylonjs.com/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](https://doc.babylonjs.com/img/features/edgesRenderer/edgesRenderer1.webp)

- [Playground: Edge renderer and Transparent Meshes](https://playground.babylonjs.com/#TYAHX#282) - 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](https://doc.babylonjs.com/img/features/edgesRenderer/edgesRenderer2.webp)

And another is to set `forceDepthWrite = true` on the transparent material:

![Solution 2](https://doc.babylonjs.com/img/features/edgesRenderer/edgesRenderer3.webp)

Note that in this case, the edges renderer won't show up behind the transparent mesh.