@next2d/webgl 1.15.0 → 1.17.0

package/dist/CanvasPatternToWebGL.d.ts

@@ -12,12 +12,6 @@ export declare class CanvasPatternToWebGL {
      * @public
      */
     constructor(context: CanvasToWebGLContext, texture: WebGLTexture, repeat: boolean, color_transform: Float32Array);
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    dispose(): void;
     /**
      * @member {WebGLTexture}
      * @readonly

package/dist/CanvasPatternToWebGL.js

@@ -28,17 +28,6 @@ export class CanvasPatternToWebGL {
          */
         this._$colorTransform = color_transform;
     }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    dispose() {
-        this
-            ._$context
-            .frameBuffer
-            .releaseTexture(this._$texture);
-    }
     /**
      * @member {WebGLTexture}
      * @readonly

package/dist/CanvasToWebGLContext.d.ts

@@ -6,18 +6,25 @@ import { VertexArrayObjectManager } from "./VertexArrayObjectManager";
 import { CanvasToWebGLContextBlend } from "./CanvasToWebGLContextBlend";
 import { CanvasPatternToWebGL } from "./CanvasPatternToWebGL";
 import { CanvasGradientToWebGL } from "./CanvasGradientToWebGL";
-import { AttachmentImpl, BoundsImpl, BlendModeImpl, PointImpl, InterpolationMethodImpl, SpreadMethodImpl, CapsStyleImpl, JointStyleImpl } from "@next2d/interface";
+import type { AttachmentImpl } from "./interface/AttachmentImpl";
+import type { BoundsImpl } from "./interface/BoundsImpl";
+import type { BlendModeImpl } from "./interface/BlendModeImpl";
+import type { PointImpl } from "./interface/PointImpl";
+import type { InterpolationMethodImpl } from "./interface/InterpolationMethodImpl";
+import type { SpreadMethodImpl } from "./interface/SpreadMethodImpl";
+import type { CapsStyleImpl } from "./interface/CapsStyleImpl";
+import type { JointStyleImpl } from "./interface/JointStyleImpl";
+import type { CachePositionImpl } from "./interface/CachePositionImpl";
 /**
  * @class
  */
 export declare class CanvasToWebGLContext {
+    _$offsetX: number;
+    _$offsetY: number;
     readonly _$gl: WebGL2RenderingContext;
-    private readonly _$maxTextureSize;
-    private readonly _$contextStyle;
     private _$cacheBounds;
     private _$matrix;
     private _$cacheAttachment;
-    private readonly _$stack;
     private _$globalAlpha;
     private _$imageSmoothingEnabled;
     private _$globalCompositeOperation;
@@ -27,21 +34,22 @@ export declare class CanvasToWebGLContext {
     private _$clearColorA;
     private _$viewportWidth;
     private _$viewportHeight;
+    private _$cachePosition;
+    private _$isLayer;
+    private readonly _$maxTextureSize;
+    private readonly _$contextStyle;
+    private readonly _$stack;
+    private readonly _$blends;
+    private readonly _$positions;
     private readonly _$frameBufferManager;
     private readonly _$path;
     private readonly _$grid;
-    _$offsetX: number;
-    _$offsetY: number;
-    private readonly _$blends;
-    private readonly _$positions;
-    private _$isLayer;
     private readonly _$shaderList;
     private readonly _$gradientLUT;
     private readonly _$vao;
     private readonly _$mask;
     private readonly _$blend;
-    private readonly _$maskBufferArray;
-    private readonly _$maskBoundsArray;
+    private readonly _$maskBounds;
     private readonly _$attachmentArray;
     /**
      * @param {WebGL2RenderingContext} gl
@@ -50,6 +58,12 @@ export declare class CanvasToWebGLContext {
      * @public
      */
     constructor(gl: WebGL2RenderingContext, sample: number);
+    /**
+     * @member {object}
+     * @public
+     */
+    get cachePosition(): CachePositionImpl | null;
+    set cachePosition(cache_position: CachePositionImpl | null);
     /**
      * @return {void}
      * @method
@@ -185,6 +199,55 @@ export declare class CanvasToWebGLContext {
      * @public
      */
     _$getTextureScale(width: number, height: number): number;
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstacedArray(): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clearInstacedArray(): void;
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @param  {object} position
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindRenderBuffer(position: CachePositionImpl): void;
+    /**
+     * @param  {object} position
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getTextureFromRect(position: CachePositionImpl): WebGLTexture;
+    /**
+     * @param  {WebGLTexture} texture
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawBitmap(texture: WebGLTexture): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawTextureFromRect(texture: WebGLTexture, position: CachePositionImpl): void;
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    stopStencil(): void;
     /**
      * @param  {object} [attachment = null]
      * @return {void}
@@ -224,6 +287,18 @@ export declare class CanvasToWebGLContext {
      * @public
      */
     transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    debug(index?: number): void;
+    /**
+     * @param  {number} x_min
+     * @param  {number} y_min
+     * @param  {number} x_max
+     * @param  {number} y_max
+     * @param  {Float32Array} color_transform
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstance(x_min: number, y_min: number, x_max: number, y_max: number, color_transform: Float32Array): void;
     /**
      * @param  {WebGLTexture} image
      * @param  {number} x
@@ -257,15 +332,11 @@ export declare class CanvasToWebGLContext {
      */
     clearRect(x: number, y: number, w: number, h: number): void;
     /**
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} w
-     * @param  {number} h
      * @return {void}
      * @method
      * @public
      */
-    _$clearRectStencil(x: number, y: number, w: number, h: number): void;
+    _$clearRectStencil(): void;
     /**
      * @param  {number} x
      * @param  {number} y
@@ -346,13 +417,12 @@ export declare class CanvasToWebGLContext {
      * @description マスク処理の開始関数
      *              Mask processing start function
      *
-     * @param  {Float32Array} matrix
      * @param  {object} bounds
-     * @return {Float32Array}
+     * @return {void}
      * @method
      * @public
      */
-    _$startClip(matrix: Float32Array, bounds: BoundsImpl): Float32Array | null;
+    _$startClip(bounds: BoundsImpl): boolean;
     /**
      * @return {void}
      * @method
@@ -546,12 +616,6 @@ export declare class CanvasToWebGLContext {
      * @private
      */
     _$endLayer(): void;
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$saveCurrentMask(): void;
     /**
      * @param  {number} width
      * @param  {number} height
@@ -562,17 +626,12 @@ export declare class CanvasToWebGLContext {
      */
     _$saveAttachment(width: number, height: number, multisample?: boolean): void;
     /**
+     * @param  {boolean} [release_texture = false]
      * @return {void}
      * @method
      * @private
      */
     _$restoreAttachment(release_texture?: boolean): void;
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$restoreCurrentMask(): void;
     /**
      * @return {object}
      * @method

package/dist/CanvasToWebGLContext.js

@@ -10,7 +10,8 @@ import { CanvasToWebGLContextBlend } from "./CanvasToWebGLContextBlend";
 import { CanvasPatternToWebGL } from "./CanvasPatternToWebGL";
 import { CanvasGradientToWebGL } from "./CanvasGradientToWebGL";
 import { WebGLFillMeshGenerator } from "./WebGLFillMeshGenerator";
-import { $Math, $getFloat32Array9, $getArray, $clamp, $poolArray, $inverseMatrix, $getFloat32Array6, $poolFloat32Array9, $poolBoundsObject, $getBoundsObject } from "@next2d/share";
+import { $setRenderSize } from "./Const";
+import { $Math, $getFloat32Array9, $getArray, $clamp, $poolArray, $inverseMatrix, $poolFloat32Array9, $poolBoundsObject, $getBoundsObject } from "@next2d/share";
 /**
  * @class
  */
@@ -22,6 +23,7 @@ export class CanvasToWebGLContext {
      * @public
      */
     constructor(gl, sample) {
+        $setRenderSize(gl.getParameter(gl.MAX_TEXTURE_SIZE));
         /**
          * @type {WebGL2RenderingContext}
          * @private
@@ -189,17 +191,28 @@ export class CanvasToWebGLContext {
          * @type {array}
          * @private
          */
-        this._$maskBufferArray = [];
+        this._$attachmentArray = [];
         /**
-         * @type {array}
+         * @type {object}
          * @private
          */
-        this._$maskBoundsArray = [];
+        this._$maskBounds = $getBoundsObject(0, 0, 0, 0);
         /**
-         * @type {array}
+         * @type {object}
+         * @default null
          * @private
          */
-        this._$attachmentArray = [];
+        this._$cachePosition = null;
+    }
+    /**
+     * @member {object}
+     * @public
+     */
+    get cachePosition() {
+        return this._$cachePosition;
+    }
+    set cachePosition(cache_position) {
+        this._$cachePosition = cache_position;
     }
     /**
      * @return {void}
@@ -409,6 +422,130 @@ export class CanvasToWebGLContext {
         }
         return 1;
     }
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstacedArray() {
+        this.blend.drawInstacedArray();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    clearInstacedArray() {
+        this.blend.clearInstacedArray();
+    }
+    /**
+     * @description 描画用のbufferをbind
+     *
+     * @param  {object} position
+     * @return {void}
+     * @method
+     * @public
+     */
+    bindRenderBuffer(position) {
+        this
+            ._$frameBufferManager
+            .bindRenderBuffer();
+        // 初期化
+        this._$gl.clearColor(0, 0, 0, 0);
+        this._$gl.clear(this._$gl.COLOR_BUFFER_BIT | this._$gl.STENCIL_BUFFER_BIT);
+        // 描画領域をあらためて設定
+        this._$viewportWidth = position.w;
+        this._$viewportHeight = position.h;
+        this._$gl.viewport(position.x, position.y, position.w, position.h);
+        this._$gl.enable(this._$gl.SCISSOR_TEST);
+        this._$gl.scissor(position.x, position.y, position.w, position.h);
+    }
+    /**
+     * @param  {object} position
+     * @return {WebGLTexture}
+     * @method
+     * @public
+     */
+    getTextureFromRect(position) {
+        const manager = this._$frameBufferManager;
+        const atlasTexture = manager
+            .textureManager
+            .getAtlasTexture(position.index);
+        const currentAttachment = manager.currentAttachment;
+        const attachment = manager
+            .createTextureAttachment(position.w, position.h);
+        this._$bind(attachment);
+        this.save();
+        this.setTransform(1, 0, 0, 1, 0, 0);
+        this.reset();
+        this.drawImage(atlasTexture, -position.x, -atlasTexture.height + position.h + position.y, atlasTexture.width, atlasTexture.height);
+        this.restore();
+        const texture = attachment.texture;
+        manager.releaseAttachment(attachment);
+        // reset
+        this._$bind(currentAttachment);
+        return texture;
+    }
+    /**
+     * @param  {WebGLTexture} texture
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawBitmap(texture) {
+        const variants = this
+            ._$shaderList
+            .blendShaderVariants;
+        const shader = variants
+            .getNormalBlendShader(false);
+        variants.setNormalBlendUniform(shader.uniform, 0, 0, texture.width, texture.height, this._$matrix, this._$viewportWidth, this._$viewportHeight, false, 1, 1, 1, 1, 0, 0, 0, 0);
+        this
+            ._$frameBufferManager
+            .textureManager
+            .bind0(texture, this._$imageSmoothingEnabled);
+        this.blend.toOperation("normal");
+        shader._$drawImage();
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawTextureFromRect(texture, position) {
+        const manager = this._$frameBufferManager;
+        const currentAttachment = manager.currentAttachment;
+        this.bindRenderBuffer(position);
+        manager.transferTexture(position);
+        const atlasTexture = manager
+            .textureManager
+            .getAtlasTexture(position.index);
+        const attachment = manager
+            .createTextureAttachmentFrom(atlasTexture);
+        this._$bind(attachment);
+        this._$gl.enable(this._$gl.SCISSOR_TEST);
+        this._$gl.scissor(position.x, position.y, position.w, position.h);
+        this._$gl.clearColor(0, 0, 0, 0);
+        this._$gl.disable(this._$gl.SCISSOR_TEST);
+        this.save();
+        this.setTransform(1, 0, 0, 1, 0, 0);
+        this.reset();
+        this.drawImage(texture, position.x, atlasTexture.height - position.h - position.y, texture.width, texture.height);
+        this.restore();
+        manager.releaseAttachment(attachment);
+        // reset
+        this._$bind(currentAttachment);
+        manager.textureManager.release(texture);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @public
+     */
+    stopStencil() {
+        this._$mask._$onClearRect();
+    }
     /**
      * @param  {object} [attachment = null]
      * @return {void}
@@ -499,6 +636,80 @@ export class CanvasToWebGLContext {
         this._$matrix[6] = e * a00 + f * a10 + a20;
         this._$matrix[7] = e * a01 + f * a11 + a21;
     }
+    debug(index = 0) {
+        const manager = this._$frameBufferManager;
+        const atlasTexture = manager
+            .textureManager
+            .getAtlasTexture(index);
+        const currentAttachment = manager.currentAttachment;
+        const attachment = manager.createTextureAttachmentFrom(atlasTexture);
+        this._$bind(attachment);
+        const pixels = new Uint8Array(atlasTexture.width * atlasTexture.height * 4);
+        this._$gl.readPixels(0, 0, atlasTexture.width, atlasTexture.height, this._$gl.RGBA, this._$gl.UNSIGNED_BYTE, pixels);
+        const canvas = document.createElement("canvas");
+        canvas.width = atlasTexture.width;
+        canvas.height = atlasTexture.height;
+        const ctx = canvas.getContext("2d");
+        const imageData = new ImageData(atlasTexture.width, atlasTexture.height);
+        for (let idx = 0; idx < pixels.length; ++idx) {
+            imageData.data[idx] = pixels[idx];
+        }
+        ctx === null || ctx === void 0 ? void 0 : ctx.putImageData(imageData, 0, 0);
+        console.log(canvas.toDataURL());
+        this._$bind(currentAttachment);
+        manager.releaseAttachment(attachment);
+    }
+    /**
+     * @param  {number} x_min
+     * @param  {number} y_min
+     * @param  {number} x_max
+     * @param  {number} y_max
+     * @param  {Float32Array} color_transform
+     * @return {void}
+     * @method
+     * @public
+     */
+    drawInstance(x_min, y_min, x_max, y_max, color_transform) {
+        let ct0 = 1;
+        let ct1 = 1;
+        let ct2 = 1;
+        let ct4 = 0;
+        let ct5 = 0;
+        let ct6 = 0;
+        const ct3 = this._$globalAlpha;
+        const ct7 = 0;
+        if (color_transform) {
+            ct0 = color_transform[0];
+            ct1 = color_transform[1];
+            ct2 = color_transform[2];
+            ct4 = color_transform[4] / 255;
+            ct5 = color_transform[5] / 255;
+            ct6 = color_transform[6] / 255;
+        }
+        const position = this._$cachePosition;
+        if (position) {
+            switch (this._$globalCompositeOperation) {
+                case "normal":
+                case "layer":
+                case "add":
+                case "screen":
+                case "alpha":
+                case "erase":
+                case "copy":
+                    this.blend.drawInstance(position, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, this._$globalCompositeOperation, this._$viewportWidth, this._$viewportHeight, this._$matrix, this._$imageSmoothingEnabled);
+                    break;
+                default:
+                    {
+                        const atlasTexture = this
+                            ._$frameBufferManager
+                            .textureManager
+                            .getAtlasTexture(position.index);
+                        this.blend.drawInstanceBlend(atlasTexture, x_min, y_min, x_max, y_max, ct0, ct1, ct2, ct3, ct4, ct5, ct6, ct7, position, this._$globalCompositeOperation, this._$viewportWidth, this._$viewportHeight, this._$matrix, this._$imageSmoothingEnabled);
+                    }
+                    break;
+            }
+        }
+    }
     /**
      * @param  {WebGLTexture} image
      * @param  {number} x
@@ -562,18 +773,16 @@ export class CanvasToWebGLContext {
         this._$gl.disable(this._$gl.SCISSOR_TEST);
     }
     /**
-     * @param  {number} x
-     * @param  {number} y
-     * @param  {number} w
-     * @param  {number} h
      * @return {void}
      * @method
      * @public
      */
-    _$clearRectStencil(x, y, w, h) {
+    _$clearRectStencil() {
+        // stencilを終了
         this._$mask._$onClearRect();
+        // マスクの描画領域に限定してstencil情報をクリア
         this._$gl.enable(this._$gl.SCISSOR_TEST);
-        this._$gl.scissor(x, y, w, h);
+        this._$gl.scissor(this._$maskBounds.xMin, this._$maskBounds.yMin, this._$maskBounds.xMax, this._$maskBounds.yMax);
         this._$gl.clear(this._$gl.STENCIL_BUFFER_BIT);
         this._$gl.disable(this._$gl.SCISSOR_TEST);
     }
@@ -671,6 +880,9 @@ export class CanvasToWebGLContext {
                 ._$frameBufferManager
                 .textureManager
                 .bind0(texture, true);
+            this
+                ._$frameBufferManager
+                .bindRenderBuffer();
             variants = this
                 ._$shaderList
                 .gradientShapeShaderVariants;
@@ -787,59 +999,37 @@ export class CanvasToWebGLContext {
      * @description マスク処理の開始関数
      *              Mask processing start function
      *
-     * @param  {Float32Array} matrix
      * @param  {object} bounds
-     * @return {Float32Array}
+     * @return {void}
      * @method
      * @public
      */
-    _$startClip(matrix, bounds) {
-        let x = bounds.xMin;
-        let y = bounds.yMin;
-        let width = Math.abs(bounds.xMax - bounds.xMin);
-        let height = Math.abs(bounds.yMax - bounds.yMin);
+    _$startClip(bounds) {
+        const x = bounds.xMin;
+        const y = bounds.yMin;
+        const width = Math.abs(bounds.xMax - bounds.xMin);
+        const height = Math.abs(bounds.yMax - bounds.yMin);
         // resize
         const manager = this._$frameBufferManager;
         const currentAttachment = manager.currentAttachment;
-        if (!currentAttachment || !currentAttachment.texture) {
+        if (!currentAttachment) {
             throw new Error("the current Attachment is null.");
         }
         if (x > currentAttachment.width
             || y > currentAttachment.height) {
-            return null;
-        }
-        if (width + x > currentAttachment.width) {
-            width = currentAttachment.width - x;
+            return false;
         }
-        if (height + y > currentAttachment.height) {
-            height = currentAttachment.height - y;
+        if (0 > x && 0 >= width + x) {
+            return false;
         }
-        if (0 > x) {
-            width += x;
-            x = 0;
+        if (0 > y && 0 >= height + y) {
+            return false;
         }
-        if (0 > y) {
-            height += y;
-            y = 0;
-        }
-        if (0 >= width || 0 >= height) {
-            return null;
-        }
-        width = $Math.ceil(width);
-        height = $Math.ceil(height);
-        this._$cacheBounds.xMin = x;
-        this._$cacheBounds.yMin = y;
-        this._$cacheBounds.xMax = width;
-        this._$cacheBounds.yMax = height;
-        this._$cacheAttachment = currentAttachment;
-        // create new buffer
-        this._$bind(manager.createCacheAttachment(width, height, true));
-        // draw background
-        const texture = currentAttachment.texture;
-        this.reset();
-        this.setTransform(1, 0, 0, 1, 0, 0);
-        this.drawImage(texture, -x, -y, texture.width, texture.height);
-        return $getFloat32Array6(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4] - bounds.xMin, matrix[5] - bounds.yMin);
+        this._$maskBounds.xMin = $Math.max(0, $Math.min(this._$maskBounds.xMin, x));
+        this._$maskBounds.yMin = $Math.max(0, $Math.min(this._$maskBounds.yMin, y));
+        this._$maskBounds.xMax = $Math.min(currentAttachment.width, $Math.min(this._$maskBounds.xMax, width));
+        this._$maskBounds.yMax = $Math.min(currentAttachment.height, $Math.min(this._$maskBounds.yMax, height));
+        return true;
     }
     /**
      * @return {void}
@@ -855,6 +1045,7 @@ export class CanvasToWebGLContext {
      * @public
      */
     _$leaveClip() {
+        this.drawInstacedArray();
         this._$mask._$leaveClip();
     }
     /**
@@ -1356,17 +1547,6 @@ export class CanvasToWebGLContext {
         }
         this._$isLayer = !!this._$blends.pop();
     }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$saveCurrentMask() {
-        this._$maskBufferArray.push(this._$cacheAttachment);
-        this._$cacheAttachment = null;
-        const bounds = this._$cacheBounds;
-        this._$maskBoundsArray.push($getBoundsObject(bounds.xMin, bounds.xMax, bounds.yMin, bounds.yMax));
-    }
     /**
      * @param  {number} width
      * @param  {number} height
@@ -1376,6 +1556,7 @@ export class CanvasToWebGLContext {
      * @private
      */
     _$saveAttachment(width, height, multisample = false) {
+        this.drawInstacedArray();
         const manager = this._$frameBufferManager;
         this
             ._$attachmentArray
@@ -1383,6 +1564,7 @@ export class CanvasToWebGLContext {
         this._$bind(manager.createCacheAttachment(width, height, multisample));
     }
     /**
+     * @param  {boolean} [release_texture = false]
      * @return {void}
      * @method
      * @private
@@ -1392,15 +1574,6 @@ export class CanvasToWebGLContext {
         manager.releaseAttachment(manager.currentAttachment, release_texture);
         this._$bind(this._$attachmentArray.pop());
     }
-    /**
-     * @return {void}
-     * @method
-     * @private
-     */
-    _$restoreCurrentMask() {
-        this._$cacheAttachment = this._$maskBufferArray.pop() || null;
-        this._$cacheBounds = this._$maskBoundsArray.pop() || $getBoundsObject();
-    }
     /**
      * @return {object}
      * @method