21 Nov 2022

Viewer Selection Highlighting

Default blog image

When the viewer version 7 was released back in 2019, one of the first, very noticeable changes was the highlighting of selected elements in a 3D model.

Here's how the selected elements were highlighted before version 7.0.0:

Selection Highlight Before

And here's how selected elements are highlighted since version 7.0.0:

Selection Highlight After


One word: performance

The thing is, in order to provide the former highlight effect, selected elements have to be rendered twice - once with their regular material, and then again using a special "see-through" shader. This may not be an issue for simple scenes and small numbers of selected objects. But let's say you want to select all objects of type "Wall" in a very complex Revit design - in that case the doubled rendering will very likely have an impact on the runtime performance.

That is why - starting with version 7 - the viewer started using two different highlighting modes. For leaf objects (that is, objects that are at the very bottom of the logical hierarchy, and they do not have any children in the Model Browser), the viewer still uses the former see-through shader to highlight their selection. And for inner objects (that is, objects that do have children in the Model Browser, such as the "Wall" category in the screenshots above), the viewer only applies a color tint which is rendered as part of each object's material, so no doubled rendering is needed.

Can I override it?

Yes. You may have noticed that some of the viewer APIs accept an additional argument called selectionType, for example:

The argument accepts values from the Autodesk.Viewing.SelectionType enum:

  • Autodesk.Viewing.SelectionType.REGULAR - nodes are tinted with the selection color
  • Autodesk.Viewing.SelectionType.OVERLAYED - nodes are tinted with the selection color and shown on top of the not selected geometry
  • Autodesk.Viewing.SelectionType.MIXED - leaf nodes are selected using the overlayed selection type, and inner nodes are selected using regular selection type

These will work in situations where you'll want to select elements programmatically using the viewer API. Now, what if we select one or more nodes in the Model Browser (using shift+click)? The Model Browser handles the selection internally (specifically using the setAggregateSelection method) so it will still default to the performance-friendly highlighting behavior. If we want to override this behavior as well, we'll need to customize the Model Browser.

Customizing Model Browser

The built-in Model Browser panel can be customized using the Autodesk.ModelStructure viewer extension. The extension exposes a method called setModelStructurePanel that can be used to specify a new instance of the ModelStructurePanel class (or its subclass) that will then be used whenever the user opens the Model Browser from the viewer UI. The following code snippet creates a new instance of Autodesk.Viewing.Extensions.ViewerModelStructurePanel, and implements a custom handler for the onToggleMultipleOverlayedSelection event (when you shift+click on a node in the Model Browser):

viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, async function () {
    const ext = await viewer.loadExtension('Autodesk.ModelStructure');
    const modelStructurePanel = new Autodesk.Viewing.Extensions.ViewerModelStructurePanel(viewer, 'My Model Browser');
    modelStructurePanel.options.onToggleMultipleOverlayedSelection = (selection) => {
        for (const s of selection) {
            s.model = viewer.impl.findModel(parseInt(s.modelId)); // Make sure each selection set is linked to the corresponding model
            s.selectionType = Autodesk.Viewing.SelectionType.OVERLAYED; // Override each selection set to use the "see-through" highlight

With this code snippet, any objects you select in the Model Browser will be highlighted using the see-through effect:

Custom Model Browser


Related Article