@xeokit/xeokit-sdk 2.2.1-beta.1 → 2.2.1

package/dist/xeokit-sdk.cjs.js

@@ -13280,533 +13280,6 @@ class Program {
     }
 }
 
-/*
- * 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.
- */
-
-/**
- * @private
- */
-const Canvas2Image = (function () {
-    // check if we have canvas support
-    const oCanvas = document.createElement("canvas"), sc = String.fromCharCode;
-
-    // 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);
-
-        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;
-
-        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);
-
-        return encodeData(strHeader + strPixelData);
-    };
-
-    // sends the generated file to the client
-    const saveFile = function (strData) {
-        if (!window.open(strData)) {
-            document.location.href = strData;
-        }
-    };
-
-    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;
-    };
-
-    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;
-    };
-
-    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;
-        },
-
-        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;
-        }
-    };
-})();
-
-/**
- * @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;
-    }
-
-    setSize(size) {
-        this.size = size;
-    }
-
-    webglContextRestored(gl) {
-        this.gl = gl;
-        this.buffer = null;
-        this.allocated = false;
-        this.bound = false;
-    }
-
-    bind() {
-        this._touch();
-        if (this.bound) {
-            return;
-        }
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
-        this.bound = true;
-    }
-
-    _touch() {
-
-        let width;
-        let height;
-        const gl = this.gl;
-
-        if (this.size) {
-            width = this.size[0];
-            height = this.size[1];
-
-        } else {
-            width = gl.drawingBufferWidth;
-            height = gl.drawingBufferHeight;
-        }
-
-        if (this.buffer) {
-
-            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);
-            }
-        }
-
-        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;
-
-        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);
-        }
-
-        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);
-
-        if (this._hasDepthTexture) {
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
-        } else {
-            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuf);
-        }
-
-        gl.bindTexture(gl.TEXTURE_2D, null);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
-        // Verify framebuffer is OK
-
-        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
-        if (!gl.isFramebuffer(framebuf)) {
-            throw "Invalid framebuffer";
-        }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-
-        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
-
-        switch (status) {
-
-            case gl.FRAMEBUFFER_COMPLETE:
-                break;
-
-            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_ATTACHMENT";
-
-            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT";
-
-            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
-                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_DIMENSIONS";
-
-            case gl.FRAMEBUFFER_UNSUPPORTED:
-                throw "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED";
-
-            default:
-                throw "Incomplete framebuffer: " + status;
-        }
-
-        this.buffer = {
-            framebuf: framebuf,
-            renderbuf: renderbuf,
-            texture: colorTexture,
-            depthTexture: depthTexture,
-            width: width,
-            height: height
-        };
-
-        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);
-    }
-
-    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;
-    }
-
-    readImage(params) {
-
-        const gl = this.gl;
-        const imageDataCache = this._getImageDataCache();
-        const pixelData = imageDataCache.pixelData;
-        const canvas = imageDataCache.canvas;
-        const imageData = imageDataCache.imageData;
-        const context = imageDataCache.context;
-
-        gl.readPixels(0, 0, this.buffer.width, this.buffer.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
-
-        imageData.data.set(pixelData);
-        context.putImageData(imageData, 0, 0);
-
-        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
-
-        let image;
-
-        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);
-        }
-
-        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;
-            }
-        }
-
-        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;
-        }
-
-        return imageDataCache;
-    }
-
-    unbind() {
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-        this.bound = false;
-    }
-
-    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);
-                }
-            }
-        });
-    }
-
-    hasDepthTexture() {
-        return this._hasDepthTexture;
-    }
-
-    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) {
-            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;
-        }
-        this._imageDataCache = null;
-        this._texture = null;
-        this._depthTexture = null;
-    }
-}
-
 /**
  * @desc Represents a WebGL ArrayBuffer.
  *
@@ -14138,6 +13611,7 @@ class OcclusionLayer {
 
 const MARKER_COLOR = math.vec3([1.0, 0.0, 0.0]);
 const POINT_SIZE = 20;
+const MARKER_SPRITE_CLIPZ_OFFSET = -0.001; // Amount that we offset sprite clip Z coords to raise them from surfaces
 
 const tempVec3a$$ = math.vec3();
 
@@ -14347,7 +13821,6 @@ class OcclusionTester {
             src.push("   vWorldPosition = worldPosition;");
         }
         src.push("   vec4 clipPos = projMatrix * viewPosition;");
-        src.push("   gl_Position = clipPos;");
         src.push("   gl_PointSize = " + POINT_SIZE + ".0;");
         if (scene.logarithmicDepthBufferEnabled) {
             if (WEBGL_INFO$1.SUPPORTED_EXTENSIONS["EXT_frag_depth"]) {
@@ -14356,7 +13829,10 @@ class OcclusionTester {
                 src.push("clipPos.z = log2( max( 1e-6, clipPos.w + 1.0 ) ) * logDepthBufFC - 1.0;");
                 src.push("clipPos.z *= clipPos.w;");
             }
+        } else {
+            src.push("clipPos.z += " + MARKER_SPRITE_CLIPZ_OFFSET + ";");
         }
+        src.push("   gl_Position = clipPos;");
         src.push("}");
         return src;
     }
@@ -15252,6 +14728,533 @@ function createSampleOffsets(kernelRadius, uvIncrement) {
     return offsets;
 }
 
+/*
+ * 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.
+ */
+
+/**
+ * @private
+ */
+const Canvas2Image = (function () {
+    // check if we have canvas support
+    const oCanvas = document.createElement("canvas"), sc = String.fromCharCode;
+
+    // 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);
+
+        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;
+
+        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);
+
+        return encodeData(strHeader + strPixelData);
+    };
+
+    // sends the generated file to the client
+    const saveFile = function (strData) {
+        if (!window.open(strData)) {
+            document.location.href = strData;
+        }
+    };
+
+    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;
+    };
+
+    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;
+    };
+
+    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;
+        },
+
+        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;
+        }
+    };
+})();
+
+/**
+ * @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;
+    }
+
+    setSize(size) {
+        this.size = size;
+    }
+
+    webglContextRestored(gl) {
+        this.gl = gl;
+        this.buffer = null;
+        this.allocated = false;
+        this.bound = false;
+    }
+
+    bind() {
+        this._touch();
+        if (this.bound) {
+            return;
+        }
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
+        this.bound = true;
+    }
+
+    _touch() {
+
+        let width;
+        let height;
+        const gl = this.gl;
+
+        if (this.size) {
+            width = this.size[0];
+            height = this.size[1];
+
+        } else {
+            width = gl.drawingBufferWidth;
+            height = gl.drawingBufferHeight;
+        }
+
+        if (this.buffer) {
+
+            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);
+            }
+        }
+
+        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;
+
+        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);
+        }
+
+        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);
+
+        if (this._hasDepthTexture) {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
+        } else {
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuf);
+        }
+
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        // Verify framebuffer is OK
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
+        if (!gl.isFramebuffer(framebuf)) {
+            throw "Invalid framebuffer";
+        }
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+
+        switch (status) {
+
+            case gl.FRAMEBUFFER_COMPLETE:
+                break;
+
+            case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_ATTACHMENT";
+
+            case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT";
+
+            case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS:
+                throw "Incomplete framebuffer: FRAMEBUFFER_INCOMPLETE_DIMENSIONS";
+
+            case gl.FRAMEBUFFER_UNSUPPORTED:
+                throw "Incomplete framebuffer: FRAMEBUFFER_UNSUPPORTED";
+
+            default:
+                throw "Incomplete framebuffer: " + status;
+        }
+
+        this.buffer = {
+            framebuf: framebuf,
+            renderbuf: renderbuf,
+            texture: colorTexture,
+            depthTexture: depthTexture,
+            width: width,
+            height: height
+        };
+
+        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);
+    }
+
+    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;
+    }
+
+    readImage(params) {
+
+        const gl = this.gl;
+        const imageDataCache = this._getImageDataCache();
+        const pixelData = imageDataCache.pixelData;
+        const canvas = imageDataCache.canvas;
+        const imageData = imageDataCache.imageData;
+        const context = imageDataCache.context;
+
+        gl.readPixels(0, 0, this.buffer.width, this.buffer.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+
+        imageData.data.set(pixelData);
+        context.putImageData(imageData, 0, 0);
+
+        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
+
+        let image;
+
+        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);
+        }
+
+        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;
+            }
+        }
+
+        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;
+        }
+
+        return imageDataCache;
+    }
+
+    unbind() {
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this.bound = false;
+    }
+
+    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);
+                }
+            }
+        });
+    }
+
+    hasDepthTexture() {
+        return this._hasDepthTexture;
+    }
+
+    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) {
+            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;
+        }
+        this._imageDataCache = null;
+        this._texture = null;
+        this._depthTexture = null;
+    }
+}
+
 /**
  * @private
  */
@@ -31850,6 +31853,7 @@ function buildVertex$1(mesh) {
     }
     src.push("void main(void) {");
     src.push("vec4 localPosition = vec4(position, 1.0); ");
+    src.push("vec4 worldPosition;");
     if (quantizedGeometry) {
         src.push("localPosition = positionsDecodeMatrix * localPosition;");
     }
@@ -31862,10 +31866,15 @@ function buildVertex$1(mesh) {
         src.push("mat4 modelViewMatrix = viewMatrix2 * modelMatrix2;");
         src.push("billboard(modelMatrix2);");
         src.push("billboard(viewMatrix2);");
+        src.push("billboard(modelViewMatrix);");
+        src.push("worldPosition = modelMatrix2 * localPosition;");
+        src.push("worldPosition.xyz = worldPosition.xyz + offset;");
+        src.push("vec4 viewPosition = modelViewMatrix * localPosition;");
+    } else {
+        src.push("worldPosition = modelMatrix2 * localPosition;");
+        src.push("worldPosition.xyz = worldPosition.xyz + offset;");
+        src.push("vec4 viewPosition  = viewMatrix2 * worldPosition; ");
     }
-    src.push("   vec4 worldPosition = modelMatrix2 * localPosition;");
-    src.push("   worldPosition.xyz = worldPosition.xyz + offset;");
-    src.push("   vec4 viewPosition = viewMatrix2 * worldPosition;");
     if (clipping) {
         src.push("   vWorldPosition = worldPosition;");
     }
@@ -31972,7 +31981,7 @@ OcclusionRenderer.get = function (mesh) {
         mesh.scene.canvas.canvas.id,
         mesh.scene._sectionPlanesState.getHash(),
         mesh._geometry._state.hash,
-        mesh._state.hash
+        mesh._state.occlusionHash
     ].join(";");
     let renderer = renderers$1[hash];
     if (!renderer) {
@@ -148538,7 +148547,7 @@ class Configs {
 }
 
 /**
- * Experimental {@link Viewer} plugin that uses [web-ifc](https://github.com/tomvandig/web-ifc) to load BIM models directly from IFC files.
+ * {@link Viewer} plugin that uses [web-ifc](https://github.com/tomvandig/web-ifc) to load BIM models directly from IFC files.
  *
  * <a href="https://xeokit.github.io/xeokit-sdk/examples/#BIMOffline_WebIFCLoaderPlugin_Duplex"><img src="https://xeokit.io/img/docs/WebIFCLoaderPlugin/WebIFCLoaderPlugin.png"></a>
  *
@@ -152108,12 +152117,7 @@ class LASLoaderPlugin extends Plugin {
         }
 
         const performanceModel = new PerformanceModel(this.viewer.scene, utils.apply(params, {
-            isModel: true,
-            origin: params.origin,
-            position: params.position,
-            scale: params.scale,
-            rotation: params.rotation,
-            matrix: params.matrix
+            isModel: true
         }));
 
         if (!params.src && !params.las) {