@next2d/webgl 1.18.12 → 2.0.0

package/src/Context/service/ContextResetService.js

@@ -0,0 +1,14 @@
+/**
+ * @description コンテキストの値を初期化する
+ *              Initialize the values of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.globalAlpha = 1;
+    context.globalCompositeOperation = "normal";
+    context.imageSmoothingEnabled = false;
+};

package/src/Context/service/ContextResetStyleService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description コンテキストのカラースタイル設定を初期化する
+ *              Initialize the color style settings of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextResetStyleService.js

@@ -0,0 +1,13 @@
+/**
+ * @description コンテキストのカラースタイル設定を初期化する
+ *              Initialize the color style settings of the context
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.$fillStyle.fill(1);
+    context.$strokeStyle.fill(1);
+};

package/src/Context/service/ContextRestoreService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列をスタックから復元します
+ *              Restore the 2D transformation matrix from the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextRestoreService.js

@@ -0,0 +1,23 @@
+import { $poolFloat32Array9 } from "../../WebGLUtil";
+/**
+ * @description 2D変換行列をスタックから復元します
+ *              Restore the 2D transformation matrix from the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    if (!context.$stack.length) {
+        return;
+    }
+    const matrix = context.$stack.pop();
+    context.$matrix[0] = matrix[0];
+    context.$matrix[1] = matrix[1];
+    context.$matrix[3] = matrix[3];
+    context.$matrix[4] = matrix[4];
+    context.$matrix[6] = matrix[6];
+    context.$matrix[7] = matrix[7];
+    $poolFloat32Array9(matrix);
+};

package/src/Context/service/ContextSaveService.d.ts

@@ -0,0 +1,11 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列をスタックに保存します
+ *              Save the 2D transformation matrix to the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context) => void;

package/src/Context/service/ContextSaveService.js

@@ -0,0 +1,13 @@
+import { $getFloat32Array9 } from "../../WebGLUtil";
+/**
+ * @description 2D変換行列をスタックに保存します
+ *              Save the 2D transformation matrix to the stack
+ *
+ * @param  {Context} context
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context) => {
+    context.$stack.push($getFloat32Array9(...context.$matrix));
+};

package/src/Context/service/ContextSetTransformService.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description 2D変換行列を設定します
+ *              Set the 2D transformation matrix
+ *
+ * @param  {Float32Array} matrix
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (matrix: Float32Array, a: number, b: number, c: number, d: number, e: number, f: number) => void;

package/src/Context/service/ContextSetTransformService.js

@@ -0,0 +1,23 @@
+/**
+ * @description 2D変換行列を設定します
+ *              Set the 2D transformation matrix
+ *
+ * @param  {Float32Array} matrix
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (matrix, a, b, c, d, e, f) => {
+    matrix[0] = a;
+    matrix[1] = b;
+    matrix[3] = c;
+    matrix[4] = d;
+    matrix[6] = e;
+    matrix[7] = f;
+};

package/src/Context/service/ContextTransformService.d.ts

@@ -0,0 +1,17 @@
+import type { Context } from "../../Context";
+/**
+ * @description 2D変換行列の乗算を行います
+ *              Multiply the 2D transformation matrix
+ *
+ * @param  {Context} context
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, a: number, b: number, c: number, d: number, e: number, f: number) => void;

package/src/Context/service/ContextTransformService.js

@@ -0,0 +1,29 @@
+/**
+ * @description 2D変換行列の乗算を行います
+ *              Multiply the 2D transformation matrix
+ *
+ * @param  {Context} context
+ * @param  {number} a
+ * @param  {number} b
+ * @param  {number} c
+ * @param  {number} d
+ * @param  {number} e
+ * @param  {number} f
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, a, b, c, d, e, f) => {
+    const a00 = context.$matrix[0];
+    const a01 = context.$matrix[1];
+    const a10 = context.$matrix[3];
+    const a11 = context.$matrix[4];
+    const a20 = context.$matrix[6];
+    const a21 = context.$matrix[7];
+    context.$matrix[0] = a * a00 + b * a10;
+    context.$matrix[1] = a * a01 + b * a11;
+    context.$matrix[3] = c * a00 + d * a10;
+    context.$matrix[4] = c * a01 + d * a11;
+    context.$matrix[6] = e * a00 + f * a10 + a20;
+    context.$matrix[7] = e * a01 + f * a11 + a21;
+};

package/src/Context/service/ContextUpdateAllTransferBoundsService.d.ts

@@ -0,0 +1,11 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description 切り替え時の転写範囲を更新します。
+ *              Update the transfer range when switching.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node) => void;

package/src/Context/service/ContextUpdateAllTransferBoundsService.js

@@ -0,0 +1,21 @@
+import { $getActiveAllTransferBounds } from "../../AtlasManager";
+/**
+ * @description 切り替え時の転写範囲を更新します。
+ *              Update the transfer range when switching.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node) => {
+    const bounds = $getActiveAllTransferBounds(node.index);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    bounds[0] = Math.min(node.x, xMin);
+    bounds[1] = Math.min(node.y, yMin);
+    bounds[2] = Math.max(node.x + node.w, xMax);
+    bounds[3] = Math.max(node.y + node.h, yMax);
+};

package/src/Context/service/ContextUpdateBackgroundColorService.d.ts

@@ -0,0 +1,15 @@
+import type { Context } from "../../Context";
+/**
+ * @description 背景色を設定を更新
+ *              Update background color setting
+ *
+ * @param  {Context} context
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (context: Context, red: number, green: number, blue: number, alpha: number) => void;

package/src/Context/service/ContextUpdateBackgroundColorService.js

@@ -0,0 +1,20 @@
+import { $clamp } from "../../WebGLUtil";
+/**
+ * @description 背景色を設定を更新
+ *              Update background color setting
+ *
+ * @param  {Context} context
+ * @param  {number} red
+ * @param  {number} green
+ * @param  {number} blue
+ * @param  {number} alpha
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (context, red, green, blue, alpha) => {
+    context.$clearColorR = $clamp(red, 0, 1, 0);
+    context.$clearColorG = $clamp(green, 0, 1, 0);
+    context.$clearColorB = $clamp(blue, 0, 1, 0);
+    context.$clearColorA = $clamp(alpha, 0, 1, 0);
+};

package/src/Context/service/ContextUpdateTransferBoundsService.d.ts

@@ -0,0 +1,11 @@
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description 転写範囲を更新します。
+ *              Update the transfer range.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (node: Node) => void;

package/src/Context/service/ContextUpdateTransferBoundsService.js

@@ -0,0 +1,21 @@
+import { $getActiveTransferBounds } from "../../AtlasManager";
+/**
+ * @description 転写範囲を更新します。
+ *              Update the transfer range.
+ *
+ * @param  {Node} node
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (node) => {
+    const bounds = $getActiveTransferBounds(node.index);
+    const xMin = bounds[0];
+    const yMin = bounds[1];
+    const xMax = bounds[2];
+    const yMax = bounds[3];
+    bounds[0] = Math.min(node.x, xMin);
+    bounds[1] = Math.min(node.y, yMin);
+    bounds[2] = Math.max(node.x + node.w, xMax);
+    bounds[3] = Math.max(node.y + node.h, yMax);
+};

package/src/Context/service/ContextUseGridService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description Gridデータを設定
+ *              Set Grid data
+ *
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (grid_data: Float32Array | null) => void;

package/src/Context/service/ContextUseGridService.js

@@ -0,0 +1,14 @@
+import { $gridDataMap } from "../../Grid";
+import { $fillBufferIndexes } from "../../Mesh";
+/**
+ * @description Gridデータを設定
+ *              Set Grid data
+ *
+ * @param  {Float32Array | null} [grid_data=null]
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (grid_data) => {
+    $gridDataMap.set($fillBufferIndexes.length, grid_data);
+};

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

@@ -0,0 +1,21 @@
+import type { Node } from "@next2d/texture-packer";
+import type { IBlendMode } from "../../interface/IBlendMode";
+/**
+ * @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 declare const execute: (node: Node, unique_key: string, updated: boolean, width: number, height: number, is_bitmap: boolean, matrix: Float32Array, color_transform: Float32Array, blend_mode: IBlendMode, bounds: Float32Array, params: Float32Array) => void;

package/src/Context/usecase/ContextApplyFilterUseCase.js

@@ -0,0 +1,200 @@
+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, $getDevicePixelRatio, $multiplyMatrices, $poolFloat32Array6 } from "../../WebGLUtil";
+/**
+ * @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
+                    textureObject = filterApplyColorMatrixFilterUseCase(textureObject, new Float32Array([
+                        params[idx++], params[idx++], params[idx++], params[idx++],
+                        params[idx++], params[idx++], params[idx++], params[idx++],
+                        params[idx++], params[idx++], params[idx++], params[idx++],
+                        params[idx++], params[idx++], params[idx++], params[idx++],
+                        params[idx++], params[idx++], params[idx++], params[idx++]
+                    ]));
+                    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, matrix, 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 = $getDevicePixelRatio();
+        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 { $getCurrentAttachment } 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 = $getCurrentAttachment();
+    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;
+    // 再利用のオブジェクトの場合は、描画情報をクリアする
+    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);
+};