Highlight

The highlight feature in Babylon.js allows you to emphasize a mesh by applying a colored glow or outline effect around it. It is commonly used in games or simulations to visually focus on important objects.

In this example, we create two separate highlight layers to demonstrate different highlight effects on meshes:

• The first highlight layer, hl-1, applies a blue highlight to the ground mesh, making it stand out with a soft glow.

• The second highlight layer, hl-2, contains three distinct spheres, each with a unique effect:

  • One sphere has a yellow highlight.
  • A second sphere is semi-transparent with a red highlight.
  • The third sphere features an emissive highlight, which makes it glow as if it’s emitting its own light.

Finally, there’s a box mesh that isn’t linked to any highlight layer. However, since it’s a transparent mesh, rendering it alongside highlighted objects may cause visual issues. To prevent these problems, we exclude the box from the highlight generation process by .addExcludedMesh method.

useEffect(() => {
    highlightLayer2Ref.current!.addExcludedMesh(boxRef.current!);
}, []);
 
// ...
 
<>
    <highlightLayer name='hl-1'>
        <ground name='ground' options={{ width: 6, height: 6 }} highlightLayer={{ color: Color3.Blue() }} />
    </highlightLayer>
    <highlightLayer ref={highlightLayer2Ref} name='hl-2'>
        <sphere name='sphere-1' position={new Vector3(-1.2, 1, 0)} highlightLayer={{ color: Color3.Yellow() }} />
        <sphere name='sphere-2' position={new Vector3(0, 1, 0)} visibility={0.5} highlightLayer={{ color: Color3.Red() }} />
        <sphere name='sphere-3' position={new Vector3(1.2, 1, 0)} highlightLayer={{ color: Color3.Black(), glowEmissiveOnly: true }}>
            <standardMaterial name='sphere-mat'>
                <texture kind='emissiveTexture' url={`${process.env.NEXT_PUBLIC_BABYLON_ASSETS_URL}/textures/misc.jpg`} uOffset={-0.1} />
            </standardMaterial>
        </sphere>
        <box ref={boxRef} name='box' visibility={0.5} position={new Vector3(-2, 1, -1.7)} options={{ size: 2 }} />
    </highlightLayer>
</>

Learn More

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