Skip to content

Latest commit

 

History

History
43 lines (36 loc) · 3.3 KB

README.md

File metadata and controls

43 lines (36 loc) · 3.3 KB
Raw

Highlight component

npm version npm version github twitter mastodon ko-fi

This component adds a highlight to objects. The highlight can be drawn on either the occluded parts (default) or the visible parts (mode: visible). This allows the user to easily and quickly spot them. The highlight consists of accentuating the rim of the object.

Checkout the example: Online Demo | Source

Usage

Load the script from npm or add the following script tag:

<script src="https://cdn.jsdelivr.net/npm/@fern-solutions/aframe-highlight/dist/highlight.umd.min.js"></script>

The highlight component can be attached to any object:

<a-sphere highlight="rimColor: #FF0000; coreColor: #FF0000; coreOpacity: 0.5"></a-sphere>

To ensure certain objects or entities are rendered on top of any highlight (e.g. hands), you can use the above-highlight component:

<a-entity hand-controls="hand: left" above-highlight></a-entity>

Properties

Name Type Default Description
rimColor color #FF0000 The color at the rim of the object
rimOpacity float 1.0 The opacity of the rim between 0.0 and 1.0
coreColor color #000000 The color at the core of the object
coreOpacity float 0.0 The opacity of the core between 0.0 and 1.0
mode 'occlusion' or 'visible occlusion Whether to show the highlight on occluded or visible parts of the object

Caveats

This component tries to be a relatively lightweight and does not introduce any post-processing. Instead it renders the highlighted objects one (or two) more times to achieve the effect. There are however a couple of caveats associated with this:

  1. If the object is expensive to draw, the highlight rendering can be expensive as well
  2. The component uses an Object3D directly attached to the scene with renderOrder set to 1000. If you make use of renderOrder make sure there is no conflict.
  3. When rendering the highlight on occluded parts, the object itself is rendered without proper depth testing, meaning for concave objects the highlight won't always match the outer surface.
  4. Multiple objects with highlights when occluded can render in arbitrary order. It's recommended to limit the amount of entities this effect is used on and try to make sure these entities don't overlap each other.