@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

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

@@ -0,0 +1,69 @@
+/**
+ * @desc A pickable {@link Scene} element.
+ *
+ * @interface
+ * @abstract
+ * @private
+ */
+class Pickable {
+
+    /**
+     * Called by xeokit to get if it's possible to pick a triangle on the surface of this Drawable.
+     */
+    canPickTriangle() {
+    }
+
+    /**
+     * Picks a triangle on this Pickable.
+     */
+    drawPickTriangles(renderFlags, frameCtx) {
+    }
+
+    /**
+     * Given a {@link PickResult} that contains a {@link PickResult#primIndex}, which indicates that a primitive was picked on the Pickable, then add more information to the PickResult about the picked position on the surface of the Pickable.
+     *
+     * Architecturally, this delegates collection of that Pickable-specific info to the Pickable, allowing it to provide whatever info it's able to.
+     *
+     * @param {PickResult} pickResult The PickResult to augment with pick intersection information specific to this Mesh.
+     * @param [pickResult.primIndex] Index of the primitive that was picked on this Mesh.
+     * @param [pickResult.canvasPos] Canvas coordinates, provided when picking through the Canvas.
+     * @param [pickResult.origin] World-space 3D ray origin, when ray picking.
+     * @param [pickResult.direction] World-space 3D ray direction, provided when ray picking.
+     */
+    pickTriangleSurface(pickResult) {
+    }
+
+    /**
+     * Called by xeokit to get if it's possible to pick a 3D point on the surface of this Pickable.
+     * Returns false if canPickTriangle returns true, and vice-versa.
+     */
+    canPickWorldPos() {
+    }
+
+    /**
+     * Renders color-encoded fragment depths of this Pickable.
+     * @param frameCtx
+     */
+    drawPickDepths(renderFlags, frameCtx) {
+    }
+
+    /**
+     * Delegates an {@link Entity} as representing what was actually picked in place of this Pickable.
+     * @returns {PerformanceNode}
+     */
+    delegatePickedEntity() {
+        return this.parent;
+    }
+
+    /**
+     * 3D origin of the Pickable's vertex positions, if they are in relative-to-center (RTC) coordinates.
+     *
+     * When this is defined, then the positions are RTC, which means that they are relative to this position.
+     *
+     * @type {Float64Array}
+     */
+    get origin() {
+    }
+}
+
+export {Pickable};

package/src/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/src/viewer/scene/webgl/RenderBuffer.js

@@ -0,0 +1,378 @@
+/**
+ * @desc Represents a WebGL render buffer.
+ * @private
+ */
+class RenderBuffer {
+
+    constructor(canvas, gl, options) {
+        options = options || {};
+        /** @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;
+    }
+
+    setSize(size) {
+        this.size = size;
+    }
+
+    webglContextRestored(gl) {
+        this.gl = gl;
+        this.buffer = null;
+        this.allocated = false;
+        this.bound = false;
+    }
+
+    bind(...internalformats) {
+        this._touch(...internalformats);
+        if (this.bound) {
+            return;
+        }
+        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);
+        }
+
+        return colorTexture;
+    }
+
+    /**
+     *
+     * @param {number[]} [internalformats=[]]
+     * @returns
+     */
+    _touch(...internalformats) {
+
+        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);
+            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);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT32F, width, height);
+
+        const framebuf = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuf);
+        for (let i = 0; i < colorTextures.length; i++) {
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, colorTextures[i], 0);
+        }
+        if (internalformats.length > 0) {
+            gl.drawBuffers(colorTextures.map((_, i) => gl.COLOR_ATTACHMENT0 + i));
+        }
+
+        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: colorTextures[0],
+            textures: colorTextures,
+            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, 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);
+        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.allocated = false;
+            this.buffer = null;
+            this.bound = false;
+        }
+        this._imageDataCache = null;
+        this._texture = null;
+        this._depthTexture = null;
+    }
+}
+
+export {RenderBuffer};

package/src/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};