Reference Source
public class | source

FastNavPlugin

Extends:

Plugin → FastNavPlugin

Viewer plugin that makes interaction smoother with large models, by temporarily switching the Viewer to faster, lower-quality rendering modes whenever we interact.

FastNavPlugin works by hiding specified Viewer rendering features, and optionally scaling the Viewer's canvas resolution, whenever we interact with the Viewer. Then, once we've finished interacting, FastNavPlugin restores those rendering features and the original canvas scale, after a configured delay.

Depending on how we configure FastNavPlugin, we essentially switch to a smooth-rendering low-quality view while interacting, then return to the normal higher-quality view after we stop, following an optional delay.

Down-scaling the canvas resolution gives particularly good results. For example, scaling by 0.5 means that we're rendering a quarter of the pixels while interacting, which can make the Viewer noticeably smoother with big models.

The screen capture above shows FastNavPlugin in action. In this example, whenever we move the Camera or resize the Canvas, FastNavPlugin switches off enhanced edges and ambient shadows (SAO), and down-scales the canvas, making it slightly blurry. When 0.5 seconds passes with no interaction, the plugin shows edges and SAO again, and restores the original canvas scale.

Usage

In the example below, we'll create a Viewer, add a FastNavPlugin, then use an XKTLoaderPlugin to load a model.

Whenever we interact with the Viewer, our FastNavPlugin will:

  • hide edges,
  • hide ambient shadows (SAO),
  • hide physically-based materials (switching to non-PBR),
  • hide transparent objects, and
  • scale the canvas resolution by 0.5, causing the GPU to render 75% less pixels.

We'll also configure a 0.5 second delay before we transition back to high-quality each time we stop ineracting, so that we're not continually flipping between low and high quality as we interact. Since we're only rendering ambient shadows when not interacting, we'll also treat ourselves to expensive, high-quality SAO settings, that we wouldn't normally configure for an interactive SAO effect.

import {Viewer, XKTLoaderPlugin, FastNavPlugin} from "xeokit-sdk.es.js";

// Create a Viewer with PBR and SAO enabled

const viewer = new Viewer({
     canvasId: "myCanvas",
     transparent: true,
     pbr: true,                          // Enable physically-based rendering for Viewer
     sao: true                           // Enable ambient shadows for Viewer
 });

viewer.scene.camera.eye = [-66.26, 105.84, -281.92];
viewer.scene.camera.look = [42.45, 49.62, -43.59];
viewer.scene.camera.up = [0.05, 0.95, 0.15];

// Higher-quality SAO settings

viewer.scene.sao.enabled = true;
viewer.scene.sao.numSamples = 60;
viewer.scene.sao.kernelRadius = 170;

// Install a FastNavPlugin

new FastNavPlugin(viewer, {
     hideEdges: true,                // Don't show edges while we interact (default is true)
     hideSAO: true,                  // Don't show ambient shadows while we interact (default is true)
     hideColorTexture: true,        // No color textures while we interact (default is true)
     hidePBR: true,                  // No physically-based rendering while we interact (default is true)
     hideTransparentObjects: true,   // Hide transparent objects while we interact (default is false)
     scaleCanvasResolution: true,    // Scale canvas resolution while we interact (default is false)
     scaleCanvasResolutionFactor: 0.5,  // Factor by which we scale canvas resolution when we interact (default is 0.6)
     delayBeforeRestore: true,       // When we stop interacting, delay before restoring normal render (default is true)
     delayBeforeRestoreSeconds: 0.5  // The delay duration, in seconds (default is 0.5)
});

// Load a BIM model from XKT

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
     id: "myModel",
     src: "./models/xkt/HolterTower.xkt",
     sao: true,                          // Enable ambient shadows for this model
     pbr: true                           // Enable physically-based rendering for this model
});

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: Object)

Member Summary

Public Members
public get

Gets whether to have a delay before restoring normal rendering after we stop interacting with the Viewer.

public set

delayBeforeRestore(delayBeforeRestore: Boolean)

Sets whether to have a delay before restoring normal rendering after we stop interacting with the Viewer.

public get

Gets the delay before restoring normal rendering after we stop interacting with the Viewer.

public set

delayBeforeRestoreSeconds(delayBeforeRestoreSeconds: Number)

Sets the delay before restoring normal rendering after we stop interacting with the Viewer.

public get

Gets whether to temporarily hide color textures whenever we interact with the Viewer.

public set

hideColorTexture(hideColorTexture: Boolean)

Sets whether to temporarily hide color textures whenever we interact with the Viewer.

public get

Gets whether to temporarily hide edges whenever we interact with the Viewer.

public set

hideEdges(hideEdges: Boolean)

Sets whether to temporarily hide edges whenever we interact with the Viewer.

public get

Gets whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer.

public set

hidePBR(hidePBR: Boolean)

Sets whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer.

public get

Gets whether to temporarily hide scalable ambient shadows (SAO) whenever we interact with the Viewer.

public set

hideSAO(hideSAO: Boolean)

Sets whether to temporarily hide scalable ambient shadows (SAO) whenever we interact with the Viewer.

public get

Gets whether to temporarily hide transparent objects whenever we interact with the Viewer.

public set

hideTransparentObjects(hideTransparentObjects: Boolean)

Sets whether to temporarily hide transparent objects whenever we interact with the Viewer.

public get

Gets whether to temporarily scale the canvas resolution whenever we interact with the Viewer.

public set

scaleCanvasResolution(scaleCanvasResolution: Boolean)

Sets whether to temporarily scale the canvas resolution whenever we interact with the Viewer.

public get

Gets the factor by which we temporarily scale the canvas resolution when we interact with the viewer.

public set

scaleCanvasResolutionFactor(scaleCanvasResolutionFactor: Number)

Sets the factor by which we temporarily scale the canvas resolution when we interact with the viewer.

Method Summary

Public Methods
public

Destroys this plugin.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object)

Fires an event at this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

on(event: String, callback: Function)

Subscribes to an event fired at this Plugin.

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: Object) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg Object

FastNavPlugin configuration.

cfg.id String
  • optional
  • default: "FastNav"

Optional ID for this plugin, so that we can find it within Viewer#plugins.

cfg.hideColorTexture Boolean
  • optional
  • default: true

Whether to temporarily hide color textures whenever we interact with the Viewer.

cfg.hidePBR Boolean
  • optional
  • default: true

Whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer.

cfg.hideSAO Boolean
  • optional
  • default: true

Whether to temporarily hide scalable ambient occlusion (SAO) whenever we interact with the Viewer.

cfg.hideEdges Boolean
  • optional
  • default: true

Whether to temporarily hide edges whenever we interact with the Viewer.

cfg.hideTransparentObjects Boolean
  • optional
  • default: false

Whether to temporarily hide transparent objects whenever we interact with the Viewer.

cfg.scaleCanvasResolution Number
  • optional
  • default: false

Whether to temporarily down-scale the canvas resolution whenever we interact with the Viewer.

cfg.scaleCanvasResolutionFactor Number
  • optional
  • default: 0.6

The factor by which we downscale the canvas resolution whenever we interact with the Viewer.

cfg.delayBeforeRestore Boolean
  • optional
  • default: true

Whether to temporarily have a delay before restoring normal rendering after we stop interacting with the Viewer.

cfg.delayBeforeRestoreSeconds Number
  • optional
  • default: 0.5

Delay in seconds before restoring normal rendering after we stop interacting with the Viewer.

Public Members

public get delayBeforeRestore: Boolean: * source

Gets whether to have a delay before restoring normal rendering after we stop interacting with the Viewer.

The delay duration is configured via FastNavPlugin#delayBeforeRestoreSeconds.

Default is true.

Return:

Boolean

Whether to have a delay.

public set delayBeforeRestore(delayBeforeRestore: Boolean) source

Sets whether to have a delay before restoring normal rendering after we stop interacting with the Viewer.

The delay duration is configured via FastNavPlugin#delayBeforeRestoreSeconds.

Default is true.

public get delayBeforeRestoreSeconds: Number: * source

Gets the delay before restoring normal rendering after we stop interacting with the Viewer.

The delay is enabled when FastNavPlugin#delayBeforeRestore is true.

Default is 0.5 seconds.

Return:

Number

Delay in seconds.

public set delayBeforeRestoreSeconds(delayBeforeRestoreSeconds: Number) source

Sets the delay before restoring normal rendering after we stop interacting with the Viewer.

The delay is enabled when FastNavPlugin#delayBeforeRestore is true.

Default is 0.5 seconds.

public get hideColorTexture: Boolean: * source

Gets whether to temporarily hide color textures whenever we interact with the Viewer.

Default is true.

Return:

Boolean

true if hiding color textures.

public set hideColorTexture(hideColorTexture: Boolean) source

Sets whether to temporarily hide color textures whenever we interact with the Viewer.

Default is true.

public get hideEdges: Boolean: * source

Gets whether to temporarily hide edges whenever we interact with the Viewer.

Default is true.

Return:

Boolean

true if hiding edges.

public set hideEdges(hideEdges: Boolean) source

Sets whether to temporarily hide edges whenever we interact with the Viewer.

Default is true.

public get hidePBR: Boolean: * source

Gets whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer.

Default is true.

Return:

Boolean

true if hiding PBR.

public set hidePBR(hidePBR: Boolean) source

Sets whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer.

Default is true.

public get hideSAO: Boolean: * source

Gets whether to temporarily hide scalable ambient shadows (SAO) whenever we interact with the Viewer.

Default is true.

Return:

Boolean

true if hiding SAO.

public set hideSAO(hideSAO: Boolean) source

Sets whether to temporarily hide scalable ambient shadows (SAO) whenever we interact with the Viewer.

Default is true.

public get hideTransparentObjects: Boolean: * source

Gets whether to temporarily hide transparent objects whenever we interact with the Viewer.

Does not hide X-rayed, selected, highlighted objects.

Default is false.

Return:

Boolean

true if hiding transparent objects.

public set hideTransparentObjects(hideTransparentObjects: Boolean) source

Sets whether to temporarily hide transparent objects whenever we interact with the Viewer.

Does not hide X-rayed, selected, highlighted objects.

Default is false.

public get scaleCanvasResolution: Boolean: * source

Gets whether to temporarily scale the canvas resolution whenever we interact with the Viewer.

Default is false.

The scaling factor is configured via FastNavPlugin#scaleCanvasResolutionFactor.

Return:

Boolean

true if scaling the canvas resolution.

public set scaleCanvasResolution(scaleCanvasResolution: Boolean) source

Sets whether to temporarily scale the canvas resolution whenever we interact with the Viewer.

Default is false.

The scaling factor is configured via FastNavPlugin#scaleCanvasResolutionFactor.

public get scaleCanvasResolutionFactor: Number: * source

Gets the factor by which we temporarily scale the canvas resolution when we interact with the viewer.

Default is 0.6.

Enable canvas resolution scaling by setting FastNavPlugin#scaleCanvasResolution true.

Return:

Number

Factor by which we scale the canvas resolution.

public set scaleCanvasResolutionFactor(scaleCanvasResolutionFactor: Number) source

Sets the factor by which we temporarily scale the canvas resolution when we interact with the viewer.

Accepted range is [0.0 .. 1.0].

Default is 0.6.

Enable canvas resolution scaling by setting FastNavPlugin#scaleCanvasResolution true.

Public Methods

public destroy() source

Destroys this plugin.

Override:

Plugin#destroy