@next2d/webgl 1.18.12 → 3.0.0

package/src/Context/usecase/ContextApplyFilterUseCase.js

@@ -0,0 +1,206 @@
+import { execute as frameBufferManagerGetTextureFromNodeUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetTextureFromNodeUseCase";
+import { execute as filterApplyBlurFilterUseCase } from "../../Filter/BlurFilter/usecase/FilterApplyBlurFilterUseCase";
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+import { execute as textureManagerBind0UseCase } from "../../TextureManager/usecase/TextureManagerBind0UseCase";
+import { execute as variantsBlendMatrixTextureShaderService } from "../../Shader/Variants/Blend/service/VariantsBlendMatrixTextureShaderService";
+import { execute as shaderManagerSetMatrixTextureUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMatrixTextureUniformService";
+import { execute as shaderManagerDrawTextureUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerDrawTextureUseCase";
+import { execute as frameBufferManagerReleaseAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerReleaseAttachmentObjectUseCase";
+import { execute as textureManagerReleaseTextureObjectUseCase } from "../../TextureManager/usecase/TextureManagerReleaseTextureObjectUseCase";
+import { execute as filterApplyColorMatrixFilterUseCase } from "../../Filter/ColorMatrixFilter/usecase/FilterApplyColorMatrixFilterUseCase";
+import { execute as filterApplyGlowFilterUseCase } from "../../Filter/GlowFilter/usecase/FilterApplyGlowFilterUseCase";
+import { execute as filterApplyDropShadowFilterUseCase } from "../../Filter/DropShadowFilter/usecase/FilterApplyDropShadowFilterUseCase";
+import { execute as filterApplyBevelFilterUseCase } from "../../Filter/BevelFilter/usecase/FilterApplyBevelFilterUseCase";
+import { execute as filterApplyGradientBevelFilterUseCase } from "../../Filter/GradientBevelFilter/usecase/FilterApplyGradientBevelFilterUseCase";
+import { execute as filterApplyGradientGlowFilterUseCase } from "../../Filter/GradientGlowFilter/usecase/FilterApplyGradientGlowFilterUseCase";
+import { execute as filterApplyConvolutionFilterUseCase } from "../../Filter/ConvolutionFilter/usecase/FilterApplyConvolutionFilterUseCase";
+import { execute as filterApplyDisplacementMapFilterUseCase } from "../../Filter/DisplacementMapFilter/usecase/FilterApplyDisplacementMapFilterUseCase";
+import { execute as blendDrawFilterToMainUseCase } from "../../Blend/usecase/BlendDrawFilterToMainUseCase";
+import { $cacheStore } from "@next2d/cache";
+import { $offset } from "../../Filter";
+import { $context, $getFloat32Array6, $devicePixelRatio, $multiplyMatrices, $poolFloat32Array6 } from "../../WebGLUtil";
+/**
+ * @description ColorMatrixFilter用の再利用可能なバッファ（GC回避）
+ *              Reusable buffer for ColorMatrixFilter (avoid GC)
+ *
+ * @type {Float32Array}
+ * @private
+ */
+const $colorMatrixBuffer = new Float32Array(20);
+/**
+ * @description フィルターを適用します。
+ *              Apply the filter.
+ *
+ * @param  {Node} node
+ * @param  {string} unique_key
+ * @param  {boolean} updated
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @param  {IBlendMode} blend_mode
+ * @param  {Float32Array} bounds
+ * @param  {Float32Array} params
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node, unique_key, updated, width, height, is_bitmap, matrix, color_transform, blend_mode, bounds, params) => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    let textureObject = null;
+    const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+    const scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+    const key = $cacheStore.generateFilterKeys(matrix[0], matrix[1], matrix[2], matrix[3]);
+    let useCache = false;
+    const fKey = $cacheStore.get(unique_key, "fKey");
+    if (fKey === key) {
+        const cacheTextureObject = $cacheStore.get(unique_key, "fTexture");
+        if (updated) {
+            textureManagerReleaseTextureObjectUseCase(cacheTextureObject);
+        }
+        else {
+            useCache = true;
+            textureObject = cacheTextureObject;
+        }
+    }
+    let offsetX = 0;
+    let offsetY = 0;
+    if (!useCache) {
+        // 描画元のテクスチャを取得
+        textureObject = frameBufferManagerGetTextureFromNodeUseCase(node);
+        const radianX = Math.atan2(matrix[1], matrix[0]);
+        const radianY = Math.atan2(-matrix[2], matrix[3]);
+        const a0 = is_bitmap ? scaleX * Math.cos(radianX) : Math.cos(radianX);
+        const b1 = is_bitmap ? scaleX * Math.sin(radianX) : Math.sin(radianX);
+        const c2 = is_bitmap ? -scaleY * Math.sin(radianY) : -Math.sin(radianY);
+        const d3 = is_bitmap ? scaleY * Math.cos(radianY) : Math.cos(radianY);
+        const a = $getFloat32Array6(a0, b1, c2, d3, width / 2, height / 2);
+        const b = $getFloat32Array6(1, 0, 0, 1, -node.w / 2, -node.h / 2);
+        const tMatrix = $multiplyMatrices(a, b);
+        $poolFloat32Array6(a);
+        $poolFloat32Array6(b);
+        if (tMatrix[0] !== 1 || tMatrix[1] !== 0 || tMatrix[2] !== 0 || tMatrix[3] !== 1) {
+            const attachmentObject = frameBufferManagerGetAttachmentObjectUseCase(width, height, false);
+            $context.bind(attachmentObject);
+            $context.reset();
+            $context.setTransform(tMatrix[0], tMatrix[1], tMatrix[2], tMatrix[3], tMatrix[4], tMatrix[5]);
+            offsetX = tMatrix[4];
+            offsetY = tMatrix[5];
+            textureManagerBind0UseCase(textureObject);
+            // 元の描画をフィルター用のテクスチャに描画
+            const shaderManager = variantsBlendMatrixTextureShaderService();
+            shaderManagerSetMatrixTextureUniformService(shaderManager, textureObject.width, textureObject.height);
+            shaderManagerDrawTextureUseCase(shaderManager);
+            // 元のテクスチャを解放
+            textureManagerReleaseTextureObjectUseCase(textureObject);
+            // フィルター用のテクスチャをセットしてコピー用のAttachmentObjectをリリース
+            textureObject = attachmentObject.texture;
+            frameBufferManagerReleaseAttachmentObjectUseCase(attachmentObject, false);
+            if (currentAttachmentObject) {
+                $context.bind(currentAttachmentObject);
+            }
+        }
+        $poolFloat32Array6(tMatrix);
+        // オフセットを初期化
+        $offset.x = 0;
+        $offset.y = 0;
+        // フィルターを適用
+        for (let idx = 0; params.length > idx;) {
+            const type = params[idx++];
+            switch (type) {
+                case 0: // BevelFilter
+                    textureObject = filterApplyBevelFilterUseCase(textureObject, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]));
+                    break;
+                case 1: // BlurFilter
+                    textureObject = filterApplyBlurFilterUseCase(textureObject, matrix, params[idx++], params[idx++], params[idx++]);
+                    break;
+                case 2: // ColorMatrixFilter
+                    // 再利用可能なバッファを使用（GC回避）
+                    for (let i = 0; i < 20; ++i) {
+                        $colorMatrixBuffer[i] = params[idx++];
+                    }
+                    textureObject = filterApplyColorMatrixFilterUseCase(textureObject, $colorMatrixBuffer);
+                    break;
+                case 3: // ConvolutionFilter
+                    {
+                        const matrix_x = params[idx++];
+                        const matrix_y = params[idx++];
+                        const length = matrix_x * matrix_y;
+                        const matrix = params.subarray(idx, idx + length);
+                        idx += length;
+                        textureObject = filterApplyConvolutionFilterUseCase(textureObject, matrix_x, matrix_y, matrix, params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), params[idx++], params[idx++]);
+                    }
+                    break;
+                case 4: // DisplacementMapFilter
+                    {
+                        const length = params[idx++];
+                        const buffer = new Uint8Array(length);
+                        buffer.set(params.subarray(idx, idx + length));
+                        idx += length;
+                        textureObject = filterApplyDisplacementMapFilterUseCase(textureObject, buffer, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++]);
+                    }
+                    break;
+                case 5: // DropShadowFilter
+                    textureObject = filterApplyDropShadowFilterUseCase(textureObject, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), Boolean(params[idx++]));
+                    break;
+                case 6: // GlowFilter
+                    textureObject = filterApplyGlowFilterUseCase(textureObject, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]));
+                    break;
+                case 7: // GradientBevelFilter
+                    {
+                        const distance = params[idx++];
+                        const angle = params[idx++];
+                        let length = params[idx++];
+                        const colors = params.subarray(idx, idx + length);
+                        idx += length;
+                        length = params[idx++];
+                        const alphas = params.subarray(idx, idx + length);
+                        idx += length;
+                        length = params[idx++];
+                        const ratios = params.subarray(idx, idx + length);
+                        idx += length;
+                        textureObject = filterApplyGradientBevelFilterUseCase(textureObject, matrix, distance, angle, colors, alphas, ratios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]));
+                    }
+                    break;
+                case 8: // GradientGlowFilter
+                    {
+                        const distance = params[idx++];
+                        const angle = params[idx++];
+                        let length = params[idx++];
+                        const colors = params.subarray(idx, idx + length);
+                        idx += length;
+                        length = params[idx++];
+                        const alphas = params.subarray(idx, idx + length);
+                        idx += length;
+                        length = params[idx++];
+                        const ratios = params.subarray(idx, idx + length);
+                        idx += length;
+                        textureObject = filterApplyGradientGlowFilterUseCase(textureObject, matrix, distance, angle, colors, alphas, ratios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]));
+                    }
+                    break;
+            }
+        }
+    }
+    else {
+        offsetX = $cacheStore.get(unique_key, "offsetX");
+        offsetY = $cacheStore.get(unique_key, "offsetY");
+    }
+    if (textureObject) {
+        const devicePixelRatio = $devicePixelRatio;
+        const xMin = bounds[0] * (scaleX / devicePixelRatio);
+        const yMin = bounds[1] * (scaleY / devicePixelRatio);
+        $context.reset();
+        $context.setTransform(1, 0, 0, 1, 0, 0);
+        $context.globalCompositeOperation = blend_mode;
+        blendDrawFilterToMainUseCase(textureObject, color_transform, -offsetX + xMin + matrix[4], -offsetY + yMin + matrix[5]);
+    }
+    if (!useCache) {
+        $cacheStore.set(unique_key, "fKey", key);
+        $cacheStore.set(unique_key, "fTexture", textureObject);
+        $cacheStore.set(unique_key, "offsetX", offsetX);
+        $cacheStore.set(unique_key, "offsetY", offsetY);
+    }
+    if (currentAttachmentObject) {
+        $context.bind(currentAttachmentObject);
+    }
+};

package/src/Context/usecase/ContextBindUseCase.d.ts

@@ -0,0 +1,13 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { Context } from "../../Context";
+/**
+ * @description アタッチメントオブジェクトのサイズに変更・初期化し、フレームバッファにアタッチメントオブジェクトをバインドする
+ *              Change and initialize to the size of the attachment object and bind the attachment object to the frame buffer
+ *
+ * @param  {Context} context
+ * @param  {IAttachmentObject} attachment_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, attachment_object: IAttachmentObject) => void;

package/src/Context/usecase/ContextBindUseCase.js

@@ -0,0 +1,42 @@
+import { $currentAttachment } from "../../FrameBufferManager";
+import { execute as frameBufferManagerBindAttachmentObjectService } from "../../FrameBufferManager/service/FrameBufferManagerBindAttachmentObjectService";
+import { execute as maskBindUseCase } from "../../Mask/usecase/MaskBindUseCase";
+import { $gl, $setViewportSize } from "../../WebGLUtil";
+/**
+ * @description アタッチメントオブジェクトのサイズに変更・初期化し、フレームバッファにアタッチメントオブジェクトをバインドする
+ *              Change and initialize to the size of the attachment object and bind the attachment object to the frame buffer
+ *
+ * @param  {Context} context
+ * @param  {IAttachmentObject} attachment_object
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, attachment_object) => {
+    // fixed logic
+    const currentAttachment = $currentAttachment;
+    if (currentAttachment
+        && attachment_object.id === currentAttachment.id) {
+        return;
+    }
+    // フレームバッファにアタッチメントオブジェクトをバインドする
+    frameBufferManagerBindAttachmentObjectService(attachment_object);
+    if (!currentAttachment
+        || currentAttachment.width !== attachment_object.width
+        || currentAttachment.height !== attachment_object.height) {
+        $setViewportSize(attachment_object.width, attachment_object.height);
+        $gl.viewport(0, 0, attachment_object.width, attachment_object.height);
+    }
+    // カラーバッファorステンシルバッファが、未初期化の場合はクリアする
+    const object = attachment_object.msaa
+        ? attachment_object.color
+        : attachment_object.stencil;
+    // 再利用のオブジェクトの場合は、描画情報をクリアする
+    // clearColorは初期化時に(0,0,0,0)で固定済みのためそのまま使用
+    if (object.dirty) {
+        object.dirty = false;
+        context.clearRect(0, 0, attachment_object.width, attachment_object.height);
+    }
+    // mask bind
+    maskBindUseCase(attachment_object.mask);
+};

package/src/Context/usecase/ContextBitmapFillUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description パスコマンドのビットマップ塗り実行します。
+ *              Execute bitmap painting of path commands.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean) => void;

package/src/Context/usecase/ContextBitmapFillUseCase.js

@@ -0,0 +1,31 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { $bitmapData } from "../../Bitmap";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description パスコマンドのビットマップ塗り実行します。
+ *              Execute bitmap painting of path commands.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (pixels, matrix, width, height, repeat, smooth) => {
+    const vertices = $getVertices();
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push("bitmap");
+    const fillMesh = meshFillGenerateUseCase(vertices);
+    $addFillBuffer(fillMesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(fillMesh.indexCount);
+    $bitmapData.push(pixels, matrix, width, height, repeat, smooth);
+};

package/src/Context/usecase/ContextBitmapStrokeUseCase.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description パスコマンドの線のビットマップの描画を実行します。
+ *              Execute drawing of bitmap of line of path command.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean) => void;

package/src/Context/usecase/ContextBitmapStrokeUseCase.js

@@ -0,0 +1,31 @@
+import { $getVertices } from "../../PathCommand";
+import { execute as meshStrokeGenerateUseCase } from "../../Mesh/usecase/MeshStrokeGenerateUseCase";
+import { $bitmapData } from "../../Bitmap";
+import { $addFillBuffer, $fillTypes, $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description パスコマンドの線のビットマップの描画を実行します。
+ *              Execute drawing of bitmap of line of path command.
+ *
+ * @param  {Uint8Array} pixels
+ * @param  {Float32Array} matrix
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} repeat
+ * @param  {boolean} smooth
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (pixels, matrix, width, height, repeat, smooth) => {
+    const vertices = $getVertices(true);
+    if (!vertices.length) {
+        return;
+    }
+    // 塗りの種類を追加
+    $fillTypes.push("bitmap");
+    const mesh = meshStrokeGenerateUseCase(vertices);
+    $addFillBuffer(mesh.buffer);
+    // 塗りのインデックスを追加
+    $fillBufferIndexes.push(mesh.indexCount);
+    $bitmapData.push(pixels, matrix, width, height, repeat, smooth);
+};

package/src/Context/usecase/ContextClearRectUseCase.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description 指定範囲をクリアする
+ *              Clear the specified range
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x: number, y: number, w: number, h: number) => void;

package/src/Context/usecase/ContextClearRectUseCase.js

@@ -0,0 +1,20 @@
+import { $gl, $enableScissorTest, $disableScissorTest } from "../../WebGLUtil";
+/**
+ * @description 指定範囲をクリアする
+ *              Clear the specified range
+ *
+ * @param  {number} x
+ * @param  {number} y
+ * @param  {number} w
+ * @param  {number} h
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x, y, w, h) => {
+    // 指定範囲をクリア
+    $enableScissorTest();
+    $gl.scissor(x, y, w, h);
+    $gl.clear($gl.COLOR_BUFFER_BIT | $gl.STENCIL_BUFFER_BIT);
+    $disableScissorTest();
+};

package/src/Context/usecase/ContextClipUseCase.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description Contextのパスコマンドのマスク描画を実行します。
+ *              Execute Context path command mask drawing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Context/usecase/ContextClipUseCase.js

@@ -0,0 +1,66 @@
+import { execute as vertexArrayObjectCreateFillObjectUseCase } from "../../VertexArrayObject/usecase/VertexArrayObjectBindFillMeshUseCase";
+import { execute as vertexArrayObjectReleaseVertexArrayObjectService } from "../../VertexArrayObject/service/VertexArrayObjectReleaseVertexArrayObjectService";
+import { execute as variantsShapeMaskShaderService } from "../../Shader/Variants/Shape/service/VariantsShapeMaskShaderService";
+import { execute as shaderManagerSetMaskUniformService } from "../../Shader/ShaderManager/service/ShaderManagerSetMaskUniformService";
+import { execute as shaderManagerFillUseCase } from "../../Shader/ShaderManager/usecase/ShaderManagerFillUseCase";
+import { execute as maskUnionMaskService } from "../../Mask/service/MaskUnionMaskService";
+import { $clipLevels, $clipBounds } from "../../Mask";
+import { $gl, $context, $enableScissorTest, $disableScissorTest } from "../../WebGLUtil";
+import { $fillBufferIndexes, $clearFillBufferSetting } from "../../Mesh";
+import { $terminateGrid, $gridDataMap } from "../../Grid";
+/**
+ * @description Contextのパスコマンドのマスク描画を実行します。
+ *              Execute Context path command mask drawing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    // レベルと描画範囲をセット
+    const bounds = $clipBounds.get(currentAttachmentObject.clipLevel);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    const width = Math.ceil(Math.abs(xMax - xMin));
+    const height = Math.ceil(Math.abs(yMax - yMin));
+    $enableScissorTest();
+    $gl.scissor(xMin, currentAttachmentObject.height - yMin - height, width, height);
+    const vertexArrayObject = vertexArrayObjectCreateFillObjectUseCase();
+    let level = $clipLevels.get(currentAttachmentObject.clipLevel);
+    let offset = 0;
+    let gridData = null;
+    const length = $fillBufferIndexes.length;
+    for (let idx = 0; idx < length; idx++) {
+        $gl.stencilMask(1 << level - 1);
+        const indexCount = $fillBufferIndexes[idx];
+        if ($gridDataMap.has(idx)) {
+            gridData = $gridDataMap.get(idx);
+        }
+        const useGrid = !!gridData;
+        const shaderManager = variantsShapeMaskShaderService(useGrid);
+        if (gridData) {
+            shaderManagerSetMaskUniformService(shaderManager, gridData);
+        }
+        shaderManagerFillUseCase(shaderManager, vertexArrayObject, offset, indexCount);
+        offset += indexCount;
+        ++level;
+        if (level > 7) {
+            maskUnionMaskService();
+            level = currentAttachmentObject.clipLevel + 1;
+        }
+    }
+    // update clip level
+    $clipLevels.set(currentAttachmentObject.clipLevel, level);
+    // release vertex array
+    vertexArrayObjectReleaseVertexArrayObjectService(vertexArrayObject);
+    // clear fill buffer setting
+    $clearFillBufferSetting();
+    $terminateGrid();
+    $disableScissorTest();
+};

package/src/Context/usecase/ContextContainerBeginLayerUseCase.d.ts

@@ -0,0 +1,18 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+/**
+ * @description コンテナレイヤーのスタック
+ *              Container layer stack
+ *
+ * @type {IAttachmentObject[]}
+ * @protected
+ */
+export declare const $containerLayerStack: IAttachmentObject[];
+/**
+ * @description コンテナのフィルター/ブレンド用のレイヤーを開始します。
+ *              Begin a container layer for filter/blend processing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (width: number, height: number) => void;

package/src/Context/usecase/ContextContainerBeginLayerUseCase.js

@@ -0,0 +1,31 @@
+import { execute as frameBufferManagerGetAttachmentObjectUseCase } from "../../FrameBufferManager/usecase/FrameBufferManagerGetAttachmentObjectUseCase";
+import { $context } from "../../WebGLUtil";
+/**
+ * @description コンテナレイヤーのスタック
+ *              Container layer stack
+ *
+ * @type {IAttachmentObject[]}
+ * @protected
+ */
+export const $containerLayerStack = [];
+/**
+ * @description コンテナのフィルター/ブレンド用のレイヤーを開始します。
+ *              Begin a container layer for filter/blend processing.
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (width, height) => {
+    // レイヤー切り替え前に、今のメインFBOに対する未描画のインスタンスをフラッシュ
+    $context.drawArraysInstanced();
+    const mainAttachment = $context.$mainAttachmentObject;
+    // 現在のmainAttachmentObjectをスタックに保存
+    $containerLayerStack.push(mainAttachment);
+    // メインと同じサイズの一時アタッチメントを作成
+    const layerAttachment = frameBufferManagerGetAttachmentObjectUseCase(width, height, false);
+    // 一時アタッチメントをmainに設定
+    $context.$mainAttachmentObject = layerAttachment;
+    // 一時アタッチメントをバインド
+    $context.bind(layerAttachment);
+};

package/src/Context/usecase/ContextContainerDrawCachedFilterUseCase.d.ts

@@ -0,0 +1,16 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @description キャッシュされたフィルターテクスチャをメインに描画します。
+ *              Draw a cached filter texture to the main attachment.
+ *
+ * @param  {IBlendMode} blend_mode
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @param  {Float32Array} filter_bounds
+ * @param  {string} unique_key
+ * @param  {string} filter_key
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array, filter_bounds: Float32Array, unique_key: string, filter_key: string) => void;

package/src/Context/usecase/ContextContainerDrawCachedFilterUseCase.js

@@ -0,0 +1,36 @@
+import { execute as blendDrawFilterToMainUseCase } from "../../Blend/usecase/BlendDrawFilterToMainUseCase";
+import { $cacheStore } from "@next2d/cache";
+import { $context, $devicePixelRatio } from "../../WebGLUtil";
+/**
+ * @description キャッシュされたフィルターテクスチャをメインに描画します。
+ *              Draw a cached filter texture to the main attachment.
+ *
+ * @param  {IBlendMode} blend_mode
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array} color_transform
+ * @param  {Float32Array} filter_bounds
+ * @param  {string} unique_key
+ * @param  {string} filter_key
+ * @return {void}
+ * @method
+ * @public
+ */
+export const execute = (blend_mode, matrix, color_transform, filter_bounds, unique_key, filter_key) => {
+    const cachedKey = $cacheStore.get(unique_key, "fKey");
+    if (cachedKey !== filter_key) {
+        return;
+    }
+    const textureObject = $cacheStore.get(unique_key, "fTexture");
+    if (!textureObject) {
+        return;
+    }
+    const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+    const scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+    const devicePixelRatio = $devicePixelRatio;
+    const boundsXMin = filter_bounds[0] * (scaleX / devicePixelRatio);
+    const boundsYMin = filter_bounds[1] * (scaleY / devicePixelRatio);
+    $context.drawArraysInstanced();
+    $context.reset();
+    $context.globalCompositeOperation = blend_mode;
+    blendDrawFilterToMainUseCase(textureObject, color_transform, boundsXMin + matrix[4], boundsYMin + matrix[5]);
+};

package/src/Context/usecase/ContextContainerEndLayerUseCase.d.ts

@@ -0,0 +1,18 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @description コンテナのフィルター/ブレンド用レイヤーを終了し、結果を元のメインに合成します。
+ *              End the container layer and composite the result back to the original main.
+ *
+ * @param  {IBlendMode} blend_mode
+ * @param  {Float32Array} matrix
+ * @param  {Float32Array | null} color_transform
+ * @param  {boolean} use_filter
+ * @param  {Float32Array | null} filter_bounds
+ * @param  {Float32Array | null} filter_params
+ * @param  {string} unique_key
+ * @param  {string} filter_key
+ * @return {void}
+ * @method
+ * @public
+ */
+export declare const execute: (blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array | null, use_filter: boolean, filter_bounds: Float32Array | null, filter_params: Float32Array | null, unique_key: string, filter_key: string) => void;