@illgrenoble/webx-client 1.10.5 → 1.11.0

package/dist/renderer/WebXAlphaStencilBlender.js

@@ -0,0 +1,136 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebXAlphaStencilBlender = void 0;
+/**
+ * The Alpha and stencil buffer blending function. The alpha buffer contains alpha data in the
+ * green channel. The stencil buffer is a black and white image: only pixels with a stencil value > 127 are to be rendered
+ * @param colorData the color data array
+ * @param alphaData the alpha data array
+ * @param stencilData the stencil data array
+ */
+function alphaAndStencilBlend(colorData, alphaData, stencilData) {
+    if (alphaData && stencilData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            if (stencilData[i] < 128) {
+                colorData[i + 3] = 0;
+            }
+            else {
+                colorData[i + 3] = alphaData[i + 1];
+            }
+        }
+    }
+    else if (alphaData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            colorData[i + 3] = alphaData[i + 1];
+        }
+    }
+    else if (stencilData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            colorData[i + 3] = stencilData[i] < 128 ? 0 : 255;
+        }
+    }
+}
+/**
+ * The entry point for the web worker. Receives messages with data for color, alpha and stencil data and calls the blending
+ * function.
+ */
+function alphaWorkerFunc() {
+    self.onmessage = (e) => {
+        const { id, colorBuffer, alphaBuffer, stencilBuffer, width, height } = e.data;
+        const colorData = new Uint8ClampedArray(colorBuffer);
+        const alphaData = alphaBuffer ? new Uint8ClampedArray(alphaBuffer) : null;
+        const stencilData = stencilBuffer ? new Uint8ClampedArray(stencilBuffer) : null;
+        alphaAndStencilBlend(colorData, alphaData, stencilData);
+        // @ts-ignore
+        self.postMessage({ id, colorBuffer: colorData.buffer, width, height }, [colorData.buffer]);
+    };
+}
+/**
+ * The `WebXAlphaStencilBlender` class handles blending of alpha and stencil data
+ * for rendering purposes. It uses a Web Worker for asynchronous processing.
+ */
+class WebXAlphaStencilBlender {
+    /**
+     * Initializes the `WebXAlphaStencilBlender` and sets up the Web Worker (if web-workers present on the client).
+     * The web worker is initialised from the worker/blending functions above. Each blending request is assigned an id.
+     * The data is passed to the web worker along with the Id. The web worker returns the Id with blended data so that the
+     * calling promise can be resolved.
+     */
+    constructor() {
+        this._pending = new Map();
+        this._nextId = 1;
+        if (typeof Worker !== 'undefined') {
+            const blob = new Blob([alphaAndStencilBlend.toString(), '(', alphaWorkerFunc.toString(), ')()'], { type: 'application/javascript' });
+            const blobUrl = URL.createObjectURL(blob);
+            this._worker = new Worker(blobUrl);
+            URL.revokeObjectURL(blobUrl);
+            this._worker.onmessage = (e) => {
+                const { id, colorBuffer, width, height } = e.data;
+                const callback = this._pending.get(id);
+                if (!callback)
+                    return;
+                this._pending.delete(id);
+                // Recreate ImageData from transferred buffer
+                const blendedData = new Uint8ClampedArray(colorBuffer);
+                const blendedImageData = new ImageData(blendedData, width, height);
+                callback(blendedImageData);
+            };
+        }
+    }
+    /**
+     * Blends alpha and stencil data asynchronously.
+     * Main entry point to blend the different buffers. If a web-worker is available on the client then the data is prepared to transfer
+     * to the worker. Otherwise the standard blending function is called immediately.
+     * @param colorImageData - The color image data.
+     * @param alphaImageData - The alpha image data.
+     * @param stencilImageData - The stencil image data.
+     * @returns A promise that resolves to the blended `ImageData`.
+     */
+    blendAlphaAndStencil(colorImageData, alphaImageData, stencilImageData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                if (this._worker) {
+                    const id = this._nextId++;
+                    this._pending.set(id, resolve);
+                    const width = colorImageData.width;
+                    const height = colorImageData.height;
+                    const colorBuffer = colorImageData.data.buffer;
+                    let alphaBuffer = null;
+                    let stencilBuffer = null;
+                    const transfers = [colorBuffer];
+                    if (alphaImageData) {
+                        alphaBuffer = alphaImageData.data.buffer;
+                        transfers.push(alphaBuffer);
+                    }
+                    if (stencilImageData) {
+                        stencilBuffer = stencilImageData.data.buffer;
+                        transfers.push(stencilBuffer);
+                    }
+                    this._worker.postMessage({ id, colorBuffer, alphaBuffer, stencilBuffer, width, height }, transfers);
+                }
+                else {
+                    alphaAndStencilBlend(colorImageData.data, alphaImageData === null || alphaImageData === void 0 ? void 0 : alphaImageData.data, stencilImageData === null || stencilImageData === void 0 ? void 0 : stencilImageData.data);
+                    resolve(colorImageData);
+                }
+            });
+        });
+    }
+    /**
+     * Terminates the Web Worker and clears pending tasks.
+     */
+    terminate() {
+        this._worker.terminate();
+        this._pending.clear();
+    }
+}
+exports.WebXAlphaStencilBlender = WebXAlphaStencilBlender;
+//# sourceMappingURL=WebXAlphaStencilBlender.js.map

package/dist/renderer/WebXAlphaStencilBlender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebXAlphaStencilBlender.js","sourceRoot":"","sources":["../../src/renderer/WebXAlphaStencilBlender.ts"],"names":[],"mappings":"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"}

package/dist/renderer/WebXBlenderWorker.d.ts

@@ -0,0 +1 @@
+declare function alphaAndStencilBlend(colorData: any, alphaData: any, stencilData: any): void;

package/dist/renderer/WebXBlenderWorker.js

@@ -0,0 +1,33 @@
+function alphaAndStencilBlend(colorData, alphaData, stencilData) {
+    // Blend alpha (green channel -> alpha)
+    if (alphaData && stencilData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            if (stencilData[i] < 128) {
+                colorData[i + 3] = 0;
+            }
+            else {
+                colorData[i + 3] = alphaData[i + 1];
+            }
+        }
+    }
+    else if (alphaData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            colorData[i + 3] = alphaData[i + 1];
+        }
+    }
+    else if (stencilData) {
+        for (let i = 0; i < colorData.length; i += 4) {
+            colorData[i + 3] = stencilData[i] < 128 ? 0 : 255;
+        }
+    }
+}
+onmessage = (e) => {
+    const { id, colorBuffer, alphaBuffer, stencilBuffer, width, height } = e.data;
+    const colorData = new Uint8ClampedArray(colorBuffer);
+    const alphaData = alphaBuffer ? new Uint8ClampedArray(alphaBuffer) : null;
+    const stencilData = stencilBuffer ? new Uint8ClampedArray(stencilBuffer) : null;
+    alphaAndStencilBlend(colorData, alphaData, stencilData);
+    // @ts-ignore
+    self.postMessage({ id, colorBuffer: colorData.buffer, width, height }, [colorData.buffer]);
+};
+//# sourceMappingURL=WebXBlenderWorker.js.map

package/dist/renderer/WebXBlenderWorker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebXBlenderWorker.js","sourceRoot":"","sources":["../../src/renderer/WebXBlenderWorker.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAoB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW;IAC7D,uCAAuC;IACvC,IAAI,SAAS,IAAI,WAAW,EAAE,CAAC;QAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7C,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC;gBACzB,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;YAEvB,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7C,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACtC,CAAC;IAEH,CAAC;SAAM,IAAI,WAAW,EAAE,CAAC;QACvB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7C,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACpD,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAS,GAAG,CAAC,CAAC,EAAE,EAAE;IAChB,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC;IAE9E,MAAM,SAAS,GAAG,IAAI,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1E,MAAM,WAAW,GAAG,aAAa,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEhF,oBAAoB,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;IAExD,aAAa;IACb,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7F,CAAC,CAAA"}

package/dist/renderer/WebXCanvasRenderer.d.ts

@@ -0,0 +1,91 @@
+import { Camera, ColorRepresentation, Object3D, Texture, Vector2 } from 'three';
+import { Blob } from "buffer";
+/**
+ * The `WebXCanvasRenderer` class is responsible for rendering a desktop-like environment
+ * using HTML elements. It integrates with the Three.js library using 3D objects (meshes, materials, textures)
+ * to hold the graphical data used to render the windows.
+ */
+export declare class WebXCanvasRenderer {
+    private _width;
+    private _height;
+    private _desktopContainer;
+    private _desktop;
+    private _clearColor;
+    private readonly _alphaStencilBlender;
+    private _windowCanvases;
+    /**
+     * Gets the root DOM element of the renderer.
+     * @returns The root DOM element.
+     */
+    get domElement(): HTMLElement;
+    /**
+     * Initializes the `WebXCanvasRenderer` by creating the main desktop container
+     * and initializing the alpha stencil blender.
+     */
+    constructor();
+    /**
+     * Sets the size of the desktop container.
+     * @param width - The width of the desktop in pixels.
+     * @param height - The height of the desktop in pixels.
+     * @param unused - An optional unused parameter.
+     */
+    setSize(width: number, height: number, unused?: boolean): void;
+    /**
+     * Sets the background color of the desktop.
+     * @param color - The color to set, represented as a `ColorRepresentation`.
+     */
+    setClearColor(color: ColorRepresentation): void;
+    /**
+     * Renders the scene: updates the window element positions, sizes and z-orders and updates
+     * the graphical content of the windows. Any windows that are no longer in the scene have their
+     * graphical elements removed from the dom.
+     * @param scene - The root `Object3D` containing the scene to render.
+     * @param camera - The `Camera` used for rendering (currently unused).
+     */
+    render(scene: Object3D, camera: Camera): void;
+    /**
+     * Generates a screenshot of the current windows. Each window canvas is rendered onto a global
+     * desktop canvas. The main canvas is then converted into a blob with the specified image type and quality
+     * @param type The type of the screenshot (e.g., 'image/png').
+     * @param quality The quality of the screenshot (0 to 1).
+     */
+    createScreenshot(type: string, quality: number): Promise<Blob>;
+    /**
+     * Disposes of the renderer by removing all window canvases and terminating
+     * the alpha stencil blender (and its web worker if present).
+     */
+    dispose(): void;
+    /**
+     * Updates a specific region of a window canvas from the color and alpha data sent from the server. The updates are stored in the window
+     * and handled at the next render request.
+     * @param meshId - The ID of the mesh associated with the window canvas.
+     * @param srcColorMap - The source color texture.
+     * @param dstColorMap - The destination color texture.
+     * @param srcAlphaMap - The source alpha texture.
+     * @param dstAlphaMap - The destination alpha texture.
+     * @param width - The width of the region to update.
+     * @param height - The height of the region to update.
+     * @param dstPosition - The destination position of the region.
+     */
+    updateWindowRegion(meshId: number, srcColorMap: Texture, dstColorMap: Texture, srcAlphaMap: Texture, dstAlphaMap: Texture, width: number, height: number, dstPosition: Vector2): void;
+    /**
+     * Creates the main desktop container element and initializes its styles.
+     */
+    private createMainElement;
+    /**
+     * Creates a new window canvas for the given mesh and adds it to the desktop.
+     * @param mesh - The `Mesh` object representing the window.
+     */
+    private createWindowCanvas;
+    /**
+     * Removes a window canvas from the desktop and cleans up its resources.
+     * @param windowCanvas - The `WebXWindowCanvas` to remove.
+     */
+    private removeWindowCanvas;
+    /**
+     * Creates an HTML element with the specified namespace.
+     * @param name - The name of the element to create.
+     * @returns The created `HTMLElement`.
+     */
+    private createElementNS;
+}

package/dist/renderer/WebXCanvasRenderer.js

@@ -0,0 +1,190 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebXCanvasRenderer = void 0;
+const three_1 = require("three");
+const WebXWindowCanvas_1 = require("./WebXWindowCanvas");
+const WebXAlphaStencilBlender_1 = require("./WebXAlphaStencilBlender");
+/**
+ * The `WebXCanvasRenderer` class is responsible for rendering a desktop-like environment
+ * using HTML elements. It integrates with the Three.js library using 3D objects (meshes, materials, textures)
+ * to hold the graphical data used to render the windows.
+ */
+class WebXCanvasRenderer {
+    /**
+     * Gets the root DOM element of the renderer.
+     * @returns The root DOM element.
+     */
+    get domElement() {
+        return this._desktopContainer;
+    }
+    /**
+     * Initializes the `WebXCanvasRenderer` by creating the main desktop container
+     * and initializing the alpha stencil blender.
+     */
+    constructor() {
+        this._clearColor = new three_1.Color(0, 0, 0);
+        this._windowCanvases = new Map();
+        this.createMainElement();
+        this._alphaStencilBlender = new WebXAlphaStencilBlender_1.WebXAlphaStencilBlender();
+    }
+    /**
+     * Sets the size of the desktop container.
+     * @param width - The width of the desktop in pixels.
+     * @param height - The height of the desktop in pixels.
+     * @param unused - An optional unused parameter.
+     */
+    setSize(width, height, unused) {
+        this._width = width;
+        this._height = height;
+        this._desktop.style.width = `${width}px`;
+        this._desktop.style.height = `${height}px`;
+    }
+    /**
+     * Sets the background color of the desktop.
+     * @param color - The color to set, represented as a `ColorRepresentation`.
+     */
+    setClearColor(color) {
+        this._clearColor.set(color);
+        this._desktop.style.backgroundColor = `#${this._clearColor.getHexString()}`;
+    }
+    /**
+     * Renders the scene: updates the window element positions, sizes and z-orders and updates
+     * the graphical content of the windows. Any windows that are no longer in the scene have their
+     * graphical elements removed from the dom.
+     * @param scene - The root `Object3D` containing the scene to render.
+     * @param camera - The `Camera` used for rendering (currently unused).
+     */
+    render(scene, camera) {
+        if (scene.children.length > 0) {
+            const screen = scene.children[0];
+            const activeWindowIds = new Set();
+            for (const object of screen.children) {
+                if (object instanceof three_1.Mesh && object.visible) {
+                    if (!this._windowCanvases.has(object.id)) {
+                        this.createWindowCanvas(object);
+                    }
+                    const windowCanvas = this._windowCanvases.get(object.id);
+                    windowCanvas.updateGeometry();
+                    windowCanvas.updateCanvas();
+                    activeWindowIds.add(object.id);
+                }
+            }
+            // Remove defunct windows
+            for (const [windowId, windowCanvas] of this._windowCanvases.entries()) {
+                if (!activeWindowIds.has(windowId)) {
+                    this.removeWindowCanvas(windowCanvas);
+                }
+            }
+        }
+        else if (this._windowCanvases.size > 0) {
+            // Remove all windows
+            for (const [_, windowCanvas] of this._windowCanvases.entries()) {
+                this.removeWindowCanvas(windowCanvas);
+            }
+        }
+    }
+    /**
+     * Generates a screenshot of the current windows. Each window canvas is rendered onto a global
+     * desktop canvas. The main canvas is then converted into a blob with the specified image type and quality
+     * @param type The type of the screenshot (e.g., 'image/png').
+     * @param quality The quality of the screenshot (0 to 1).
+     */
+    createScreenshot(type, quality) {
+        return new Promise((resolve, reject) => {
+            try {
+                const screenshotCanvas = this.createElementNS('canvas');
+                screenshotCanvas.width = this._width;
+                screenshotCanvas.height = this._height;
+                const context = screenshotCanvas.getContext('2d');
+                // Ensure that the background is set correctly
+                context.fillStyle = `#${this._clearColor.getHexString()}`;
+                context.fillRect(0, 0, this._width, this._height);
+                // Painters algorithm: Order the windows from back to front and draw the window canvas into the screenshot
+                Array.from(this._windowCanvases.values()).sort((a, b) => a.zIndex - b.zIndex).forEach(window => {
+                    context.drawImage(window.canvas, window.x, window.y);
+                });
+                // Convert to specified image type and return the blob
+                screenshotCanvas.toBlob((blob) => {
+                    resolve(blob);
+                }, type, quality);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    /**
+     * Disposes of the renderer by removing all window canvases and terminating
+     * the alpha stencil blender (and its web worker if present).
+     */
+    dispose() {
+        // Remove all windows
+        for (const [_, windowCanvas] of this._windowCanvases.entries()) {
+            this.removeWindowCanvas(windowCanvas);
+        }
+        // Terminate the blended web worker if present
+        this._alphaStencilBlender.terminate();
+    }
+    /**
+     * Updates a specific region of a window canvas from the color and alpha data sent from the server. The updates are stored in the window
+     * and handled at the next render request.
+     * @param meshId - The ID of the mesh associated with the window canvas.
+     * @param srcColorMap - The source color texture.
+     * @param dstColorMap - The destination color texture.
+     * @param srcAlphaMap - The source alpha texture.
+     * @param dstAlphaMap - The destination alpha texture.
+     * @param width - The width of the region to update.
+     * @param height - The height of the region to update.
+     * @param dstPosition - The destination position of the region.
+     */
+    updateWindowRegion(meshId, srcColorMap, dstColorMap, srcAlphaMap, dstAlphaMap, width, height, dstPosition) {
+        const windowCanvas = this._windowCanvases.get(meshId);
+        if (windowCanvas) {
+            windowCanvas.addRegionUpdate(srcColorMap, dstColorMap, srcAlphaMap, dstAlphaMap, width, height, dstPosition);
+        }
+    }
+    /**
+     * Creates the main desktop container element and initializes its styles.
+     */
+    createMainElement() {
+        const desktopContainer = this.createElementNS('div');
+        desktopContainer.id = 'webx-desktop-container';
+        desktopContainer.style.display = 'block';
+        desktopContainer.style.position = 'relative';
+        desktopContainer.style.overflow = 'hidden';
+        const desktop = document.createElement('div');
+        desktop.id = 'webx-desktop';
+        desktopContainer.style.position = 'absolute';
+        desktopContainer.style.transformOrigin = 'top left';
+        desktopContainer.appendChild(desktop);
+        this._desktopContainer = desktopContainer;
+        this._desktop = desktop;
+    }
+    /**
+     * Creates a new window canvas for the given mesh and adds it to the desktop.
+     * @param mesh - The `Mesh` object representing the window.
+     */
+    createWindowCanvas(mesh) {
+        const windowCanvas = new WebXWindowCanvas_1.WebXWindowCanvas(mesh, this._alphaStencilBlender);
+        this._desktop.appendChild(windowCanvas.canvas);
+        this._windowCanvases.set(mesh.id, windowCanvas);
+    }
+    /**
+     * Removes a window canvas from the desktop and cleans up its resources.
+     * @param windowCanvas - The `WebXWindowCanvas` to remove.
+     */
+    removeWindowCanvas(windowCanvas) {
+        this._desktop.removeChild(windowCanvas.canvas);
+        this._windowCanvases.delete(windowCanvas.id);
+    }
+    /**
+     * Creates an HTML element with the specified namespace.
+     * @param name - The name of the element to create.
+     * @returns The created `HTMLElement`.
+     */
+    createElementNS(name) {
+        return document.createElementNS('http://www.w3.org/1999/xhtml', name);
+    }
+}
+exports.WebXCanvasRenderer = WebXCanvasRenderer;
+//# sourceMappingURL=WebXCanvasRenderer.js.map

package/dist/renderer/WebXCanvasRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebXCanvasRenderer.js","sourceRoot":"","sources":["../../src/renderer/WebXCanvasRenderer.ts"],"names":[],"mappings":"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"}

package/dist/renderer/WebXWindowBlender.d.ts

@@ -0,0 +1,11 @@
+import { BlenderModule } from './blender';
+export declare class WebXWindowBlender {
+    private _blenderModule;
+    private _byteSize;
+    private _stencilPtr;
+    private _stencilView;
+    constructor(_blenderModule: BlenderModule);
+    setByteSize(size: number): void;
+    setStencilData(stencilData: ImageData): void;
+    private _freeStencilData;
+}

package/dist/renderer/WebXWindowBlender.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebXWindowBlender = void 0;
+class WebXWindowBlender {
+    constructor(_blenderModule) {
+        this._blenderModule = _blenderModule;
+    }
+    setByteSize(size) {
+        this._byteSize = size;
+        this._freeStencilData();
+    }
+    setStencilData(stencilData) {
+        this._freeStencilData();
+        const byteLength = stencilData.data.length;
+        this._stencilPtr = this._blenderModule._malloc(byteLength);
+        this._stencilView = new Uint8ClampedArray(this._blenderModule.HEAPU8.buffer, this._stencilPtr, byteLength);
+        this._stencilView.set(stencilData.data);
+    }
+    _freeStencilData() {
+        if (this._stencilPtr) {
+            this._blenderModule._free(this._stencilPtr);
+            this._stencilView = null;
+        }
+    }
+}
+exports.WebXWindowBlender = WebXWindowBlender;
+//# sourceMappingURL=WebXWindowBlender.js.map

package/dist/renderer/WebXWindowBlender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebXWindowBlender.js","sourceRoot":"","sources":["../../src/renderer/WebXWindowBlender.ts"],"names":[],"mappings":";;;AAEA,MAAa,iBAAiB;IAM5B,YAAoB,cAA6B;QAA7B,mBAAc,GAAd,cAAc,CAAe;IACjD,CAAC;IAED,WAAW,CAAC,IAAY;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,cAAc,CAAC,WAAsB;QACnC,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;QAC1G,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAGO,gBAAgB;QACtB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;CAGF;AAjCD,8CAiCC"}

package/dist/renderer/WebXWindowCanvas.d.ts

@@ -0,0 +1,114 @@
+import { Mesh, Texture, Vector2 } from "three";
+import { WebXAlphaStencilBlender } from "./WebXAlphaStencilBlender";
+/**
+ * The `WebXWindowCanvas` class holds the graphical elements necessary for rendering
+ * a specific window in the desktop environment. HTML Canvases are used for rendering image data. Window image data
+ * is received in the form of color, alpha and stencil buffers. These are blended to produce the final window image.
+ */
+export declare class WebXWindowCanvas {
+    private readonly _mesh;
+    private readonly _alphaStencilBlender;
+    private readonly _canvas;
+    private _context;
+    private _stencilCanvas;
+    private _stencilContext;
+    private _x;
+    private _y;
+    private _zIndex;
+    private _width;
+    private _height;
+    private _colorMap;
+    private _alphaMap;
+    private _stencilMap;
+    private _regionUpdates;
+    /**
+     * Gets the unique ID of the associated mesh.
+     */
+    get id(): number;
+    /**
+     * Returns the window canvas
+     */
+    get canvas(): HTMLCanvasElement;
+    /**
+     * Returns the left-hand x coordinate of the window
+     */
+    get x(): number;
+    /**
+     * Returns the top y coordinate of the window
+     */
+    get y(): number;
+    /**
+     * Returns the zIndex of the window
+     */
+    get zIndex(): number;
+    /**
+     * Returns the width of the window
+     */
+    get width(): number;
+    /**
+     * Returns the height of the window
+     */
+    get height(): number;
+    /**
+     * Initializes a new `WebXWindowCanvas` for the given window Mesh and Material. The Mesh and Material contains all graphical information
+     * necessary to render a window (namely window position, size and z-order), the Mesh Material contains the graphical information (color, alpha and stencil data).
+     * @param _mesh - The `Mesh` object representing the window.
+     * @param _alphaStencilBlender - The alpha stencil blender instance.
+     */
+    constructor(_mesh: Mesh, _alphaStencilBlender: WebXAlphaStencilBlender);
+    /**
+     * Updates the geometry of the window canvas based on the mesh's properties if any changes are needed.
+     */
+    updateGeometry(): void;
+    /**
+     * Updates the canvas content using the material textures (color, alpha and stencil buffers)
+     * if any changes have occurred.
+     */
+    updateCanvas(): Promise<void>;
+    /**
+     * Adds a region update to the canvas taking into account the color, alpha and stencil buffers. Here we store a simple
+     * array of all the updates necessary for this frame. The updates are taken into account in the next rendering request of the window
+     * (and are only applied if the destination buffers have not been replaced).
+     * @param srcColorMap - The source color texture.
+     * @param dstColorMap - The destination color texture.
+     * @param srcAlphaMap - The source alpha texture.
+     * @param dstAlphaMap - The destination alpha texture.
+     * @param width - The width of the region to update.
+     * @param height - The height of the region to update.
+     * @param dstPosition - The destination position of the region.
+     */
+    addRegionUpdate(srcColorMap: Texture, dstColorMap: Texture, srcAlphaMap: Texture, dstAlphaMap: Texture, width: number, height: number, dstPosition: Vector2): void;
+    /**
+     * Handles all pending region updates for the canvas.  The different buffers (color, alpha and stencil) are blended (in a web
+     * worker if available) and then re-rendered into the main canvas of the window. If the window has only a color buffer then this
+     * is rendered immediately into the main canvas.
+     */
+    private handleRegionUpdates;
+    /**
+     * Checks if the provided alpha map is valid for the canvas (dimensions are equal).
+     * @param alphaMap - The alpha texture to validate.
+     * @returns `true` if the alpha map is valid, otherwise `false`.
+     */
+    private isValidAlphaMap;
+    /**
+     * Updates the stencil map for the window if it exists in the material and has changed.
+     * @param material - The material of the associated mesh.
+     */
+    private updateStencilMap;
+    /**
+     * Prepares temporary canvases to renderer the image data (jpeg format) into raw pixmaps. The pixmap data for the different
+     * images is sent to the blender for processing.
+     * @param colorImage - The color image.
+     * @param alphaImage - The alpha image.
+     * @param dstX - The destination X position.
+     * @param dstY - The destination Y position.
+     * @returns A promise that resolves to the blended `ImageData`.
+     */
+    private blendAlphaAndStencil;
+    /**
+     * Creates an HTML element with the specified namespace.
+     * @param name - The name of the element to create.
+     * @returns The created `HTMLElement`.
+     */
+    private createElementNS;
+}