@xeokit/xeokit-sdk 2.6.85-renderers-refactor-v2 → 2.6.86

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

@@ -0,0 +1,181 @@
+import {Map} from "../utils/Map.js";
+import {Shader} from "./Shader.js";
+import {Sampler} from "./Sampler.js";
+import {Attribute} from "./Attribute.js";
+
+const ids = new Map({});
+
+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");
+}
+
+function logErrors(errors) {
+    console.error(errors.join("\n"));
+}
+
+/**
+ * @desc Represents a WebGL program.
+ * @private
+ */
+class Program {
+
+    constructor(gl, shaderSource) {
+        this.id = ids.addItem({});
+        this.source = shaderSource;
+        this.init(gl);
+    }
+
+    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
+        // 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 if (gl instanceof WebGL2RenderingContext && (u.type === gl.UNSIGNED_INT_SAMPLER_2D || u.type === gl.INT_SAMPLER_2D)) {
+                    this.samplers[uName] = new Sampler(gl, location);
+                } else {
+                    this.uniforms[uName] = location;
+                }
+            }
+        }
+        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);
+            }
+        }
+        this.allocated = true;
+    }
+
+    bind() {
+        if (!this.allocated) {
+            return;
+        }
+        this.gl.useProgram(this.handle);
+    }
+
+    getLocation(name) {
+        if (!this.allocated) {
+            return;
+        }
+        return this.uniforms[name];
+    }
+
+    getAttribute(name) {
+        if (!this.allocated) {
+            return;
+        }
+        return this.attributes[name];
+    }
+
+    bindTexture(name, texture, unit) {
+        if (!this.allocated) {
+            return false;
+        }
+        const sampler = this.samplers[name];
+        if (sampler) {
+            return sampler.bindTexture(texture, unit);
+        } else {
+            return false;
+        }
+    }
+
+    destroy() {
+        if (!this.allocated) {
+            return;
+        }
+        ids.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;
+    }
+}
+
+export {Program};

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

@@ -4,65 +4,117 @@
  */
 class RenderBuffer {
 
-    constructor(gl, colorFormats, hasDepthTexture) {
+    constructor(canvas, gl, options) {
+        options = options || {};
         /** @type {WebGL2RenderingContext} */
         this.gl = gl;
         this.allocated = false;
+        this.canvas = canvas;
         this.buffer = null;
         this.bound = false;
-        this._colorFormats = colorFormats;
-        this._hasDepthTexture = hasDepthTexture;
+        this.size = options.size;
+        this._hasDepthTexture = !!options.depthTexture;
     }
 
     setSize(size) {
         this.size = size;
     }
 
-    bind() {
-        const width  = this.size[0];
-        const height = this.size[1];
+    webglContextRestored(gl) {
+        this.gl = gl;
+        this.buffer = null;
+        this.allocated = false;
+        this.bound = false;
+    }
 
-        if (this.buffer && ((this.buffer.width !== width) || (this.buffer.height !== height))) {
-            this.buffer.cleanup();
-            this.buffer = null;
+    bind(...internalformats) {
+        this._touch(...internalformats);
+        if (this.bound) {
+            return;
         }
+        const gl = this.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
+        this.bound = true;
+    }
 
-        if (! this.buffer) {
-            this._allocateBuffer(width, height);
-            this.bound = false;
-        }
+    /**
+     * 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;
 
-        if (! this.bound) {
-            const gl = this.gl;
-            gl.bindFramebuffer(gl.FRAMEBUFFER, this.buffer.framebuf);
-            this.bound = true;
+        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);
         }
+
+        return colorTexture;
     }
 
-    _allocateBuffer(width, height) {
-        const internalformats = this._colorFormats || [];
+    /**
+     *
+     * @param {number[]} [internalformats=[]]
+     * @returns
+     */
+    _touch(...internalformats) {
 
+        let width;
+        let height;
         const gl = this.gl;
 
-        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);
-            return tex;
-        };
+        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;
 
-        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);
+                this.buffer.textures.forEach(texture => gl.deleteTexture(texture));
+                gl.deleteFramebuffer(this.buffer.framebuf);
+                gl.deleteRenderbuffer(this.buffer.renderbuf);
             }
-            return tex;
-        });
+        }
+
+        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);
+            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_COMPONENT32F, width, height, 0, gl.DEPTH_COMPONENT, gl.FLOAT, null);
+        }
 
         const renderbuf = gl.createRenderbuffer();
         gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuf);
@@ -77,9 +129,7 @@ class RenderBuffer {
             gl.drawBuffers(colorTextures.map((_, i) => gl.COLOR_ATTACHMENT0 + i));
         }
 
-        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);
+        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);
@@ -121,57 +171,207 @@ 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.colorTextures = colorTextures.map(tex => ({
-            bind: function(unit) {
-                gl.activeTexture(gl["TEXTURE" + unit]);
-                gl.bindTexture(gl.TEXTURE_2D, tex);
-                return true;
-            }
-        }));
+        this.bound = false;
+    }
 
-        this.depthTexture = depthTexture && {
-            bind: function(unit) {
-                gl.activeTexture(gl["TEXTURE" + unit]);
-                gl.bindTexture(gl.TEXTURE_2D, depthTexture);
-                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);
     }
 
     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(pickX, this.buffer.height - pickY - 1, 1, 1, glFormat || gl.RGBA, glType || gl.UNSIGNED_BYTE, pix, 0);
+        gl.readPixels(x, y, 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) {
-            this.buffer.cleanup();
+            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.allocated = false;
             this.buffer = null;
             this.bound = false;
         }
-        this.colorTextures = null;
-        this.depthTexture = null;
+        this._imageDataCache = null;
+        this._texture = null;
+        this._depthTexture = null;
     }
 }
 

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

@@ -0,0 +1,34 @@
+import {RenderBuffer} from "./RenderBuffer.js";
+
+/**
+ * @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();
+        }
+    }
+}
+
+export {RenderBufferManager};