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.

• [Run this example]

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)
     defaultScaleCanvasResolutionFactor: 1.0, // Factor by which we scale canvas resolution when we stop interacting (default is 1.0)
     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
});