@next2d/webgpu 3.0.0

package/src/AttachmentManager.d.ts

@@ -0,0 +1,19 @@
+import type { IAttachmentObject } from "./interface/IAttachmentObject";
+export declare class AttachmentManager {
+    private device;
+    private attachmentPool;
+    private texturePool;
+    private colorBufferPool;
+    private stencilBufferPool;
+    private idCounter;
+    private currentAttachment;
+    constructor(device: GPUDevice);
+    getAttachmentObject(width: number, height: number, msaa?: boolean): IAttachmentObject;
+    bindAttachment(attachment: IAttachmentObject): void;
+    getCurrentAttachment(): IAttachmentObject | null;
+    get currentAttachmentObject(): IAttachmentObject | null;
+    unbindAttachment(): void;
+    releaseAttachment(attachment: IAttachmentObject): void;
+    createRenderPassDescriptor(attachment: IAttachmentObject, r: number, g: number, b: number, a: number, loadOp?: GPULoadOp): GPURenderPassDescriptor;
+    dispose(): void;
+}

package/src/AttachmentManager.js

@@ -0,0 +1,105 @@
+import { execute as attachmentManagerGetAttachmentObjectUseCase } from "./AttachmentManager/usecase/AttachmentManagerGetAttachmentObjectUseCase";
+import { execute as attachmentManagerReleaseAttachmentUseCase } from "./AttachmentManager/usecase/AttachmentManagerReleaseAttachmentUseCase";
+import { execute as attachmentManagerCreateRenderPassDescriptorService } from "./AttachmentManager/service/AttachmentManagerCreateRenderPassDescriptorService";
+export class AttachmentManager {
+    constructor(device) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "attachmentPool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "texturePool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "colorBufferPool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stencilBufferPool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "idCounter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentAttachment", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.device = device;
+        this.attachmentPool = [];
+        this.texturePool = new Map();
+        this.colorBufferPool = [];
+        this.stencilBufferPool = [];
+        this.idCounter = { "attachmentId": 0, "textureId": 0, "stencilId": 0 };
+        this.currentAttachment = null;
+    }
+    getAttachmentObject(width, height, msaa = false) {
+        return attachmentManagerGetAttachmentObjectUseCase(this.device, this.attachmentPool, this.texturePool, this.colorBufferPool, this.stencilBufferPool, width, height, msaa, this.idCounter);
+    }
+    bindAttachment(attachment) {
+        this.currentAttachment = attachment;
+    }
+    getCurrentAttachment() {
+        return this.currentAttachment;
+    }
+    get currentAttachmentObject() {
+        return this.currentAttachment;
+    }
+    unbindAttachment() {
+        this.currentAttachment = null;
+    }
+    releaseAttachment(attachment) {
+        attachmentManagerReleaseAttachmentUseCase(this.attachmentPool, this.texturePool, this.colorBufferPool, this.stencilBufferPool, attachment);
+    }
+    createRenderPassDescriptor(attachment, r, g, b, a, loadOp = "clear") {
+        return attachmentManagerCreateRenderPassDescriptorService(attachment, r, g, b, a, loadOp);
+    }
+    dispose() {
+        for (const pool of this.texturePool.values()) {
+            for (const textureObj of pool) {
+                textureObj.resource.destroy();
+            }
+        }
+        this.texturePool.clear();
+        for (const color of this.colorBufferPool) {
+            color.resource.destroy();
+        }
+        this.colorBufferPool = [];
+        for (const stencil of this.stencilBufferPool) {
+            stencil.resource.destroy();
+        }
+        this.stencilBufferPool = [];
+        for (const attachment of this.attachmentPool) {
+            if (attachment.texture) {
+                attachment.texture.resource.destroy();
+            }
+            if (attachment.color) {
+                attachment.color.resource.destroy();
+            }
+            if (attachment.stencil) {
+                attachment.stencil.resource.destroy();
+            }
+        }
+        this.attachmentPool = [];
+    }
+}

package/src/BezierConverter/BezierConverter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description 適応的ベジェ曲線テッセレーション
+ *              Adaptive Bezier Curve Tessellation
+ *
+ * 三次ベジェ曲線を二次ベジェ曲線に変換する際、
+ * フラットネス（平坦度）に基づいて動的に分割数を決定。
+ *
+ * - 単純な曲線: 2分割程度
+ * - 複雑な曲線: 最大8分割
+ *
+ * これにより品質を維持しながら不要な計算を削減。
+ */
+export { execute as adaptiveCubicToQuad, calculateAdaptiveThreshold } from "./usecase/BezierConverterAdaptiveCubicToQuadUseCase";
+export type { IQuadraticSegment } from "../interface/IQuadraticSegment";
+export { execute as calculateFlatness } from "./service/BezierConverterCalculateFlatnessService";
+export { execute as splitCubic } from "./service/BezierConverterSplitCubicService";

package/src/BezierConverter/BezierConverter.js

@@ -0,0 +1,15 @@
+/**
+ * @description 適応的ベジェ曲線テッセレーション
+ *              Adaptive Bezier Curve Tessellation
+ *
+ * 三次ベジェ曲線を二次ベジェ曲線に変換する際、
+ * フラットネス（平坦度）に基づいて動的に分割数を決定。
+ *
+ * - 単純な曲線: 2分割程度
+ * - 複雑な曲線: 最大8分割
+ *
+ * これにより品質を維持しながら不要な計算を削減。
+ */
+export { execute as adaptiveCubicToQuad, calculateAdaptiveThreshold } from "./usecase/BezierConverterAdaptiveCubicToQuadUseCase";
+export { execute as calculateFlatness } from "./service/BezierConverterCalculateFlatnessService";
+export { execute as splitCubic } from "./service/BezierConverterSplitCubicService";

package/src/BezierConverter/service/BezierConverterCalculateFlatnessService.d.ts

@@ -0,0 +1,15 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 三次ベジェ曲線のフラットネス（平坦度）を計算
+ *              Calculate flatness of cubic bezier curve
+ *
+ * フラットネスは曲線がどれだけ直線に近いかを示す値。
+ * 制御点から始点-終点を結ぶ直線までの最大距離を計算。
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @return {number} フラットネス値（距離の2乗）
+ */
+export declare const execute: (p0: IPoint, p1: IPoint, p2: IPoint, p3: IPoint) => number;

package/src/BezierConverter/service/BezierConverterCalculateFlatnessService.js

@@ -0,0 +1,37 @@
+/**
+ * @description 三次ベジェ曲線のフラットネス（平坦度）を計算
+ *              Calculate flatness of cubic bezier curve
+ *
+ * フラットネスは曲線がどれだけ直線に近いかを示す値。
+ * 制御点から始点-終点を結ぶ直線までの最大距離を計算。
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @return {number} フラットネス値（距離の2乗）
+ */
+export const execute = (p0, p1, p2, p3) => {
+    // 始点から終点へのベクトル
+    const dx = p3.x - p0.x;
+    const dy = p3.y - p0.y;
+    // ベクトルの長さの2乗
+    const lengthSq = dx * dx + dy * dy;
+    // 始点と終点が同じ場合、制御点からの最大距離を返す
+    if (lengthSq < 1e-10) {
+        const d1 = (p1.x - p0.x) * (p1.x - p0.x) + (p1.y - p0.y) * (p1.y - p0.y);
+        const d2 = (p2.x - p0.x) * (p2.x - p0.x) + (p2.y - p0.y) * (p2.y - p0.y);
+        return Math.max(d1, d2);
+    }
+    // 制御点から直線への距離を計算（クロス積を使用）
+    // 距離 = |cross product| / |line length|
+    // 距離の2乗を計算して sqrt を避ける
+    // 制御点1から直線への距離の2乗
+    const cross1 = (p1.x - p0.x) * dy - (p1.y - p0.y) * dx;
+    const d1 = cross1 * cross1 / lengthSq;
+    // 制御点2から直線への距離の2乗
+    const cross2 = (p2.x - p0.x) * dy - (p2.y - p0.y) * dx;
+    const d2 = cross2 * cross2 / lengthSq;
+    // 最大距離を返す
+    return Math.max(d1, d2);
+};

package/src/BezierConverter/service/BezierConverterSplitCubicService.d.ts

@@ -0,0 +1,15 @@
+import type { IPoint } from "../../interface/IPoint";
+/**
+ * @description 三次ベジェ曲線をパラメータt=0.5で2分割
+ *              Split cubic bezier curve at t=0.5 using De Casteljau algorithm
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @return {{ first: IPoint[], second: IPoint[] }} 分割された2つの曲線
+ */
+export declare const execute: (p0: IPoint, p1: IPoint, p2: IPoint, p3: IPoint) => {
+    first: IPoint[];
+    second: IPoint[];
+};

package/src/BezierConverter/service/BezierConverterSplitCubicService.js

@@ -0,0 +1,47 @@
+/**
+ * @description 三次ベジェ曲線をパラメータt=0.5で2分割
+ *              Split cubic bezier curve at t=0.5 using De Casteljau algorithm
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @return {{ first: IPoint[], second: IPoint[] }} 分割された2つの曲線
+ */
+export const execute = (p0, p1, p2, p3) => {
+    // De Casteljau algorithm at t = 0.5
+    // 中点を計算することで精度を保ちながら分割
+    // レベル1: 各辺の中点
+    const p01 = {
+        "x": (p0.x + p1.x) * 0.5,
+        "y": (p0.y + p1.y) * 0.5
+    };
+    const p12 = {
+        "x": (p1.x + p2.x) * 0.5,
+        "y": (p1.y + p2.y) * 0.5
+    };
+    const p23 = {
+        "x": (p2.x + p3.x) * 0.5,
+        "y": (p2.y + p3.y) * 0.5
+    };
+    // レベル2: レベル1の中点
+    const p012 = {
+        "x": (p01.x + p12.x) * 0.5,
+        "y": (p01.y + p12.y) * 0.5
+    };
+    const p123 = {
+        "x": (p12.x + p23.x) * 0.5,
+        "y": (p12.y + p23.y) * 0.5
+    };
+    // レベル3: 分割点
+    const p0123 = {
+        "x": (p012.x + p123.x) * 0.5,
+        "y": (p012.y + p123.y) * 0.5
+    };
+    return {
+        // 前半の曲線: p0 -> p01 -> p012 -> p0123
+        "first": [p0, p01, p012, p0123],
+        // 後半の曲線: p0123 -> p123 -> p23 -> p3
+        "second": [p0123, p123, p23, p3]
+    };
+};

package/src/BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase.d.ts

@@ -0,0 +1,29 @@
+import type { IPoint } from "../../interface/IPoint";
+import type { IQuadraticSegment } from "../../interface/IQuadraticSegment";
+export type { IQuadraticSegment };
+/**
+ * @description 三次ベジェ曲線を適応的に二次ベジェ曲線群に変換
+ *              Adaptively convert cubic bezier to quadratic bezier segments
+ *
+ * フラットネス（平坦度）に基づいて動的に分割数を決定。
+ * 単純な曲線は少ない分割、複雑な曲線は多い分割を行う。
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @param {number} flatnessThreshold - フラットネス閾値（オプション）
+ * @return {IQuadraticSegment[]} 二次ベジェ曲線のセグメント配列
+ */
+export declare const execute: (p0: IPoint, p1: IPoint, p2: IPoint, p3: IPoint, flatnessThreshold?: number) => IQuadraticSegment[];
+/**
+ * @description スケールに応じたフラットネス閾値を計算
+ *              Calculate flatness threshold based on scale
+ *
+ * ズームレベルが高い場合は高品質な近似が必要。
+ * スケール = sqrt(matrix[0]^2 + matrix[1]^2) などで計算可能。
+ *
+ * @param {number} scale - 現在のスケール
+ * @return {number} 調整されたフラットネス閾値
+ */
+export declare const calculateAdaptiveThreshold: (scale: number) => number;

package/src/BezierConverter/usecase/BezierConverterAdaptiveCubicToQuadUseCase.js

@@ -0,0 +1,80 @@
+import { execute as calculateFlatness } from "../service/BezierConverterCalculateFlatnessService";
+import { execute as splitCubic } from "../service/BezierConverterSplitCubicService";
+/**
+ * @description フラットネス閾値のデフォルト値
+ *              Default flatness threshold (squared distance)
+ *
+ * この値は曲線がどの程度「平坦」であれば直接近似するかを決定。
+ * 値が小さいほど高品質だが分割数が増加。
+ * 0.5ピクセル相当の値をデフォルトとする（滑らかなストローク描画用）。
+ */
+const DEFAULT_FLATNESS_THRESHOLD = 0.25; // 0.5px squared
+/**
+ * @description 最大再帰深度
+ *              Maximum recursion depth to prevent infinite loops
+ */
+const MAX_RECURSION_DEPTH = 8;
+/**
+ * @description 三次ベジェ曲線を適応的に二次ベジェ曲線群に変換
+ *              Adaptively convert cubic bezier to quadratic bezier segments
+ *
+ * フラットネス（平坦度）に基づいて動的に分割数を決定。
+ * 単純な曲線は少ない分割、複雑な曲線は多い分割を行う。
+ *
+ * @param {IPoint} p0 - 始点
+ * @param {IPoint} p1 - 制御点1
+ * @param {IPoint} p2 - 制御点2
+ * @param {IPoint} p3 - 終点
+ * @param {number} flatnessThreshold - フラットネス閾値（オプション）
+ * @return {IQuadraticSegment[]} 二次ベジェ曲線のセグメント配列
+ */
+export const execute = (p0, p1, p2, p3, flatnessThreshold = DEFAULT_FLATNESS_THRESHOLD) => {
+    const result = [];
+    // 再帰的に分割を行う内部関数
+    const subdivide = (start, ctrl1, ctrl2, end, depth) => {
+        // フラットネスを計算
+        const flatness = calculateFlatness(start, ctrl1, ctrl2, end);
+        // フラットネスが閾値以下、または最大深度に達した場合は近似
+        if (flatness <= flatnessThreshold || depth >= MAX_RECURSION_DEPTH) {
+            // 三次ベジェを二次ベジェに近似
+            // WebGL版と同じ: 分割後は単純に2つの制御点の中点を使用
+            const ctrl = {
+                "x": (ctrl1.x + ctrl2.x) * 0.5,
+                "y": (ctrl1.y + ctrl2.y) * 0.5
+            };
+            result.push({
+                "ctrl": ctrl,
+                "end": end
+            });
+            return;
+        }
+        // 曲線を2分割してそれぞれを再帰処理
+        const split = splitCubic(start, ctrl1, ctrl2, end);
+        subdivide(split.first[0], split.first[1], split.first[2], split.first[3], depth + 1);
+        subdivide(split.second[0], split.second[1], split.second[2], split.second[3], depth + 1);
+    };
+    // 分割を開始
+    subdivide(p0, p1, p2, p3, 0);
+    return result;
+};
+/**
+ * @description スケールに応じたフラットネス閾値を計算
+ *              Calculate flatness threshold based on scale
+ *
+ * ズームレベルが高い場合は高品質な近似が必要。
+ * スケール = sqrt(matrix[0]^2 + matrix[1]^2) などで計算可能。
+ *
+ * @param {number} scale - 現在のスケール
+ * @return {number} 調整されたフラットネス閾値
+ */
+export const calculateAdaptiveThreshold = (scale) => {
+    // スケールが大きい場合は閾値を小さくして高品質に
+    // スケールが小さい場合は閾値を大きくしてパフォーマンス優先
+    const baseThreshold = DEFAULT_FLATNESS_THRESHOLD;
+    // スケールの逆数に比例した閾値
+    // 最小値と最大値を設定して極端な値を防ぐ
+    const adjustedThreshold = baseThreshold / (scale * scale);
+    // 閾値の範囲を制限（0.0625〜4.0）
+    // 0.0625 = 0.25px squared, 4.0 = 2px squared
+    return Math.max(0.0625, Math.min(4.0, adjustedThreshold));
+};

package/src/Blend/BlendInstancedManager.d.ts

@@ -0,0 +1,35 @@
+import type { Node } from "@next2d/texture-packer";
+import type { IComplexBlendItem } from "../interface/IComplexBlendItem";
+import { ShaderInstancedManager } from "../Shader/ShaderInstancedManager";
+/**
+ * @description 複雑なブレンドモードの描画キューを取得
+ * @return {IComplexBlendItem[]}
+ */
+export declare const getComplexBlendQueue: () => IComplexBlendItem[];
+/**
+ * @description 複雑なブレンドモードの描画キューをクリア
+ * @return {void}
+ */
+export declare const clearComplexBlendQueue: () => void;
+/**
+ * @description インスタンスシェーダーマネージャーを取得
+ * @return {ShaderInstancedManager}
+ */
+export declare const getInstancedShaderManager: () => ShaderInstancedManager;
+/**
+ * @description DisplayObject単体の描画をインスタンス配列に追加
+ * @param {Node} node
+ * @param {number} x_min
+ * @param {number} y_min
+ * @param {number} x_max
+ * @param {number} y_max
+ * @param {Float32Array} color_transform
+ * @param {Float32Array} matrix
+ * @param {string} blend_mode
+ * @param {number} viewport_width
+ * @param {number} viewport_height
+ * @param {number} render_max_size
+ * @param {number} global_alpha
+ * @return {void}
+ */
+export declare const addDisplayObjectToInstanceArray: (node: Node, x_min: number, y_min: number, x_max: number, y_max: number, color_transform: Float32Array, matrix: Float32Array, blend_mode: string, viewport_width: number, viewport_height: number, render_max_size: number, global_alpha: number) => void;

package/src/Blend/BlendInstancedManager.js

@@ -0,0 +1,147 @@
+import { ShaderInstancedManager } from "../Shader/ShaderInstancedManager";
+import { $currentBlendMode, $setCurrentBlendMode } from "../Blend";
+import { $getCurrentAtlasIndex, $setCurrentAtlasIndex, $setActiveAtlasIndex } from "../AtlasManager";
+import { renderQueue } from "@next2d/render-queue";
+import { $context } from "../WebGPUUtil";
+/**
+ * @description シンプルなブレンドモード（インスタンス描画可能）
+ */
+const SIMPLE_BLEND_MODES = new Set([
+    "normal", "layer", "add", "screen", "alpha", "erase", "copy"
+]);
+/**
+ * @description 複雑なブレンドモード描画キュー
+ */
+const $complexBlendQueue = [];
+/**
+ * @description Float32Array(8) プール（color_transform 用）
+ */
+const $ct8Pool = [];
+/**
+ * @description Float32Array(9) プール（matrix 用）
+ */
+const $m9Pool = [];
+/**
+ * @description 複雑なブレンドモードの描画キューを取得
+ * @return {IComplexBlendItem[]}
+ */
+export const getComplexBlendQueue = () => {
+    return $complexBlendQueue;
+};
+/**
+ * @description 複雑なブレンドモードの描画キューをクリア
+ * @return {void}
+ */
+export const clearComplexBlendQueue = () => {
+    // プールに返却してから配列をクリア
+    for (let i = 0; i < $complexBlendQueue.length; i++) {
+        const item = $complexBlendQueue[i];
+        $ct8Pool.push(item.color_transform);
+        $m9Pool.push(item.matrix);
+    }
+    $complexBlendQueue.length = 0;
+};
+/**
+ * @description インスタンスシェーダーマネージャーのキャッシュ
+ * @private
+ */
+const shaderManagers = new Map();
+/**
+ * @description インスタンスシェーダーマネージャーを取得
+ * @return {ShaderInstancedManager}
+ */
+export const getInstancedShaderManager = () => {
+    const key = "blend_instanced";
+    if (!shaderManagers.has(key)) {
+        shaderManagers.set(key, new ShaderInstancedManager());
+    }
+    return shaderManagers.get(key);
+};
+/**
+ * @description DisplayObject単体の描画をインスタンス配列に追加
+ * @param {Node} node
+ * @param {number} x_min
+ * @param {number} y_min
+ * @param {number} x_max
+ * @param {number} y_max
+ * @param {Float32Array} color_transform
+ * @param {Float32Array} matrix
+ * @param {string} blend_mode
+ * @param {number} viewport_width
+ * @param {number} viewport_height
+ * @param {number} render_max_size
+ * @param {number} global_alpha
+ * @return {void}
+ */
+export const addDisplayObjectToInstanceArray = (node, x_min, y_min, x_max, y_max, color_transform, matrix, blend_mode, viewport_width, viewport_height, render_max_size, global_alpha) => {
+    // WebGL版と同じ: mulColor.a には globalAlpha を使用
+    const ct0 = color_transform[0];
+    const ct1 = color_transform[1];
+    const ct2 = color_transform[2];
+    const ct3 = global_alpha; // WebGL: $context.globalAlpha
+    const ct4 = color_transform[4] / 255;
+    const ct5 = color_transform[5] / 255;
+    const ct6 = color_transform[6] / 255;
+    const ct7 = 0;
+    if (SIMPLE_BLEND_MODES.has(blend_mode)) {
+        // ブレンドモードまたはアトラスインデックスが変わった場合
+        if ($currentBlendMode !== blend_mode || $getCurrentAtlasIndex() !== node.index) {
+            // 異なるブレンドモード/アトラスになるので、切り替え前にバッチを描画
+            if ($context) {
+                $setActiveAtlasIndex($getCurrentAtlasIndex());
+                $context.drawArraysInstanced();
+            }
+            // 新しいブレンドモードとアトラスインデックスをセット
+            $setCurrentBlendMode(blend_mode);
+            $setCurrentAtlasIndex(node.index);
+            $setActiveAtlasIndex(node.index);
+        }
+        // インスタンスデータを配列に追加
+        const shaderManager = getInstancedShaderManager();
+        renderQueue.pushInstanceBuffer(
+        // texture rectangle (vec4) - normalized coordinates (half-pixel inset)
+        (node.x + 0.5) / render_max_size, (node.y + 0.5) / render_max_size, (node.w - 1.0) / render_max_size, (node.h - 1.0) / render_max_size, 
+        // texture width, height and viewport width, height (vec4)
+        node.w, node.h, viewport_width, viewport_height, 
+        // matrix tx, ty (vec2) + padding (vec2)
+        matrix[6], matrix[7], 0, 0, 
+        // matrix scale0, rotate0, scale1, rotate1 (vec4)
+        matrix[0], matrix[1], matrix[3], matrix[4], 
+        // mulColor (vec4)
+        ct0, ct1, ct2, ct3, 
+        // addColor (vec4)
+        ct4, ct5, ct6, ct7);
+        shaderManager.count++;
+    }
+    else {
+        // 複雑なブレンドモード（個別描画が必要）
+        // 先に現在のインスタンス配列を描画
+        if ($context) {
+            $setActiveAtlasIndex($getCurrentAtlasIndex());
+            $context.drawArraysInstanced();
+        }
+        // キューに追加して後で処理（プールからFloat32Arrayを再利用）
+        const ct = $ct8Pool.length > 0 ? $ct8Pool.pop() : new Float32Array(8);
+        ct.set(color_transform);
+        const m = $m9Pool.length > 0 ? $m9Pool.pop() : new Float32Array(9);
+        m.set(matrix);
+        $complexBlendQueue.push({
+            node,
+            x_min,
+            y_min,
+            x_max,
+            y_max,
+            "color_transform": ct,
+            "matrix": m,
+            blend_mode,
+            viewport_width,
+            viewport_height,
+            render_max_size,
+            global_alpha
+        });
+        // ブレンドモードをセット
+        $setCurrentBlendMode(blend_mode);
+        $setCurrentAtlasIndex(node.index);
+        $setActiveAtlasIndex(node.index);
+    }
+};

package/src/Blend/service/BlendAddService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;

package/src/Blend/service/BlendAddService.js

@@ -0,0 +1,8 @@
+import { $setFuncCode, $funcCode } from "../../Blend";
+export const execute = () => {
+    if ($funcCode !== 101) {
+        $setFuncCode(101);
+        return true;
+    }
+    return false;
+};

package/src/Blend/service/BlendAlphaService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;

package/src/Blend/service/BlendAlphaService.js

@@ -0,0 +1,8 @@
+import { $setFuncCode, $funcCode } from "../../Blend";
+export const execute = () => {
+    if ($funcCode !== 401) {
+        $setFuncCode(401);
+        return true;
+    }
+    return false;
+};

package/src/Blend/service/BlendEraseService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;

package/src/Blend/service/BlendEraseService.js

@@ -0,0 +1,8 @@
+import { $setFuncCode, $funcCode } from "../../Blend";
+export const execute = () => {
+    if ($funcCode !== 501) {
+        $setFuncCode(501);
+        return true;
+    }
+    return false;
+};

package/src/Blend/service/BlendGetStateService.d.ts

@@ -0,0 +1,12 @@
+import type { IBlendMode } from "../../interface/IBlendMode";
+import type { IBlendState } from "../../Blend";
+/**
+ * @description ブレンドモードからWebGPUブレンドステートを取得するサービス
+ *              Service to get WebGPU blend state from blend mode
+ *
+ * @param  {IBlendMode} mode
+ * @return {IBlendState}
+ * @method
+ * @protected
+ */
+export declare const execute: (mode: IBlendMode) => IBlendState;

package/src/Blend/service/BlendGetStateService.js

@@ -0,0 +1,13 @@
+import { $getBlendState } from "../../Blend";
+/**
+ * @description ブレンドモードからWebGPUブレンドステートを取得するサービス
+ *              Service to get WebGPU blend state from blend mode
+ *
+ * @param  {IBlendMode} mode
+ * @return {IBlendState}
+ * @method
+ * @protected
+ */
+export const execute = (mode) => {
+    return $getBlendState(mode);
+};

package/src/Blend/service/BlendOneZeroService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;

package/src/Blend/service/BlendOneZeroService.js

@@ -0,0 +1,8 @@
+import { $setFuncCode, $funcCode } from "../../Blend";
+export const execute = () => {
+    if ($funcCode !== 10) {
+        $setFuncCode(10);
+        return true;
+    }
+    return false;
+};

package/src/Blend/service/BlendResetService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;

package/src/Blend/service/BlendResetService.js

@@ -0,0 +1,8 @@
+import { $setFuncCode, $funcCode } from "../../Blend";
+export const execute = () => {
+    if ($funcCode !== 613) {
+        $setFuncCode(613);
+        return true;
+    }
+    return false;
+};

package/src/Blend/service/BlendScreenService.d.ts

@@ -0,0 +1 @@
+export declare const execute: () => boolean;