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

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

@@ -1,69 +0,0 @@
-/**
- * @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

@@ -1,181 +0,0 @@
-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

@@ -1,378 +0,0 @@
-/**
- * @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

@@ -1,34 +0,0 @@
-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};