csyjk 1.1.1 → 1.2.2

package/src/lib/gltf/assets/yjkkit-sdk/src/viewer/scene/webgl/RenderBuffer.js

@@ -0,0 +1,315 @@
+import {Canvas2Image} from "../libs/canvas2image.js";
+
+/**
+ * @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;
+    }
+}
+
+export {RenderBuffer};

package/src/lib/gltf/assets/yjkkit-sdk/src/viewer/scene/webgl/RenderFlags.js

@@ -0,0 +1,203 @@
+/**
+ * Indicates what rendering needs to be done for the layers within a {@link Drawable}.
+ *
+ * Each Drawable has a RenderFlags in {@link Drawable#renderFlags}.
+ *
+ * Before rendering each frame, {@link Renderer} will call {@link Drawable#rebuildRenderFlags} on each {@link Drawable}.
+ *
+ * Then, when rendering a frame, Renderer will apply rendering passes to each Drawable according on what flags are set in {@link Drawable#renderFlags}.
+ *
+ * @private
+ */
+class RenderFlags {
+
+    /**
+     * @private
+     */
+    constructor() {
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate which layers are visible within the {@link Drawable}.
+         *
+         * This is a list of IDs of visible layers within the {@link Drawable}. The IDs will be whatever the
+         * {@link Drawable} uses to identify its layers, usually integers.
+         *
+         * @property visibleLayers
+         * @type {Number[]}
+         */
+        this.visibleLayers = [];
+
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate which {@link SectionPlane}s are active within each layer of the {@link Drawable}.
+         *
+         * Layout is as follows:
+         *
+         * ````[
+         *      false, false, true, // Layer 0, SectionPlanes 0, 1, 2
+         *      false, true, true,  // Layer 1, SectionPlanes 0, 1, 2
+         *      true, false, true   // Layer 2, SectionPlanes 0, 1, 2
+         * ]````
+         *
+         * @property sectionPlanesActivePerLayer
+         * @type {Boolean[]}
+         */
+        this.sectionPlanesActivePerLayer = [];
+
+        this.reset();
+    }
+
+    /**
+     * @private
+     */
+    reset() {
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate whether the {@link Drawable} is culled.
+         * 
+         * When this is ````false````, then all of the other properties on ````RenderFlags```` will remain at their default values.
+         * 
+         * @property culled
+         * @type {Boolean}
+         */
+        this.culled = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate whether the {@link Drawable} is sliced by any {@link SectionPlane}s.
+         *
+         * @property sectioned
+         * @type {Boolean}
+         */
+        this.sectioned  = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the number of layers within the {@link Drawable}.
+         *
+         * @property numLayers
+         * @type {Number}
+         */
+        this.numLayers = 0;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the number of visible layers within the {@link Drawable}.
+         *
+         * @property numVisibleLayers
+         * @type {Number}
+         */
+        this.numVisibleLayers = 0;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs {@link Drawable#drawColorOpaque}.
+         * @property colorOpaque
+         * @type {boolean}
+         */
+        this.colorOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs {@link Drawable#drawColorTransparent}.
+         * @property colorTransparent
+         * @type {boolean}
+         */
+        this.colorTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs {@link Drawable#drawEdgesColorOpaque}.
+         * @property edgesOpaque
+         * @type {boolean}
+         */
+        this.edgesOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs {@link Drawable#drawEdgesColorTransparent}.
+         * @property edgesTransparent
+         * @type {boolean}
+         */
+        this.edgesTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawSilhouetteXRayed}.
+         * @property xrayedSilhouetteOpaque
+         * @type {boolean}
+         */
+        this.xrayedSilhouetteOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawEdgesXRayed}.
+         * @property xrayedEdgesOpaque
+         * @type {boolean}
+         */
+        this.xrayedEdgesOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawSilhouetteXRayed}.
+         * @property xrayedSilhouetteTransparent
+         * @type {boolean}
+         */
+        this.xrayedSilhouetteTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawEdgesXRayed}.
+         * @property xrayedEdgesTransparent
+         * @type {boolean}
+         */
+        this.xrayedEdgesTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawSilhouetteHighlighted}.
+         * @property highlightedSilhouetteOpaque
+         * @type {boolean}
+         */
+        this.highlightedSilhouetteOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawEdgesHighlighted}.
+         * @property highlightedEdgesOpaque
+         * @type {boolean}
+         */
+        this.highlightedEdgesOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawSilhouetteHighlighted}.
+         * @property highlightedSilhouetteTransparent
+         * @type {boolean}
+         */
+        this.highlightedSilhouetteTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawEdgesHighlighted}.
+         * @property highlightedEdgesTransparent
+         * @type {boolean}
+         */
+        this.highlightedEdgesTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawSilhouetteSelected}.
+         * @property selectedSilhouetteOpaque
+         * @type {boolean}
+         */
+        this.selectedSilhouetteOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs an opaque {@link Drawable#drawEdgesSelected}.
+         * @property selectedEdgesOpaque
+         * @type {boolean}
+         */
+        this.selectedEdgesOpaque = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawSilhouetteSelected}.
+         * @property selectedSilhouetteTransparent
+         * @type {boolean}
+         */
+        this.selectedSilhouetteTransparent = false;
+
+        /**
+         * Set by {@link Drawable#rebuildRenderFlags} to indicate the {@link Drawable} needs a transparent {@link Drawable#drawEdgesSelected}.
+         * @property selectedEdgesTransparent
+         * @type {boolean}
+         */
+        this.selectedEdgesTransparent = false;
+    }
+}
+
+export {RenderFlags};

package/src/lib/gltf/assets/yjkkit-sdk/src/viewer/scene/webgl/RenderState.js

@@ -0,0 +1,40 @@
+import {Map} from "../utils/Map.js";
+
+const ids = new Map({});
+
+/**
+ * @desc Represents a chunk of state changes applied by the {@link Scene}'s renderer while it renders a frame.
+ *
+ * * Contains properties that represent the state changes.
+ * * Has a unique automatically-generated numeric ID, which the renderer can use to sort these, in order to avoid applying redundant state changes for each frame.
+ * * Initialize your own properties on a RenderState via its constructor.
+ *
+ * @private
+ */
+class RenderState {
+
+    constructor(cfg) {
+
+        /**
+         The RenderState's ID, unique within the renderer.
+         @property id
+         @type {Number}
+         @final
+         */
+        this.id = ids.addItem({});
+        for (const key in cfg) {
+            if (cfg.hasOwnProperty(key)) {
+                this[key] = cfg[key];
+            }
+        }
+    }
+
+    /**
+     Destroys this RenderState.
+     */
+    destroy() {
+        ids.removeItem(this.id);
+    }
+}
+
+export {RenderState};