@next2d/webgpu 3.0.0

package/src/BufferManager.js

@@ -0,0 +1,487 @@
+import { execute as bufferManagerCreateRectVerticesService } from "./BufferManager/service/BufferManagerCreateRectVerticesService";
+import { execute as bufferManagerAcquireVertexBufferUseCase } from "./BufferManager/usecase/BufferManagerAcquireVertexBufferUseCase";
+import { execute as bufferManagerAcquireUniformBufferUseCase } from "./BufferManager/usecase/BufferManagerAcquireUniformBufferUseCase";
+import { execute as bufferManagerReleaseVertexBufferService } from "./BufferManager/service/BufferManagerReleaseVertexBufferService";
+import { execute as bufferManagerReleaseUniformBufferService } from "./BufferManager/service/BufferManagerReleaseUniformBufferService";
+import { execute as bufferManagerAcquireStorageBufferUseCase } from "./BufferManager/usecase/BufferManagerAcquireStorageBufferUseCase";
+import { execute as releaseStorageBufferUseCase } from "./BufferManager/usecase/BufferManagerReleaseStorageBufferUseCase";
+import { execute as cleanupStorageBuffersUseCase } from "./BufferManager/usecase/BufferManagerCleanupStorageBuffersUseCase";
+import { execute as bufferManagerCreateIndirectBufferService } from "./BufferManager/service/BufferManagerCreateIndirectBufferService";
+import { execute as updateIndirectBuffer } from "./BufferManager/service/BufferManagerUpdateIndirectBufferService";
+/**
+ * @description Dynamic Uniform Buffer Allocator
+ *              1フレーム内の全fill uniform データを1本の大バッファにサブアロケートし、
+ *              BindGroup作成を1回に削減する。
+ */
+export class DynamicUniformAllocator {
+    constructor(device, capacity = 65536) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "buffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "offset", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "capacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "alignment", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 256
+        });
+        Object.defineProperty(this, "pendingDestroyBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "stagingBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stagingFloat32", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dirtyEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        this.device = device;
+        this.capacity = capacity;
+        this.stagingBuffer = new ArrayBuffer(capacity);
+        this.stagingFloat32 = new Float32Array(this.stagingBuffer);
+    }
+    /**
+     * @description フレーム開始時にオフセットをリセット
+     *              前フレームの旧バッファを安全に破棄（submit済みのため）
+     */
+    resetFrame() {
+        this.offset = 0;
+        this.dirtyEnd = 0;
+        for (const buf of this.pendingDestroyBuffers) {
+            buf.destroy();
+        }
+        this.pendingDestroyBuffers.length = 0;
+    }
+    /**
+     * @description バッファを取得（遅延生成）
+     */
+    getBuffer() {
+        if (!this.buffer) {
+            this.buffer = this.device.createBuffer({
+                "size": this.capacity,
+                "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+            });
+        }
+        return this.buffer;
+    }
+    /**
+     * @description uniform データをCPUステージングバッファにコピーし、アライメント済みオフセットを返す
+     *              実際のGPU書き込みはflush()で一括実行される
+     * @param data - 書き込むデータ
+     * @return アライメント済みオフセット（バイト単位）
+     */
+    allocate(data) {
+        // バッファの遅延生成
+        if (!this.buffer) {
+            this.getBuffer();
+        }
+        const alignedOffset = this.offset;
+        const dataSize = data.byteLength;
+        if (alignedOffset + dataSize > this.capacity) {
+            // 旧バッファにステージングデータをフラッシュ
+            this.flush();
+            // バッファが足りない場合は容量を倍増して再作成
+            this.capacity *= 2;
+            const oldBuffer = this.buffer;
+            this.buffer = this.device.createBuffer({
+                "size": this.capacity,
+                "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+            });
+            if (oldBuffer) {
+                // 旧バッファは即座に破棄しない — コマンドエンコーダーに記録済みの
+                // コマンドが旧バッファを参照している可能性があるため、
+                // フレーム終了後のresetFrame()で安全に破棄する
+                this.pendingDestroyBuffers.push(oldBuffer);
+            }
+            // ステージングバッファも拡張
+            this.stagingBuffer = new ArrayBuffer(this.capacity);
+            this.stagingFloat32 = new Float32Array(this.stagingBuffer);
+        }
+        // CPUステージングバッファにコピー（writeBuffer呼ばない）
+        this.stagingFloat32.set(data, alignedOffset / 4);
+        const end = alignedOffset + dataSize;
+        if (end > this.dirtyEnd) {
+            this.dirtyEnd = end;
+        }
+        // 次のアロケーションは256バイトアライメント
+        this.offset = alignedOffset + Math.ceil(dataSize / this.alignment) * this.alignment;
+        return alignedOffset;
+    }
+    /**
+     * @description ステージングバッファの内容をGPUバッファに一括書き込み
+     *              submit前に1回だけ呼び出す
+     */
+    flush() {
+        if (this.dirtyEnd > 0 && this.buffer) {
+            this.device.queue.writeBuffer(this.buffer, 0, this.stagingBuffer, 0, this.dirtyEnd);
+            this.dirtyEnd = 0;
+        }
+    }
+    dispose() {
+        if (this.buffer) {
+            this.buffer.destroy();
+            this.buffer = null;
+        }
+        for (const buf of this.pendingDestroyBuffers) {
+            buf.destroy();
+        }
+        this.pendingDestroyBuffers.length = 0;
+    }
+}
+export class BufferManager {
+    constructor(device) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "uniformBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexBufferBuckets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "uniformBufferBuckets", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "storageBufferPool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "indirectBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "indirectBufferPool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "frameIndirectBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "frameNumber", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "unitRectBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "frameVertexPoolBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "frameUniformPoolBuffers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dynamicUniform", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.device = device;
+        this.vertexBuffers = new Map();
+        this.uniformBuffers = new Map();
+        this.vertexBufferBuckets = new Map();
+        this.uniformBufferBuckets = new Map();
+        this.storageBufferPool = [];
+        this.indirectBuffer = null;
+        this.indirectBufferPool = [];
+        this.frameIndirectBuffers = [];
+        this.frameNumber = 0;
+        this.unitRectBuffer = null;
+        this.frameVertexPoolBuffers = [];
+        this.frameUniformPoolBuffers = [];
+        this.dynamicUniform = new DynamicUniformAllocator(device);
+    }
+    createVertexBuffer(name, data) {
+        const buffer = this.device.createBuffer({
+            "size": data.byteLength,
+            "usage": GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            "mappedAtCreation": true
+        });
+        new Float32Array(buffer.getMappedRange()).set(data);
+        buffer.unmap();
+        this.vertexBuffers.set(name, buffer);
+        return buffer;
+    }
+    createUniformBuffer(name, size) {
+        const buffer = this.device.createBuffer({
+            "size": size,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+        this.uniformBuffers.set(name, buffer);
+        return buffer;
+    }
+    updateUniformBuffer(name, data) {
+        const buffer = this.uniformBuffers.get(name);
+        if (buffer) {
+            this.device.queue.writeBuffer(buffer, 0, data.buffer, data.byteOffset, data.byteLength);
+        }
+    }
+    getVertexBuffer(name) {
+        return this.vertexBuffers.get(name);
+    }
+    getUniformBuffer(name) {
+        return this.uniformBuffers.get(name);
+    }
+    createRectVertices(x, y, width, height) {
+        return bufferManagerCreateRectVerticesService(x, y, width, height);
+    }
+    acquireVertexBuffer(requiredSize, data) {
+        const buffer = bufferManagerAcquireVertexBufferUseCase(this.device, this.vertexBufferBuckets, requiredSize, data);
+        this.frameVertexPoolBuffers.push(buffer);
+        return buffer;
+    }
+    releaseVertexBuffer(buffer) {
+        bufferManagerReleaseVertexBufferService(this.vertexBufferBuckets, buffer);
+    }
+    acquireUniformBuffer(requiredSize) {
+        const buffer = bufferManagerAcquireUniformBufferUseCase(this.device, this.uniformBufferBuckets, requiredSize);
+        this.frameUniformPoolBuffers.push(buffer);
+        return buffer;
+    }
+    /**
+     * @description Uniform Bufferの取得と書き込みを一括で行うヘルパー
+     *              acquireUniformBuffer + writeBuffer の2ステップを1呼び出しに統合
+     * @param data - 書き込むデータ
+     * @param byteLength - 書き込みバイト数（省略時はdata.byteLength）
+     * @return GPUBuffer
+     */
+    acquireAndWriteUniformBuffer(data, byteLength) {
+        const writeBytes = byteLength ?? data.byteLength;
+        const buffer = this.acquireUniformBuffer(writeBytes);
+        this.device.queue.writeBuffer(buffer, 0, data.buffer, data.byteOffset, writeBytes);
+        return buffer;
+    }
+    releaseUniformBuffer(buffer) {
+        bufferManagerReleaseUniformBufferService(this.uniformBufferBuckets, buffer);
+    }
+    destroyBuffer(name) {
+        const vertexBuffer = this.vertexBuffers.get(name);
+        if (vertexBuffer) {
+            vertexBuffer.destroy();
+            this.vertexBuffers.delete(name);
+        }
+        const uniformBuffer = this.uniformBuffers.get(name);
+        if (uniformBuffer) {
+            uniformBuffer.destroy();
+            this.uniformBuffers.delete(name);
+        }
+    }
+    dispose() {
+        for (const buffer of this.vertexBuffers.values()) {
+            buffer.destroy();
+        }
+        this.vertexBuffers.clear();
+        for (const buffer of this.uniformBuffers.values()) {
+            buffer.destroy();
+        }
+        this.uniformBuffers.clear();
+        for (const bucket of this.vertexBufferBuckets.values()) {
+            for (const buffer of bucket) {
+                buffer.destroy();
+            }
+        }
+        this.vertexBufferBuckets.clear();
+        for (const bucket of this.uniformBufferBuckets.values()) {
+            for (const buffer of bucket) {
+                buffer.destroy();
+            }
+        }
+        this.uniformBufferBuckets.clear();
+        for (const entry of this.storageBufferPool) {
+            entry.buffer.destroy();
+        }
+        this.storageBufferPool = [];
+        if (this.indirectBuffer) {
+            this.indirectBuffer.destroy();
+            this.indirectBuffer = null;
+        }
+        for (const buffer of this.indirectBufferPool) {
+            buffer.destroy();
+        }
+        this.indirectBufferPool = [];
+        for (const buffer of this.frameIndirectBuffers) {
+            buffer.destroy();
+        }
+        this.frameIndirectBuffers = [];
+        if (this.unitRectBuffer) {
+            this.unitRectBuffer.destroy();
+            this.unitRectBuffer = null;
+        }
+        this.frameVertexPoolBuffers.length = 0;
+        this.frameUniformPoolBuffers.length = 0;
+        this.dynamicUniform.dispose();
+    }
+    getPoolStats() {
+        let vertexCount = 0;
+        for (const bucket of this.vertexBufferBuckets.values()) {
+            vertexCount += bucket.length;
+        }
+        let uniformCount = 0;
+        for (const bucket of this.uniformBufferBuckets.values()) {
+            uniformCount += bucket.length;
+        }
+        return {
+            "vertexPoolSize": vertexCount,
+            "uniformPoolSize": uniformCount
+        };
+    }
+    clearFrameBuffers() {
+        for (const buffer of this.vertexBuffers.values()) {
+            buffer.destroy();
+        }
+        this.vertexBuffers.clear();
+        for (const buffer of this.uniformBuffers.values()) {
+            buffer.destroy();
+        }
+        this.uniformBuffers.clear();
+        // フレーム内で取得したプールバッファをプールに返却
+        for (const buffer of this.frameVertexPoolBuffers) {
+            bufferManagerReleaseVertexBufferService(this.vertexBufferBuckets, buffer);
+        }
+        this.frameVertexPoolBuffers.length = 0;
+        for (const buffer of this.frameUniformPoolBuffers) {
+            bufferManagerReleaseUniformBufferService(this.uniformBufferBuckets, buffer);
+        }
+        this.frameUniformPoolBuffers.length = 0;
+        // フレーム内で使用したIndirect Bufferをプールに返却
+        for (const buffer of this.frameIndirectBuffers) {
+            this.indirectBufferPool.push(buffer);
+        }
+        this.frameIndirectBuffers.length = 0;
+        this.releaseAllStorageBuffers();
+        this.dynamicUniform.resetFrame();
+        this.frameNumber++;
+        if (this.frameNumber % 60 === 0) {
+            cleanupStorageBuffersUseCase(this.storageBufferPool, this.frameNumber);
+        }
+    }
+    releaseAllStorageBuffers() {
+        for (const entry of this.storageBufferPool) {
+            entry.inUse = false;
+        }
+    }
+    acquireStorageBuffer(requiredSize) {
+        return bufferManagerAcquireStorageBufferUseCase(this.device, this.storageBufferPool, requiredSize, this.frameNumber);
+    }
+    releaseStorageBuffer(buffer) {
+        releaseStorageBufferUseCase(this.storageBufferPool, buffer);
+    }
+    writeStorageBuffer(buffer, data) {
+        this.device.queue.writeBuffer(buffer, 0, data.buffer, data.byteOffset, data.byteLength);
+    }
+    getOrCreateIndirectBuffer(vertexCount, instanceCount, firstVertex = 0, firstInstance = 0) {
+        if (!this.indirectBuffer) {
+            this.indirectBuffer = bufferManagerCreateIndirectBufferService(this.device, vertexCount, instanceCount, firstVertex, firstInstance);
+        }
+        else {
+            updateIndirectBuffer(this.device, this.indirectBuffer, vertexCount, instanceCount, firstVertex, firstInstance);
+        }
+        return this.indirectBuffer;
+    }
+    createIndirectBuffer(vertexCount, instanceCount, firstVertex = 0, firstInstance = 0) {
+        let buffer = this.indirectBufferPool.pop();
+        if (buffer) {
+            updateIndirectBuffer(this.device, buffer, vertexCount, instanceCount, firstVertex, firstInstance);
+        }
+        else {
+            buffer = bufferManagerCreateIndirectBufferService(this.device, vertexCount, instanceCount, firstVertex, firstInstance);
+        }
+        this.frameIndirectBuffers.push(buffer);
+        return buffer;
+    }
+    getUnitRectBuffer() {
+        if (!this.unitRectBuffer) {
+            const vertices = this.createRectVertices(0, 0, 1, 1);
+            this.unitRectBuffer = this.device.createBuffer({
+                "size": vertices.byteLength,
+                "usage": GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+                "mappedAtCreation": true
+            });
+            new Float32Array(this.unitRectBuffer.getMappedRange()).set(vertices);
+            this.unitRectBuffer.unmap();
+        }
+        return this.unitRectBuffer;
+    }
+    getFrameNumber() {
+        return this.frameNumber;
+    }
+    getStoragePoolStats() {
+        const inUse = this.storageBufferPool.filter((e) => e.inUse).length;
+        return {
+            "storagePoolSize": this.storageBufferPool.length,
+            "storagePoolInUse": inUse
+        };
+    }
+}

package/src/Compute/ComputePipelineManager.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @description Compute Pipeline Manager
+ *              Compute Shaderパイプラインの管理
+ *
+ * Compute Shaderは並列処理に最適で、フィルター処理を高速化。
+ * 特に大きなブラー半径（64+）の場合、20-35%の高速化が期待できる。
+ *
+ * @class
+ */
+export declare class ComputePipelineManager {
+    private device;
+    private pipelines;
+    private bindGroupLayouts;
+    /**
+     * @constructor
+     * @param {GPUDevice} device - WebGPU device
+     */
+    constructor(device: GPUDevice);
+    /**
+     * @description ブラー用Compute Pipelineを初期化
+     * @private
+     */
+    private initializeBlurPipelines;
+    /**
+     * @description ブラーCompute Pipelineを作成
+     * @param {string} name - パイプライン名
+     * @private
+     */
+    private createBlurComputePipeline;
+    /**
+     * @description ブラーCompute Shaderコードを生成
+     *              ボックスブラー（均一加重平均）を使用。Fragment Shaderと同一出力。
+     * @return {string} WGSLシェーダーコード
+     * @private
+     */
+    private getBlurComputeShaderCode;
+    /**
+     * @description 共有メモリ版ブラーCompute Shaderコードを生成
+     *              ワークグループ共有メモリでテクスチャ読み込みの重複を排除。
+     *              radius >= 8 で通常版より高速。
+     * @return {string} WGSLシェーダーコード
+     * @private
+     */
+    private getSharedBlurComputeShaderCode;
+    /**
+     * @description パイプラインを取得
+     * @param {string} name - パイプライン名
+     * @return {GPUComputePipeline | undefined}
+     */
+    getPipeline(name: string): GPUComputePipeline | undefined;
+    /**
+     * @description BindGroupLayoutを取得
+     * @param {string} name - レイアウト名
+     * @return {GPUBindGroupLayout | undefined}
+     */
+    getBindGroupLayout(name: string): GPUBindGroupLayout | undefined;
+    /**
+     * @description リソースを破棄
+     */
+    destroy(): void;
+}