@next2d/webgpu 3.0.0

package/src/TexturePool/service/TexturePoolCleanupService.d.ts

@@ -0,0 +1,14 @@
+import type { ITexturePoolBuckets } from "../../interface/IPooledTexture";
+/**
+ * @description 古いプールエントリをクリーンアップ（バケットMap版 LRU回収）
+ *              Cleanup old pool entries (bucket Map version, LRU eviction)
+ *
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {number} currentFrame
+ * @param  {number} threshold - フレーム数閾値
+ * @param  {number[]} totalCount - [0]に現在の合計数を格納
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (buckets: ITexturePoolBuckets, currentFrame: number, threshold: number, totalCount: number[]) => void;

package/src/TexturePool/service/TexturePoolCleanupService.js

@@ -0,0 +1,28 @@
+/**
+ * @description 古いプールエントリをクリーンアップ（バケットMap版 LRU回収）
+ *              Cleanup old pool entries (bucket Map version, LRU eviction)
+ *
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {number} currentFrame
+ * @param  {number} threshold - フレーム数閾値
+ * @param  {number[]} totalCount - [0]に現在の合計数を格納
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (buckets, currentFrame, threshold, totalCount) => {
+    const frameThreshold = currentFrame - threshold;
+    for (const [key, bucket] of buckets) {
+        for (let i = bucket.length - 1; i >= 0; i--) {
+            const entry = bucket[i];
+            if (!entry.inUse && entry.lastUsedFrame < frameThreshold) {
+                entry.texture.destroy();
+                bucket.splice(i, 1);
+                totalCount[0]--;
+            }
+        }
+        if (bucket.length === 0) {
+            buckets.delete(key);
+        }
+    }
+};

package/src/TexturePool/service/TexturePoolEvictOldestService.d.ts

@@ -0,0 +1,11 @@
+import type { IPooledTexture } from "../../interface/IPooledTexture";
+/**
+ * @description 最も古い未使用エントリを削除
+ *              Evict the oldest unused pool entry
+ *
+ * @param  {IPooledTexture[]} pool
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (pool: IPooledTexture[]) => void;

package/src/TexturePool/service/TexturePoolEvictOldestService.js

@@ -0,0 +1,24 @@
+/**
+ * @description 最も古い未使用エントリを削除
+ *              Evict the oldest unused pool entry
+ *
+ * @param  {IPooledTexture[]} pool
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (pool) => {
+    let oldestIndex = -1;
+    let oldestFrame = Infinity;
+    for (let i = 0; i < pool.length; i++) {
+        const entry = pool[i];
+        if (!entry.inUse && entry.lastUsedFrame < oldestFrame) {
+            oldestFrame = entry.lastUsedFrame;
+            oldestIndex = i;
+        }
+    }
+    if (oldestIndex >= 0) {
+        pool[oldestIndex].texture.destroy();
+        pool.splice(oldestIndex, 1);
+    }
+};

package/src/TexturePool/service/TexturePoolReleaseService.d.ts

@@ -0,0 +1,13 @@
+import type { ITexturePoolBuckets } from "../../interface/IPooledTexture";
+/**
+ * @description テクスチャをプールに返却（バケットMap版）
+ *              Release texture back to pool (bucket Map version)
+ *
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {GPUTexture} texture
+ * @param  {number} currentFrame
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (buckets: ITexturePoolBuckets, texture: GPUTexture, currentFrame: number) => void;

package/src/TexturePool/service/TexturePoolReleaseService.js

@@ -0,0 +1,22 @@
+/**
+ * @description テクスチャをプールに返却（バケットMap版）
+ *              Release texture back to pool (bucket Map version)
+ *
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {GPUTexture} texture
+ * @param  {number} currentFrame
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (buckets, texture, currentFrame) => {
+    for (const bucket of buckets.values()) {
+        for (let i = 0; i < bucket.length; i++) {
+            if (bucket[i].texture === texture) {
+                bucket[i].inUse = false;
+                bucket[i].lastUsedFrame = currentFrame;
+                return;
+            }
+        }
+    }
+};

package/src/TexturePool/usecase/TexturePoolAcquireUseCase.d.ts

@@ -0,0 +1,19 @@
+import type { ITexturePoolBuckets } from "../../interface/IPooledTexture";
+/**
+ * @description テクスチャを取得または作成（バケットMap検索）
+ *              Acquire texture from pool or create new one (bucket Map lookup)
+ *
+ * @param  {GPUDevice} device
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {GPUTextureFormat} format
+ * @param  {GPUTextureUsageFlags} usage
+ * @param  {number} currentFrame
+ * @param  {number} maxPoolSize
+ * @param  {number[]} totalCount - [0]に現在の合計数を格納
+ * @return {GPUTexture}
+ * @method
+ * @protected
+ */
+export declare const execute: (device: GPUDevice, buckets: ITexturePoolBuckets, width: number, height: number, format: GPUTextureFormat, usage: GPUTextureUsageFlags, currentFrame: number, maxPoolSize: number, totalCount: number[]) => GPUTexture;

package/src/TexturePool/usecase/TexturePoolAcquireUseCase.js

@@ -0,0 +1,90 @@
+/**
+ * @description バケットキーを生成（exactサイズ + フォーマット）
+ *
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {GPUTextureFormat} format
+ * @return {string}
+ */
+const buildKey = (width, height, format) => {
+    return `${width}_${height}_${format}`;
+};
+/**
+ * @description テクスチャを取得または作成（バケットMap検索）
+ *              Acquire texture from pool or create new one (bucket Map lookup)
+ *
+ * @param  {GPUDevice} device
+ * @param  {ITexturePoolBuckets} buckets
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {GPUTextureFormat} format
+ * @param  {GPUTextureUsageFlags} usage
+ * @param  {number} currentFrame
+ * @param  {number} maxPoolSize
+ * @param  {number[]} totalCount - [0]に現在の合計数を格納
+ * @return {GPUTexture}
+ * @method
+ * @protected
+ */
+export const execute = (device, buckets, width, height, format, usage, currentFrame, maxPoolSize, totalCount) => {
+    const key = buildKey(width, height, format);
+    // バケットから未使用テクスチャを検索（O(1)バケット + O(n)バケット内走査）
+    const bucket = buckets.get(key);
+    if (bucket) {
+        for (let i = 0; i < bucket.length; i++) {
+            const entry = bucket[i];
+            if (!entry.inUse) {
+                entry.inUse = true;
+                entry.lastUsedFrame = currentFrame;
+                return entry.texture;
+            }
+        }
+    }
+    // プールが満杯なら最も古い未使用エントリを削除（LRU回収）
+    if (totalCount[0] >= maxPoolSize) {
+        let oldestFrame = Infinity;
+        let oldestKey = "";
+        let oldestIdx = -1;
+        for (const [bKey, bEntries] of buckets) {
+            for (let i = 0; i < bEntries.length; i++) {
+                const e = bEntries[i];
+                if (!e.inUse && e.lastUsedFrame < oldestFrame) {
+                    oldestFrame = e.lastUsedFrame;
+                    oldestKey = bKey;
+                    oldestIdx = i;
+                }
+            }
+        }
+        if (oldestIdx >= 0) {
+            const bEntries = buckets.get(oldestKey);
+            bEntries[oldestIdx].texture.destroy();
+            bEntries.splice(oldestIdx, 1);
+            if (bEntries.length === 0) {
+                buckets.delete(oldestKey);
+            }
+            totalCount[0]--;
+        }
+    }
+    // exactサイズで新規作成
+    const texture = device.createTexture({
+        "size": { width, height },
+        format,
+        usage
+    });
+    const entry = {
+        texture,
+        width,
+        height,
+        format,
+        "lastUsedFrame": currentFrame,
+        "inUse": true
+    };
+    if (bucket) {
+        bucket.push(entry);
+    }
+    else {
+        buckets.set(key, [entry]);
+    }
+    totalCount[0]++;
+    return texture;
+};

package/src/TexturePool.d.ts

@@ -0,0 +1,69 @@
+/**
+ * @description テクスチャプールマネージャー（Power-of-2バケット版）
+ *              Texture pool manager for WebGPU optimization
+ *
+ *              リクエストサイズをPower-of-2に切り上げてバケット化。
+ *              同一バケット内で高いキャッシュヒット率を実現。
+ *              LRUベースで未使用テクスチャを回収。
+ */
+export declare class TexturePool {
+    private device;
+    private buckets;
+    private currentFrame;
+    private totalCount;
+    /**
+     * @param {GPUDevice} device
+     * @constructor
+     */
+    constructor(device: GPUDevice);
+    /**
+     * @description フレーム開始時に呼び出し
+     * @return {void}
+     */
+    beginFrame(): void;
+    /**
+     * @description テクスチャを取得または作成
+     * @param {number} width - テクスチャの幅
+     * @param {number} height - テクスチャの高さ
+     * @param {GPUTextureFormat} format - テクスチャフォーマット
+     * @param {GPUTextureUsageFlags} usage - テクスチャ使用フラグ
+     * @return {GPUTexture}
+     */
+    acquire(width: number, height: number, format?: GPUTextureFormat, usage?: GPUTextureUsageFlags): GPUTexture;
+    /**
+     * @description テクスチャをプールに返却
+     * @param {GPUTexture} texture - 返却するテクスチャ
+     * @return {void}
+     */
+    release(texture: GPUTexture): void;
+    /**
+     * @description プール統計を取得
+     * @return {{ total: number, inUse: number, available: number }}
+     */
+    getStats(): {
+        total: number;
+        inUse: number;
+        available: number;
+    };
+    /**
+     * @description 解放
+     * @return {void}
+     */
+    dispose(): void;
+}
+/**
+ * @description テクスチャプールを初期化
+ * @param {GPUDevice} device
+ * @return {void}
+ */
+export declare const initTexturePool: (device: GPUDevice) => void;
+/**
+ * @description テクスチャプールを取得
+ * @return {TexturePool | null}
+ */
+export declare const getTexturePool: () => TexturePool | null;
+/**
+ * @description テクスチャプールをクリア
+ * @return {void}
+ */
+export declare const clearTexturePool: () => void;

package/src/TexturePool.js

@@ -0,0 +1,151 @@
+import { execute as texturePoolAcquireUseCase } from "./TexturePool/usecase/TexturePoolAcquireUseCase";
+import { execute as texturePoolReleaseService } from "./TexturePool/service/TexturePoolReleaseService";
+import { execute as texturePoolCleanupService } from "./TexturePool/service/TexturePoolCleanupService";
+/**
+ * @description プールの最大サイズ
+ */
+const MAX_POOL_SIZE = 32;
+/**
+ * @description キャッシュのクリーンアップ閾値（フレーム数）
+ */
+const CACHE_CLEANUP_THRESHOLD = 180; // 3秒（60FPS想定）
+/**
+ * @description テクスチャプールマネージャー（Power-of-2バケット版）
+ *              Texture pool manager for WebGPU optimization
+ *
+ *              リクエストサイズをPower-of-2に切り上げてバケット化。
+ *              同一バケット内で高いキャッシュヒット率を実現。
+ *              LRUベースで未使用テクスチャを回収。
+ */
+export class TexturePool {
+    /**
+     * @param {GPUDevice} device
+     * @constructor
+     */
+    constructor(device) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "buckets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentFrame", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "totalCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.device = device;
+        this.buckets = new Map();
+        this.currentFrame = 0;
+        this.totalCount = [0];
+    }
+    /**
+     * @description フレーム開始時に呼び出し
+     * @return {void}
+     */
+    beginFrame() {
+        this.currentFrame++;
+        // 定期的にプールをクリーンアップ（LRU回収）
+        if (this.currentFrame % 60 === 0) {
+            texturePoolCleanupService(this.buckets, this.currentFrame, CACHE_CLEANUP_THRESHOLD, this.totalCount);
+        }
+    }
+    /**
+     * @description テクスチャを取得または作成
+     * @param {number} width - テクスチャの幅
+     * @param {number} height - テクスチャの高さ
+     * @param {GPUTextureFormat} format - テクスチャフォーマット
+     * @param {GPUTextureUsageFlags} usage - テクスチャ使用フラグ
+     * @return {GPUTexture}
+     */
+    acquire(width, height, format = "rgba8unorm", usage = GPUTextureUsage.TEXTURE_BINDING |
+        GPUTextureUsage.COPY_DST |
+        GPUTextureUsage.RENDER_ATTACHMENT) {
+        return texturePoolAcquireUseCase(this.device, this.buckets, width, height, format, usage, this.currentFrame, MAX_POOL_SIZE, this.totalCount);
+    }
+    /**
+     * @description テクスチャをプールに返却
+     * @param {GPUTexture} texture - 返却するテクスチャ
+     * @return {void}
+     */
+    release(texture) {
+        texturePoolReleaseService(this.buckets, texture, this.currentFrame);
+    }
+    /**
+     * @description プール統計を取得
+     * @return {{ total: number, inUse: number, available: number }}
+     */
+    getStats() {
+        let inUse = 0;
+        let available = 0;
+        for (const bucket of this.buckets.values()) {
+            for (const entry of bucket) {
+                if (entry.inUse) {
+                    inUse++;
+                }
+                else {
+                    available++;
+                }
+            }
+        }
+        return {
+            "total": this.totalCount[0],
+            inUse,
+            available
+        };
+    }
+    /**
+     * @description 解放
+     * @return {void}
+     */
+    dispose() {
+        for (const bucket of this.buckets.values()) {
+            for (const entry of bucket) {
+                entry.texture.destroy();
+            }
+        }
+        this.buckets.clear();
+        this.totalCount[0] = 0;
+    }
+}
+/**
+ * @description グローバルテクスチャプールインスタンス
+ */
+let $texturePool = null;
+/**
+ * @description テクスチャプールを初期化
+ * @param {GPUDevice} device
+ * @return {void}
+ */
+export const initTexturePool = (device) => {
+    $texturePool = new TexturePool(device);
+};
+/**
+ * @description テクスチャプールを取得
+ * @return {TexturePool | null}
+ */
+export const getTexturePool = () => {
+    return $texturePool;
+};
+/**
+ * @description テクスチャプールをクリア
+ * @return {void}
+ */
+export const clearTexturePool = () => {
+    if ($texturePool) {
+        $texturePool.dispose();
+    }
+};

package/src/WebGPUUtil.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @description 描画のサンプリング数（MSAA）
+ *              Number of samples for drawing (MSAA)
+ *
+ * @type {number}
+ * @default 4
+ * @protected
+ *
+ * @note WebGL版と同じくMSAA 4xをデフォルトで有効化
+ *       曲線のアンチエイリアス品質向上のため
+ */
+export declare let $samples: number;
+/**
+ * @description 描画のサンプリング数を変更
+ *              Change the number of samples for drawing
+ *
+ * @param  {number} samples
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const $setSamples: (samples: number) => void;
+export declare class WebGPUUtil {
+    private static device;
+    private static devicePixelRatio;
+    private static renderMaxSize;
+    private static float32Array4Pool;
+    /**
+     * @description Set GPUDevice
+     * @param {GPUDevice} gpu_device
+     * @return {void}
+     */
+    static setDevice(gpu_device: GPUDevice): void;
+    /**
+     * @description Get GPUDevice
+     * @return {GPUDevice}
+     */
+    static getDevice(): GPUDevice;
+    /**
+     * @description Set device pixel ratio
+     * @param {number} ratio
+     * @return {void}
+     */
+    static setDevicePixelRatio(ratio: number): void;
+    /**
+     * @description Get device pixel ratio
+     * @return {number}
+     */
+    static getDevicePixelRatio(): number;
+    /**
+     * @description Set render max size
+     * @param {number} size
+     * @return {void}
+     */
+    static setRenderMaxSize(size: number): void;
+    /**
+     * @description Get render max size (for atlas)
+     * @return {number}
+     */
+    static getRenderMaxSize(): number;
+    /**
+     * @description Create Float32Array
+     * @param {number} length
+     * @return {Float32Array}
+     */
+    static createFloat32Array(length: number): Float32Array;
+    /**
+     * @description Create generic array
+     * @return {Array}
+     */
+    static createArray<T>(): T[];
+    /**
+     * @description Get Float32Array(4) from pool
+     * @return {Float32Array}
+     */
+    static getFloat32Array4(): Float32Array;
+    /**
+     * @description Return Float32Array(4) to pool
+     * @param {Float32Array} array
+     * @return {void}
+     */
+    static poolFloat32Array4(array: Float32Array): void;
+}
+/**
+ * @description グローバルコンテキスト（WebGLUtilの$contextに相当）
+ */
+export declare let $context: any;
+/**
+ * @description コンテキストを設定
+ * @param {any} context
+ */
+export declare const $setContext: (context: any) => void;
+/**
+ * @description Float32Array(4) をプールから取得
+ * @return {Float32Array}
+ */
+export declare const $getFloat32Array4: () => Float32Array;
+/**
+ * @description Float32Array(4) をプールに返却
+ * @param {Float32Array} array
+ */
+export declare const $poolFloat32Array4: (array: Float32Array) => void;