@xeokit/xeokit-sdk 2.6.86-beta.0 → 2.6.87-renderers-refactor-v3

package/src/viewer/scene/webgl/FrameContext.js

@@ -11,15 +11,7 @@ import {createRTCViewMat} from "../math/rtcCoords.js";
 class FrameContext {
 
     constructor(scene) {
-
-        this._scene = scene;
-
         this._matPool = [];
-        this._matPoolNextFreeIndex = 0;
-
-        this._rtcViewMats = {};
-        this._rtcPickViewMats = {};
-
         this.reset();
     }
 
@@ -31,13 +23,6 @@ class FrameContext {
 
         this._matPoolNextFreeIndex = 0;
         this._rtcViewMats = {};
-        this._rtcPickViewMats = {};
-
-        /**
-         * The WebGL rendering context.
-         * @type {WebGLRenderingContext}
-         */
-        this.gl = this._scene.canvas.gl;
 
         /**
          * ID of the last {@link WebGLProgram} that was bound during the current frame.
@@ -157,59 +142,39 @@ class FrameContext {
          */
         this.pass = 0;
 
-        /**
-         * The 4x4 viewing transform matrix the renderer is currently using when rendering castsShadows.
-         *
-         * This sets the viewpoint to look from the point of view of each {@link DirLight}
-         * or {@link PointLight} that casts a shadow.
-         *
-         * @property shadowViewMatrix
-         * @type {Number[]}
-         */
-        this.shadowViewMatrix = null;
-
-        /**
-         * The 4x4 viewing projection matrix the renderer is currently using when rendering shadows.
-         *
-         * @property shadowProjMatrix
-         * @type {Number[]}
-         */
-        this.shadowProjMatrix = null;
+        this.viewParams = { };
 
         /**
-         * The 4x4 viewing transform matrix the renderer is currently using when rendering a ray-pick.
+         * The 4x4 view matrix.
          *
-         * This sets the viewpoint to look along the ray given to {@link Scene/pick:method"}}Scene#pick(){{/crossLink}}
-         * when picking with a ray.
-         *
-         * @property pickViewMatrix
+         * @property viewMatrix
          * @type {Number[]}
          */
-        this.pickViewMatrix = null;
+        this.viewParams.viewMatrix = null;
 
         /**
-         * The 4x4 orthographic projection transform matrix the renderer is currently using when rendering a ray-pick.
+         * The 4x4 projection matrix.
          *
-         * @property pickProjMatrix
+         * @property projMatrix
          * @type {Number[]}
          */
-        this.pickProjMatrix = null;
+        this.viewParams.projMatrix = null;
 
         /**
          * Distance to the near clipping plane when rendering depth fragments for GPU-accelerated 3D picking.
          *
-         * @property pickZNear
+         * @property near
          * @type {Number|*}
          */
-        this.pickZNear = 0.01;
+        this.viewParams.near = 0.01;
 
         /**
          * Distance to the far clipping plane when rendering depth fragments for GPU-accelerated 3D picking.
          *
-         * @property pickZFar
+         * @property far
          * @type {Number|*}
          */
-        this.pickZFar = 5000;
+        this.viewParams.far = 5000;
 
         /**
          * Whether or not the renderer is currently picking invisible objects.
@@ -219,22 +184,6 @@ class FrameContext {
          */
         this.pickInvisible = false;
 
-        /**
-         * Used to draw only requested elements / indices.
-         *
-         * @property pickElementsCount
-         * @type {Number}
-         */
-        this.pickElementsCount = null;
-
-        /**
-         * Used to draw only requested elements / indices.
-         *
-         * @property pickElementsOffset
-         * @type {Number}
-         */
-        this.pickElementsOffset = null;
-
         /** The current line width.
          *
          * @property lineWidth
@@ -246,16 +195,9 @@ class FrameContext {
          * Collects info from SceneModel.drawSnapInit and SceneModel.drawSnap,
          * which is then used in Renderer to determine snap-picking results.
          *
-         * @type {{}}
-         */
-        this.snapPickLayerParams = {};
-
-        /**
-         * Collects info from SceneModel.drawSnapInit and SceneModel.drawSnap,
-         * which is then used in Renderer to determine snap-picking results.
-         * @type {number}
+         * @type {[]}
          */
-        this.snapPickLayerNumber = 0;
+        this.snapPickLayerParams = [];
 
         /**
          * Collects info from SceneModel.drawSnapInit and SceneModel.drawSnap,
@@ -279,26 +221,12 @@ class FrameContext {
         let rtcViewMat = this._rtcViewMats[originHash];
         if (!rtcViewMat) {
             rtcViewMat = this._getNewMat();
-            createRTCViewMat(this._scene.camera.viewMatrix, origin, rtcViewMat);
+            createRTCViewMat(this.viewParams.viewMatrix, origin, rtcViewMat);
             this._rtcViewMats[originHash] = rtcViewMat;
         }
         return rtcViewMat;
     }
 
-    /**
-     * Get picking View RTC matrix for the given RTC center.
-     */
-    getRTCPickViewMatrix(originHash, origin) {
-        let rtcPickViewMat = this._rtcPickViewMats[originHash];
-        if (!rtcPickViewMat) {
-            rtcPickViewMat = this._getNewMat();
-            const pickViewMat = this.pickViewMatrix || this._scene.camera.viewMatrix;
-            createRTCViewMat(pickViewMat, origin, rtcPickViewMat);
-            this._rtcPickViewMats[originHash] = rtcPickViewMat;
-        }
-        return rtcPickViewMat;
-    }
-
     _getNewMat() {
         let mat = this._matPool[this._matPoolNextFreeIndex];
         if (!mat) {

package/src/viewer/scene/webgl/RenderBuffer.js

@@ -4,117 +4,65 @@
  */
 class RenderBuffer {
 
-    constructor(canvas, gl, options) {
-        options = options || {};
+    constructor(gl, colorFormats, hasDepthTexture) {
         /** @type {WebGL2RenderingContext} */
         this.gl = gl;
         this.allocated = false;
-        this.canvas = canvas;
         this.buffer = null;
         this.bound = false;
-        this.size = options.size;
-        this._hasDepthTexture = !!options.depthTexture;
+        this._colorFormats = colorFormats;
+        this._hasDepthTexture = hasDepthTexture;
     }
 
     setSize(size) {
         this.size = size;
     }
 
-    webglContextRestored(gl) {
-        this.gl = gl;
-        this.buffer = null;
-        this.allocated = false;
-        this.bound = false;
-    }
+    bind() {
+        const width  = this.size[0];
+        const height = this.size[1];
 
-    bind(...internalformats) {
-        this._touch(...internalformats);
-        if (this.bound) {
-            return;
+        if (this.buffer && ((this.buffer.width !== width) || (this.buffer.height !== height))) {
+            this.buffer.cleanup();
+            this.buffer = null;
         }
-        const gl = this.gl;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
-        this.bound = true;
-    }
-
-    /**
-     * Create and specify a WebGL texture image.
-     *
-     * @param { number } width 
-     * @param { number } height 
-     * @param { GLenum } [internalformat=null] 
-     *
-     * @returns { WebGLTexture }
-     */
-    createTexture(width, height, internalformat = null) {
-        const gl = this.gl;
-
-        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);
 
-        if (internalformat) {
-            gl.texStorage2D(gl.TEXTURE_2D, 1, internalformat, width, height);
-        } else {
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        if (! this.buffer) {
+            this._allocateBuffer(width, height);
+            this.bound = false;
         }
 
-        return colorTexture;
+        if (! this.bound) {
+            const gl = this.gl;
+            gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
+            this.bound = true;
+        }
     }
 
-    /**
-     *
-     * @param {number[]} [internalformats=[]]
-     * @returns
-     */
-    _touch(...internalformats) {
+    _allocateBuffer(width, height) {
+        const internalformats = this._colorFormats || [];
 
-        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 {
-                this.buffer.textures.forEach(texture => gl.deleteTexture(texture));
-                gl.deleteFramebuffer(this.buffer.framebuf);
-                gl.deleteRenderbuffer(this.buffer.renderbuf);
-            }
-        }
-
-        const colorTextures = [];
-        if (internalformats.length > 0) {
-            colorTextures.push(...internalformats.map(internalformat => this.createTexture(width, height, internalformat)));
-        } else {
-            colorTextures.push(this.createTexture(width, height));
-        }
-
-        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);
+        const createTexture = () => {
+            const tex = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, tex);
             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.DEPTH_COMPONENT32F, width, height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);
-        }
+            return tex;
+        };
+
+        const colorTextures = ((internalformats.length > 0) ? internalformats : [ null ]).map(internalformat => {
+            const tex = createTexture();
+            if (internalformat) {
+                gl.texStorage2D(gl.TEXTURE_2D, 1, internalformat, width, height);
+            } else {
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            }
+            return tex;
+        });
 
         const renderbuf = gl.createRenderbuffer();
         gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuf);
@@ -129,7 +77,9 @@ class RenderBuffer {
             gl.drawBuffers(colorTextures.map((_, i) => gl.COLOR_ATTACHMENT0 + i));
         }
 
-        if (this._hasDepthTexture) {
+        const depthTexture = this._hasDepthTexture && createTexture();
+        if (depthTexture) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT32F, width, height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);
             gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture, 0);
         } else {
             gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuf);
@@ -171,207 +121,57 @@ class RenderBuffer {
         }
 
         this.buffer = {
+            cleanup: () => {
+                colorTextures.forEach(texture => gl.deleteTexture(texture));
+                depthTexture && gl.deleteTexture(depthTexture);
+                gl.deleteFramebuffer(framebuf);
+                gl.deleteRenderbuffer(renderbuf);
+            },
             framebuf: framebuf,
-            renderbuf: renderbuf,
-            texture: colorTextures[0],
-            textures: colorTextures,
-            depthTexture: depthTexture,
             width: width,
             height: height
         };
 
-        this.bound = false;
-    }
+        this.colorTextures = colorTextures.map(tex => ({
+            bind: function(unit) {
+                gl.activeTexture(gl["TEXTURE" + unit]);
+                gl.bindTexture(gl.TEXTURE_2D, tex);
+                return true;
+            }
+        }));
 
-    clear() {
-        if (!this.bound) {
-            throw "Render buffer not bound";
-        }
-        const gl = this.gl;
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        this.depthTexture = depthTexture && {
+            bind: function(unit) {
+                gl.activeTexture(gl["TEXTURE" + unit]);
+                gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+                return true;
+            }
+        };
     }
 
     read(pickX, pickY, glFormat = null, glType = null, arrayType = Uint8Array, arrayMultiplier = 4, colorBufferIndex = 0) {
-        const x = pickX;
-        const y = this.buffer.height ? (this.buffer.height - pickY - 1) : (this.gl.drawingBufferHeight - pickY);
         const pix = new arrayType(arrayMultiplier);
         const gl = this.gl;
         gl.readBuffer(gl.COLOR_ATTACHMENT0 + colorBufferIndex);
-        gl.readPixels(x, y, 1, 1, glFormat || gl.RGBA, glType || gl.UNSIGNED_BYTE, pix, 0);
+        gl.readPixels(pickX, this.buffer.height - pickY - 1, 1, 1, glFormat || gl.RGBA, glType || gl.UNSIGNED_BYTE, pix, 0);
         return pix;
     }
 
-    readArray(glFormat = null, glType = null, arrayType = Uint8Array, arrayMultiplier = 4, colorBufferIndex = 0) {
-        const pix = new arrayType(this.buffer.width*this.buffer.height * arrayMultiplier);
-        const gl = this.gl;
-        gl.readBuffer(gl.COLOR_ATTACHMENT0 + colorBufferIndex);
-        gl.readPixels(0, 0, this.buffer.width, this.buffer.height, glFormat || gl.RGBA, glType || gl.UNSIGNED_BYTE, pix, 0);
-        return pix;
-    }
-
-    /**
-     * Returns an HTMLCanvas containing the contents of the RenderBuffer as an image.
-     *
-     * - The HTMLCanvas has a CanvasRenderingContext2D.
-     * - Expects the caller to draw more things on the HTMLCanvas (annotations etc).
-     *
-     * @returns {HTMLCanvasElement}
-     */
-    readImageAsCanvas() {
-        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);
-        const width = this.buffer.width;
-        const height = this.buffer.height;
-        const halfHeight = height / 2 | 0;  // the | 0 keeps the result an int
-        const bytesPerRow = width * 4;
-        const temp = new Uint8Array(width * 4);
-        for (let y = 0; y < halfHeight; ++y) {
-            const topOffset = y * bytesPerRow;
-            const bottomOffset = (height - y - 1) * bytesPerRow;
-            temp.set(pixelData.subarray(topOffset, topOffset + bytesPerRow));
-            pixelData.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
-            pixelData.set(temp, bottomOffset);
-        }
-        imageData.data.set(pixelData);
-        context.putImageData(imageData, 0, 0);
-        return canvas;
-    }
-
-    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;
-        const { width, height } = this.buffer;
-        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
-        imageData.data.set(pixelData);
-        context.putImageData(imageData, 0, 0);
-
-        // flip Y
-        context.save();
-        context.globalCompositeOperation = 'copy';
-        context.scale(1, -1);
-        context.drawImage(canvas, 0, -height, width, height);
-        context.restore();
-
-        let format = params.format || "png";
-        if (format !== "jpeg" && format !== "png" && format !== "bmp") {
-            console.error("Unsupported image format: '" + format + "' - supported types are 'jpeg', 'bmp' and 'png' - defaulting to 'png'");
-            format = "png";
-        }
-        return canvas.toDataURL(`image/${format}`);
-    }
-
-    _getImageDataCache(type = Uint8Array, multiplier = 4) {
-
-        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');
-            const context = canvas.getContext('2d');
-            canvas.width = bufferWidth;
-            canvas.height = bufferHeight;
-            imageDataCache = {
-                pixelData: new type(bufferWidth * bufferHeight * multiplier),
-                canvas: canvas,
-                context: context,
-                imageData: context.createImageData(bufferWidth, bufferHeight),
-                width: bufferWidth,
-                height: bufferHeight
-            };
-
-            this._imageDataCache = imageDataCache;
-        }
-        imageDataCache.context.resetTransform(); // Prevents strange scale-accumulation effect with html2canvas
-        return imageDataCache;
-    }
-
     unbind() {
         const gl = this.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
         this.bound = false;
     }
 
-    getTexture(index = 0) {
-        const self = this;
-        return this._texture || (this._texture = {
-            renderBuffer: this,
-            bind: function (unit) {
-                if (self.buffer && self.buffer.textures[index]) {
-                    self.gl.activeTexture(self.gl["TEXTURE" + unit]);
-                    self.gl.bindTexture(self.gl.TEXTURE_2D, self.buffer.textures[index]);
-                    return true;
-                }
-                return false;
-            },
-            unbind: function (unit) {
-                if (self.buffer && self.buffer.textures[index]) {
-                    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;
-            this.buffer.textures.forEach(texture => gl.deleteTexture(texture));
-            gl.deleteTexture(this.buffer.depthTexture);
-            gl.deleteFramebuffer(this.buffer.framebuf);
-            gl.deleteRenderbuffer(this.buffer.renderbuf);
+            this.buffer.cleanup();
             this.allocated = false;
             this.buffer = null;
             this.bound = false;
         }
-        this._imageDataCache = null;
-        this._texture = null;
-        this._depthTexture = null;
+        this.colorTextures = null;
+        this.depthTexture = null;
     }
 }