@xeokit/xeokit-sdk 2.0.15 → 2.0.16

package/dist/xeokit-sdk.es.js

@@ -7020,7 +7020,7 @@ function Core() {
     /**
      * @private
      */
-    this.setRAFEnabled = function(value) {
+    this.setRAFEnabled = function (value) {
         if (value === rafEnabled) {
             return;
         }
@@ -7030,7 +7030,7 @@ function Core() {
                 clearInterval(interval);
                 interval = null;
             }
-            window.requestAnimationFrame(frame);
+            (window.requestPostAnimationFrame !== undefined) ? window.requestPostAnimationFrame(frame) : requestAnimationFrame(frame);
         } else {
             interval = setInterval(frame, 16);
         }
@@ -7039,7 +7039,7 @@ function Core() {
     /**
      * @private
      */
-    this.getRAFEnabled = function() {
+    this.getRAFEnabled = function () {
         return rafEnabled;
     };
 
@@ -7126,7 +7126,7 @@ const frame = function () {
     renderScenes();
     lastTime = time;
     if (rafEnabled) {
-        window.requestAnimationFrame(frame);
+        (window.requestPostAnimationFrame !== undefined) ? window.requestPostAnimationFrame(frame) : requestAnimationFrame(frame);
     }
 };
 
@@ -7204,7 +7204,7 @@ function renderScenes() {
 }
 
 if (rafEnabled) {
-    window.requestAnimationFrame(frame);
+    (window.requestPostAnimationFrame !== undefined) ? window.requestPostAnimationFrame(frame) : requestAnimationFrame(frame);
 } else {
     interval = setInterval(frame, 16);
 }
@@ -11986,13 +11986,6 @@ const WEBGL_CONTEXT_NAMES = [
  */
 class Canvas extends Component {
 
-    /**
-     @private
-     */
-    get type() {
-        return "Canvas";
-    }
-
     /**
      * @constructor
      * @private
@@ -12060,8 +12053,10 @@ class Canvas extends Component {
         // If the canvas uses css styles to specify the sizes make sure the basic
         // width and height attributes match or the WebGL context will use 300 x 150
 
-        this.canvas.width = this.canvas.clientWidth;
-        this.canvas.height = this.canvas.clientHeight;
+        this.resolutionScale = cfg.resolutionScale;
+
+        this.canvas.width = Math.round(this.canvas.clientWidth * this._resolutionScale);
+        this.canvas.height = Math.round(this.canvas.clientHeight * this._resolutionScale);
 
         /**
          * Boundary of the Canvas in absolute browser window coordinates.
@@ -12124,6 +12119,8 @@ class Canvas extends Component {
 
         // Publish canvas size and position changes on each scene tick
 
+        let lastResolutionScale = null;
+
         let lastWindowWidth = null;
         let lastWindowHeight = null;
 
@@ -12135,10 +12132,11 @@ class Canvas extends Component {
 
         let lastParent = null;
 
-        this._tick = this.scene.on("tick", function () {
+        this._tick = this.scene.on("tick", () => {
 
-            const canvas = self.canvas;
+            const canvas = this.canvas;
 
+            const newResolutionScale = (this._resolutionScale !== lastResolutionScale);
             const newWindowSize = (window.innerWidth !== lastWindowWidth || window.innerHeight !== lastWindowHeight);
             const newCanvasSize = (canvas.clientWidth !== lastCanvasWidth || canvas.clientHeight !== lastCanvasHeight);
             const newCanvasPos = (canvas.offsetLeft !== lastCanvasOffsetLeft || canvas.offsetTop !== lastCanvasOffsetTop);
@@ -12146,32 +12144,32 @@ class Canvas extends Component {
             const parent = canvas.parentElement;
             const newParent = (parent !== lastParent);
 
-            if (newWindowSize || newCanvasSize || newCanvasPos || newParent) {
+            if (newResolutionScale || newWindowSize || newCanvasSize || newCanvasPos || newParent) {
 
-                self._spinner._adjustPosition();
+                this._spinner._adjustPosition();
 
-                if (newCanvasSize || newCanvasPos) {
+                if (newResolutionScale || newCanvasSize || newCanvasPos) {
 
                     const newWidth = canvas.clientWidth;
                     const newHeight = canvas.clientHeight;
 
                     // TODO: Wasteful to re-count pixel size of each canvas on each canvas' resize
-                    if (newCanvasSize) {
+                    if (newResolutionScale || newCanvasSize) {
                         let countPixels = 0;
                         let scene;
                         for (const sceneId in core.scenes) {
                             if (core.scenes.hasOwnProperty(sceneId)) {
                                 scene = core.scenes[sceneId];
-                                countPixels += scene.canvas.canvas.clientWidth * scene.canvas.canvas.clientHeight;
+                                countPixels += Math.round((scene.canvas.canvas.clientWidth * this._resolutionScale) * (scene.canvas.canvas.clientHeight * this._resolutionScale));
                             }
                         }
                         stats.memory.pixels = countPixels;
 
-                        canvas.width = canvas.clientWidth;
-                        canvas.height = canvas.clientHeight;
+                        canvas.width = Math.round(canvas.clientWidth * this._resolutionScale);
+                        canvas.height = Math.round(canvas.clientHeight * this._resolutionScale);
                     }
 
-                    const boundary = self.boundary;
+                    const boundary = this.boundary;
 
                     boundary[0] = canvas.offsetLeft;
                     boundary[1] = canvas.offsetTop;
@@ -12184,12 +12182,18 @@ class Canvas extends Component {
                      * @event boundary
                      * @param value The property's new value
                      */
-                    self.fire("boundary", boundary);
+                    if (!newResolutionScale) {
+                        this.fire("boundary", boundary);
+                    }
 
                     lastCanvasWidth = newWidth;
                     lastCanvasHeight = newHeight;
                 }
 
+                if (newResolutionScale) {
+                    lastResolutionScale = this._resolutionScale;
+                }
+
                 if (newWindowSize) {
                     lastWindowWidth = window.innerWidth;
                     lastWindowHeight = window.innerHeight;
@@ -12210,6 +12214,122 @@ class Canvas extends Component {
         });
     }
 
+    /**
+     @private
+     */
+    get type() {
+        return "Canvas";
+    }
+
+    /**
+     * Gets whether the canvas clear color will be derived from {@link AmbientLight} or {@link Canvas#backgroundColor}
+     * when {@link Canvas#transparent} is ```true```.
+     *
+     * When {@link Canvas#transparent} is ```true``` and this is ````true````, then the canvas clear color will
+     * be taken from the {@link Scene}'s ambient light color.
+     *
+     * When {@link Canvas#transparent} is ```true``` and this is ````false````, then the canvas clear color will
+     * be taken from {@link Canvas#backgroundColor}.
+     *
+     * Default value is ````true````.
+     *
+     * @type {Boolean}
+     */
+    get backgroundColorFromAmbientLight() {
+        return this._backgroundColorFromAmbientLight;
+    }
+
+    /**
+     * Sets if the canvas background color is derived from an {@link AmbientLight}.
+     *
+     * This only has effect when the canvas is not transparent. When not enabled, the background color
+     * will be the canvas element's HTML/CSS background color.
+     *
+     * Default value is ````true````.
+     *
+     * @type {Boolean}
+     */
+    set backgroundColorFromAmbientLight(backgroundColorFromAmbientLight) {
+        this._backgroundColorFromAmbientLight = (backgroundColorFromAmbientLight !== false);
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the canvas clear color.
+     *
+     * Default value is ````[1, 1, 1]````.
+     *
+     * @type {Number[]}
+     */
+    get backgroundColor() {
+        return this._backgroundColor;
+    }
+
+    /**
+     * Sets the canvas clear color.
+     *
+     * Default value is ````[1, 1, 1]````.
+     *
+     * @type {Number[]}
+     */
+    set backgroundColor(value) {
+        if (value) {
+            this._backgroundColor[0] = value[0];
+            this._backgroundColor[1] = value[1];
+            this._backgroundColor[2] = value[2];
+        } else {
+            this._backgroundColor[0] = 1.0;
+            this._backgroundColor[1] = 1.0;
+            this._backgroundColor[2] = 1.0;
+        }
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.
+     *
+     * This is a common way to trade off rendering quality for speed. If the canvas size is defined in CSS, then
+     * setting this to a value between ````[0..1]```` (eg ````0.5````) will render into a smaller back buffer, giving
+     * a performance boost.
+     *
+     * @returns {*|number} The resolution scale.
+     */
+    get resolutionScale() {
+        return this._resolutionScale;
+    }
+
+    /**
+     * Sets the scale of the canvas back buffer relative to the CSS-defined size of the canvas.
+     *
+     * This is a common way to trade off rendering quality for speed. If the canvas size is defined in CSS, then
+     * setting this to a value between ````[0..1]```` (eg ````0.5````) will render into a smaller back buffer, giving
+     * a performance boost.
+     *
+     * @param {*|number} resolutionScale The resolution scale.
+     */
+    set resolutionScale(resolutionScale) {
+        resolutionScale = resolutionScale || 1.0;
+        if (resolutionScale === this._resolutionScale) {
+            return;
+        }
+        this._resolutionScale = resolutionScale;
+        const canvas = this.canvas;
+        canvas.width = Math.round(canvas.clientWidth * this._resolutionScale);
+        canvas.height = Math.round(canvas.clientHeight * this._resolutionScale);
+        this.glRedraw();
+    }
+
+    /**
+     * The busy {@link Spinner} for this Canvas.
+     *
+     * @property spinner
+     * @type Spinner
+     * @final
+     */
+    get spinner() {
+        return this._spinner;
+    }
+
     /**
      * Creates a default canvas in the DOM.
      * @private
@@ -12298,69 +12418,6 @@ class Canvas extends Component {
         }
     }
 
-    /**
-     * Sets if the canvas background color is derived from an {@link AmbientLight}.
-     *
-     * This only has effect when the canvas is not transparent. When not enabled, the background color
-     * will be the canvas element's HTML/CSS background color.
-     *
-     * Default value is ````true````.
-     *
-     * @type {Boolean}
-     */
-    set backgroundColorFromAmbientLight(backgroundColorFromAmbientLight) {
-        this._backgroundColorFromAmbientLight = (backgroundColorFromAmbientLight !== false);
-    }
-
-    /**
-     * Gets whether the canvas clear color will be derived from {@link AmbientLight} or {@link Canvas#backgroundColor}
-     * when {@link Canvas#transparent} is ```true```.
-     *
-     * When {@link Canvas#transparent} is ```true``` and this is ````true````, then the canvas clear color will
-     * be taken from the {@link Scene}'s ambient light color.
-     *
-     * When {@link Canvas#transparent} is ```true``` and this is ````false````, then the canvas clear color will
-     * be taken from {@link Canvas#backgroundColor}.
-     *
-     * Default value is ````true````.
-     *
-     * @type {Boolean}
-     */
-    get backgroundColorFromAmbientLight() {
-        return this._backgroundColorFromAmbientLight;
-    }
-
-    /**
-     * Sets the canvas clear color.
-     *
-     * Default value is ````[1, 1, 1]````.
-     *
-     * @type {Number[]}
-     */
-    set backgroundColor(value) {
-        if (value) {
-            this._backgroundColor[0] = value[0];
-            this._backgroundColor[1] = value[1];
-            this._backgroundColor[2] = value[2];
-        } else {
-            this._backgroundColor[0] = 1.0;
-            this._backgroundColor[1] = 1.0;
-            this._backgroundColor[2] = 1.0;
-        }
-        this.glRedraw();
-    }
-
-    /**
-     * Gets the canvas clear color.
-     *
-     * Default value is ````[1, 1, 1]````.
-     *
-     * @type {Number[]}
-     */
-    get backgroundColor() {
-        return this._backgroundColor;
-    }
-
     /**
      * @private
      * @deprecated
@@ -12404,17 +12461,6 @@ class Canvas extends Component {
         }
     }
 
-    /**
-     * The busy {@link Spinner} for this Canvas.
-     *
-     * @property spinner
-     * @type Spinner
-     * @final
-     */
-    get spinner() {
-        return this._spinner;
-    }
-
     destroy() {
         this.scene.off(this._tick);
         this._spinner._destroy();
@@ -12681,1115 +12727,1115 @@ class FrameContext {
     }
 }
 
-/*
- * Canvas2Image v0.1
- * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com
- * MIT License [http://www.opensource.org/licenses/mit-license.php]
+/**
+ * @desc Pick result returned by {@link Scene#pick}.
  *
- * Modified by @xeolabs to permit vertical flipping, so that snapshot can be taken from WebGL frame buffers,
- * which vertically flip image data as part of the way that WebGL renders textures.
  */
+class PickResult {
 
-/**
- * @private
- */
-const Canvas2Image = (function () {
-    // check if we have canvas support
-    const oCanvas = document.createElement("canvas"), sc = String.fromCharCode;
+    /**
+     * @private
+     * @param value
+     */
+    constructor() {
 
-    // no canvas, bail out.
-    if (!oCanvas.getContext) {
-        return {
-            saveAsBMP: function () {
-            },
-            saveAsPNG: function () {
-            },
-            saveAsJPEG: function () {
-            }
-        }
-    }
+        /**
+         * Picked entity.
+         * Null when no entity was picked.
+         * @property entity
+         * @type {Entity|*}
+         */
+        this.entity = null;
 
-    const bHasImageData = !!(oCanvas.getContext("2d").getImageData), bHasDataURL = !!(oCanvas.toDataURL),
-        bHasBase64 = !!(window.btoa);
+        /**
+         * Type of primitive that was picked - usually "triangle".
+         * Null when no primitive was picked.
+         * @property primitive
+         * @type {String}
+         */
+        this.primitive = null;
 
-    // ok, we're good
-    const readCanvasData = function (oCanvas) {
-        const iWidth = parseInt(oCanvas.width), iHeight = parseInt(oCanvas.height);
-        return oCanvas.getContext("2d").getImageData(0, 0, iWidth, iHeight);
-    };
+        /**
+         * Index of primitive that was picked.
+         * -1 when no entity was picked.
+         * @property primIndex
+         * @type {number}
+         */
+        this.primIndex = -1;
 
-    // base64 encodes either a string or an array of charcodes
-    const encodeData = function (data) {
-        let i, aData, strData = "";
+        /**
+         * True when the picked surface position is full precision.
+         * When false, the picked surface position should be regarded as approximate.
+         * Full-precision surface picking is performed with the {@link Scene#pick} method's ````pickSurfacePrecision```` option.
+         * @property pickSurfacePrecision
+         * @type {Boolean}
+         */
+        this.pickSurfacePrecision = false;
 
-        if (typeof data == "string") {
-            strData = data;
-        } else {
-            aData = data;
-            for (i = 0; i < aData.length; i++) {
-                strData += sc(aData[i]);
-            }
-        }
-        return btoa(strData);
-    };
-
-    // creates a base64 encoded string containing BMP data takes an imagedata object as argument
-    const createBMP = function (oData) {
-        let strHeader = '';
-        const iWidth = oData.width;
-        const iHeight = oData.height;
-
-        strHeader += 'BM';
-
-        let iFileSize = iWidth * iHeight * 4 + 54; // total header size = 54 bytes
-        strHeader += sc(iFileSize % 256);
-        iFileSize = Math.floor(iFileSize / 256);
-        strHeader += sc(iFileSize % 256);
-        iFileSize = Math.floor(iFileSize / 256);
-        strHeader += sc(iFileSize % 256);
-        iFileSize = Math.floor(iFileSize / 256);
-        strHeader += sc(iFileSize % 256);
-
-        strHeader += sc(0, 0, 0, 0, 54, 0, 0, 0); // data offset
-        strHeader += sc(40, 0, 0, 0); // info header size
-
-        let iImageWidth = iWidth;
-        strHeader += sc(iImageWidth % 256);
-        iImageWidth = Math.floor(iImageWidth / 256);
-        strHeader += sc(iImageWidth % 256);
-        iImageWidth = Math.floor(iImageWidth / 256);
-        strHeader += sc(iImageWidth % 256);
-        iImageWidth = Math.floor(iImageWidth / 256);
-        strHeader += sc(iImageWidth % 256);
-
-        let iImageHeight = iHeight;
-        strHeader += sc(iImageHeight % 256);
-        iImageHeight = Math.floor(iImageHeight / 256);
-        strHeader += sc(iImageHeight % 256);
-        iImageHeight = Math.floor(iImageHeight / 256);
-        strHeader += sc(iImageHeight % 256);
-        iImageHeight = Math.floor(iImageHeight / 256);
-        strHeader += sc(iImageHeight % 256);
-
-        strHeader += sc(1, 0, 32, 0); // num of planes & num of bits per pixel
-        strHeader += sc(0, 0, 0, 0); // compression = none
-
-        let iDataSize = iWidth * iHeight * 4;
-        strHeader += sc(iDataSize % 256);
-        iDataSize = Math.floor(iDataSize / 256);
-        strHeader += sc(iDataSize % 256);
-        iDataSize = Math.floor(iDataSize / 256);
-        strHeader += sc(iDataSize % 256);
-        iDataSize = Math.floor(iDataSize / 256);
-        strHeader += sc(iDataSize % 256);
-
-        strHeader += sc(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); // these bytes are not used
-
-        const aImgData = oData.data;
-        let strPixelData = "";
-        let x;
-        let y = iHeight;
-        let iOffsetX;
-        let iOffsetY;
-        let strPixelRow;
+        this._canvasPos = new Int16Array([0, 0]);
+        this._origin = new Float64Array([0, 0, 0]);
+        this._direction = new Float64Array([0, 0, 0]);
+        this._indices = new Int32Array(3);
+        this._localPos = new Float64Array([0, 0, 0]);
+        this._worldPos = new Float64Array([0, 0, 0]);
+        this._viewPos = new Float64Array([0, 0, 0]);
+        this._bary = new Float64Array([0, 0, 0]);
+        this._worldNormal = new Float64Array([0, 0, 0]);
+        this._uv = new Float64Array([0, 0]);
 
-        do {
-            iOffsetY = iWidth * (y - 1) * 4;
-            strPixelRow = "";
-            for (x = 0; x < iWidth; x++) {
-                iOffsetX = 4 * x;
-                strPixelRow += sc(
-                    aImgData[iOffsetY + iOffsetX + 2], // B
-                    aImgData[iOffsetY + iOffsetX + 1], // G
-                    aImgData[iOffsetY + iOffsetX],     // R
-                    aImgData[iOffsetY + iOffsetX + 3]  // A
-                );
-            }
-            strPixelData += strPixelRow;
-        } while (--y);
+        this.reset();
+    }
 
-        return encodeData(strHeader + strPixelData);
-    };
+    /**
+     * Canvas coordinates when picking with a 2D pointer.
+     * @property canvasPos
+     * @type {Number[]}
+     */
+    get canvasPos() {
+        return this._gotCanvasPos ? this._canvasPos : null;
+    }
 
-    // sends the generated file to the client
-    const saveFile = function (strData) {
-        if (!window.open(strData)) {
-            document.location.href = strData;
+    /**
+     * @private
+     * @param value
+     */
+    set canvasPos(value) {
+        if (value) {
+            this._canvasPos[0] = value[0];
+            this._canvasPos[1] = value[1];
+            this._gotCanvasPos = true;
+        } else {
+            this._gotCanvasPos = false;
         }
-    };
-
-    const makeDataURI = function (strData, strMime) {
-        return "data:" + strMime + ";base64," + strData;
-    };
+    }
 
-    // generates a <img> object containing the imagedata
-    const makeImageObject = function (strSource) {
-        const oImgElement = document.createElement("img");
-        oImgElement.src = strSource;
-        return oImgElement;
-    };
+    /**
+     * World-space 3D ray origin when raypicked.
+     * @property origin
+     * @type {Number[]}
+     */
+    get origin() {
+        return this._gotOrigin ? this._origin : null;
+    }
 
-    const scaleCanvas = function (oCanvas, iWidth, iHeight, flipy) {
-        if (iWidth && iHeight) {
-            const oSaveCanvas = document.createElement("canvas");
-            oSaveCanvas.width = iWidth;
-            oSaveCanvas.height = iHeight;
-            oSaveCanvas.style.width = iWidth + "px";
-            oSaveCanvas.style.height = iHeight + "px";
-            const oSaveCtx = oSaveCanvas.getContext("2d");
-            if (flipy) {
-                oSaveCtx.save();
-                oSaveCtx.scale(1.0, -1.0);
-                oSaveCtx.imageSmoothingEnabled = true;
-                oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, -iHeight);
-                oSaveCtx.restore();
-            } else {
-                oSaveCtx.imageSmoothingEnabled = true;
-                oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
-            }
-            return oSaveCanvas;
+    /**
+     * @private
+     * @param value
+     */
+    set origin(value) {
+        if (value) {
+            this._origin[0] = value[0];
+            this._origin[1] = value[1];
+            this._origin[2] = value[2];
+            this._gotOrigin = true;
+        } else {
+            this._gotOrigin = false;
         }
-        return oCanvas;
-    };
-
-    return {
-        saveAsPNG: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
-            if (!bHasDataURL) return false;
-            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
-            const strMime = "image/png";
-            const strData = oScaledCanvas.toDataURL(strMime);
-            if (bReturnImg) {
-                return makeImageObject(strData);
-            } else {
-                saveFile(strData);
-            }
-            return true;
-        },
+    }
 
-        saveAsJPEG: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
-            if (!bHasDataURL) return false;
-            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
-            const strMime = "image/jpeg";
-            const strData = oScaledCanvas.toDataURL(strMime);
-            // check if browser actually supports jpeg by looking for the mime type in the data uri. if not, return false
-            if (strData.indexOf(strMime) != 5) return false;
-            if (bReturnImg) {
-                return makeImageObject(strData);
-            } else {
-                saveFile(strData);
-            }
-            return true;
-        },
+    /**
+     * World-space 3D ray direction when raypicked.
+     * @property direction
+     * @type {Number[]}
+     */
+    get direction() {
+        return this._gotDirection ? this._direction : null;
+    }
 
-        saveAsBMP: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
-            if (!(bHasDataURL && bHasImageData && bHasBase64)) return false;
-            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
-            const strMime = "image/bmp";
-            const oData = readCanvasData(oScaledCanvas), strImgData = createBMP(oData);
-            if (bReturnImg) {
-                return makeImageObject(makeDataURI(strImgData, strMime));
-            } else {
-                saveFile(makeDataURI(strImgData, strMime));
-            }
-            return true;
+    /**
+     * @private
+     * @param value
+     */
+    set direction(value) {
+        if (value) {
+            this._direction[0] = value[0];
+            this._direction[1] = value[1];
+            this._direction[2] = value[2];
+            this._gotDirection = true;
+        } else {
+            this._gotDirection = false;
         }
-    };
-})();
-
-/**
- * @desc Represents a WebGL render buffer.
- * @private
- */
-class RenderBuffer {
-
-    constructor(canvas, gl, options) {
-        options = options || {};
-        this.gl = gl;
-        this.allocated = false;
-        this.canvas = canvas;
-        this.buffer = null;
-        this.bound = false;
-        this.size = options.size;
-        this._hasDepthTexture = !!options.depthTexture;
+    }
+    
+    /**
+     * Picked triangle's vertex indices.
+     * Only defined when an entity and triangle was picked.
+     * @property indices
+     * @type {Int32Array}
+     */
+    get indices() {
+        return this.entity && this._gotIndices ? this._indices : null;
     }
 
-    setSize(size) {
-        this.size = size;
+    /**
+     * @private
+     * @param value
+     */
+    set indices(value) {
+        if (value) {
+            this._indices[0] = value[0];
+            this._indices[1] = value[1];
+            this._indices[2] = value[2];
+            this._gotIndices = true;
+        } else {
+            this._gotIndices = false;
+        }
     }
 
-    webglContextRestored(gl) {
-        this.gl = gl;
-        this.buffer = null;
-        this.allocated = false;
-        this.bound = false;
+    /**
+     * Picked Local-space point on surface.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property localPos
+     * @type {Number[]}
+     */
+    get localPos() {
+        return this.entity && this._gotLocalPos ? this._localPos : null;
     }
 
-    bind() {
-        this._touch();
-        if (this.bound) {
-            return;
+    /**
+     * @private
+     * @param value
+     */
+    set localPos(value) {
+        if (value) {
+            this._localPos[0] = value[0];
+            this._localPos[1] = value[1];
+            this._localPos[2] = value[2];
+            this._gotLocalPos = true;
+        } else {
+            this._gotLocalPos = false;
         }
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
-        this.bound = true;
     }
 
-    _touch() {
+    /**
+     * Picked World-space point on surface.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property worldPos
+     * @type {Number[]}
+     */
+    get worldPos() {
+        return this.entity && this._gotWorldPos ? this._worldPos : null;
+    }
 
-        let width;
-        let height;
-        const gl = this.gl;
+    /**
+     * @private
+     * @param value
+     */
+    set worldPos(value) {
+        if (value) {
+            this._worldPos[0] = value[0];
+            this._worldPos[1] = value[1];
+            this._worldPos[2] = value[2];
+            this._gotWorldPos = true;
+        } else {
+            this._gotWorldPos = false;
+        }
+    }
 
-        if (this.size) {
-            width = this.size[0];
-            height = this.size[1];
+    /**
+     * Picked View-space point on surface.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property viewPos
+     * @type {Number[]}
+     */
+    get viewPos() {
+        return this.entity && this._gotViewPos ? this._viewPos : null;
+    }
 
+    /**
+     * @private
+     * @param value
+     */
+    set viewPos(value) {
+        if (value) {
+            this._viewPos[0] = value[0];
+            this._viewPos[1] = value[1];
+            this._viewPos[2] = value[2];
+            this._gotViewPos = true;
         } else {
-            width = gl.drawingBufferWidth;
-            height = gl.drawingBufferHeight;
+            this._gotViewPos = false;
         }
+    }
 
-        if (this.buffer) {
-
-            if (this.buffer.width === width && this.buffer.height === height) {
-                return;
+    /**
+     * Barycentric coordinate within picked triangle.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property bary
+     * @type {Number[]}
+     */
+    get bary() {
+        return this.entity && this._gotBary ? this._bary : null;
+    }
 
-            } else {
-                gl.deleteTexture(this.buffer.texture);
-                gl.deleteFramebuffer(this.buffer.framebuf);
-                gl.deleteRenderbuffer(this.buffer.renderbuf);
-            }
+    /**
+     * @private
+     * @param value
+     */
+    set bary(value) {
+        if (value) {
+            this._bary[0] = value[0];
+            this._bary[1] = value[1];
+            this._bary[2] = value[2];
+            this._gotBary = true;
+        } else {
+            this._gotBary = false;
         }
+    }
 
-        const colorTexture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-
-        let depthTexture;
+    /**
+     * Normal vector at picked position on surface.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property worldNormal
+     * @type {Number[]}
+     */
+    get worldNormal() {
+        return this.entity && this._gotWorldNormal ? this._worldNormal : null;
+    }
 
-        if (this._hasDepthTexture) {
-            depthTexture = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, depthTexture);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
+    /**
+     * @private
+     * @param value
+     */
+    set worldNormal(value) {
+        if (value) {
+            this._worldNormal[0] = value[0];
+            this._worldNormal[1] = value[1];
+            this._worldNormal[2] = value[2];
+            this._gotWorldNormal = true;
+        } else {
+            this._gotWorldNormal = false;
         }
+    }
 
-        const renderbuf = gl.createRenderbuffer();
-        gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuf);
-        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
-
-        const framebuf = gl.createFramebuffer();
-        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
+    /**
+     * UV coordinates at picked position on surface.
+     * Only defined when an entity and a point on its surface was picked.
+     * @property uv
+     * @type {Number[]}
+     */
+    get uv() {
+        return this.entity && this._gotUV ? this._uv : null;
+    }
 
-        if (this._hasDepthTexture) {
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
+    /**
+     * @private
+     * @param value
+     */
+    set uv(value) {
+        if (value) {
+            this._uv[0] = value[0];
+            this._uv[1] = value[1];
+            this._gotUV = true;
         } else {
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuf);
+            this._gotUV = false;
         }
+    }
 
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    /**
+     * @private
+     */
+    reset() {
+        this.entity = null;
+        this.primIndex = -1;
+        this.primitive = null;
+        this.pickSurfacePrecision = false;
+        this._gotCanvasPos = false;
+        this._gotOrigin = false;
+        this._gotDirection = false;
+        this._gotIndices = false;
+        this._gotLocalPos = false;
+        this._gotWorldPos = false;
+        this._gotViewPos = false;
+        this._gotBary = false;
+        this._gotWorldNormal = false;
+        this._gotUV = false;
+    }
+}
 
-        // Verify framebuffer is OK
+/**
+ * @desc Represents a vertex or fragment stage within a {@link Program}.
+ * @private
+ */
+class Shader {
 
-        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
-        if (!gl.isFramebuffer(framebuf)) {
-            throw "Invalid framebuffer";
-        }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    constructor(gl, type, source) {
 
-        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+        this.allocated = false;
+        this.compiled = false;
+        this.handle = gl.createShader(type);
 
-        switch (status) {
+        if (!this.handle) {
+            this.errors = [
+                "Failed to allocate"
+            ];
+            return;
+        }
 
-            case gl.FRAMEBUFFER_COMPLETE:
-                break;
+        this.allocated = true;
 
-            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_ATTACHMENT";
+        gl.shaderSource(this.handle, source);
+        gl.compileShader(this.handle);
 
-            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT";
+        this.compiled = gl.getShaderParameter(this.handle, gl.COMPILE_STATUS);
 
-            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_DIMENSIONS";
+        if (!this.compiled) {
 
-            case gl.FRAMEBUFFER_UNSUPPORTED:
-                throw "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED";
+            if (!gl.isContextLost()) { // Handled explicitly elsewhere, so won't re-handle here
 
-            default:
-                throw "Incomplete framebuffer: " + status;
+                const lines = source.split("\n");
+                const numberedLines = [];
+                for (let i = 0; i < lines.length; i++) {
+                    numberedLines.push((i + 1) + ": " + lines[i] + "\n");
+                }
+                this.errors = [];
+                this.errors.push("");
+                this.errors.push(gl.getShaderInfoLog(this.handle));
+                this.errors = this.errors.concat(numberedLines.join(""));
+            }
         }
+    }
 
-        this.buffer = {
-            framebuf: framebuf,
-            renderbuf: renderbuf,
-            texture: colorTexture,
-            depthTexture: depthTexture,
-            width: width,
-            height: height
-        };
+    destroy() {
 
-        this.bound = false;
     }
+}
 
-    clear() {
-        if (!this.bound) {
-            throw "Render buffer not bound";
-        }
-        const gl = this.gl;
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+/**
+ * @desc A low-level component that represents a WebGL Sampler.
+ * @private
+ */
+class Sampler {
+
+    constructor(gl, location) {
+        this.bindTexture = function (texture, unit) {
+            if (texture.bind(unit)) {
+                gl.uniform1i(location, unit);
+                return true;
+            }
+            return false;
+        };
     }
+}
 
-    read(pickX, pickY) {
-        const x = pickX;
-        const y = this.gl.drawingBufferHeight - pickY;
-        const pix = new Uint8Array(4);
-        const gl = this.gl;
-        gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);
-        return pix;
+/**
+ * @desc Represents a WebGL vertex attribute buffer (VBO).
+ * @private
+ * @param gl {WebGLRenderingContext} The WebGL rendering context.
+ */
+class Attribute {
+
+    constructor(gl, location) {
+        this._gl = gl;
+        this.location = location;
     }
 
-    readImage(params) {
+    bindArrayBuffer(arrayBuf) {
+        if (!arrayBuf) {
+            return;
+        }
+        arrayBuf.bind();
+        this._gl.enableVertexAttribArray(this.location);
+        this._gl.vertexAttribPointer(this.location, arrayBuf.itemSize, arrayBuf.itemType, arrayBuf.normalized, arrayBuf.stride, arrayBuf.offset);
+    }
+}
 
-        const gl = this.gl;
-        const imageDataCache = this._getImageDataCache();
-        const pixelData = imageDataCache.pixelData;
-        const canvas = imageDataCache.canvas;
-        const imageData = imageDataCache.imageData;
-        const context = imageDataCache.context;
+const ids$4 = new Map$1({});
 
-        gl.readPixels(0, 0, this.buffer.width, this.buffer.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+function joinSansComments(srcLines) {
+    const src = [];
+    let line;
+    let n;
+    for (let i = 0, len = srcLines.length; i < len; i++) {
+        line = srcLines[i];
+        n = line.indexOf("/");
+        if (n > 0) {
+            if (line.charAt(n + 1) === "/") {
+                line = line.substring(0, n);
+            }
+        }
+        src.push(line);
+    }
+    return src.join("\n");
+}
 
-        imageData.data.set(pixelData);
-        context.putImageData(imageData, 0, 0);
+function logErrors(errors) {
+    console.error(errors.join("\n"));
+}
 
-        const imageWidth = params.width || canvas.width;
-        const imageHeight = params.height || canvas.height;
-        const format = params.format || "jpeg";
-        const flipy = true; // Account for WebGL texture flipping
+/**
+ * @desc Represents a WebGL program.
+ * @private
+ */
+class Program {
 
-        let image;
+    constructor(gl, shaderSource) {
+        this.id = ids$4.addItem({});
+        this.source = shaderSource;
+        this.init(gl);
+    }
 
-        switch (format) {
-            case "jpeg":
-                image = Canvas2Image.saveAsJPEG(canvas, true, imageWidth, imageHeight, flipy);
-                break;
-            case "png":
-                image = Canvas2Image.saveAsPNG(canvas, true, imageWidth, imageHeight, flipy);
-                break;
-            case "bmp":
-                image = Canvas2Image.saveAsBMP(canvas, true, imageWidth, imageHeight, flipy);
-                break;
-            default:
-                console.error("Unsupported image format: '" + format + "' - supported types are 'jpeg', 'bmp' and 'png' - defaulting to 'jpeg'");
-                image = Canvas2Image.saveAsJPEG(canvas, true, imageWidth, imageHeight, flipy);
+    init(gl) {
+        this.gl = gl;
+        this.allocated = false;
+        this.compiled = false;
+        this.linked = false;
+        this.validated = false;
+        this.errors = null;
+        this.uniforms = {};
+        this.samplers = {};
+        this.attributes = {};
+        this._vertexShader = new Shader(gl, gl.VERTEX_SHADER, joinSansComments(this.source.vertex));
+        this._fragmentShader = new Shader(gl, gl.FRAGMENT_SHADER, joinSansComments(this.source.fragment));
+        if (!this._vertexShader.allocated) {
+            this.errors = ["Vertex shader failed to allocate"].concat(this._vertexShader.errors);
+            logErrors(this.errors);
+            return;
+        }
+        if (!this._fragmentShader.allocated) {
+            this.errors = ["Fragment shader failed to allocate"].concat(this._fragmentShader.errors);
+            logErrors(this.errors);
+            return;
+        }
+        this.allocated = true;
+        if (!this._vertexShader.compiled) {
+            this.errors = ["Vertex shader failed to compile"].concat(this._vertexShader.errors);
+            logErrors(this.errors);
+            return;
+        }
+        if (!this._fragmentShader.compiled) {
+            this.errors = ["Fragment shader failed to compile"].concat(this._fragmentShader.errors);
+            logErrors(this.errors);
+            return;
+        }
+        this.compiled = true;
+        let a;
+        let i;
+        let u;
+        let uName;
+        let location;
+        this.handle = gl.createProgram();
+        if (!this.handle) {
+            this.errors = ["Failed to allocate program"];
+            return;
+        }
+        gl.attachShader(this.handle, this._vertexShader.handle);
+        gl.attachShader(this.handle, this._fragmentShader.handle);
+        gl.linkProgram(this.handle);
+        this.linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
+        // HACK: Disable validation temporarily: https://github.com/xeolabs/xeokit/issues/5
+        // Perhaps we should defer validation until render-time, when the program has values set for all inputs?
+        this.validated = true;
+        if (!this.linked || !this.validated) {
+            this.errors = [];
+            this.errors.push("");
+            this.errors.push(gl.getProgramInfoLog(this.handle));
+            this.errors.push("\nVertex shader:\n");
+            this.errors = this.errors.concat(this.source.vertex);
+            this.errors.push("\nFragment shader:\n");
+            this.errors = this.errors.concat(this.source.fragment);
+            logErrors(this.errors);
+            return;
         }
-
-        return image.src;
-    }
-
-    _getImageDataCache() {
-
-        const bufferWidth = this.buffer.width;
-        const bufferHeight = this.buffer.height;
-
-        let imageDataCache = this._imageDataCache;
-
-        if (imageDataCache) {
-            if (imageDataCache.width !== bufferWidth || imageDataCache.height !== bufferHeight) {
-                this._imageDataCache = null;
-                imageDataCache = null;
+        const numUniforms = gl.getProgramParameter(this.handle, gl.ACTIVE_UNIFORMS);
+        for (i = 0; i < numUniforms; ++i) {
+            u = gl.getActiveUniform(this.handle, i);
+            if (u) {
+                uName = u.name;
+                if (uName[uName.length - 1] === "\u0000") {
+                    uName = uName.substr(0, uName.length - 1);
+                }
+                location = gl.getUniformLocation(this.handle, uName);
+                if ((u.type === gl.SAMPLER_2D) || (u.type === gl.SAMPLER_CUBE) || (u.type === 35682)) {
+                    this.samplers[uName] = new Sampler(gl, location);
+                } else {
+                    this.uniforms[uName] = location;
+                }
             }
         }
-
-        if (!imageDataCache) {
-
-            const canvas = document.createElement('canvas');
-            canvas.width = bufferWidth;
-            canvas.height = bufferHeight;
-
-            const context = canvas.getContext('2d');
-            const imageData = context.createImageData(bufferWidth, bufferHeight);
-
-            imageDataCache = {
-                pixelData: new Uint8Array(bufferWidth * bufferHeight * 4),
-                canvas: canvas,
-                context: context,
-                imageData: imageData,
-                width: bufferWidth,
-                height: bufferHeight
-            };
-
-            this._imageDataCache = imageDataCache;
+        const numAttribs = gl.getProgramParameter(this.handle, gl.ACTIVE_ATTRIBUTES);
+        for (i = 0; i < numAttribs; i++) {
+            a = gl.getActiveAttrib(this.handle, i);
+            if (a) {
+                location = gl.getAttribLocation(this.handle, a.name);
+                this.attributes[a.name] = new Attribute(gl, location);
+            }
         }
-
-        return imageDataCache;
+        this.allocated = true;
     }
 
-    unbind() {
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        this.bound = false;
+    bind() {
+        if (!this.allocated) {
+            return;
+        }
+        this.gl.useProgram(this.handle);
     }
 
-    getTexture() {
-        const self = this;
-        return this._texture || (this._texture = {
-            renderBuffer: this,
-            bind: function (unit) {
-                if (self.buffer && self.buffer.texture) {
-                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
-                    self.gl.bindTexture(self.gl.TEXTURE_2D, self.buffer.texture);
-                    return true;
-                }
-                return false;
-            },
-            unbind: function (unit) {
-                if (self.buffer && self.buffer.texture) {
-                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
-                    self.gl.bindTexture(self.gl.TEXTURE_2D, null);
-                }
-            }
-        });
+    getLocation(name) {
+        if (!this.allocated) {
+            return;
+        }
+        return this.uniforms[name];
     }
 
-    hasDepthTexture() {
-        return this._hasDepthTexture;
+    getAttribute(name) {
+        if (!this.allocated) {
+            return;
+        }
+        return this.attributes[name];
     }
 
-    getDepthTexture() {
-        if (!this._hasDepthTexture) {
-            return null;
+    bindTexture(name, texture, unit) {
+        if (!this.allocated) {
+            return false;
+        }
+        const sampler = this.samplers[name];
+        if (sampler) {
+            return sampler.bindTexture(texture, unit);
+        } else {
+            return false;
         }
-        const self = this;
-        return this._depthTexture || (this._dethTexture = {
-            renderBuffer: this,
-            bind: function (unit) {
-                if (self.buffer && self.buffer.depthTexture) {
-                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
-                    self.gl.bindTexture(self.gl.TEXTURE_2D, self.buffer.depthTexture);
-                    return true;
-                }
-                return false;
-            },
-            unbind: function (unit) {
-                if (self.buffer && self.buffer.depthTexture) {
-                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
-                    self.gl.bindTexture(self.gl.TEXTURE_2D, null);
-                }
-            }
-        });
     }
 
     destroy() {
-        if (this.allocated) {
-            const gl = this.gl;
-            gl.deleteTexture(this.buffer.texture);
-            gl.deleteTexture(this.buffer.depthTexture);
-            gl.deleteFramebuffer(this.buffer.framebuf);
-            gl.deleteRenderbuffer(this.buffer.renderbuf);
-            this.allocated = false;
-            this.buffer = null;
-            this.bound = false;
+        if (!this.allocated) {
+            return;
         }
-        this._imageDataCache = null;
-        this._texture = null;
-        this._depthTexture = null;
+        ids$4.removeItem(this.id);
+        this.gl.deleteProgram(this.handle);
+        this.gl.deleteShader(this._vertexShader.handle);
+        this.gl.deleteShader(this._fragmentShader.handle);
+        this.handle = null;
+        this.attributes = null;
+        this.uniforms = null;
+        this.samplers = null;
+        this.allocated = false;
     }
 }
 
-/**
- * @desc Pick result returned by {@link Scene#pick}.
+/*
+ * Canvas2Image v0.1
+ * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com
+ * MIT License [http://www.opensource.org/licenses/mit-license.php]
  *
+ * Modified by @xeolabs to permit vertical flipping, so that snapshot can be taken from WebGL frame buffers,
+ * which vertically flip image data as part of the way that WebGL renders textures.
  */
-class PickResult {
 
-    /**
-     * @private
-     * @param value
-     */
-    constructor() {
+/**
+ * @private
+ */
+const Canvas2Image = (function () {
+    // check if we have canvas support
+    const oCanvas = document.createElement("canvas"), sc = String.fromCharCode;
 
-        /**
-         * Picked entity.
-         * Null when no entity was picked.
-         * @property entity
-         * @type {Entity|*}
-         */
-        this.entity = null;
+    // no canvas, bail out.
+    if (!oCanvas.getContext) {
+        return {
+            saveAsBMP: function () {
+            },
+            saveAsPNG: function () {
+            },
+            saveAsJPEG: function () {
+            }
+        }
+    }
+
+    const bHasImageData = !!(oCanvas.getContext("2d").getImageData), bHasDataURL = !!(oCanvas.toDataURL),
+        bHasBase64 = !!(window.btoa);
+
+    // ok, we're good
+    const readCanvasData = function (oCanvas) {
+        const iWidth = parseInt(oCanvas.width), iHeight = parseInt(oCanvas.height);
+        return oCanvas.getContext("2d").getImageData(0, 0, iWidth, iHeight);
+    };
+
+    // base64 encodes either a string or an array of charcodes
+    const encodeData = function (data) {
+        let i, aData, strData = "";
+
+        if (typeof data == "string") {
+            strData = data;
+        } else {
+            aData = data;
+            for (i = 0; i < aData.length; i++) {
+                strData += sc(aData[i]);
+            }
+        }
+        return btoa(strData);
+    };
+
+    // creates a base64 encoded string containing BMP data takes an imagedata object as argument
+    const createBMP = function (oData) {
+        let strHeader = '';
+        const iWidth = oData.width;
+        const iHeight = oData.height;
+
+        strHeader += 'BM';
+
+        let iFileSize = iWidth * iHeight * 4 + 54; // total header size = 54 bytes
+        strHeader += sc(iFileSize % 256);
+        iFileSize = Math.floor(iFileSize / 256);
+        strHeader += sc(iFileSize % 256);
+        iFileSize = Math.floor(iFileSize / 256);
+        strHeader += sc(iFileSize % 256);
+        iFileSize = Math.floor(iFileSize / 256);
+        strHeader += sc(iFileSize % 256);
+
+        strHeader += sc(0, 0, 0, 0, 54, 0, 0, 0); // data offset
+        strHeader += sc(40, 0, 0, 0); // info header size
+
+        let iImageWidth = iWidth;
+        strHeader += sc(iImageWidth % 256);
+        iImageWidth = Math.floor(iImageWidth / 256);
+        strHeader += sc(iImageWidth % 256);
+        iImageWidth = Math.floor(iImageWidth / 256);
+        strHeader += sc(iImageWidth % 256);
+        iImageWidth = Math.floor(iImageWidth / 256);
+        strHeader += sc(iImageWidth % 256);
+
+        let iImageHeight = iHeight;
+        strHeader += sc(iImageHeight % 256);
+        iImageHeight = Math.floor(iImageHeight / 256);
+        strHeader += sc(iImageHeight % 256);
+        iImageHeight = Math.floor(iImageHeight / 256);
+        strHeader += sc(iImageHeight % 256);
+        iImageHeight = Math.floor(iImageHeight / 256);
+        strHeader += sc(iImageHeight % 256);
 
-        /**
-         * Type of primitive that was picked - usually "triangle".
-         * Null when no primitive was picked.
-         * @property primitive
-         * @type {String}
-         */
-        this.primitive = null;
+        strHeader += sc(1, 0, 32, 0); // num of planes & num of bits per pixel
+        strHeader += sc(0, 0, 0, 0); // compression = none
 
-        /**
-         * Index of primitive that was picked.
-         * -1 when no entity was picked.
-         * @property primIndex
-         * @type {number}
-         */
-        this.primIndex = -1;
+        let iDataSize = iWidth * iHeight * 4;
+        strHeader += sc(iDataSize % 256);
+        iDataSize = Math.floor(iDataSize / 256);
+        strHeader += sc(iDataSize % 256);
+        iDataSize = Math.floor(iDataSize / 256);
+        strHeader += sc(iDataSize % 256);
+        iDataSize = Math.floor(iDataSize / 256);
+        strHeader += sc(iDataSize % 256);
 
-        /**
-         * True when the picked surface position is full precision.
-         * When false, the picked surface position should be regarded as approximate.
-         * Full-precision surface picking is performed with the {@link Scene#pick} method's ````pickSurfacePrecision```` option.
-         * @property pickSurfacePrecision
-         * @type {Boolean}
-         */
-        this.pickSurfacePrecision = false;
+        strHeader += sc(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); // these bytes are not used
 
-        this._canvasPos = new Int16Array([0, 0]);
-        this._origin = new Float64Array([0, 0, 0]);
-        this._direction = new Float64Array([0, 0, 0]);
-        this._indices = new Int32Array(3);
-        this._localPos = new Float64Array([0, 0, 0]);
-        this._worldPos = new Float64Array([0, 0, 0]);
-        this._viewPos = new Float64Array([0, 0, 0]);
-        this._bary = new Float64Array([0, 0, 0]);
-        this._worldNormal = new Float64Array([0, 0, 0]);
-        this._uv = new Float64Array([0, 0]);
+        const aImgData = oData.data;
+        let strPixelData = "";
+        let x;
+        let y = iHeight;
+        let iOffsetX;
+        let iOffsetY;
+        let strPixelRow;
 
-        this.reset();
-    }
+        do {
+            iOffsetY = iWidth * (y - 1) * 4;
+            strPixelRow = "";
+            for (x = 0; x < iWidth; x++) {
+                iOffsetX = 4 * x;
+                strPixelRow += sc(
+                    aImgData[iOffsetY + iOffsetX + 2], // B
+                    aImgData[iOffsetY + iOffsetX + 1], // G
+                    aImgData[iOffsetY + iOffsetX],     // R
+                    aImgData[iOffsetY + iOffsetX + 3]  // A
+                );
+            }
+            strPixelData += strPixelRow;
+        } while (--y);
 
-    /**
-     * Canvas coordinates when picking with a 2D pointer.
-     * @property canvasPos
-     * @type {Number[]}
-     */
-    get canvasPos() {
-        return this._gotCanvasPos ? this._canvasPos : null;
-    }
+        return encodeData(strHeader + strPixelData);
+    };
 
-    /**
-     * @private
-     * @param value
-     */
-    set canvasPos(value) {
-        if (value) {
-            this._canvasPos[0] = value[0];
-            this._canvasPos[1] = value[1];
-            this._gotCanvasPos = true;
-        } else {
-            this._gotCanvasPos = false;
+    // sends the generated file to the client
+    const saveFile = function (strData) {
+        if (!window.open(strData)) {
+            document.location.href = strData;
         }
-    }
+    };
 
-    /**
-     * World-space 3D ray origin when raypicked.
-     * @property origin
-     * @type {Number[]}
-     */
-    get origin() {
-        return this._gotOrigin ? this._origin : null;
-    }
+    const makeDataURI = function (strData, strMime) {
+        return "data:" + strMime + ";base64," + strData;
+    };
 
-    /**
-     * @private
-     * @param value
-     */
-    set origin(value) {
-        if (value) {
-            this._origin[0] = value[0];
-            this._origin[1] = value[1];
-            this._origin[2] = value[2];
-            this._gotOrigin = true;
-        } else {
-            this._gotOrigin = false;
+    // generates a <img> object containing the imagedata
+    const makeImageObject = function (strSource) {
+        const oImgElement = document.createElement("img");
+        oImgElement.src = strSource;
+        return oImgElement;
+    };
+
+    const scaleCanvas = function (oCanvas, iWidth, iHeight, flipy) {
+        if (iWidth && iHeight) {
+            const oSaveCanvas = document.createElement("canvas");
+            oSaveCanvas.width = iWidth;
+            oSaveCanvas.height = iHeight;
+            oSaveCanvas.style.width = iWidth + "px";
+            oSaveCanvas.style.height = iHeight + "px";
+            const oSaveCtx = oSaveCanvas.getContext("2d");
+            if (flipy) {
+                oSaveCtx.save();
+                oSaveCtx.scale(1.0, -1.0);
+                oSaveCtx.imageSmoothingEnabled = true;
+                oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, -iHeight);
+                oSaveCtx.restore();
+            } else {
+                oSaveCtx.imageSmoothingEnabled = true;
+                oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
+            }
+            return oSaveCanvas;
         }
-    }
+        return oCanvas;
+    };
 
-    /**
-     * World-space 3D ray direction when raypicked.
-     * @property direction
-     * @type {Number[]}
-     */
-    get direction() {
-        return this._gotDirection ? this._direction : null;
-    }
+    return {
+        saveAsPNG: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
+            if (!bHasDataURL) return false;
+            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
+            const strMime = "image/png";
+            const strData = oScaledCanvas.toDataURL(strMime);
+            if (bReturnImg) {
+                return makeImageObject(strData);
+            } else {
+                saveFile(strData);
+            }
+            return true;
+        },
 
-    /**
-     * @private
-     * @param value
-     */
-    set direction(value) {
-        if (value) {
-            this._direction[0] = value[0];
-            this._direction[1] = value[1];
-            this._direction[2] = value[2];
-            this._gotDirection = true;
-        } else {
-            this._gotDirection = false;
-        }
-    }
-    
-    /**
-     * Picked triangle's vertex indices.
-     * Only defined when an entity and triangle was picked.
-     * @property indices
-     * @type {Int32Array}
-     */
-    get indices() {
-        return this.entity && this._gotIndices ? this._indices : null;
-    }
+        saveAsJPEG: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
+            if (!bHasDataURL) return false;
+            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
+            const strMime = "image/jpeg";
+            const strData = oScaledCanvas.toDataURL(strMime);
+            // check if browser actually supports jpeg by looking for the mime type in the data uri. if not, return false
+            if (strData.indexOf(strMime) != 5) return false;
+            if (bReturnImg) {
+                return makeImageObject(strData);
+            } else {
+                saveFile(strData);
+            }
+            return true;
+        },
 
-    /**
-     * @private
-     * @param value
-     */
-    set indices(value) {
-        if (value) {
-            this._indices[0] = value[0];
-            this._indices[1] = value[1];
-            this._indices[2] = value[2];
-            this._gotIndices = true;
-        } else {
-            this._gotIndices = false;
+        saveAsBMP: function (oCanvas, bReturnImg, iWidth, iHeight, flipy) {
+            if (!(bHasDataURL && bHasImageData && bHasBase64)) return false;
+            const oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight, flipy);
+            const strMime = "image/bmp";
+            const oData = readCanvasData(oScaledCanvas), strImgData = createBMP(oData);
+            if (bReturnImg) {
+                return makeImageObject(makeDataURI(strImgData, strMime));
+            } else {
+                saveFile(makeDataURI(strImgData, strMime));
+            }
+            return true;
         }
-    }
+    };
+})();
 
-    /**
-     * Picked Local-space point on surface.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property localPos
-     * @type {Number[]}
-     */
-    get localPos() {
-        return this.entity && this._gotLocalPos ? this._localPos : null;
+/**
+ * @desc Represents a WebGL render buffer.
+ * @private
+ */
+class RenderBuffer {
+
+    constructor(canvas, gl, options) {
+        options = options || {};
+        this.gl = gl;
+        this.allocated = false;
+        this.canvas = canvas;
+        this.buffer = null;
+        this.bound = false;
+        this.size = options.size;
+        this._hasDepthTexture = !!options.depthTexture;
     }
 
-    /**
-     * @private
-     * @param value
-     */
-    set localPos(value) {
-        if (value) {
-            this._localPos[0] = value[0];
-            this._localPos[1] = value[1];
-            this._localPos[2] = value[2];
-            this._gotLocalPos = true;
-        } else {
-            this._gotLocalPos = false;
-        }
+    setSize(size) {
+        this.size = size;
     }
 
-    /**
-     * Picked World-space point on surface.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property worldPos
-     * @type {Number[]}
-     */
-    get worldPos() {
-        return this.entity && this._gotWorldPos ? this._worldPos : null;
+    webglContextRestored(gl) {
+        this.gl = gl;
+        this.buffer = null;
+        this.allocated = false;
+        this.bound = false;
     }
 
-    /**
-     * @private
-     * @param value
-     */
-    set worldPos(value) {
-        if (value) {
-            this._worldPos[0] = value[0];
-            this._worldPos[1] = value[1];
-            this._worldPos[2] = value[2];
-            this._gotWorldPos = true;
-        } else {
-            this._gotWorldPos = false;
+    bind() {
+        this._touch();
+        if (this.bound) {
+            return;
         }
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
+        this.bound = true;
     }
 
-    /**
-     * Picked View-space point on surface.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property viewPos
-     * @type {Number[]}
-     */
-    get viewPos() {
-        return this.entity && this._gotViewPos ? this._viewPos : null;
-    }
+    _touch() {
+
+        let width;
+        let height;
+        const gl = this.gl;
+
+        if (this.size) {
+            width = this.size[0];
+            height = this.size[1];
 
-    /**
-     * @private
-     * @param value
-     */
-    set viewPos(value) {
-        if (value) {
-            this._viewPos[0] = value[0];
-            this._viewPos[1] = value[1];
-            this._viewPos[2] = value[2];
-            this._gotViewPos = true;
         } else {
-            this._gotViewPos = false;
+            width = gl.drawingBufferWidth;
+            height = gl.drawingBufferHeight;
         }
-    }
 
-    /**
-     * Barycentric coordinate within picked triangle.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property bary
-     * @type {Number[]}
-     */
-    get bary() {
-        return this.entity && this._gotBary ? this._bary : null;
-    }
+        if (this.buffer) {
 
-    /**
-     * @private
-     * @param value
-     */
-    set bary(value) {
-        if (value) {
-            this._bary[0] = value[0];
-            this._bary[1] = value[1];
-            this._bary[2] = value[2];
-            this._gotBary = true;
-        } else {
-            this._gotBary = false;
+            if (this.buffer.width === width && this.buffer.height === height) {
+                return;
+
+            } else {
+                gl.deleteTexture(this.buffer.texture);
+                gl.deleteFramebuffer(this.buffer.framebuf);
+                gl.deleteRenderbuffer(this.buffer.renderbuf);
+            }
         }
-    }
 
-    /**
-     * Normal vector at picked position on surface.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property worldNormal
-     * @type {Number[]}
-     */
-    get worldNormal() {
-        return this.entity && this._gotWorldNormal ? this._worldNormal : null;
-    }
+        const colorTexture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
 
-    /**
-     * @private
-     * @param value
-     */
-    set worldNormal(value) {
-        if (value) {
-            this._worldNormal[0] = value[0];
-            this._worldNormal[1] = value[1];
-            this._worldNormal[2] = value[2];
-            this._gotWorldNormal = true;
-        } else {
-            this._gotWorldNormal = false;
+        let depthTexture;
+
+        if (this._hasDepthTexture) {
+            depthTexture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
         }
-    }
 
-    /**
-     * UV coordinates at picked position on surface.
-     * Only defined when an entity and a point on its surface was picked.
-     * @property uv
-     * @type {Number[]}
-     */
-    get uv() {
-        return this.entity && this._gotUV ? this._uv : null;
-    }
+        const renderbuf = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuf);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
 
-    /**
-     * @private
-     * @param value
-     */
-    set uv(value) {
-        if (value) {
-            this._uv[0] = value[0];
-            this._uv[1] = value[1];
-            this._gotUV = true;
+        const framebuf = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);
+
+        if (this._hasDepthTexture) {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
         } else {
-            this._gotUV = false;
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuf);
         }
-    }
 
-    /**
-     * @private
-     */
-    reset() {
-        this.entity = null;
-        this.primIndex = -1;
-        this.primitive = null;
-        this.pickSurfacePrecision = false;
-        this._gotCanvasPos = false;
-        this._gotOrigin = false;
-        this._gotDirection = false;
-        this._gotIndices = false;
-        this._gotLocalPos = false;
-        this._gotWorldPos = false;
-        this._gotViewPos = false;
-        this._gotBary = false;
-        this._gotWorldNormal = false;
-        this._gotUV = false;
-    }
-}
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-/**
- * @desc Represents a vertex or fragment stage within a {@link Program}.
- * @private
- */
-class Shader {
+        // Verify framebuffer is OK
 
-    constructor(gl, type, source) {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
+        if (!gl.isFramebuffer(framebuf)) {
+            throw "Invalid framebuffer";
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-        this.allocated = false;
-        this.compiled = false;
-        this.handle = gl.createShader(type);
+        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
 
-        if (!this.handle) {
-            this.errors = [
-                "Failed to allocate"
-            ];
-            return;
-        }
+        switch (status) {
 
-        this.allocated = true;
+            case gl.FRAMEBUFFER_COMPLETE:
+                break;
 
-        gl.shaderSource(this.handle, source);
-        gl.compileShader(this.handle);
+            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_ATTACHMENT";
 
-        this.compiled = gl.getShaderParameter(this.handle, gl.COMPILE_STATUS);
+            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT";
 
-        if (!this.compiled) {
+            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_DIMENSIONS";
 
-            if (!gl.isContextLost()) { // Handled explicitly elsewhere, so won't re-handle here
+            case gl.FRAMEBUFFER_UNSUPPORTED:
+                throw "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED";
 
-                const lines = source.split("\n");
-                const numberedLines = [];
-                for (let i = 0; i < lines.length; i++) {
-                    numberedLines.push((i + 1) + ": " + lines[i] + "\n");
-                }
-                this.errors = [];
-                this.errors.push("");
-                this.errors.push(gl.getShaderInfoLog(this.handle));
-                this.errors = this.errors.concat(numberedLines.join(""));
-            }
+            default:
+                throw "Incomplete framebuffer: " + status;
         }
+
+        this.buffer = {
+            framebuf: framebuf,
+            renderbuf: renderbuf,
+            texture: colorTexture,
+            depthTexture: depthTexture,
+            width: width,
+            height: height
+        };
+
+        this.bound = false;
     }
 
-    destroy() {
+    clear() {
+        if (!this.bound) {
+            throw "Render buffer not bound";
+        }
+        const gl = this.gl;
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+    }
 
+    read(pickX, pickY) {
+        const x = pickX;
+        const y = this.gl.drawingBufferHeight - pickY;
+        const pix = new Uint8Array(4);
+        const gl = this.gl;
+        gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pix);
+        return pix;
     }
-}
 
-/**
- * @desc A low-level component that represents a WebGL Sampler.
- * @private
- */
-class Sampler {
+    readImage(params) {
 
-    constructor(gl, location) {
-        this.bindTexture = function (texture, unit) {
-            if (texture.bind(unit)) {
-                gl.uniform1i(location, unit);
-                return true;
-            }
-            return false;
-        };
-    }
-}
+        const gl = this.gl;
+        const imageDataCache = this._getImageDataCache();
+        const pixelData = imageDataCache.pixelData;
+        const canvas = imageDataCache.canvas;
+        const imageData = imageDataCache.imageData;
+        const context = imageDataCache.context;
 
-/**
- * @desc Represents a WebGL vertex attribute buffer (VBO).
- * @private
- * @param gl {WebGLRenderingContext} The WebGL rendering context.
- */
-class Attribute {
+        gl.readPixels(0, 0, this.buffer.width, this.buffer.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
 
-    constructor(gl, location) {
-        this._gl = gl;
-        this.location = location;
-    }
+        imageData.data.set(pixelData);
+        context.putImageData(imageData, 0, 0);
 
-    bindArrayBuffer(arrayBuf) {
-        if (!arrayBuf) {
-            return;
-        }
-        arrayBuf.bind();
-        this._gl.enableVertexAttribArray(this.location);
-        this._gl.vertexAttribPointer(this.location, arrayBuf.itemSize, arrayBuf.itemType, arrayBuf.normalized, arrayBuf.stride, arrayBuf.offset);
-    }
-}
+        const imageWidth = params.width || canvas.width;
+        const imageHeight = params.height || canvas.height;
+        const format = params.format || "jpeg";
+        const flipy = true; // Account for WebGL texture flipping
 
-const ids$4 = new Map$1({});
+        let image;
 
-function joinSansComments(srcLines) {
-    const src = [];
-    let line;
-    let n;
-    for (let i = 0, len = srcLines.length; i < len; i++) {
-        line = srcLines[i];
-        n = line.indexOf("/");
-        if (n > 0) {
-            if (line.charAt(n + 1) === "/") {
-                line = line.substring(0, n);
-            }
+        switch (format) {
+            case "jpeg":
+                image = Canvas2Image.saveAsJPEG(canvas, true, imageWidth, imageHeight, flipy);
+                break;
+            case "png":
+                image = Canvas2Image.saveAsPNG(canvas, true, imageWidth, imageHeight, flipy);
+                break;
+            case "bmp":
+                image = Canvas2Image.saveAsBMP(canvas, true, imageWidth, imageHeight, flipy);
+                break;
+            default:
+                console.error("Unsupported image format: '" + format + "' - supported types are 'jpeg', 'bmp' and 'png' - defaulting to 'jpeg'");
+                image = Canvas2Image.saveAsJPEG(canvas, true, imageWidth, imageHeight, flipy);
         }
-        src.push(line);
+
+        return image.src;
     }
-    return src.join("\n");
-}
 
-function logErrors(errors) {
-    console.error(errors.join("\n"));
-}
+    _getImageDataCache() {
 
-/**
- * @desc Represents a WebGL program.
- * @private
- */
-class Program {
+        const bufferWidth = this.buffer.width;
+        const bufferHeight = this.buffer.height;
 
-    constructor(gl, shaderSource) {
-        this.id = ids$4.addItem({});
-        this.source = shaderSource;
-        this.init(gl);
-    }
+        let imageDataCache = this._imageDataCache;
 
-    init(gl) {
-        this.gl = gl;
-        this.allocated = false;
-        this.compiled = false;
-        this.linked = false;
-        this.validated = false;
-        this.errors = null;
-        this.uniforms = {};
-        this.samplers = {};
-        this.attributes = {};
-        this._vertexShader = new Shader(gl, gl.VERTEX_SHADER, joinSansComments(this.source.vertex));
-        this._fragmentShader = new Shader(gl, gl.FRAGMENT_SHADER, joinSansComments(this.source.fragment));
-        if (!this._vertexShader.allocated) {
-            this.errors = ["Vertex shader failed to allocate"].concat(this._vertexShader.errors);
-            logErrors(this.errors);
-            return;
-        }
-        if (!this._fragmentShader.allocated) {
-            this.errors = ["Fragment shader failed to allocate"].concat(this._fragmentShader.errors);
-            logErrors(this.errors);
-            return;
-        }
-        this.allocated = true;
-        if (!this._vertexShader.compiled) {
-            this.errors = ["Vertex shader failed to compile"].concat(this._vertexShader.errors);
-            logErrors(this.errors);
-            return;
-        }
-        if (!this._fragmentShader.compiled) {
-            this.errors = ["Fragment shader failed to compile"].concat(this._fragmentShader.errors);
-            logErrors(this.errors);
-            return;
-        }
-        this.compiled = true;
-        let a;
-        let i;
-        let u;
-        let uName;
-        let location;
-        this.handle = gl.createProgram();
-        if (!this.handle) {
-            this.errors = ["Failed to allocate program"];
-            return;
-        }
-        gl.attachShader(this.handle, this._vertexShader.handle);
-        gl.attachShader(this.handle, this._fragmentShader.handle);
-        gl.linkProgram(this.handle);
-        this.linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
-        // HACK: Disable validation temporarily: https://github.com/xeolabs/xeokit/issues/5
-        // Perhaps we should defer validation until render-time, when the program has values set for all inputs?
-        this.validated = true;
-        if (!this.linked || !this.validated) {
-            this.errors = [];
-            this.errors.push("");
-            this.errors.push(gl.getProgramInfoLog(this.handle));
-            this.errors.push("\nVertex shader:\n");
-            this.errors = this.errors.concat(this.source.vertex);
-            this.errors.push("\nFragment shader:\n");
-            this.errors = this.errors.concat(this.source.fragment);
-            logErrors(this.errors);
-            return;
-        }
-        const numUniforms = gl.getProgramParameter(this.handle, gl.ACTIVE_UNIFORMS);
-        for (i = 0; i < numUniforms; ++i) {
-            u = gl.getActiveUniform(this.handle, i);
-            if (u) {
-                uName = u.name;
-                if (uName[uName.length - 1] === "\u0000") {
-                    uName = uName.substr(0, uName.length - 1);
-                }
-                location = gl.getUniformLocation(this.handle, uName);
-                if ((u.type === gl.SAMPLER_2D) || (u.type === gl.SAMPLER_CUBE) || (u.type === 35682)) {
-                    this.samplers[uName] = new Sampler(gl, location);
-                } else {
-                    this.uniforms[uName] = location;
-                }
+        if (imageDataCache) {
+            if (imageDataCache.width !== bufferWidth || imageDataCache.height !== bufferHeight) {
+                this._imageDataCache = null;
+                imageDataCache = null;
             }
         }
-        const numAttribs = gl.getProgramParameter(this.handle, gl.ACTIVE_ATTRIBUTES);
-        for (i = 0; i < numAttribs; i++) {
-            a = gl.getActiveAttrib(this.handle, i);
-            if (a) {
-                location = gl.getAttribLocation(this.handle, a.name);
-                this.attributes[a.name] = new Attribute(gl, location);
-            }
+
+        if (!imageDataCache) {
+
+            const canvas = document.createElement('canvas');
+            canvas.width = bufferWidth;
+            canvas.height = bufferHeight;
+
+            const context = canvas.getContext('2d');
+            const imageData = context.createImageData(bufferWidth, bufferHeight);
+
+            imageDataCache = {
+                pixelData: new Uint8Array(bufferWidth * bufferHeight * 4),
+                canvas: canvas,
+                context: context,
+                imageData: imageData,
+                width: bufferWidth,
+                height: bufferHeight
+            };
+
+            this._imageDataCache = imageDataCache;
         }
-        this.allocated = true;
+
+        return imageDataCache;
     }
 
-    bind() {
-        if (!this.allocated) {
-            return;
-        }
-        this.gl.useProgram(this.handle);
+    unbind() {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this.bound = false;
     }
 
-    getLocation(name) {
-        if (!this.allocated) {
-            return;
-        }
-        return this.uniforms[name];
+    getTexture() {
+        const self = this;
+        return this._texture || (this._texture = {
+            renderBuffer: this,
+            bind: function (unit) {
+                if (self.buffer && self.buffer.texture) {
+                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
+                    self.gl.bindTexture(self.gl.TEXTURE_2D, self.buffer.texture);
+                    return true;
+                }
+                return false;
+            },
+            unbind: function (unit) {
+                if (self.buffer && self.buffer.texture) {
+                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
+                    self.gl.bindTexture(self.gl.TEXTURE_2D, null);
+                }
+            }
+        });
     }
 
-    getAttribute(name) {
-        if (!this.allocated) {
-            return;
-        }
-        return this.attributes[name];
+    hasDepthTexture() {
+        return this._hasDepthTexture;
     }
 
-    bindTexture(name, texture, unit) {
-        if (!this.allocated) {
-            return false;
-        }
-        const sampler = this.samplers[name];
-        if (sampler) {
-            return sampler.bindTexture(texture, unit);
-        } else {
-            return false;
+    getDepthTexture() {
+        if (!this._hasDepthTexture) {
+            return null;
         }
+        const self = this;
+        return this._depthTexture || (this._dethTexture = {
+            renderBuffer: this,
+            bind: function (unit) {
+                if (self.buffer && self.buffer.depthTexture) {
+                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
+                    self.gl.bindTexture(self.gl.TEXTURE_2D, self.buffer.depthTexture);
+                    return true;
+                }
+                return false;
+            },
+            unbind: function (unit) {
+                if (self.buffer && self.buffer.depthTexture) {
+                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
+                    self.gl.bindTexture(self.gl.TEXTURE_2D, null);
+                }
+            }
+        });
     }
 
     destroy() {
-        if (!this.allocated) {
-            return;
+        if (this.allocated) {
+            const gl = this.gl;
+            gl.deleteTexture(this.buffer.texture);
+            gl.deleteTexture(this.buffer.depthTexture);
+            gl.deleteFramebuffer(this.buffer.framebuf);
+            gl.deleteRenderbuffer(this.buffer.renderbuf);
+            this.allocated = false;
+            this.buffer = null;
+            this.bound = false;
         }
-        ids$4.removeItem(this.id);
-        this.gl.deleteProgram(this.handle);
-        this.gl.deleteShader(this._vertexShader.handle);
-        this.gl.deleteShader(this._fragmentShader.handle);
-        this.handle = null;
-        this.attributes = null;
-        this.uniforms = null;
-        this.samplers = null;
-        this.allocated = false;
+        this._imageDataCache = null;
+        this._texture = null;
+        this._depthTexture = null;
     }
 }
 
@@ -14132,10 +14178,12 @@ const tempVec3a$_ = math.vec3();
  */
 class OcclusionTester {
 
-    constructor(scene) {
+    constructor(scene, renderBufferManager) {
 
         this._scene = scene;
 
+        this._renderBufferManager = renderBufferManager;
+
         this._occlusionLayers = {};
         this._occlusionLayersList = [];
         this._occlusionLayersListDirty = false;
@@ -14280,7 +14328,7 @@ class OcclusionTester {
         }
 
         {
-            this._readPixelBuf = this._readPixelBuf || (this._readPixelBuf = new RenderBuffer(this._scene.canvas.canvas, this._scene.canvas.gl));
+            this._readPixelBuf = this._renderBufferManager.getRenderBuffer("occlusionReadPix");
             this._readPixelBuf.bind();
             this._readPixelBuf.clear();
         }
@@ -14492,6 +14540,8 @@ class OcclusionTester {
 
         {
 
+            const resolutionScale = this._scene.canvas.resolutionScale;
+
             const markerR = MARKER_COLOR[0] * 255;
             const markerG = MARKER_COLOR[1] * 255;
             const markerB = MARKER_COLOR[2] * 255;
@@ -14504,7 +14554,7 @@ class OcclusionTester {
 
                     const marker = occlusionLayer.occlusionTestList[i];
                     const j = i * 2;
-                    const color = this._readPixelBuf.read(occlusionLayer.pixels[j], occlusionLayer.pixels[j + 1]);
+                    const color = this._readPixelBuf.read(Math.round(occlusionLayer.pixels[j] * resolutionScale), Math.round(occlusionLayer.pixels[j + 1] * resolutionScale));
                     const visible = (color[0] === markerR) && (color[1] === markerG) && (color[2] === markerB);
 
                     marker._setVisible(visible);
@@ -15234,6 +15284,37 @@ function createSampleOffsets(kernelRadius, uvIncrement) {
     return offsets;
 }
 
+/**
+ * @private
+ */
+class RenderBufferManager {
+
+    constructor(scene) {
+        this.scene = scene;
+        this._renderBuffersBasic = {};
+        this._renderBuffersScaled = {};
+    }
+
+    getRenderBuffer(id, options) {
+        const renderBuffers = (this.scene.canvas.resolutionScale === 1.0) ? this._renderBuffersBasic : this._renderBuffersScaled;
+        let renderBuffer = renderBuffers[id];
+        if (!renderBuffer) {
+            renderBuffer = new RenderBuffer(this.scene.canvas.canvas, this.scene.canvas.gl, options);
+            renderBuffers[id] = renderBuffer;
+        }
+        return renderBuffer;
+    }
+
+    destroy() {
+        for (let id in this._renderBuffersBasic) {
+            this._renderBuffersBasic[id].destroy();
+        }
+        for (let id in this._renderBuffersScaled) {
+            this._renderBuffersScaled[id].destroy();
+        }
+    }
+}
+
 /**
  * @private
  */
@@ -15256,14 +15337,12 @@ const Renderer = function (scene, options) {
     let stateSortDirty = true;
     let imageDirty = true;
 
-    const saoDepthRenderBuffer = new RenderBuffer(canvas, gl, {
-        depthTexture: WEBGL_INFO$1.SUPPORTED_EXTENSIONS["WEBGL_depth_texture"]
-    });
-    const occlusionRenderBuffer1 = new RenderBuffer(canvas, gl);
-    const occlusionRenderBuffer2 = new RenderBuffer(canvas, gl);
+    let transparentEnabled = true;
+    let edgesEnabled = true;
+    let saoEnabled = true;
+    let pbrEnabled = true;
 
-    const pickBuffer = new RenderBuffer(canvas, gl);
-    const snapshotBuffer = new RenderBuffer(canvas, gl);
+    const renderBufferManager = new RenderBufferManager(scene);
 
     let snapshotBound = false;
 
@@ -15272,6 +15351,26 @@ const Renderer = function (scene, options) {
 
     this._occlusionTester = null; // Lazy-created in #addMarker()
 
+    this.setTransparentEnabled = function (enabled) {
+        transparentEnabled = enabled;
+        imageDirty = true;
+    };
+
+    this.setEdgesEnabled = function (enabled) {
+        edgesEnabled = enabled;
+        imageDirty = true;
+    };
+
+    this.setSAOEnabled = function (enabled) {
+        saoEnabled = enabled;
+        imageDirty = true;
+    };
+
+    this.setPBREnabled = function (enabled) {
+        pbrEnabled = enabled;
+        imageDirty = true;
+    };
+
     this.needStateSort = function () {
         stateSortDirty = true;
     };
@@ -15288,11 +15387,7 @@ const Renderer = function (scene, options) {
 
     this.webglContextRestored = function (gl) {
 
-        pickBuffer.webglContextRestored(gl);
-        snapshotBuffer.webglContextRestored(gl);
-        saoDepthRenderBuffer.webglContextRestored(gl);
-        occlusionRenderBuffer1.webglContextRestored(gl);
-        occlusionRenderBuffer2.webglContextRestored(gl);
+        // renderBufferManager.webglContextRestored(gl);
 
         saoOcclusionRenderer.init();
         saoDepthLimitedBlurRenderer.init();
@@ -15477,7 +15572,7 @@ const Renderer = function (scene, options) {
 
         const sao = scene.sao;
 
-        if (sao.possible) {
+        if (saoEnabled && sao.possible) {
             drawSAOBuffers(params);
         }
 
@@ -15492,6 +15587,10 @@ const Renderer = function (scene, options) {
 
         // Render depth buffer
 
+        const saoDepthRenderBuffer = renderBufferManager.getRenderBuffer("saoDepth", {
+            depthTexture: WEBGL_INFO$1.SUPPORTED_EXTENSIONS["WEBGL_depth_texture"]
+        });
+
         saoDepthRenderBuffer.bind();
         saoDepthRenderBuffer.clear();
         drawDepth(params);
@@ -15499,6 +15598,8 @@ const Renderer = function (scene, options) {
 
         // Render occlusion buffer
 
+        const occlusionRenderBuffer1 = renderBufferManager.getRenderBuffer("saoOcclusion");
+
         occlusionRenderBuffer1.bind();
         occlusionRenderBuffer1.clear();
         saoOcclusionRenderer.render(saoDepthRenderBuffer);
@@ -15508,6 +15609,8 @@ const Renderer = function (scene, options) {
 
             // Horizontally blur occlusion buffer 1 into occlusion buffer 2
 
+            const occlusionRenderBuffer2 = renderBufferManager.getRenderBuffer("saoOcclusion2");
+
             occlusionRenderBuffer2.bind();
             occlusionRenderBuffer2.clear();
             saoDepthLimitedBlurRenderer.render(saoDepthRenderBuffer, occlusionRenderBuffer1, 0);
@@ -15665,7 +15768,7 @@ const Renderer = function (scene, options) {
             frameCtx.reset();
             frameCtx.pass = params.pass;
             frameCtx.withSAO = false;
-            frameCtx.pbrEnabled = !!scene.pbrEnabled;
+            frameCtx.pbrEnabled = pbrEnabled && !!scene.pbrEnabled;
 
             gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
 
@@ -15685,7 +15788,14 @@ const Renderer = function (scene, options) {
             frameCtx.lineWidth = 1;
 
             const saoPossible = scene.sao.possible;
-            frameCtx.occlusionTexture = saoPossible ? occlusionRenderBuffer1.getTexture() : null;
+
+            if (saoEnabled && saoPossible) {
+                const occlusionRenderBuffer1 = renderBufferManager.getRenderBuffer("saoOcclusion");
+                frameCtx.occlusionTexture = occlusionRenderBuffer1 ? occlusionRenderBuffer1.getTexture() : null;
+            } else {
+                frameCtx.occlusionTexture = null;
+
+            }
 
             let i;
             let len;
@@ -15738,15 +15848,17 @@ const Renderer = function (scene, options) {
                         const renderFlags = drawable.renderFlags;
 
                         if (renderFlags.colorOpaque) {
-                            if (saoPossible && drawable.saoEnabled) {
+                            if (saoEnabled && saoPossible && drawable.saoEnabled) {
                                 normalDrawSAOBin[normalDrawSAOBinLen++] = drawable;
                             } else {
                                 drawable.drawColorOpaque(frameCtx);
                             }
                         }
 
-                        if (renderFlags.colorTransparent) {
-                            normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
+                        if (transparentEnabled) {
+                            if (renderFlags.colorTransparent) {
+                                normalFillTransparentBin[normalFillTransparentBinLen++] = drawable;
+                            }
                         }
 
                         if (renderFlags.xrayedSilhouetteTransparent) {
@@ -15773,36 +15885,38 @@ const Renderer = function (scene, options) {
                             selectedFillOpaqueBin[selectedFillOpaqueBinLen++] = drawable;
                         }
 
-                        if (renderFlags.edgesOpaque) {
-                            normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
-                        }
+                        if (edgesEnabled) {
+                            if (renderFlags.edgesOpaque) {
+                                normalEdgesOpaqueBin[normalEdgesOpaqueBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.edgesTransparent) {
-                            normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
-                        }
+                            if (renderFlags.edgesTransparent) {
+                                normalEdgesTransparentBin[normalEdgesTransparentBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.selectedEdgesTransparent) {
-                            selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
-                        }
+                            if (renderFlags.selectedEdgesTransparent) {
+                                selectedEdgesTransparentBin[selectedEdgesTransparentBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.selectedEdgesOpaque) {
-                            selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
-                        }
+                            if (renderFlags.selectedEdgesOpaque) {
+                                selectedEdgesOpaqueBin[selectedEdgesOpaqueBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.xrayedEdgesTransparent) {
-                            xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
-                        }
+                            if (renderFlags.xrayedEdgesTransparent) {
+                                xrayEdgesTransparentBin[xrayEdgesTransparentBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.xrayedEdgesOpaque) {
-                            xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
-                        }
+                            if (renderFlags.xrayedEdgesOpaque) {
+                                xrayEdgesOpaqueBin[xrayEdgesOpaqueBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.highlightedEdgesTransparent) {
-                            highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
-                        }
+                            if (renderFlags.highlightedEdgesTransparent) {
+                                highlightedEdgesTransparentBin[highlightedEdgesTransparentBinLen++] = drawable;
+                            }
 
-                        if (renderFlags.highlightedEdgesOpaque) {
-                            highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
+                            if (renderFlags.highlightedEdgesOpaque) {
+                                highlightedEdgesOpaqueBin[highlightedEdgesOpaqueBinLen++] = drawable;
+                            }
                         }
                     }
                 }
@@ -16083,9 +16197,11 @@ const Renderer = function (scene, options) {
                 canvasPos[1] = canvas.clientHeight * 0.5;
             }
 
+            const pickBuffer = renderBufferManager.getRenderBuffer("pick");
+
             pickBuffer.bind();
 
-            const pickable = gpuPickPickable(canvasPos, pickViewMatrix, pickProjMatrix, params);
+            const pickable = gpuPickPickable(pickBuffer, canvasPos, pickViewMatrix, pickProjMatrix, params);
 
             if (!pickable) {
                 pickBuffer.unbind();
@@ -16118,7 +16234,7 @@ const Renderer = function (scene, options) {
                         }
 
                         // if (params.pickSurfaceNormal !== false) {
-                        //     gpuPickWorldNormal(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
+                        //     gpuPickWorldNormal(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
                         // }
 
                         pickResult.pickSurfacePrecision = true;
@@ -16130,7 +16246,7 @@ const Renderer = function (scene, options) {
 
                     if (pickable.canPickTriangle && pickable.canPickTriangle()) {
 
-                        gpuPickTriangle(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
+                        gpuPickTriangle(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
 
                         pickable.pickTriangleSurface(pickViewMatrix, pickProjMatrix, pickResult);
 
@@ -16143,10 +16259,10 @@ const Renderer = function (scene, options) {
                             nearAndFar[0] = scene.camera.project.near;
                             nearAndFar[1] = scene.camera.project.far;
 
-                            gpuPickWorldPos(pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult);
+                            gpuPickWorldPos(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult);
 
                             if (params.pickSurfaceNormal !== false) {
-                                gpuPickWorldNormal(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
+                                gpuPickWorldNormal(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
                             }
 
                             pickResult.pickSurfacePrecision = false;
@@ -16163,7 +16279,7 @@ const Renderer = function (scene, options) {
         };
     })();
 
-    function gpuPickPickable(canvasPos, pickViewMatrix, pickProjMatrix, params) {
+    function gpuPickPickable(pickBuffer, canvasPos, pickViewMatrix, pickProjMatrix, params) {
 
         frameCtx.reset();
         frameCtx.backfaces = true;
@@ -16207,8 +16323,8 @@ const Renderer = function (scene, options) {
                 }
             }
         }
-
-        const pix = pickBuffer.read(Math.round(canvasPos[0]), Math.round(canvasPos[1]));
+        const resolutionScale = scene.canvas.resolutionScale;
+        const pix = pickBuffer.read(Math.round(canvasPos[0] * resolutionScale), Math.round(canvasPos[1] * resolutionScale));
         let pickID = pix[0] + (pix[1] * 256) + (pix[2] * 256 * 256) + (pix[3] * 256 * 256 * 256);
 
         if (pickID < 0) {
@@ -16220,7 +16336,7 @@ const Renderer = function (scene, options) {
         return pickable;
     }
 
-    function gpuPickTriangle(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult) {
+    function gpuPickTriangle(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult) {
 
         if (!pickable.drawPickTriangles) {
             return;
@@ -16243,7 +16359,8 @@ const Renderer = function (scene, options) {
 
         pickable.drawPickTriangles(frameCtx);
 
-        const pix = pickBuffer.read(canvasPos[0], canvasPos[1]);
+        const resolutionScale = scene.canvas.resolutionScale;
+        const pix = pickBuffer.read(Math.round(canvasPos[0] * resolutionScale), Math.round(canvasPos[1] * resolutionScale));
 
         let primIndex = pix[0] + (pix[1] * 256) + (pix[2] * 256 * 256) + (pix[3] * 256 * 256 * 256);
 
@@ -16263,7 +16380,7 @@ const Renderer = function (scene, options) {
         const tempMat4b = math.mat4();
         const tempMat4c = math.mat4();
 
-        return function (pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult) {
+        return function (pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, nearAndFar, pickResult) {
 
             frameCtx.reset();
             frameCtx.backfaces = true;
@@ -16283,13 +16400,14 @@ const Renderer = function (scene, options) {
 
             pickable.drawPickDepths(frameCtx); // Draw color-encoded fragment screen-space depths
 
-            const pix = pickBuffer.read(Math.round(canvasPos[0]), Math.round(canvasPos[1]));
+            const resolutionScale = scene.canvas.resolutionScale;
+            const pix = pickBuffer.read(Math.round(canvasPos[0] * resolutionScale), Math.round(canvasPos[1] * resolutionScale));
 
             const screenZ = unpackDepth(pix); // Get screen-space Z at the given canvas coords
 
             // Calculate clip space coordinates, which will be in range of x=[-1..1] and y=[-1..1], with y=(+1) at top
-            const x = (canvasPos[0] - canvas.width / 2) / (canvas.width / 2);
-            const y = -(canvasPos[1] - canvas.height / 2) / (canvas.height / 2);
+            const x = (canvasPos[0] - canvas.clientWidth / 2) / (canvas.clientWidth / 2);
+            const y = -(canvasPos[1] - canvas.clientHeight / 2) / (canvas.clientHeight / 2);
 
             const origin = pickable.origin;
             let pvMat;
@@ -16337,7 +16455,7 @@ const Renderer = function (scene, options) {
         return math.dotVec4(vec, bitShift);
     }
 
-    function gpuPickWorldNormal(pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult) {
+    function gpuPickWorldNormal(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult) {
 
         frameCtx.reset();
         frameCtx.backfaces = true;
@@ -16355,7 +16473,8 @@ const Renderer = function (scene, options) {
 
         pickable.drawPickNormals(frameCtx); // Draw color-encoded fragment World-space normals
 
-        const pix = pickBuffer.read(Math.round(canvasPos[0]), Math.round(canvasPos[1]));
+        const resolutionScale = scene.canvas.resolutionScale;
+        const pix = pickBuffer.read(Math.round(canvasPos[0] * resolutionScale), Math.round(canvasPos[1] * resolutionScale));
 
         const worldNormal = [(pix[0] / 256.0) - 0.5, (pix[1] / 256.0) - 0.5, (pix[2] / 256.0) - 0.5];
 
@@ -16369,7 +16488,7 @@ const Renderer = function (scene, options) {
      * @param marker
      */
     this.addMarker = function (marker) {
-        this._occlusionTester = this._occlusionTester || new OcclusionTester(scene);
+        this._occlusionTester = this._occlusionTester || new OcclusionTester(scene, renderBufferManager);
         this._occlusionTester.addMarker(marker);
         scene.occlusionTestCountdown = 0;
     };
@@ -16443,6 +16562,7 @@ const Renderer = function (scene, options) {
      * @private
      */
     this.readPixels = function (pixels, colors, len, opaqueOnly) {
+        const snapshotBuffer = renderBufferManager.getRenderBuffer("snapshot");
         snapshotBuffer.bind();
         snapshotBuffer.clear();
         this.render({force: true, opaqueOnly: opaqueOnly});
@@ -16471,6 +16591,7 @@ const Renderer = function (scene, options) {
      * Exit snapshot mode using endSnapshot().
      */
     this.beginSnapshot = function () {
+        const snapshotBuffer = renderBufferManager.getRenderBuffer("snapshot");
         snapshotBuffer.bind();
         snapshotBuffer.clear();
         snapshotBound = true;
@@ -16483,6 +16604,7 @@ const Renderer = function (scene, options) {
         if (!snapshotBound) {
             return;
         }
+        const snapshotBuffer = renderBufferManager.getRenderBuffer("snapshot");
         snapshotBuffer.clear();
         this.render({force: true, opaqueOnly: false});
         imageDirty = true;
@@ -16495,6 +16617,7 @@ const Renderer = function (scene, options) {
      * @returns {String} The image data URI.
      */
     this.readSnapshot = function (params) {
+        const snapshotBuffer = renderBufferManager.getRenderBuffer("snapshot");
         const imageDataURI = snapshotBuffer.readImage(params);
         return imageDataURI;
     };
@@ -16508,6 +16631,7 @@ const Renderer = function (scene, options) {
         if (!snapshotBound) {
             return;
         }
+        const snapshotBuffer = renderBufferManager.getRenderBuffer("snapshot");
         snapshotBuffer.unbind();
         snapshotBound = false;
     };
@@ -16521,11 +16645,7 @@ const Renderer = function (scene, options) {
         drawableTypeInfo = {};
         drawables = {};
 
-        pickBuffer.destroy();
-        snapshotBuffer.destroy();
-        saoDepthRenderBuffer.destroy();
-        occlusionRenderBuffer1.destroy();
-        occlusionRenderBuffer2.destroy();
+        renderBufferManager.destroy();
 
         saoOcclusionRenderer.destroy();
         saoDepthLimitedBlurRenderer.destroy();
@@ -39283,47 +39403,75 @@ class DistanceMeasurementsPlugin extends Plugin {
 }
 
 /**
- * {@link Viewer} plugin that improves interactivity by disabling expensive rendering effects while the {@link Camera} is moving.
+ * {@link Viewer} plugin that improves interactivity by temporarily switching to fast and simple rendering while the
+ * {@link Camera} is moving or the {@link Canvas} is resizing.
+ *
+ * FastNavPlugin works by disabling specified rendering features, and optionally down-scaling the canvas, whenever we
+ * move the Camera or resize the Canvas. Then, once the Camera or Canvas has been at rest after a certain time, FastNavPlugin
+ * restores those rendering features and original canvas scale again.
+ *
+ * The effect we experience is a low-quality view while moving, then a high-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 moving, which makes the Viewer noticeably smoother
+ * with big models.
  *
  * # Usage
  *
  * In the example below, we'll create a {@link Viewer}, add a {@link FastNavPlugin}, then use an {@link XKTLoaderPlugin} to load a model.
  *
- * This viewer will only render the model with enhanced edges, physically-based rendering (PBR) and scalable
- * ambient obscurance (SAO) when the camera is not moving.
+ * Whenever our Camera moves, the FastNavPlugin will:
+ *
+ * * disable edges,
+ * * disable ambient shadows,
+ * * disable physically-based materials (switching to non-PBR),
+ * * hide transparent objects, and
+ * * down-scale the canvas by 0.5, causing 75% less pixels to render.
  *
- * Note how we enable SAO and PBR on the ````Scene```` and the model.
+ * We'll also configure a 0.5 second delay before we transition back to high-quality each time we stop moving, so that we're
+ * not continually flipping between low and high quality as we interact.
  *
  * * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#performance_FastNavPlugin)]
  *
  * ````javascript
  * 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,
- *      pbrEnabled: true,
- *      saoEnabled: 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];
  *
+ * // Install a FastNavPlugin
+ *
  * new FastNavPlugin(viewer, {
- *     pbrEnabled: true,
- *     saoEnabled: true,
- *     edgesEnabled: true
+ *      dynamicEdges: false,                // Don't show edges while moving (default is false)
+ *      dynamicSAO: false,                  // Don't show ambient shadows while moving (default is false)
+ *      dynamicPBR: false,                  // Non-physically-based rendering while moving (default is false)
+ *      dynamicTransparent: false,          // Hide transparent objects while moving (default is false)
+ *      dynamicCanvasResolution: true,      // Reduce canvas resolution while moving (default is false)
+ *      dynamicCanvasResolutionScale: 0.5,  // Factor by which we reduce canvas resolution when moving (default is 0.6)
+ *      delayBeforeStatic: true,            // When we stop, delay before returning to quality static render (default is true)
+ *      delayBeforeStaticDuration: 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",
- *      edges: true,
- *      saoEnabled: true,
- *      pbrEnabled: true
+ *      sao: true,                          // Enable ambient shadows for this model
+ *      pbr: true                           // Enable physically-based rendering for this model
  * });
  * ````
  *
@@ -39336,63 +39484,66 @@ class FastNavPlugin extends Plugin {
      * @param {Viewer} viewer The Viewer.
      * @param {Object} cfg FastNavPlugin configuration.
      * @param {String} [cfg.id="FastNav"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
-     * @param {Boolean} [cfg.pbrEnabled] Whether to enable physically-based rendering (PBR) when the camera stops moving. When not specified, PBR will be enabled if its currently enabled for the Viewer (see {@link Viewer#pbrEnabled}).
-     * @param {Boolean} [cfg.saoEnabled] Whether to enable scalable ambient occlusion (SAO) when the camera stops moving. When not specified, SAO will be enabled if its currently enabled for the Viewer (see {@link Scene#pbrEnabled}).
-     * @param {Boolean} [cfg.edgesEnabled] Whether to show enhanced edges when the camera stops moving. When not specified, edges will be enabled if they're currently enabled for the Viewer (see {@link EdgeMaterial#edges}).
+     * @param {Boolean} [cfg.dynamicPBR=false] Whether to enable physically-based rendering (PBR) while the camera is moving.
+     * @param {Boolean} [cfg.dynamicSAO=false] Whether to enable scalable ambient occlusion (SAO) while the camera is moving.
+     * @param {Boolean} [cfg.dynamicEdges=false] Whether to enable enhanced edges while the camera is moving.
+     * @param {Boolean} [cfg.dynamicTransparent=true] Whether to show transparent objects when the camera is moving.
+     * @param {Number} [cfg.dynamicCanvasResolution=false] Whether to down-scale the canvas resolution while the camera is moving.
+     * @param {Number} [cfg.dynamicCanvasResolutionScale=0.6] The factor by which we downscale the canvas resolution while the camera is moving.
+     * @param {Boolean} [cfg.delayBeforeStatic=true] Once the camera stops moving, whether to have a delay before transitioning back to normal rendering.
+     * @param {Number} [cfg.delayBeforeStaticDuration=0.5] Delay in seconds before transitioning back to normal rendering when camera stops moving. Only works when ````delayBeforeStatic```` is ````true````.
      */
     constructor(viewer, cfg = {}) {
 
         super("FastNav", viewer);
 
-        this._pbrEnabled = (cfg.pbrEnabled !== undefined && cfg.pbrEnabled !== null) ? cfg.pbrEnabled : viewer.scene.pbrEnabled;
-        this._saoEnabled = (cfg.saoEnabled !== undefined && cfg.saoEnabled !== null) ? cfg.saoEnabled : viewer.scene.sao.enabled;
-        this._edgesEnabled = (cfg.edgesEnabled !== undefined && cfg.edgesEnabled !== null) ? cfg.edgesEnabled : viewer.scene.edgeMaterial.edges;
-
-        this._pInterval = null;
-        this._fadeMillisecs = 500;
+        this._dynamicPBR = !!cfg.dynamicPBR;
+        this._dynamicSAO = !!cfg.dynamicSAO;
+        this._dynamicEdges = !!cfg.dynamicEdges;
+        this._dynamicTransparent = (cfg.dynamicTransparent !== false);
+        this._dynamicCanvasResolution = !!cfg.dynamicCanvasResolution;
+        this._dynamicCanvasResolutionScale = cfg.dynamicCanvasResolutionScale || 0.6;
+        this._delayBeforeStatic = (cfg.delayBeforeStatic !== false);
+        this._delayBeforeStaticDuration = cfg.delayBeforeStaticDuration || 0.5;
 
-        let timeoutDuration = 600; // Milliseconds
-        let timer = timeoutDuration;
+        let timer = this._delayBeforeStaticDuration * 1000;
         let fastMode = false;
 
-        this._onCanvasBoundary = viewer.scene.canvas.on("boundary", () => {
-            timer = timeoutDuration;
+        const switchToLowQuality = () => {
+            timer = (this._delayBeforeStaticDuration * 1000);
             if (!fastMode) {
-                this._cancelFade();
-                viewer.scene.pbrEnabled = false;
-                viewer.scene.sao.enabled = false;
-                viewer.scene.edgeMaterial.edges = false;
+                viewer.scene._renderer.setPBREnabled(this._dynamicPBR);
+                viewer.scene._renderer.setSAOEnabled(this._dynamicSAO);
+                viewer.scene._renderer.setTransparentEnabled(this._dynamicTransparent);
+                viewer.scene._renderer.setEdgesEnabled(this._dynamicEdges);
+                if (this._dynamicCanvasResolution) {
+                    viewer.scene.canvas.resolutionScale = this._dynamicCanvasResolutionScale;
+                } else {
+                    viewer.scene.canvas.resolutionScale = 1;
+                }
                 fastMode = true;
             }
-        });
+        };
 
-        this._onCameraMatrix = viewer.scene.camera.on("matrix", () => {
-            timer = timeoutDuration;
-            if (!fastMode) {
-                this._cancelFade();
-                viewer.scene.pbrEnabled = false;
-                viewer.scene.sao.enabled = false;
-                viewer.scene.edgeMaterial.edges = false;
-                fastMode = true;
-            }
-        });
+        const switchToHighQuality = () => {
+            viewer.scene.canvas.resolutionScale = 1;
+            viewer.scene._renderer.setEdgesEnabled(true);
+            viewer.scene._renderer.setPBREnabled(true);
+            viewer.scene._renderer.setSAOEnabled(true);
+            viewer.scene._renderer.setTransparentEnabled(true);
+            fastMode = false;
+        };
+
+        this._onCanvasBoundary = viewer.scene.canvas.on("boundary", switchToLowQuality);
+        this._onCameraMatrix = viewer.scene.camera.on("matrix", switchToLowQuality);
 
-        this._onSceneTick = viewer.scene.on("tick", (tickEvent) => {  // Milliseconds
+        this._onSceneTick = viewer.scene.on("tick", (tickEvent) => {
             if (!fastMode) {
                 return;
             }
             timer -= tickEvent.deltaTime;
-            if (timer <= 0) {
-                if (fastMode) {
-                    this._startFade();
-                    this._pInterval2 = setTimeout(() => { // Needed by Firefox - https://github.com/xeokit/xeokit-sdk/issues/624
-                        viewer.scene.pbrEnabled = this._pbrEnabled;
-                        viewer.scene.sao.enabled = this._saoEnabled;
-                        viewer.scene.edgeMaterial.edges = this._edgesEnabled;
-                    }, 100);
-
-                    fastMode = false;
-                }
+            if ((!this._delayBeforeStatic) || timer <= 0) {
+                switchToHighQuality();
             }
         });
 
@@ -39410,184 +39561,216 @@ class FastNavPlugin extends Plugin {
             if (!down) {
                 return;
             }
-            timer = timeoutDuration;
-            if (!fastMode) {
-                this._cancelFade();
-                viewer.scene.pbrEnabled = false;
-                viewer.scene.sao.enabled = false;
-                viewer.scene.edgeMaterial.edges = false;
-                fastMode = true;
-            }
+            switchToLowQuality();
         });
     }
 
-    _startFade() {
+    /**
+     * Gets whether to enable physically-based rendering (PBR) while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @return {Boolean} Whether PBR will be enabled while the camera is moving.
+     */
+    get dynamicPBR() {
+        return this._dynamicPBR;
+    }
 
-        if (!this._img) {
-            this._initFade();
-        }
+    /**
+     * Sets whether to enable physically-based rendering (PBR) while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @param {Boolean} dynamicPBR Whether PBR will be enabled while the camera is moving.
+     */
+    set dynamicPBR(dynamicPBR) {
+        this._dynamicPBR = dynamicPBR;
+    }
 
-        const interval = 50;
-        const inc = 1 / (this._fadeMillisecs / interval);
+    /**
+     * Gets whether to enable Scalable Ambient Obscurrance (SAO) while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @return {Boolean} Whether SAO will be enabled.
+     */
+    get dynamicSAO() {
+        return this._dynamicSAO;
+    }
 
-        if (this._pInterval) {
-            clearInterval(this._pInterval);
-            this._pInterval = null;
-        }
+    /**
+     * Sets whether to enable Scalable Ambient Obscurrance (SAO) while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @param {Boolean} dynamicSAO Whether SAO will be enabled while the camera is moving.
+     */
+    set dynamicSAO(dynamicSAO) {
+        this._dynamicSAO = dynamicSAO;
+    }
 
-        const viewer = this.viewer;
+    /**
+     * Gets whether to enable enhanced edges while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @return {Boolean} Whether edges will be enabled while the camera is moving.
+     */
+    get dynamicEdges() {
+        return this._dynamicEdges;
+    }
 
-        const canvas = viewer.scene.canvas.canvas;
-        const canvasOffset = cumulativeOffset(canvas);
-        const zIndex = (parseInt(canvas.style["z-index"]) || 0) + 1;
-        this._img.style.position = "fixed";
-        this._img.style["margin"] = 0 + "px";
-        this._img.style["z-index"] = zIndex;
-        this._img.style["background"] = canvas.style.background;
-        this._img.style.left = canvasOffset.left + "px";
-        this._img.style.top = canvasOffset.top + "px";
-        this._img.style.width = canvas.width + "px";
-        this._img.style.height = canvas.height + "px";
-        this._img.width = canvas.width;
-        this._img.height = canvas.height;
-        this._img.src = ""; // Needed by Firefox - https://github.com/xeokit/xeokit-sdk/issues/624
-        this._img.src = viewer.getSnapshot({
-            format: "png",
-            includeGizmos: true
-        });
-        this._img.style.visibility = "visible";
-        this._img.style.opacity = 1;
-
-        let opacity = 1;
-        this._pInterval = setInterval(() => {
-            opacity -= inc;
-            if (opacity > 0) {
-                this._img.style.opacity = opacity;
-                const canvasOffset = cumulativeOffset(canvas);
-                this._img.style.left = canvasOffset.left + "px";
-                this._img.style.top = canvasOffset.top + "px";
-                this._img.style.width = canvas.width + "px";
-                this._img.style.height = canvas.height + "px";
-                this._img.style.opacity = opacity;
-                this._img.width = canvas.width;
-                this._img.height = canvas.height;
+    /**
+     * Sets whether to enable enhanced edges while the camera is moving.
+     *
+     * Default is ````false````.
+     *
+     * @param {Boolean} dynamicEdges Whether edge enhancement will be enabled while the camera is moving.
+     */
+    set dynamicEdges(dynamicEdges) {
+        this._dynamicEdges = dynamicEdges;
+    }
 
-            } else {
-                this._img.style.opacity = 0;
-                this._img.style.visibility = "hidden";
-                clearInterval(this._pInterval);
-                this._pInterval = null;
-            }
-        }, interval);
-    }
-
-    _initFade() {
-        this._img = document.createElement('img');
-        const canvas = this.viewer.scene.canvas.canvas;
-        const canvasOffset = cumulativeOffset(canvas);
-        (parseInt(canvas.style["z-index"]) || 0) + 1;
-        this._img.style.position = "absolute";
-        this._img.style.visibility = "hidden";
-        this._img.style["pointer-events"] = "none";
-        this._img.style["z-index"] = 5;
-        this._img.style.left = canvasOffset.left + "px";
-        this._img.style.top = canvasOffset.top + "px";
-        this._img.style.width = canvas.width + "px";
-        this._img.style.height = canvas.height + "px";
-        this._img.style.opacity = 1;
-        this._img.width = canvas.width;
-        this._img.height = canvas.height;
-        this._img.left = canvasOffset.left;
-        this._img.top = canvasOffset.top;
-        canvas.parentNode.insertBefore(this._img, canvas.nextSibling);
-    }
-
-    _cancelFade() {
-        if (!this._img) {
-            return;
-        }
-        if (this._pInterval) {
-            clearInterval(this._pInterval);
-            this._pInterval = null;
-        }
-        if (this._pInterval2) {
-            clearInterval(this._pInterval2);
-            this._pInterval2 = null;
-        }
-        this._img.style.opacity = 0;
-        this._img.style.visibility = "hidden";
+    /**
+     * Gets whether to show transparent objects while the camera is moving.
+     *
+     * Default is ````true````.
+     *
+     * @return {Boolean} Whether to show transparent objects while the camera is moving.
+     */
+    get dynamicTransparent() {
+        return this._dynamicTransparent
     }
 
     /**
-     * Sets whether to enable physically-based rendering (PBR) when the camera stops moving.
+     * Sets whether to show transparent objects while the camera is moving.
+     *
+     * Default is ````true````.
      *
-     * @return {Boolean} Whether PBR will be enabled.
+     * @param {Boolean} dynamicTransparent Whether to show transparent objects while the camera is moving.
      */
-    set pbrEnabled(pbrEnabled) {
-        this._pbrEnabled = pbrEnabled;
+    set dynamicTransparent(dynamicTransparent) {
+        this._dynamicTransparent = (dynamicTransparent !== false);
     }
 
     /**
-     * Gets whether to enable physically-based rendering (PBR) when the camera stops moving.
+     * Gets whether to down-scale the canvas resolution while the camera is moving.
+     *
+     * Default is ````true````.
+     *
+     * The down-scaling factor is configured via {@link FastNavPlugin#dynamicCanvasResolutionScale}.
      *
-     * @return {Boolean} Whether PBR will be enabled.
+     * @return {Boolean} Whether to down-scale the canvas resolution while the camera is moving.
      */
-    get pbrEnabled() {
-        return this._pbrEnabled
+    get dynamicCanvasResolution() {
+        return this._dynamicCanvasResolution;
     }
 
     /**
-     * Sets whether to enable scalable ambient occlusion (SAO) when the camera stops moving.
+     * Sets whether to down-scale the canvas resolution while the camera is moving.
      *
-     * @return {Boolean} Whether SAO will be enabled.
+     * Default is ````true````.
+     *
+     * The down-scaling factor is configured via {@link FastNavPlugin#dynamicCanvasResolutionScale}.
+     *
+     * @param {Boolean} dynamicCanvasResolution Whether to down-scale the canvas resolution while the camera is moving.
      */
-    set saoEnabled(saoEnabled) {
-        this._saoEnabled = saoEnabled;
+    set dynamicCanvasResolution(dynamicCanvasResolution) {
+        this._dynamicCanvasResolution = dynamicCanvasResolution;
     }
 
     /**
-     * Gets whether the FastNavPlugin enables SAO when switching to quality rendering.
+     * Gets the factor by which we downscale the canvas resolution while the camera is moving.
      *
-     * @return {Boolean} Whether SAO will be enabled.
+     * This allows us to render a low-resolution image to the canvas while we're moving the camera.
+     *
+     * Accepted range is ````[0.0 .. 1.0]````.
+     *
+     * Default is ````0.6````.
+     *
+     * @return {Number} Factor by which we downscale the canvas resolution while the camera is moving.
      */
-    get saoEnabled() {
-        return this._saoEnabled
+    get dynamicCanvasResolutionScale() {
+        return this._dynamicCanvasResolutionScale;
+    }
+
+    /**
+     * Sets the factor by which we downscale the canvas resolution while the camera is moving.
+     *
+     * This allows us to render a low-resolution image to the canvas while we're moving the camera.
+     *
+     * Accepted range is ````[0.0 .. 1.0]````.
+     *
+     * Default is ````0.6````.
+     *
+     * @param {Number} dynamicCanvasResolutionScale Factor by which we downscale the canvas resolution while the camera is moving.
+     */
+    set dynamicCanvasResolutionScale(dynamicCanvasResolutionScale) {
+        this._dynamicCanvasResolutionScale = dynamicCanvasResolutionScale || 0.6;
+    }
+
+    /**
+     * Gets whether to have a delay before transitioning back to normal static rendering after the camera stops moving.
+     *
+     * The delay duration is configured via {@link FastNavPlugin#delayBeforeStaticDuration}.
+     *
+     * Default is ````true````.
+     *
+     * @return {Boolean} Whether to have a delay.
+     */
+    get delayBeforeStatic() {
+        return this._delayBeforeStatic;
+    }
+
+    /**
+     * Sets whether to have a delay before transitioning back to normal static rendering after the camera stops moving.
+     *
+     * The delay duration is configured via {@link FastNavPlugin#delayBeforeStaticDuration}.
+     *
+     * Default is ````true````.
+     *
+     * @param {Boolean} delayBeforeStatic Whether to have a delay.
+     */
+    set delayBeforeStatic(delayBeforeStatic) {
+        this._delayBeforeStatic = delayBeforeStatic;
     }
 
     /**
-     * Sets whether to show enhanced edges when the camera stops moving.
+     * Gets the delay in seconds before transitioning back to normal static rendering when camera stops moving.
+     *
+     * The delay is enabled when {@link FastNavPlugin#delayBeforeStatic} is ````true````.
+     *
+     * Default is ````0.5```` seconds.
      *
-     * @return {Boolean} Whether edge enhancement will be enabled.
+     * @return {Number} Timeout duration in seconds.
      */
-    set edgesEnabled(edgesEnabled) {
-        this._edgesEnabled = edgesEnabled;
+    get delayBeforeStaticDuration() {
+        return this._delayBeforeStaticDuration;
     }
 
     /**
-     * Gets whether to show enhanced edges when the camera stops moving.
+     * Sets the delay in seconds before transitioning back to normal static rendering when camera stops moving.
      *
-     * @return {Boolean} Whether edge enhancement will be enabled.
+     * The delay is enabled when {@link FastNavPlugin#delayBeforeStatic} is ````true````.
+     *
+     * Default is ````0.5```` seconds.
+     *
+     * @param {Number} delayBeforeStaticDuration Timeout duration in seconds.
      */
-    get edgesEnabled() {
-        return this._edgesEnabled
+    set delayBeforeStaticDuration(delayBeforeStaticDuration) {
+        this._delayBeforeStaticDuration = delayBeforeStaticDuration !== null && delayBeforeStaticDuration !== undefined ? delayBeforeStaticDuration : 0.5;
     }
 
     /**
      * @private
      */
     send(name, value) {
-        switch (name) {
-            case "clear":
-                this._cancelFade();
-                break;
-        }
     }
 
     /**
      * Destroys this plugin.
      */
     destroy() {
-        this._cancelFade();
         this.viewer.scene.camera.off(this._onCameraMatrix);
         this.viewer.scene.canvas.off(this._onCanvasBoundary);
         this.viewer.scene.input.off(this._onSceneMouseDown);
@@ -39595,27 +39778,9 @@ class FastNavPlugin extends Plugin {
         this.viewer.scene.input.off(this._onSceneMouseMove);
         this.viewer.scene.off(this._onSceneTick);
         super.destroy();
-        if (this._img) {
-            this._img.parentNode.removeChild(this._img);
-            this._img = null;
-        }
     }
 }
 
-function cumulativeOffset(element) {
-    let top = 0, left = 0;
-    do {
-        top += element.offsetTop || 0;
-        left += element.offsetLeft || 0;
-        element = element.offsetParent;
-    } while (element);
-
-    return {
-        top: top,
-        left: left
-    };
-}
-
 /**
  * Default data access strategy for {@link GLTFLoaderPlugin}.
  *