@lightningjs/renderer 0.8.2 → 0.8.4

package/dist/src/core/renderers/canvas/CanvasCoreRenderer.js

@@ -0,0 +1,166 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getRgbaComponents } from '../../lib/utils.js';
+import { SubTexture } from '../../textures/SubTexture.js';
+import { CoreRenderer, } from '../CoreRenderer.js';
+import { CanvasCoreTexture } from './CanvasCoreTexture.js';
+import { getRadius } from './internal/C2DShaderUtils.js';
+import { formatRgba, parseColor, } from './internal/ColorUtils.js';
+export class CanvasCoreRenderer extends CoreRenderer {
+    context;
+    canvas;
+    pixelRatio;
+    clearColor;
+    renderToTextureActive = false;
+    activeRttNode = null;
+    constructor(options) {
+        super(options);
+        this.mode = 'canvas';
+        this.shManager.renderer = this;
+        const { canvas, pixelRatio, clearColor } = options;
+        this.canvas = canvas;
+        this.context = canvas.getContext('2d');
+        this.pixelRatio = pixelRatio;
+        this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
+    }
+    reset() {
+        // eslint-disable-next-line no-self-assign
+        this.canvas.width = this.canvas.width; // quick reset canvas
+        const ctx = this.context;
+        if (this.clearColor) {
+            const [r, g, b, a] = this.clearColor;
+            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+        ctx.scale(this.pixelRatio, this.pixelRatio);
+    }
+    render() {
+        // noop
+    }
+    addQuad(quad) {
+        const ctx = this.context;
+        const { tx, ty, width, height, alpha, colorTl, colorTr, colorBr, ta, tb, tc, td, clippingRect, } = quad;
+        let texture = quad.texture;
+        let ctxTexture = undefined;
+        let frame;
+        if (texture) {
+            if (texture instanceof SubTexture) {
+                frame = texture.props;
+                texture = texture.parentTexture;
+            }
+            ctxTexture = this.txManager.getCtxTexture(texture);
+            if (texture.state === 'freed') {
+                ctxTexture.load();
+                return;
+            }
+            if (texture.state !== 'loaded' || !ctxTexture.hasImage()) {
+                return;
+            }
+        }
+        const color = parseColor(colorTl);
+        const hasTransform = ta !== 1;
+        const hasClipping = clippingRect.width !== 0 && clippingRect.height !== 0;
+        const hasGradient = colorTl !== colorTr || colorTl !== colorBr;
+        const radius = quad.shader ? getRadius(quad) : 0;
+        if (hasTransform || hasClipping || radius) {
+            ctx.save();
+        }
+        if (hasClipping) {
+            const path = new Path2D();
+            const { x, y, width, height } = clippingRect;
+            path.rect(x, y, width, height);
+            ctx.clip(path);
+        }
+        if (hasTransform) {
+            // Quad transform:
+            // | ta tb tx |
+            // | tc td ty |
+            // | 0  0  1  |
+            // C2D transform:
+            // | a  c  e  |
+            // | b  d  f  |
+            // | 0  0  1  |
+            const scale = this.pixelRatio;
+            ctx.setTransform(ta, tc, tb, td, tx * scale, ty * scale);
+            ctx.scale(scale, scale);
+            ctx.translate(-tx, -ty);
+        }
+        if (radius) {
+            const path = new Path2D();
+            path.roundRect(tx, ty, width, height, radius);
+            ctx.clip(path);
+        }
+        if (ctxTexture) {
+            const image = ctxTexture.getImage(color);
+            ctx.globalAlpha = alpha;
+            if (frame) {
+                ctx.drawImage(image, frame.x, frame.y, frame.width, frame.height, tx, ty, width, height);
+            }
+            else {
+                ctx.drawImage(image, tx, ty, width, height);
+            }
+            ctx.globalAlpha = 1;
+        }
+        else if (hasGradient) {
+            let endX = tx;
+            let endY = ty;
+            let endColor;
+            if (colorTl === colorTr) {
+                // vertical
+                endX = tx;
+                endY = ty + height;
+                endColor = parseColor(colorBr);
+            }
+            else {
+                // horizontal
+                endX = tx + width;
+                endY = ty;
+                endColor = parseColor(colorTr);
+            }
+            const gradient = ctx.createLinearGradient(tx, ty, endX, endY);
+            gradient.addColorStop(0, formatRgba(color));
+            gradient.addColorStop(1, formatRgba(endColor));
+            ctx.fillStyle = gradient;
+            ctx.fillRect(tx, ty, width, height);
+        }
+        else {
+            ctx.fillStyle = formatRgba(color);
+            ctx.fillRect(tx, ty, width, height);
+        }
+        if (hasTransform || hasClipping || radius) {
+            ctx.restore();
+        }
+    }
+    createCtxTexture(textureSource) {
+        return new CanvasCoreTexture(this.txMemManager, textureSource);
+    }
+    getShaderManager() {
+        return this.shManager;
+    }
+    renderRTTNodes() {
+        // noop
+    }
+    removeRTTNode(node) {
+        // noop
+    }
+    renderToTexture(node) {
+        // noop
+    }
+}
+//# sourceMappingURL=CanvasCoreRenderer.js.map

package/dist/src/core/renderers/canvas/CanvasCoreRenderer.js.map

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

package/dist/src/core/renderers/canvas/CanvasCoreTexture.d.ts

@@ -0,0 +1,17 @@
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { type IParsedColor } from './internal/ColorUtils.js';
+export declare class CanvasCoreTexture extends CoreContextTexture {
+    protected image: ImageBitmap | HTMLCanvasElement | undefined;
+    protected tintCache: {
+        key: string;
+        image: HTMLCanvasElement;
+    } | undefined;
+    load(): void;
+    free(): void;
+    updateMemSize(): void;
+    hasImage(): boolean;
+    getImage(color: IParsedColor): ImageBitmap | HTMLCanvasElement;
+    protected tintTexture(source: ImageBitmap | HTMLCanvasElement, color: string): HTMLCanvasElement;
+    get renderable(): boolean;
+    private onLoadRequest;
+}

package/dist/src/core/renderers/canvas/CanvasCoreTexture.js

@@ -0,0 +1,124 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { assertTruthy } from '../../../utils.js';
+import { CoreContextTexture } from '../CoreContextTexture.js';
+import { formatRgba } from './internal/ColorUtils.js';
+export class CanvasCoreTexture extends CoreContextTexture {
+    image;
+    tintCache;
+    load() {
+        if (this.textureSource.state !== 'freed') {
+            return;
+        }
+        this.textureSource.setState('loading');
+        this.onLoadRequest()
+            .then((size) => {
+            this.textureSource.setState('loaded', size);
+            this.updateMemSize();
+        })
+            .catch((err) => {
+            this.textureSource.setState('failed', err);
+        });
+    }
+    free() {
+        this.image = undefined;
+        this.tintCache = undefined;
+        this.textureSource.setState('freed');
+        this.memManager.setTextureMemUse(this, 0);
+    }
+    updateMemSize() {
+        // Counting memory usage for:
+        // - main image
+        // - tinted image
+        const mult = this.tintCache ? 8 : 4;
+        if (this.textureSource.dimensions) {
+            const { width, height } = this.textureSource.dimensions;
+            this.memManager.setTextureMemUse(this, width * height * mult);
+        }
+    }
+    hasImage() {
+        return this.image !== undefined;
+    }
+    getImage(color) {
+        const image = this.image;
+        assertTruthy(image, 'Attempt to get unloaded image texture');
+        if (color.isWhite) {
+            if (this.tintCache) {
+                this.tintCache = undefined;
+                this.updateMemSize();
+            }
+            return image;
+        }
+        const key = formatRgba(color);
+        if (this.tintCache?.key === key) {
+            return this.tintCache.image;
+        }
+        const tintedImage = this.tintTexture(image, key);
+        this.tintCache = {
+            key,
+            image: tintedImage,
+        };
+        this.updateMemSize();
+        return tintedImage;
+    }
+    tintTexture(source, color) {
+        const { width, height } = source;
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        if (ctx) {
+            // fill with target color
+            ctx.fillStyle = color;
+            ctx.globalCompositeOperation = 'copy';
+            ctx.fillRect(0, 0, width, height);
+            // multiply with image, resulting in non-transparent tinted image
+            ctx.globalCompositeOperation = 'multiply';
+            ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+            // apply original image alpha
+            ctx.globalCompositeOperation = 'destination-in';
+            ctx.drawImage(source, 0, 0, width, height, 0, 0, width, height);
+        }
+        return canvas;
+    }
+    get renderable() {
+        return this.textureSource.renderable;
+    }
+    async onLoadRequest() {
+        const { data } = await this.textureSource.getTextureData();
+        // TODO: canvas from text renderer should be able to provide the canvas directly
+        // instead of having to re-draw it into a new canvas...
+        if (data instanceof ImageData) {
+            const canvas = document.createElement('canvas');
+            canvas.width = data.width;
+            canvas.height = data.height;
+            const ctx = canvas.getContext('2d');
+            if (ctx)
+                ctx.putImageData(data, 0, 0);
+            this.image = canvas;
+            return { width: data.width, height: data.height };
+        }
+        else if (data instanceof ImageBitmap) {
+            this.image = data;
+            return { width: data.width, height: data.height };
+        }
+        return { width: 0, height: 0 };
+    }
+}
+//# sourceMappingURL=CanvasCoreTexture.js.map

package/dist/src/core/renderers/canvas/CanvasCoreTexture.js.map

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

package/dist/src/core/renderers/canvas/internal/C2DShaderUtils.d.ts

@@ -0,0 +1,5 @@
+import type { QuadOptions } from '../../CoreRenderer.js';
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping
+ */
+export declare function getRadius(quad: QuadOptions): number;

package/dist/src/core/renderers/canvas/internal/C2DShaderUtils.js

@@ -0,0 +1,32 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ROUNDED_RECTANGLE_SHADER_TYPE, UnsupportedShader, } from '../shaders/UnsupportedShader.js';
+/**
+ * Extract `RoundedRectangle` shader radius to apply as a clipping
+ */
+export function getRadius(quad) {
+    if (quad.shader instanceof UnsupportedShader) {
+        const shType = quad.shader.shType;
+        if (shType === ROUNDED_RECTANGLE_SHADER_TYPE) {
+            return quad.shaderProps?.radius ?? 0;
+        }
+    }
+    return 0;
+}
+//# sourceMappingURL=C2DShaderUtils.js.map

package/dist/src/core/renderers/canvas/internal/C2DShaderUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"C2DShaderUtils.js","sourceRoot":"","sources":["../../../../../../src/core/renderers/canvas/internal/C2DShaderUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EACL,6BAA6B,EAC7B,iBAAiB,GAClB,MAAM,iCAAiC,CAAC;AAEzC;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,IAAiB;IACzC,IAAI,IAAI,CAAC,MAAM,YAAY,iBAAiB,EAAE;QAC5C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAClC,IAAI,MAAM,KAAK,6BAA6B,EAAE;YAC5C,OAAQ,IAAI,CAAC,WAAW,EAAE,MAAiB,IAAI,CAAC,CAAC;SAClD;KACF;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}

package/dist/src/core/renderers/canvas/internal/ColorUtils.d.ts

@@ -0,0 +1,15 @@
+export interface IParsedColor {
+    isWhite: boolean;
+    a: number;
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Extract color components
+ */
+export declare function parseColor(abgr: number): IParsedColor;
+/**
+ * Format a parsed color into a rgba CSS color
+ */
+export declare function formatRgba({ a, r, g, b }: IParsedColor): string;

package/dist/src/core/renderers/canvas/internal/ColorUtils.js

@@ -0,0 +1,45 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const WHITE = {
+    isWhite: true,
+    a: 1,
+    r: 0xff,
+    g: 0xff,
+    b: 0xff,
+};
+/**
+ * Extract color components
+ */
+export function parseColor(abgr) {
+    if (abgr === 0xffffffff) {
+        return WHITE;
+    }
+    const a = ((abgr >>> 24) & 0xff) / 255;
+    const b = (abgr >>> 16) & 0xff & 0xff;
+    const g = (abgr >>> 8) & 0xff & 0xff;
+    const r = abgr & 0xff & 0xff;
+    return { isWhite: false, a, r, g, b };
+}
+/**
+ * Format a parsed color into a rgba CSS color
+ */
+export function formatRgba({ a, r, g, b }) {
+    return `rgba(${r},${g},${b},${a})`;
+}
+//# sourceMappingURL=ColorUtils.js.map

package/dist/src/core/renderers/canvas/internal/ColorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorUtils.js","sourceRoot":"","sources":["../../../../../../src/core/renderers/canvas/internal/ColorUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAUH,MAAM,KAAK,GAAiB;IAC1B,OAAO,EAAE,IAAI;IACb,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;CACR,CAAC;AAEF;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,IAAY;IACrC,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,OAAO,KAAK,CAAC;KACd;IACD,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;IACvC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,EAAE,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,MAAM,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7B,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AACxC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAgB;IACrD,OAAO,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,CAAC"}

package/dist/src/core/renderers/canvas/shaders/UnsupportedShader.d.ts

@@ -0,0 +1,10 @@
+import { CoreShader } from '../../CoreShader.js';
+export declare const ROUNDED_RECTANGLE_SHADER_TYPE = "RoundedRectangle";
+export declare class UnsupportedShader extends CoreShader {
+    shType: string;
+    constructor(shType: string);
+    bindRenderOp(): void;
+    protected bindProps(): void;
+    attach(): void;
+    detach(): void;
+}

package/dist/src/core/renderers/canvas/shaders/UnsupportedShader.js

@@ -0,0 +1,43 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CoreShader } from '../../CoreShader.js';
+export const ROUNDED_RECTANGLE_SHADER_TYPE = 'RoundedRectangle';
+export class UnsupportedShader extends CoreShader {
+    shType;
+    constructor(shType) {
+        super();
+        this.shType = shType;
+        if (shType !== ROUNDED_RECTANGLE_SHADER_TYPE) {
+            console.warn('Unsupported shader:', shType);
+        }
+    }
+    bindRenderOp() {
+        // noop
+    }
+    bindProps() {
+        // noop
+    }
+    attach() {
+        // noop
+    }
+    detach() {
+        // noop
+    }
+}
+//# sourceMappingURL=UnsupportedShader.js.map

package/dist/src/core/renderers/canvas/shaders/UnsupportedShader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsupportedShader.js","sourceRoot":"","sources":["../../../../../../src/core/renderers/canvas/shaders/UnsupportedShader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,kBAAkB,CAAC;AAEhE,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IACxC,MAAM,CAAS;IAEtB,YAAY,MAAc;QACxB,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,MAAM,KAAK,6BAA6B,EAAE;YAC5C,OAAO,CAAC,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;SAC7C;IACH,CAAC;IAED,YAAY;QACV,OAAO;IACT,CAAC;IACS,SAAS;QACjB,OAAO;IACT,CAAC;IAED,MAAM;QACJ,OAAO;IACT,CAAC;IACD,MAAM;QACJ,OAAO;IACT,CAAC;CACF"}

package/dist/src/core/renderers/webgl/WebGlCoreCtxRenderTexture.d.ts

@@ -0,0 +1,11 @@
+import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { RenderTexture } from '../../textures/RenderTexture.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+export declare class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+    textureSource: RenderTexture;
+    readonly framebuffer: WebGLFramebuffer;
+    constructor(glw: WebGlContextWrapper, memManager: TextureMemoryManager, textureSource: RenderTexture);
+    onLoadRequest(): Promise<Dimensions>;
+}

package/dist/src/core/renderers/webgl/WebGlCoreCtxRenderTexture.js

@@ -0,0 +1,51 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { assertTruthy } from '../../../utils.js';
+import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
+export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
+    framebuffer;
+    constructor(glw, memManager, textureSource) {
+        super(glw, memManager, textureSource);
+        // Create Framebuffer object
+        const framebuffer = glw.createFramebuffer();
+        assertTruthy(framebuffer, 'Unable to create framebuffer');
+        this.framebuffer = framebuffer;
+    }
+    async onLoadRequest() {
+        const { glw, memManager } = this;
+        const nativeTexture = (this._nativeCtxTexture =
+            this.createNativeCtxTexture());
+        const { width, height } = this.textureSource;
+        // Set the dimensions of the render texture
+        glw.texImage2D(0, glw.RGBA, width, height, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
+        // Update the texture memory manager
+        memManager.setTextureMemUse(this, width * height * 4);
+        // Bind the framebuffer
+        glw.bindFramebuffer(this.framebuffer);
+        // Attach the texture to the framebuffer
+        glw.framebufferTexture2D(glw.COLOR_ATTACHMENT0, nativeTexture, 0);
+        // Unbind the framebuffer
+        glw.bindFramebuffer(null);
+        return {
+            width,
+            height,
+        };
+    }
+}
+//# sourceMappingURL=WebGlCoreCtxRenderTexture.js.map

package/dist/src/core/renderers/webgl/WebGlCoreCtxRenderTexture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGlCoreCtxRenderTexture.js","sourceRoot":"","sources":["../../../../../src/core/renderers/webgl/WebGlCoreCtxRenderTexture.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,MAAM,OAAO,yBAA0B,SAAQ,mBAAmB;IAGvD,WAAW,CAAmB;IAEvC,YACE,GAAwB,EACxB,UAAgC,EAChC,aAA4B;QAE5B,KAAK,CAAC,GAAG,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;QACtC,4BAA4B;QAC5B,MAAM,WAAW,GAAG,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC5C,YAAY,CAAC,WAAW,EAAE,8BAA8B,CAAC,CAAC;QAC1D,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,aAAa;QAC1B,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACjC,MAAM,aAAa,GAAG,CAAC,IAAI,CAAC,iBAAiB;YAC3C,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;QACjC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC;QAE7C,2CAA2C;QAC3C,GAAG,CAAC,UAAU,CACZ,CAAC,EACD,GAAG,CAAC,IAAI,EACR,KAAK,EACL,MAAM,EACN,CAAC,EACD,GAAG,CAAC,IAAI,EACR,GAAG,CAAC,aAAa,EACjB,IAAI,CACL,CAAC;QAEF,oCAAoC;QACpC,UAAU,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC;QAEtD,uBAAuB;QACvB,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEtC,wCAAwC;QACxC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,iBAAiB,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC;QAElE,yBAAyB;QACzB,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAE1B,OAAO;YACL,KAAK;YACL,MAAM;SACP,CAAC;IACJ,CAAC;CACF"}

package/dist/src/core/renderers/webgl/WebGlCoreCtxTexture.d.ts

@@ -45,5 +45,15 @@ export declare class WebGlCoreCtxTexture extends CoreContextTexture {
      * @returns
      */
     free(): void;
-    private createNativeCtxTexture;
+    /**
+     * Create native context texture
+     *
+     * @remarks
+     * When this method returns the returned texture will be bound to the GL context state.
+     *
+     * @param width
+     * @param height
+     * @returns
+     */
+    protected createNativeCtxTexture(): WebGLTexture;
 }

package/dist/src/core/renderers/webgl/WebGlCoreCtxTexture.js

@@ -98,17 +98,8 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
      */
     async onLoadRequest() {
         const { glw, memManager } = this;
-        // On initial load request, create a 1x1 transparent texture to use until
-        // the texture data is finally loaded.
-        glw.activeTexture(0);
-        glw.bindTexture(this._nativeCtxTexture);
-        // linear texture filtering
-        glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-        glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
-        // texture wrapping method
-        glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-        glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-        glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, TRANSPARENT_TEXTURE_DATA);
+        // Set to a 1x1 transparent texture
+        glw.texImage2D(0, glw.RGBA, 1, 1, 0, glw.RGBA, glw.UNSIGNED_BYTE, null);
         memManager.setTextureMemUse(this, TRANSPARENT_TEXTURE_DATA.byteLength);
         const textureData = await this.textureSource?.getTextureData();
         // If the texture has been freed while loading, return early.
@@ -188,12 +179,32 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
         memManager.setTextureMemUse(this, 0);
         this._nativeCtxTexture = null;
     }
+    /**
+     * Create native context texture
+     *
+     * @remarks
+     * When this method returns the returned texture will be bound to the GL context state.
+     *
+     * @param width
+     * @param height
+     * @returns
+     */
     createNativeCtxTexture() {
         const { glw } = this;
         const nativeTexture = glw.createTexture();
         if (!nativeTexture) {
             throw new Error('Could not create WebGL Texture');
         }
+        // On initial load request, create a 1x1 transparent texture to use until
+        // the texture data is finally loaded.
+        glw.activeTexture(0);
+        glw.bindTexture(nativeTexture);
+        // linear texture filtering
+        glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+        glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
+        // texture wrapping method
+        glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+        glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
         return nativeTexture;
     }
 }