Rendering Edges

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

You can enable edges rendering like this:

const box = BABYLON.MeshBuilder.CreateBox("box1", { size: 2 }, scene);
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).


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:


You can try edges rendering here: Edge Rendering Example 1

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:

sourceMesh.edgesShareWithInstances = true;

PG: Edge Rendering Example 2

EdgesRenderer and Transparent meshes

The EdgesRenderer is the last component of a rendering group 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

Edge renderer and Transparent Meshes

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 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

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

Solution 2

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