@next2d/webgpu 3.0.0

package/src/Gradient/GradientLUTCache.d.ts

@@ -0,0 +1,61 @@
+import type { IAttachmentObject } from "../interface/IAttachmentObject";
+/**
+ * @description GPUDeviceを設定
+ *              Set GPUDevice
+ *
+ * @param  {GPUDevice} device
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setGradientLUTDevice: (device: GPUDevice) => void;
+/**
+ * @description 指定解像度のAttachmentObjectを返却
+ *              Returns AttachmentObject with specified resolution
+ *
+ * @param  {number} resolution
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export declare const $getGradientAttachmentObjectWithResolution: (resolution: number) => IAttachmentObject;
+/**
+ * @description デフォルトの256解像度のAttachmentObjectを返却
+ *              Returns default 256 resolution AttachmentObject
+ *
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export declare const $getGradientAttachmentObject: () => IAttachmentObject;
+/**
+ * @description 全ての共有アタッチメントを破棄してクリア
+ *              Destroy and clear all shared attachments
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $clearGradientAttachmentObjects: () => void;
+interface IGradientLUTEntry {
+    texture: GPUTexture;
+    view: GPUTextureView;
+    lastUsedFrame: number;
+}
+/**
+ * @description キャッシュからLUTテクスチャを取得。ヒットしなければnullを返す。
+ */
+export declare const $getLUTFromCache: (stops: number[], spread: number, interpolation: number) => IGradientLUTEntry | null;
+/**
+ * @description LUTテクスチャをキャッシュに格納
+ */
+export declare const $putLUTToCache: (stops: number[], spread: number, interpolation: number, texture: GPUTexture, view: GPUTextureView) => void;
+/**
+ * @description フレーム終了時にTTL超過エントリを解放
+ */
+export declare const $cleanupLUTCache: () => void;
+/**
+ * @description 全LUTキャッシュを破棄
+ */
+export declare const $clearLUTCache: () => void;
+export {};

package/src/Gradient/GradientLUTCache.js

@@ -0,0 +1,153 @@
+import { $releaseFillTexture } from "../FillTexturePool";
+/**
+ * @description 解像度別のAttachmentObjectキャッシュ
+ *              Attachment object cache by resolution
+ *              注意: グラデーションLUTは共有テクスチャに描画されるため、
+ *              キャッシュは使用しません。各フレームで再描画が必要です。
+ *              Note: Gradient LUT is drawn to a shared texture, so caching
+ *              is not used. Re-drawing is required each frame.
+ *
+ * @type {Map<number, IAttachmentObject>}
+ * @private
+ */
+const $gradientAttachmentObjects = new Map();
+/**
+ * @description GPUDeviceの参照
+ * @private
+ */
+let $device = null;
+/**
+ * @description GPUDeviceを設定
+ *              Set GPUDevice
+ *
+ * @param  {GPUDevice} device
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $setGradientLUTDevice = (device) => {
+    $device = device;
+};
+/**
+ * @description 指定解像度のAttachmentObjectを返却
+ *              Returns AttachmentObject with specified resolution
+ *
+ * @param  {number} resolution
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export const $getGradientAttachmentObjectWithResolution = (resolution) => {
+    if (!$gradientAttachmentObjects.has(resolution) && $device) {
+        // 1xN テクスチャを作成
+        const texture = $device.createTexture({
+            "size": { "width": resolution, "height": 1 },
+            "format": "rgba8unorm",
+            "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        const attachment = {
+            "id": resolution,
+            "width": resolution,
+            "height": 1,
+            "clipLevel": 0,
+            "msaa": false,
+            "mask": false,
+            "color": null,
+            "texture": {
+                "id": resolution,
+                "resource": texture,
+                "view": texture.createView(),
+                "width": resolution,
+                "height": 1,
+                "area": resolution,
+                "smooth": true
+            },
+            "stencil": null,
+            "msaaTexture": null,
+            "msaaStencil": null
+        };
+        $gradientAttachmentObjects.set(resolution, attachment);
+    }
+    return $gradientAttachmentObjects.get(resolution);
+};
+/**
+ * @description デフォルトの256解像度のAttachmentObjectを返却
+ *              Returns default 256 resolution AttachmentObject
+ *
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export const $getGradientAttachmentObject = () => {
+    return $getGradientAttachmentObjectWithResolution(256);
+};
+/**
+ * @description 全ての共有アタッチメントを破棄してクリア
+ *              Destroy and clear all shared attachments
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const $clearGradientAttachmentObjects = () => {
+    for (const attachment of $gradientAttachmentObjects.values()) {
+        if (attachment.texture?.resource) {
+            attachment.texture.resource.destroy();
+        }
+    }
+    $gradientAttachmentObjects.clear();
+};
+const $lutCache = new Map();
+let $currentFrame = 0;
+const $LUT_TTL = 60;
+/**
+ * @description グラデーションLUTのキャッシュキーを生成
+ */
+const $buildLUTKey = (stops, spread, interpolation) => {
+    return `${spread}_${interpolation}_${stops.join(",")}`;
+};
+/**
+ * @description キャッシュからLUTテクスチャを取得。ヒットしなければnullを返す。
+ */
+export const $getLUTFromCache = (stops, spread, interpolation) => {
+    const key = $buildLUTKey(stops, spread, interpolation);
+    const entry = $lutCache.get(key);
+    if (entry) {
+        entry.lastUsedFrame = $currentFrame;
+        return entry;
+    }
+    return null;
+};
+/**
+ * @description LUTテクスチャをキャッシュに格納
+ */
+export const $putLUTToCache = (stops, spread, interpolation, texture, view) => {
+    const key = $buildLUTKey(stops, spread, interpolation);
+    $lutCache.set(key, {
+        texture,
+        view,
+        "lastUsedFrame": $currentFrame
+    });
+};
+/**
+ * @description フレーム終了時にTTL超過エントリを解放
+ */
+export const $cleanupLUTCache = () => {
+    $currentFrame++;
+    for (const [key, entry] of $lutCache) {
+        if ($currentFrame - entry.lastUsedFrame > $LUT_TTL) {
+            $releaseFillTexture(entry.texture);
+            $lutCache.delete(key);
+        }
+    }
+};
+/**
+ * @description 全LUTキャッシュを破棄
+ */
+export const $clearLUTCache = () => {
+    for (const entry of $lutCache.values()) {
+        $releaseFillTexture(entry.texture);
+    }
+    $lutCache.clear();
+    $currentFrame = 0;
+};

package/src/Gradient/GradientLUTGenerator.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @description グラデーションLUTテクスチャ生成
+ *              Gradient LUT texture generator
+ */
+/**
+ * @description ストップ数に応じた適応解像度を取得
+ * @param {number} stopsLength
+ * @return {number}
+ */
+export declare const getAdaptiveResolution: (stopsLength: number) => number;
+/**
+ * @description グラデーションLUTテクスチャデータを生成
+ *              stops配列: [offset, R, G, B, A, offset, R, G, B, A, ...]
+ *              注意: R, G, B, A は 0-255 範囲
+ *              LUTは0-1の範囲の色を生成し、spread処理はシェーダー側で行う
+ * @param {number[]} stops - グラデーションストップ配列
+ * @param {number} _spread - スプレッドメソッド（未使用、シェーダー側で処理）
+ * @param {number} interpolation - 補間方法 (0: linearRGB, 1: RGB) ※WebGL互換
+ * @return {Uint8Array}
+ */
+export declare const generateGradientLUT: (stops: number[], _spread: number, interpolation: number) => Uint8Array;
+/**
+ * @description フィルター用グラデーションLUTテクスチャデータを生成
+ *              ratios, colors, alphas配列から1D LUTを生成
+ * @param {Float32Array} ratios - 比率配列 (0-255)
+ * @param {Float32Array} colors - 色配列 (32bit整数)
+ * @param {Float32Array} alphas - アルファ配列 (0-1)
+ * @return {Uint8Array}
+ */
+export declare const generateFilterGradientLUT: (ratios: Float32Array, colors: Float32Array, alphas: Float32Array) => Uint8Array;

package/src/Gradient/GradientLUTGenerator.js

@@ -0,0 +1,202 @@
+/**
+ * @description グラデーションLUTテクスチャ生成
+ *              Gradient LUT texture generator
+ */
+/**
+ * @description ストップ数に応じた適応解像度を取得
+ * @param {number} stopsLength
+ * @return {number}
+ */
+export const getAdaptiveResolution = (stopsLength) => {
+    if (stopsLength <= 4) {
+        return 256;
+    }
+    if (stopsLength <= 8) {
+        return 512;
+    }
+    return 1024;
+};
+/**
+ * @description グラデーションLUTテクスチャデータを生成
+ *              stops配列: [offset, R, G, B, A, offset, R, G, B, A, ...]
+ *              注意: R, G, B, A は 0-255 範囲
+ *              LUTは0-1の範囲の色を生成し、spread処理はシェーダー側で行う
+ * @param {number[]} stops - グラデーションストップ配列
+ * @param {number} _spread - スプレッドメソッド（未使用、シェーダー側で処理）
+ * @param {number} interpolation - 補間方法 (0: linearRGB, 1: RGB) ※WebGL互換
+ * @return {Uint8Array}
+ */
+export const generateGradientLUT = (stops, _spread, interpolation) => {
+    // ストップ数を計算（5要素ずつ: offset, R, G, B, A）
+    const stopsLength = stops.length / 5;
+    const resolution = getAdaptiveResolution(stopsLength);
+    // RGBA形式のLUTデータを作成
+    const lutData = new Uint8Array(resolution * 4);
+    // 各ピクセルの色を補間
+    // spread処理はシェーダー側で行うため、LUTは単純に0-1の範囲を生成
+    for (let i = 0; i < resolution; i++) {
+        const t = i / (resolution - 1);
+        // 色を補間（色は0-255範囲で返される）
+        const color = interpolateColor(stops, t, interpolation);
+        // WebGL版と同じ: プリマルチプライドアルファは適用しない
+        // LUTにはストレート（非プリマルチプライド）の色を格納
+        // プリマルチプライドはシェーダー側でサンプリング後に行う
+        // これにより、線形補間時に正しい色が得られる
+        // LUTデータに書き込み（非プリマルチプライド）
+        const offset = i * 4;
+        lutData[offset + 0] = Math.round(Math.max(0, Math.min(255, color.r)));
+        lutData[offset + 1] = Math.round(Math.max(0, Math.min(255, color.g)));
+        lutData[offset + 2] = Math.round(Math.max(0, Math.min(255, color.b)));
+        lutData[offset + 3] = Math.round(Math.max(0, Math.min(255, color.a)));
+    }
+    return lutData;
+};
+/**
+ * @description 色を補間
+ *              色は0-255範囲で入力され、0-255範囲で出力される
+ * @param {number[]} stops
+ * @param {number} t
+ * @param {number} interpolation - 0: linearRGB, 1: RGB（WebGL互換）
+ * @return {{ r: number, g: number, b: number, a: number }}
+ */
+const interpolateColor = (stops, t, interpolation) => {
+    const stopsLength = stops.length / 5;
+    // 最初と最後のストップを見つける
+    let startIdx = 0;
+    let endIdx = 0;
+    for (let i = 0; i < stopsLength; i++) {
+        // offset は既に 0-1 範囲
+        const offset = stops[i * 5];
+        if (offset <= t) {
+            startIdx = i;
+        }
+        if (offset >= t && endIdx === 0) {
+            endIdx = i;
+            break;
+        }
+    }
+    // 最後のストップを超えている場合
+    if (endIdx === 0) {
+        endIdx = stopsLength - 1;
+    }
+    // 同じストップの場合（色は0-255範囲）
+    if (startIdx === endIdx) {
+        const idx = startIdx * 5;
+        return {
+            "r": stops[idx + 1],
+            "g": stops[idx + 2],
+            "b": stops[idx + 3],
+            "a": stops[idx + 4]
+        };
+    }
+    // 補間係数を計算（offset は既に 0-1 範囲）
+    const startOffset = stops[startIdx * 5];
+    const endOffset = stops[endIdx * 5];
+    const localT = (t - startOffset) / (endOffset - startOffset);
+    // 色を取得（0-255範囲）
+    const startR = stops[startIdx * 5 + 1];
+    const startG = stops[startIdx * 5 + 2];
+    const startB = stops[startIdx * 5 + 3];
+    const startA = stops[startIdx * 5 + 4];
+    const endR = stops[endIdx * 5 + 1];
+    const endG = stops[endIdx * 5 + 2];
+    const endB = stops[endIdx * 5 + 3];
+    const endA = stops[endIdx * 5 + 4];
+    // 補間（WebGL互換: interpolation === 0 がlinearRGB）
+    if (interpolation === 0) {
+        // linearRGB補間（ガンマ補正）
+        // 0-255 → 0-1に正規化してからリニア変換
+        return {
+            "r": linearToSRGB(lerp(sRGBToLinear(startR / 255), sRGBToLinear(endR / 255), localT)) * 255,
+            "g": linearToSRGB(lerp(sRGBToLinear(startG / 255), sRGBToLinear(endG / 255), localT)) * 255,
+            "b": linearToSRGB(lerp(sRGBToLinear(startB / 255), sRGBToLinear(endB / 255), localT)) * 255,
+            "a": lerp(startA, endA, localT)
+        };
+    }
+    // RGB補間（リニア、デフォルト）- 0-255範囲でそのまま補間
+    return {
+        "r": lerp(startR, endR, localT),
+        "g": lerp(startG, endG, localT),
+        "b": lerp(startB, endB, localT),
+        "a": lerp(startA, endA, localT)
+    };
+};
+/**
+ * @description 線形補間
+ */
+const lerp = (a, b, t) => {
+    return a + (b - a) * t;
+};
+/**
+ * @description sRGBからリニアへ変換（入力: 0-1正規化値）
+ *              WebGL版と同じガンマ値 2.23333333 を使用
+ */
+const sRGBToLinear = (value) => {
+    // WebGL版と同じ簡易ガンマ補正
+    return Math.pow(value, 2.23333333);
+};
+/**
+ * @description リニアからsRGBへ変換（出力: 0-1正規化値）
+ *              WebGL版と同じガンマ値 0.45454545 (= 1/2.2) を使用
+ */
+const linearToSRGB = (value) => {
+    // WebGL版と同じ簡易ガンマ補正
+    return Math.pow(value, 0.45454545);
+};
+/**
+ * @description フィルター用グラデーションLUTテクスチャデータを生成
+ *              ratios, colors, alphas配列から1D LUTを生成
+ * @param {Float32Array} ratios - 比率配列 (0-255)
+ * @param {Float32Array} colors - 色配列 (32bit整数)
+ * @param {Float32Array} alphas - アルファ配列 (0-1)
+ * @return {Uint8Array}
+ */
+export const generateFilterGradientLUT = (ratios, colors, alphas) => {
+    const resolution = 256;
+    const lutData = new Uint8Array(resolution * 4);
+    const stopsLength = ratios.length;
+    // ストップデータを構築
+    const stops = [];
+    for (let i = 0; i < stopsLength; i++) {
+        const color = colors[i];
+        stops.push({
+            "offset": ratios[i] / 255,
+            "r": (color >> 16 & 0xFF) / 255,
+            "g": (color >> 8 & 0xFF) / 255,
+            "b": (color & 0xFF) / 255,
+            "a": alphas[i]
+        });
+    }
+    // 各ピクセルの色を補間
+    for (let i = 0; i < resolution; i++) {
+        const t = i / (resolution - 1);
+        // ストップを見つける
+        let startIdx = 0;
+        let endIdx = stopsLength - 1;
+        for (let j = 0; j < stopsLength - 1; j++) {
+            if (stops[j].offset <= t && stops[j + 1].offset >= t) {
+                startIdx = j;
+                endIdx = j + 1;
+                break;
+            }
+        }
+        // 補間
+        const start = stops[startIdx];
+        const end = stops[endIdx];
+        let localT = 0;
+        if (end.offset !== start.offset) {
+            localT = (t - start.offset) / (end.offset - start.offset);
+        }
+        const r = lerp(start.r, end.r, localT);
+        const g = lerp(start.g, end.g, localT);
+        const b = lerp(start.b, end.b, localT);
+        const a = lerp(start.a, end.a, localT);
+        // プリマルチプライドアルファで書き込み
+        const offset = i * 4;
+        lutData[offset + 0] = Math.round(r * a * 255);
+        lutData[offset + 1] = Math.round(g * a * 255);
+        lutData[offset + 2] = Math.round(b * a * 255);
+        lutData[offset + 3] = Math.round(a * 255);
+    }
+    return lutData;
+};

package/src/Grid.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description グリッドデータマップ（9-slice用）
+ *              Grid data map for 9-slice transformation
+ * @type {Map<number, Float32Array | null>}
+ */
+export declare const $gridDataMap: Map<number, Float32Array | null>;
+/**
+ * @description 現在のフィルバッファインデックス
+ *              Current fill buffer index
+ * @type {number}
+ */
+export declare let $fillBufferIndex: number;
+/**
+ * @description グリッド情報を初期化
+ *              Initialize grid information
+ * @return {void}
+ */
+export declare const $terminateGrid: () => void;

package/src/Grid.js

@@ -0,0 +1,21 @@
+/**
+ * @description グリッドデータマップ（9-slice用）
+ *              Grid data map for 9-slice transformation
+ * @type {Map<number, Float32Array | null>}
+ */
+export const $gridDataMap = new Map();
+/**
+ * @description 現在のフィルバッファインデックス
+ *              Current fill buffer index
+ * @type {number}
+ */
+export let $fillBufferIndex = 0;
+/**
+ * @description グリッド情報を初期化
+ *              Initialize grid information
+ * @return {void}
+ */
+export const $terminateGrid = () => {
+    $gridDataMap.clear();
+    $fillBufferIndex = 0;
+};

package/src/Mask/service/MaskBeginMaskService.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description マスク描画の開始準備
+ *              Prepare to start drawing the mask
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/service/MaskBeginMaskService.js

@@ -0,0 +1,22 @@
+import { $isMaskDrawing, $setMaskDrawing, $clipLevels } from "../../Mask";
+import { $context } from "../../WebGPUUtil";
+/**
+ * @description マスク描画の開始準備
+ *              Prepare to start drawing the mask
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    currentAttachmentObject.mask = true;
+    currentAttachmentObject.clipLevel++;
+    $clipLevels.set(currentAttachmentObject.clipLevel, currentAttachmentObject.clipLevel);
+    if (!$isMaskDrawing()) {
+        $setMaskDrawing(true);
+    }
+};

package/src/Mask/service/MaskEndMaskService.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description マスクの描画を終了
+ *              End mask drawing
+ *
+ * WebGPU版: ビット単位のマスキングを使用（WebGL版と同様）
+ * 各レベルに対応するビットが設定されたマスク値を計算し、
+ * EQUALテストで累積マスク値と一致する領域のみ描画
+ *
+ * WebGL版: stencilFunc(EQUAL, mask & 0xff, mask)
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: () => void;

package/src/Mask/service/MaskEndMaskService.js

@@ -0,0 +1,36 @@
+import { $context } from "../../WebGPUUtil";
+import { $setMaskTestEnabled, $setMaskStencilReference, $setMaskDrawing } from "../../Mask";
+/**
+ * @description マスクの描画を終了
+ *              End mask drawing
+ *
+ * WebGPU版: ビット単位のマスキングを使用（WebGL版と同様）
+ * 各レベルに対応するビットが設定されたマスク値を計算し、
+ * EQUALテストで累積マスク値と一致する領域のみ描画
+ *
+ * WebGL版: stencilFunc(EQUAL, mask & 0xff, mask)
+ *
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = () => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    const clipLevel = currentAttachmentObject.clipLevel;
+    // 累積マスク値を計算（WebGL版と同じアルゴリズム）
+    // 簡略化: mask = (1 << clipLevel) - 1
+    // level 1: mask = 1 (0x01)
+    // level 2: mask = 3 (0x03)
+    // level 3: mask = 7 (0x07)
+    // ...
+    const mask = (1 << clipLevel) - 1;
+    // マスクテストを有効化
+    // EQUALテストで、累積マスク値と一致するピクセルのみ描画を許可
+    $setMaskTestEnabled(true);
+    $setMaskStencilReference(mask & 0xFF); // EQUAL テスト用の参照値
+    // マスク描画フェーズは終了
+    $setMaskDrawing(false);
+};

package/src/Mask/service/MaskSetMaskBoundsService.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description マスク範囲の設定
+ *              Set mask bounds
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (x_min: number, y_min: number, x_max: number, y_max: number) => void;

package/src/Mask/service/MaskSetMaskBoundsService.js

@@ -0,0 +1,36 @@
+import { $clipBounds } from "../../Mask";
+import { $context, $getFloat32Array4 } from "../../WebGPUUtil";
+/**
+ * @description マスク範囲の設定
+ *              Set mask bounds
+ *
+ * @param  {number} x_min
+ * @param  {number} y_min
+ * @param  {number} x_max
+ * @param  {number} y_max
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (x_min, y_min, x_max, y_max) => {
+    const currentAttachmentObject = $context.currentAttachmentObject;
+    if (!currentAttachmentObject) {
+        return;
+    }
+    const clipLevel = currentAttachmentObject.clipLevel;
+    let bounds = $clipBounds.get(clipLevel);
+    if (bounds) {
+        bounds[0] = Math.min(bounds[0], x_min);
+        bounds[1] = Math.min(bounds[1], y_min);
+        bounds[2] = Math.max(bounds[2], x_max);
+        bounds[3] = Math.max(bounds[3], y_max);
+    }
+    else {
+        bounds = $getFloat32Array4();
+        bounds[0] = x_min;
+        bounds[1] = y_min;
+        bounds[2] = x_max;
+        bounds[3] = y_max;
+        $clipBounds.set(clipLevel, bounds);
+    }
+};

package/src/Mask/service/MaskUnionMaskService.d.ts

@@ -0,0 +1,4 @@
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+export declare const execute: (device: GPUDevice, renderPassEncoder: GPURenderPassEncoder, bufferManager: BufferManager, pipelineManager: PipelineManager, currentAttachment: IAttachmentObject) => void;