@next2d/webgl 1.14.20

package/dist/FrameBufferManager.d.ts

@@ -0,0 +1,135 @@
+import { TextureManager } from "./TextureManager";
+import { AttachmentImpl } from "./interface/AttachmentImpl";
+/**
+ * @class
+ */
+export declare class FrameBufferManager {
+    private _$gl;
+    private _$objectPool;
+    private readonly _$frameBuffer;
+    private readonly _$frameBufferTexture;
+    private _$currentAttachment;
+    private _$isBinding;
+    private readonly _$textureManager;
+    private readonly _$stencilBufferPool;
+    private readonly _$colorBufferPool;
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {number} samples
+     * @constructor
+     */
+    constructor(gl: WebGL2RenderingContext, samples: number);
+    /**
+     * @member {AttachmentImpl|null}
+     * @readonly
+     * @public
+     */
+    get currentAttachment(): AttachmentImpl | null;
+    /**
+     * @member {TextureManager}
+     * @readonly
+     * @public
+     */
+    get textureManager(): TextureManager;
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @param  {boolean} [multisample=false]
+     * @param  {number}  [samples=0]
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createCacheAttachment(width: number, height: number, multisample?: boolean, samples?: number): AttachmentImpl;
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {void}
+     * @method
+     * @public
+     */
+    setMaxSize(width: number, height: number): void;
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createTextureAttachment(width: number, height: number): AttachmentImpl;
+    /**
+     * @param  {WebGLTexture} texture
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createTextureAttachmentFrom(texture: WebGLTexture): AttachmentImpl;
+    /**
+     * @param  {AttachmentImpl} [attachment = null]
+     * @param  {boolean} [should_release_texture=false]
+     * @return {void}
+     * @method
+     * @public
+     */
+    releaseAttachment(attachment?: AttachmentImpl | null, should_release_texture?: boolean): void;
+    /**
+     * @param  {object} attachment
+     * @return {void}
+     * @method
+     * @public
+     */
+    bind(attachment: AttachmentImpl): void;
+    /**
+     * @return void
+     * @method
+     * @public
+     */
+    unbind(): void;
+    /**
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getTextureFromCurrentAttachment(): WebGLTexture;
+    /**
+     * @param  {number}     width
+     * @param  {number}     height
+     * @param  {Uint8Array} [pixels=null]
+     * @param  {boolean}    [premultipliedAlpha=false]
+     * @param  {boolean}    [flip_y=true]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromPixels(width: number, height: number, pixels?: Uint8Array | null, premultipliedAlpha?: boolean, flip_y?: boolean): WebGLTexture;
+    /**
+     * @param  {HTMLCanvasElement} canvas
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromCanvas(canvas: HTMLCanvasElement | OffscreenCanvas): WebGLTexture;
+    /**
+     * @param  {HTMLImageElement} image
+     * @param  {boolean} [smoothing=false]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromImage(image: HTMLImageElement, smoothing?: boolean): WebGLTexture;
+    /**
+     * @param  {HTMLVideoElement} video
+     * @param  {boolean} [smoothing=false]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromVideo(video: HTMLVideoElement, smoothing?: boolean): WebGLTexture;
+    /**
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromCurrentAttachment(): WebGLTexture;
+    /**
+     * @param  {WebGLTexture} texture
+     * @return void
+     * @public
+     */
+    releaseTexture(texture: WebGLTexture): void;
+}

package/dist/FrameBufferManager.js

@@ -0,0 +1,358 @@
+import { TextureManager } from "./TextureManager";
+import { StencilBufferPool } from "./StencilBufferPool";
+import { ColorBufferPool } from "./ColorBufferPool";
+/**
+ * @class
+ */
+export class FrameBufferManager {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @param {number} samples
+     * @constructor
+     */
+    constructor(gl, samples) {
+        /**
+         * @type {WebGL2RenderingContext}
+         * @private
+         */
+        this._$gl = gl;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$objectPool = [];
+        /**
+         * @type {WebGLFramebuffer}
+         * @private
+         */
+        this._$frameBuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._$frameBuffer);
+        /**
+         * @type {WebGLFramebuffer}
+         * @private
+         */
+        this._$frameBufferTexture = gl.createFramebuffer();
+        /**
+         * @type {AttachmentImpl}
+         * @default null
+         * @private
+         */
+        this._$currentAttachment = null;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$isBinding = false;
+        /**
+         * @type {TextureManager}
+         * @private
+         */
+        this._$textureManager = new TextureManager(gl);
+        /**
+         * @type {StencilBufferPool}
+         * @private
+         */
+        this._$stencilBufferPool = new StencilBufferPool(gl);
+        /**
+         * @type {ColorBufferPool}
+         * @private
+         */
+        this._$colorBufferPool = new ColorBufferPool(gl, samples);
+    }
+    /**
+     * @member {AttachmentImpl|null}
+     * @readonly
+     * @public
+     */
+    get currentAttachment() {
+        return this._$currentAttachment;
+    }
+    /**
+     * @member {TextureManager}
+     * @readonly
+     * @public
+     */
+    get textureManager() {
+        return this._$textureManager;
+    }
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @param  {boolean} [multisample=false]
+     * @param  {number}  [samples=0]
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createCacheAttachment(width, height, multisample = false, samples = 0) {
+        const attachment = this._$objectPool.pop() || {
+            "width": 0,
+            "height": 0,
+            "color": null,
+            "texture": null,
+            "msaa": false,
+            "stencil": null,
+            "mask": false,
+            "clipLevel": 0,
+            "isActive": false
+        };
+        const texture = this._$textureManager.create(width, height);
+        attachment.width = width;
+        attachment.height = height;
+        if (multisample) {
+            attachment.color = this._$colorBufferPool.create(width, height, samples);
+            attachment.texture = texture;
+            attachment.msaa = true;
+            attachment.stencil = attachment.color.stencil;
+        }
+        else {
+            attachment.color = texture;
+            attachment.texture = texture;
+            attachment.msaa = false;
+            attachment.stencil = this._$stencilBufferPool.create(width, height);
+        }
+        attachment.mask = false;
+        attachment.clipLevel = 0;
+        attachment.isActive = true;
+        return attachment;
+    }
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {void}
+     * @method
+     * @public
+     */
+    setMaxSize(width, height) {
+        this._$stencilBufferPool._$maxWidth = width;
+        this._$stencilBufferPool._$maxHeight = height;
+        this._$textureManager._$maxWidth = width;
+        this._$textureManager._$maxHeight = height;
+    }
+    /**
+     * @param  {number} width
+     * @param  {number} height
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createTextureAttachment(width, height) {
+        const attachment = this._$objectPool.pop() || {
+            "width": 0,
+            "height": 0,
+            "color": null,
+            "texture": null,
+            "msaa": false,
+            "stencil": null,
+            "mask": false,
+            "clipLevel": 0,
+            "isActive": false
+        };
+        const texture = this._$textureManager.create(width, height);
+        attachment.width = width;
+        attachment.height = height;
+        attachment.color = texture;
+        attachment.texture = texture;
+        attachment.msaa = false;
+        attachment.stencil = null;
+        attachment.mask = false;
+        attachment.clipLevel = 0;
+        attachment.isActive = true;
+        return attachment;
+    }
+    /**
+     * @param  {WebGLTexture} texture
+     * @return {AttachmentImpl}
+     * @method
+     * @public
+     */
+    createTextureAttachmentFrom(texture) {
+        const attachment = this._$objectPool.pop() || {
+            "width": 0,
+            "height": 0,
+            "color": null,
+            "texture": null,
+            "msaa": false,
+            "stencil": null,
+            "mask": false,
+            "clipLevel": 0,
+            "isActive": true
+        };
+        attachment.width = texture.width;
+        attachment.height = texture.height;
+        attachment.color = texture;
+        attachment.texture = texture;
+        attachment.msaa = false;
+        attachment.stencil = null;
+        attachment.mask = false;
+        attachment.clipLevel = 0;
+        attachment.isActive = true;
+        return attachment;
+    }
+    /**
+     * @param  {AttachmentImpl} [attachment = null]
+     * @param  {boolean} [should_release_texture=false]
+     * @return {void}
+     * @method
+     * @public
+     */
+    releaseAttachment(attachment = null, should_release_texture = false) {
+        if (!attachment || !attachment.isActive) {
+            return;
+        }
+        if (attachment.msaa) {
+            if (attachment.color instanceof WebGLRenderbuffer) {
+                this._$colorBufferPool.release(attachment.color);
+            }
+        }
+        else if (attachment.stencil) {
+            this._$stencilBufferPool.release(attachment.stencil);
+        }
+        if (should_release_texture && attachment.texture) {
+            this._$textureManager.release(attachment.texture);
+        }
+        attachment.color = null;
+        attachment.texture = null;
+        attachment.stencil = null;
+        attachment.isActive = false;
+        this._$objectPool.push(attachment);
+    }
+    /**
+     * @param  {object} attachment
+     * @return {void}
+     * @method
+     * @public
+     */
+    bind(attachment) {
+        this._$currentAttachment = attachment;
+        if (!this._$isBinding) {
+            this._$isBinding = true;
+            this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, this._$frameBuffer);
+        }
+        if (attachment.msaa) {
+            if (attachment.color instanceof WebGLRenderbuffer) {
+                this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, attachment.color);
+                this._$gl.framebufferRenderbuffer(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.RENDERBUFFER, attachment.color);
+            }
+        }
+        else {
+            if (attachment.color instanceof WebGLTexture) {
+                if (attachment.color) {
+                    this._$textureManager.bind0(attachment.color);
+                }
+                this._$gl.framebufferTexture2D(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.TEXTURE_2D, attachment.color, 0);
+            }
+        }
+        this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, attachment.stencil);
+        this._$gl.framebufferRenderbuffer(this._$gl.FRAMEBUFFER, this._$gl.STENCIL_ATTACHMENT, this._$gl.RENDERBUFFER, attachment.stencil);
+    }
+    /**
+     * @return void
+     * @method
+     * @public
+     */
+    unbind() {
+        this._$currentAttachment = null;
+        if (this._$isBinding) {
+            this._$isBinding = false;
+            this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, null);
+        }
+    }
+    /**
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getTextureFromCurrentAttachment() {
+        if (!this._$currentAttachment) {
+            throw new Error("the current attachment is null.");
+        }
+        if (!this._$currentAttachment.msaa
+            && this._$currentAttachment.texture) {
+            return this._$currentAttachment.texture;
+        }
+        const width = this._$currentAttachment.width;
+        const height = this._$currentAttachment.height;
+        const texture = this._$currentAttachment.texture;
+        if (!texture) {
+            throw new Error("the texture is null.");
+        }
+        texture.dirty = false;
+        this._$gl.bindFramebuffer(this._$gl.DRAW_FRAMEBUFFER, this._$frameBufferTexture);
+        this._$textureManager.bind0(texture);
+        this._$gl.framebufferTexture2D(this._$gl.FRAMEBUFFER, this._$gl.COLOR_ATTACHMENT0, this._$gl.TEXTURE_2D, texture, 0);
+        this._$gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, this._$gl.COLOR_BUFFER_BIT, this._$gl.NEAREST);
+        this._$gl.bindFramebuffer(this._$gl.FRAMEBUFFER, this._$frameBuffer);
+        return texture;
+    }
+    /**
+     * @param  {number}     width
+     * @param  {number}     height
+     * @param  {Uint8Array} [pixels=null]
+     * @param  {boolean}    [premultipliedAlpha=false]
+     * @param  {boolean}    [flip_y=true]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromPixels(width, height, pixels = null, premultipliedAlpha = false, flip_y = true) {
+        return this
+            ._$textureManager
+            .create(width, height, pixels, premultipliedAlpha, flip_y);
+    }
+    /**
+     * @param  {HTMLCanvasElement} canvas
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromCanvas(canvas) {
+        return this
+            ._$textureManager
+            .createFromCanvas(canvas);
+    }
+    /**
+     * @param  {HTMLImageElement} image
+     * @param  {boolean} [smoothing=false]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromImage(image, smoothing = false) {
+        return this
+            ._$textureManager
+            .createFromImage(image, smoothing);
+    }
+    /**
+     * @param  {HTMLVideoElement} video
+     * @param  {boolean} [smoothing=false]
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromVideo(video, smoothing = false) {
+        return this
+            ._$textureManager
+            .createFromVideo(video, smoothing);
+    }
+    /**
+     * @return {WebGLTexture}
+     * @public
+     */
+    createTextureFromCurrentAttachment() {
+        if (!this._$currentAttachment) {
+            throw new Error("the current attachment is null.");
+        }
+        const width = this._$currentAttachment.width;
+        const height = this._$currentAttachment.height;
+        const texture = this._$textureManager.create(width, height);
+        this._$textureManager.bind0(texture);
+        this._$gl.copyTexSubImage2D(this._$gl.TEXTURE_2D, 0, 0, 0, 0, 0, width, height);
+        return texture;
+    }
+    /**
+     * @param  {WebGLTexture} texture
+     * @return void
+     * @public
+     */
+    releaseTexture(texture) {
+        this._$textureManager.release(texture);
+    }
+}

package/dist/StencilBufferPool.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @class
+ */
+export declare class StencilBufferPool {
+    private readonly _$gl;
+    private readonly _$objectPool;
+    private _$objectPoolArea;
+    _$maxWidth: number;
+    _$maxHeight: number;
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     */
+    constructor(gl: WebGL2RenderingContext);
+    /**
+     * @member {number}
+     * @param {number} max_width
+     * @public
+     */
+    set maxWidth(max_width: number);
+    /**
+     * @member {number}
+     * @param {number} max_height
+     * @public
+     */
+    set maxHeight(max_height: number);
+    /**
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$createStencilBuffer(): WebGLRenderbuffer;
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$getStencilBuffer(width: number, height: number): WebGLRenderbuffer;
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @public
+     */
+    create(width: number, height: number): WebGLRenderbuffer;
+    /**
+     * @param  {WebGLRenderbuffer} stencilBuffer
+     * @return {void}
+     * @method
+     * @public
+     */
+    release(stencilBuffer: WebGLRenderbuffer): void;
+}

package/dist/StencilBufferPool.js

@@ -0,0 +1,142 @@
+import { $getArray } from "@next2d/share";
+/**
+ * @class
+ */
+export class StencilBufferPool {
+    /**
+     * @param {WebGL2RenderingContext} gl
+     * @constructor
+     */
+    constructor(gl) {
+        /**
+         * @type {WebGL2RenderingContext}
+         * @private
+         */
+        this._$gl = gl;
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$objectPool = $getArray();
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$objectPoolArea = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$maxWidth = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$maxHeight = 0;
+    }
+    /**
+     * @member {number}
+     * @param {number} max_width
+     * @public
+     */
+    set maxWidth(max_width) {
+        this._$maxWidth = max_width;
+    }
+    /**
+     * @member {number}
+     * @param {number} max_height
+     * @public
+     */
+    set maxHeight(max_height) {
+        this._$maxHeight = max_height;
+    }
+    /**
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$createStencilBuffer() {
+        const stencilBuffer = this._$gl.createRenderbuffer();
+        if (!stencilBuffer) {
+            throw new Error("the stencil buffer is null.");
+        }
+        stencilBuffer.width = 0;
+        stencilBuffer.height = 0;
+        stencilBuffer.area = 0;
+        stencilBuffer.dirty = true;
+        return stencilBuffer;
+    }
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @private
+     */
+    _$getStencilBuffer(width, height) {
+        const length = this._$objectPool.length;
+        for (let idx = 0; idx < length; ++idx) {
+            const stencilBuffer = this._$objectPool[idx];
+            if (stencilBuffer.width === width
+                && stencilBuffer.height === height) {
+                this._$objectPool.splice(idx, 1);
+                this._$objectPoolArea -= stencilBuffer.area;
+                return stencilBuffer;
+            }
+        }
+        if (length > 100) {
+            const stencilBuffer = this._$objectPool.shift();
+            if (stencilBuffer) {
+                this._$objectPoolArea -= stencilBuffer.area;
+                return stencilBuffer;
+            }
+        }
+        return this._$createStencilBuffer();
+    }
+    /**
+     * @param  {number}  width
+     * @param  {number}  height
+     * @return {WebGLRenderbuffer}
+     * @method
+     * @public
+     */
+    create(width, height) {
+        const stencilBuffer = this._$getStencilBuffer(width, height);
+        if (stencilBuffer.width !== width || stencilBuffer.height !== height) {
+            stencilBuffer.width = width;
+            stencilBuffer.height = height;
+            stencilBuffer.area = width * height;
+            stencilBuffer.dirty = false;
+            this._$gl.bindRenderbuffer(this._$gl.RENDERBUFFER, stencilBuffer);
+            this._$gl.renderbufferStorage(this._$gl.RENDERBUFFER, this._$gl.STENCIL_INDEX8, width, height);
+        }
+        return stencilBuffer;
+    }
+    /**
+     * @param  {WebGLRenderbuffer} stencilBuffer
+     * @return {void}
+     * @method
+     * @public
+     */
+    release(stencilBuffer) {
+        // ステンシルバッファのサイズが非常に大きい場合はプールしない
+        if (stencilBuffer.area > this._$maxWidth * this._$maxHeight * 2) {
+            this._$gl.deleteRenderbuffer(stencilBuffer);
+            return;
+        }
+        stencilBuffer.dirty = true;
+        this._$objectPool.push(stencilBuffer);
+        this._$objectPoolArea += stencilBuffer.area;
+        // プール容量が一定を超えたら、古いステンシルバッファから削除していく
+        if (this._$objectPoolArea > this._$maxWidth * this._$maxHeight * 10) {
+            const oldStencilBuffer = this._$objectPool.shift();
+            if (oldStencilBuffer) {
+                this._$objectPoolArea -= oldStencilBuffer.area;
+                this._$gl.deleteRenderbuffer(oldStencilBuffer);
+            }
+        }
+    }
+}