Rendering Edges

Rendering edges refers to the visualization of the edges of a mesh, making the wireframe structure more visible. In Babylon.js, edge rendering is used to highlight the geometry of a mesh, making it useful for debugging or stylistic effects.

To enable egdes rendering you can use .enableEdgesRendering method on a mesh. Other props like edgesWidth, edgesColor, edgesShareWithInstances, etc.. allow you to customize edges rendering.

<>
    <box
        name='box-1'
        position={new Vector3(0, 1, 0.5)}
        edgesColor={Color4.FromColor3(Color3.Blue(), 0.5)}
        edgesWidth={1}
        edgesShareWithInstances
        onCreate={mesh => {
            mesh.enableEdgesRendering();
        }}>
        <standardMaterial name='box-material' alpha={0.5} />
    </box>
    <box name='box-2' instanceFrom='box-1' positionX={-1.5} positionZ={-1.5} />
    <box name='box-3' instanceFrom='box-1' positionX={1.5} positionZ={-1.5} />
    <ground name='ground' options={{ width: 5, height: 5 }} />
</>

Learn More

For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/edgeRenderer.

Auto Level of Detail Gauissian Splatting