@next2d/webgpu 3.0.0

package/src/Filter/GradientGlowFilter/FilterApplyGradientGlowFilterUseCase.js

@@ -0,0 +1,164 @@
+import { $offset } from "../FilterOffset";
+import { execute as filterApplyBlurFilterUseCase } from "../BlurFilter/FilterApplyBlurFilterUseCase";
+import { generateFilterGradientLUT } from "../../Gradient/GradientLUTGenerator";
+/**
+ * @description 度からラジアンへの変換係数
+ */
+const DEG_TO_RAD = Math.PI / 180;
+/**
+ * @description プリアロケートされたFloat32Array (サイズ12)
+ */
+const $uniform12 = new Float32Array(12);
+/**
+ * @description プリアロケートされたBindGroupEntry配列 (バインディング5つ)
+ */
+const $entries5 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null },
+    { "binding": 3, "resource": null },
+    { "binding": 4, "resource": null }
+];
+/**
+ * @description グラデーショングローフィルターを適用
+ *              Apply gradient glow filter
+ *
+ *              WebGL版と同じフロー:
+ *              1. ブラー適用
+ *              2. グラデーションLUT生成（専用テクスチャ）
+ *              3. UV変換方式で最終合成（isInsideでハード境界クリッピング）
+ *
+ * @param  {IAttachmentObject} sourceAttachment - 入力テクスチャ
+ * @param  {Float32Array} matrix - 変換行列
+ * @param  {number} distance - グローの距離
+ * @param  {number} angle - グローの角度（度）
+ * @param  {Float32Array} colors - 色配列
+ * @param  {Float32Array} alphas - アルファ配列
+ * @param  {Float32Array} ratios - 比率配列
+ * @param  {number} blurX - X方向ブラー量
+ * @param  {number} blurY - Y方向ブラー量
+ * @param  {number} strength - グロー強度
+ * @param  {number} quality - クオリティ
+ * @param  {number} type - タイプ (0: full, 1: inner, 2: outer)
+ * @param  {boolean} knockout - ノックアウトモード
+ * @param  {number} devicePixelRatio - デバイスピクセル比
+ * @param  {IFilterConfig} config - WebGPUリソース設定
+ * @return {IAttachmentObject} - フィルター適用後のアタッチメント
+ */
+export const execute = (sourceAttachment, matrix, distance, angle, colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout, devicePixelRatio, config) => {
+    const { device, commandEncoder, frameBufferManager, pipelineManager, textureManager } = config;
+    // 元のオフセットを保存
+    const baseOffsetX = $offset.x;
+    const baseOffsetY = $offset.y;
+    const baseWidth = sourceAttachment.width;
+    const baseHeight = sourceAttachment.height;
+    // ブラーフィルターを適用
+    const blurAttachment = filterApplyBlurFilterUseCase(sourceAttachment, matrix, blurX, blurY, quality, devicePixelRatio, config);
+    const blurWidth = blurAttachment.width;
+    const blurHeight = blurAttachment.height;
+    const blurOffsetX = $offset.x;
+    const blurOffsetY = $offset.y;
+    const offsetDiffX = blurOffsetX - baseOffsetX;
+    const offsetDiffY = blurOffsetY - baseOffsetY;
+    // 変換行列からスケールを取得
+    const xScale = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+    const yScale = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+    // グローのオフセットを計算
+    const radian = angle * DEG_TO_RAD;
+    const x = Math.cos(radian) * distance * (xScale / devicePixelRatio);
+    const y = Math.sin(radian) * distance * (yScale / devicePixelRatio);
+    // ===== WebGL版と同じサイズ・位置計算 =====
+    const isInner = type === 1;
+    const w = isInner ? baseWidth : blurWidth + Math.max(0, Math.abs(x) - offsetDiffX);
+    const h = isInner ? baseHeight : blurHeight + Math.max(0, Math.abs(y) - offsetDiffY);
+    const width = Math.ceil(w);
+    const height = Math.ceil(h);
+    const fractionX = (width - w) / 2;
+    const fractionY = (height - h) / 2;
+    // テクスチャ座標の計算
+    const baseTextureX = isInner ? 0 : Math.max(0, offsetDiffX - x) + fractionX;
+    const baseTextureY = isInner ? 0 : Math.max(0, offsetDiffY - y) + fractionY;
+    const blurTextureX = isInner ? x - blurOffsetX : (x > 0 ? Math.max(0, x - offsetDiffX) : 0) + fractionX;
+    const blurTextureY = isInner ? y - blurOffsetY : (y > 0 ? Math.max(0, y - offsetDiffY) : 0) + fractionY;
+    // ===== グラデーションLUT生成（専用テクスチャ） =====
+    // 注意: 共有テクスチャは使用しない。
+    // queue.writeTextureはcommandEncoder外で即座に実行されるため、
+    // 同一フレーム内の複数GradientGlowFilter適用時に最後の書き込みで上書きされる。
+    const lutData = generateFilterGradientLUT(ratios, colors, alphas);
+    const lutTexture = device.createTexture({
+        "size": { "width": 256, "height": 1 },
+        "format": "rgba8unorm",
+        "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
+    });
+    device.queue.writeTexture({ "texture": lutTexture }, lutData.buffer, { "bytesPerRow": 256 * 4, "offset": lutData.byteOffset }, { "width": 256, "height": 1 });
+    const lutView = lutTexture.createView();
+    // ===== UV変換パラメータ計算 =====
+    // WebGPU: texCoord.y=0がトップ（Y-flip補正済み）
+    const baseScaleX = width / baseWidth;
+    const baseScaleY = height / baseHeight;
+    const baseOffsetUVX = baseTextureX / baseWidth;
+    const baseOffsetUVY = baseTextureY / baseHeight;
+    const blurScaleX = width / blurWidth;
+    const blurScaleY = height / blurHeight;
+    const blurOffsetUVX = blurTextureX / blurWidth;
+    const blurOffsetUVY = blurTextureY / blurHeight;
+    // ===== 最終合成パス =====
+    const destAttachment = frameBufferManager.createTemporaryAttachment(width, height);
+    const pipeline = pipelineManager.getFilterPipeline("gradient_glow_filter", {
+        "GLOW_TYPE": type,
+        "IS_KNOCKOUT": knockout ? 1 : 0
+    });
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("gradient_glow_filter");
+    if (!pipeline || !bindGroupLayout) {
+        console.error("[WebGPU GradientGlowFilter] Pipeline not found");
+        frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+        return sourceAttachment;
+    }
+    const sampler = textureManager.createSampler("gradient_glow_sampler", true);
+    // ユニフォームバッファ: 12 floats = 48 bytes
+    $uniform12[0] = strength;
+    $uniform12[1] = isInner ? 1.0 : 0.0;
+    $uniform12[2] = knockout ? 1.0 : 0.0;
+    $uniform12[3] = type;
+    $uniform12[4] = baseScaleX;
+    $uniform12[5] = baseScaleY;
+    $uniform12[6] = baseOffsetUVX;
+    $uniform12[7] = baseOffsetUVY;
+    $uniform12[8] = blurScaleX;
+    $uniform12[9] = blurScaleY;
+    $uniform12[10] = blurOffsetUVX;
+    $uniform12[11] = blurOffsetUVY;
+    const uniformBuffer = config.bufferManager
+        ? config.bufferManager.acquireAndWriteUniformBuffer($uniform12)
+        : device.createBuffer({
+            "size": $uniform12.byteLength,
+            "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        });
+    if (!config.bufferManager) {
+        device.queue.writeBuffer(uniformBuffer, 0, $uniform12);
+    }
+    // バインドグループを作成（オリジナルテクスチャを直接使用）
+    $entries5[0].resource.buffer = uniformBuffer;
+    $entries5[1].resource = sampler;
+    $entries5[2].resource = blurAttachment.texture.view;
+    $entries5[3].resource = sourceAttachment.texture.view;
+    $entries5[4].resource = lutView;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries5
+    });
+    // レンダーパスを実行
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(destAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    // クリーンアップ（lutTextureはsubmit後に遅延破棄）
+    config.frameTextures.push(lutTexture);
+    frameBufferManager.releaseTemporaryAttachment(blurAttachment);
+    // WebGL版と同じオフセット更新
+    $offset.x = baseOffsetX + baseTextureX;
+    $offset.y = baseOffsetY + baseTextureY;
+    return destAttachment;
+};

package/src/FrameBufferManager/service/FrameBufferManagerCreateRenderPassDescriptorService.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description レンダーパス記述子を作成（プリアロケート再利用）
+ */
+export declare const execute: (view: GPUTextureView, r?: number, g?: number, b?: number, a?: number, loadOp?: GPULoadOp, resolveTarget?: GPUTextureView | null) => GPURenderPassDescriptor;

package/src/FrameBufferManager/service/FrameBufferManagerCreateRenderPassDescriptorService.js

@@ -0,0 +1,23 @@
+const $clearValue = { "r": 0, "g": 0, "b": 0, "a": 0 };
+const $colorAttachment = {
+    "view": null,
+    "clearValue": $clearValue,
+    "loadOp": "clear",
+    "storeOp": "store"
+};
+const $descriptor = {
+    "colorAttachments": [$colorAttachment]
+};
+/**
+ * @description レンダーパス記述子を作成（プリアロケート再利用）
+ */
+export const execute = (view, r = 0, g = 0, b = 0, a = 0, loadOp = "clear", resolveTarget = null) => {
+    $colorAttachment.view = view;
+    $clearValue.r = r;
+    $clearValue.g = g;
+    $clearValue.b = b;
+    $clearValue.a = a;
+    $colorAttachment.loadOp = loadOp;
+    $colorAttachment.resolveTarget = resolveTarget ?? undefined;
+    return $descriptor;
+};

package/src/FrameBufferManager/service/FrameBufferManagerCreateStencilRenderPassDescriptorService.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @description ステンシル付きレンダーパス記述子を作成（プリアロケート再利用）
+ */
+export declare const execute: (colorView: GPUTextureView, stencilView: GPUTextureView, colorLoadOp?: GPULoadOp, stencilLoadOp?: GPULoadOp, resolveTarget?: GPUTextureView | null) => GPURenderPassDescriptor;

package/src/FrameBufferManager/service/FrameBufferManagerCreateStencilRenderPassDescriptorService.js

@@ -0,0 +1,28 @@
+const $clearValue = { "r": 0, "g": 0, "b": 0, "a": 0 };
+const $colorAttachment = {
+    "view": null,
+    "clearValue": $clearValue,
+    "loadOp": "load",
+    "storeOp": "store"
+};
+const $depthStencilAttachment = {
+    "view": null,
+    "stencilClearValue": 0,
+    "stencilLoadOp": "clear",
+    "stencilStoreOp": "store"
+};
+const $descriptor = {
+    "colorAttachments": [$colorAttachment],
+    "depthStencilAttachment": $depthStencilAttachment
+};
+/**
+ * @description ステンシル付きレンダーパス記述子を作成（プリアロケート再利用）
+ */
+export const execute = (colorView, stencilView, colorLoadOp = "load", stencilLoadOp = "clear", resolveTarget = null) => {
+    $colorAttachment.view = colorView;
+    $colorAttachment.loadOp = colorLoadOp;
+    $colorAttachment.resolveTarget = resolveTarget ?? undefined;
+    $depthStencilAttachment.view = stencilView;
+    $depthStencilAttachment.stencilLoadOp = stencilLoadOp;
+    return $descriptor;
+};

package/src/FrameBufferManager/service/FrameBufferManagerFlushPendingReleasesService.d.ts

@@ -0,0 +1,11 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+/**
+ * @description フレーム終了時に保留中のテクスチャを解放
+ *              Release pending textures at end of frame (after submit)
+ *
+ * @param  {IAttachmentObject[]} pendingReleases
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (pendingReleases: IAttachmentObject[]) => void;

package/src/FrameBufferManager/service/FrameBufferManagerFlushPendingReleasesService.js

@@ -0,0 +1,19 @@
+/**
+ * @description フレーム終了時に保留中のテクスチャを解放
+ *              Release pending textures at end of frame (after submit)
+ *
+ * @param  {IAttachmentObject[]} pendingReleases
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (pendingReleases) => {
+    for (const att of pendingReleases) {
+        if (att.texture) {
+            att.texture.resource.destroy();
+        }
+        if (att.stencil) {
+            att.stencil.resource.destroy();
+        }
+    }
+};

package/src/FrameBufferManager/usecase/FrameBufferManagerCreateAttachmentUseCase.d.ts

@@ -0,0 +1,23 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+/**
+ * @description アタッチメントオブジェクトを作成
+ *              Create attachment object
+ *
+ * @param  {GPUDevice} device
+ * @param  {GPUTextureFormat} format
+ * @param  {Map<string, IAttachmentObject>} attachments
+ * @param  {string} name
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} msaa
+ * @param  {boolean} mask
+ * @param  {{ nextId: number, textureId: number, stencilId: number }} idCounter
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export declare const execute: (device: GPUDevice, format: GPUTextureFormat, attachments: Map<string, IAttachmentObject>, name: string, width: number, height: number, msaa: boolean, mask: boolean, idCounter: {
+    nextId: number;
+    textureId: number;
+    stencilId: number;
+}) => IAttachmentObject;

package/src/FrameBufferManager/usecase/FrameBufferManagerCreateAttachmentUseCase.js

@@ -0,0 +1,125 @@
+import { $samples } from "../../WebGPUUtil";
+/**
+ * @description アタッチメントオブジェクトを作成
+ *              Create attachment object
+ *
+ * @param  {GPUDevice} device
+ * @param  {GPUTextureFormat} format
+ * @param  {Map<string, IAttachmentObject>} attachments
+ * @param  {string} name
+ * @param  {number} width
+ * @param  {number} height
+ * @param  {boolean} msaa
+ * @param  {boolean} mask
+ * @param  {{ nextId: number, textureId: number, stencilId: number }} idCounter
+ * @return {IAttachmentObject}
+ * @method
+ * @protected
+ */
+export const execute = (device, format, attachments, name, width, height, msaa, mask, idCounter) => {
+    // アトラスかどうか判定（atlas, atlas_0, atlas_1, ...）
+    const isAtlas = name === "atlas" || name.startsWith("atlas_");
+    // アトラステクスチャと一時アタッチメントはRGBA8フォーマットを使用
+    // （copyExternalImageToTextureとの互換性、およびcopyTextureToTextureでのフォーマット一致のため）
+    // mainアタッチメントはスワップチェーンと同じbgra8unormフォーマットを使用
+    const textureFormat = isAtlas || name.startsWith("temp_") ? "rgba8unorm" : format;
+    // MSAAを使用するかどうか（アトラスでmsaa有効かつ$samples > 1の場合）
+    // 現在はアトラスのみにMSAAを適用（他のアタッチメントはmsaa=falseで呼び出される）
+    const useMsaa = msaa || isAtlas && $samples > 1;
+    const sampleCount = useMsaa ? $samples : 1;
+    const gpuTexture = device.createTexture({
+        "size": { width, height },
+        "format": textureFormat,
+        "usage": GPUTextureUsage.RENDER_ATTACHMENT |
+            GPUTextureUsage.TEXTURE_BINDING |
+            GPUTextureUsage.COPY_SRC |
+            GPUTextureUsage.COPY_DST
+    });
+    const textureView = gpuTexture.createView();
+    // ITextureObject形式で格納（解決先テクスチャ）
+    const texture = {
+        "id": idCounter.textureId++,
+        "resource": gpuTexture,
+        "view": textureView,
+        width,
+        height,
+        "area": width * height,
+        "smooth": true
+    };
+    // MSAAテクスチャを作成（sampleCount > 1の場合）
+    let msaaTexture = null;
+    if (useMsaa) {
+        const msaaGpuTexture = device.createTexture({
+            "size": { width, height },
+            "format": textureFormat,
+            "sampleCount": sampleCount,
+            "usage": GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        const msaaTextureView = msaaGpuTexture.createView();
+        msaaTexture = {
+            "id": idCounter.textureId++,
+            "resource": msaaGpuTexture,
+            "view": msaaTextureView,
+            width,
+            height,
+            "area": width * height,
+            "smooth": true
+        };
+    }
+    // アトラスとメインアタッチメント用にステンシルテクスチャを作成
+    // アトラス: 2パスフィルレンダリング用
+    // メイン: マスク描画用
+    let stencil = null;
+    let msaaStencil = null;
+    if (isAtlas || name === "main" || mask) {
+        const stencilTexture = device.createTexture({
+            "size": { width, height },
+            "format": "stencil8",
+            "usage": GPUTextureUsage.RENDER_ATTACHMENT
+        });
+        const stencilView = stencilTexture.createView();
+        stencil = {
+            "id": idCounter.stencilId++,
+            "resource": stencilTexture,
+            "view": stencilView,
+            width,
+            height,
+            "area": width * height,
+            "dirty": false
+        };
+        // MSAAステンシルテクスチャを作成（sampleCount > 1の場合）
+        if (useMsaa) {
+            const msaaStencilTexture = device.createTexture({
+                "size": { width, height },
+                "format": "stencil8",
+                "sampleCount": sampleCount,
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT
+            });
+            const msaaStencilView = msaaStencilTexture.createView();
+            msaaStencil = {
+                "id": idCounter.stencilId++,
+                "resource": msaaStencilTexture,
+                "view": msaaStencilView,
+                width,
+                height,
+                "area": width * height,
+                "dirty": false
+            };
+        }
+    }
+    const attachment = {
+        "id": idCounter.nextId++,
+        width,
+        height,
+        "clipLevel": 0,
+        "msaa": useMsaa,
+        mask,
+        "color": null,
+        texture,
+        stencil,
+        msaaTexture,
+        msaaStencil
+    };
+    attachments.set(name, attachment);
+    return attachment;
+};

package/src/FrameBufferManager/usecase/FrameBufferManagerReleaseTemporaryAttachmentUseCase.d.ts

@@ -0,0 +1,14 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+/**
+ * @description 一時的なアタッチメントを解放（フィルター処理用）
+ *              Releases a temporary attachment after filter processing
+ *              テクスチャは即座に破棄せず、フレーム終了時に遅延解放します
+ *
+ * @param  {Map<string, IAttachmentObject>} attachments
+ * @param  {IAttachmentObject[]} pendingReleases
+ * @param  {IAttachmentObject} attachment
+ * @return {void}
+ * @method
+ * @protected
+ */
+export declare const execute: (attachments: Map<string, IAttachmentObject>, pendingReleases: IAttachmentObject[], attachment: IAttachmentObject) => void;

package/src/FrameBufferManager/usecase/FrameBufferManagerReleaseTemporaryAttachmentUseCase.js

@@ -0,0 +1,23 @@
+/**
+ * @description 一時的なアタッチメントを解放（フィルター処理用）
+ *              Releases a temporary attachment after filter processing
+ *              テクスチャは即座に破棄せず、フレーム終了時に遅延解放します
+ *
+ * @param  {Map<string, IAttachmentObject>} attachments
+ * @param  {IAttachmentObject[]} pendingReleases
+ * @param  {IAttachmentObject} attachment
+ * @return {void}
+ * @method
+ * @protected
+ */
+export const execute = (attachments, pendingReleases, attachment) => {
+    // 名前を検索して削除（Map から削除するが、テクスチャは破棄しない）
+    for (const [name, att] of attachments.entries()) {
+        if (att.id === attachment.id) {
+            attachments.delete(name);
+            // フレーム終了時に遅延解放するためキューに追加
+            pendingReleases.push(att);
+            break;
+        }
+    }
+};

package/src/FrameBufferManager.d.ts

@@ -0,0 +1,24 @@
+import type { IAttachmentObject } from "./interface/IAttachmentObject";
+export declare class FrameBufferManager {
+    private device;
+    private format;
+    private attachments;
+    private currentAttachment;
+    private idCounter;
+    private texturePool;
+    private pendingReleases;
+    constructor(device: GPUDevice, format: GPUTextureFormat);
+    beginFrame(): void;
+    createAttachment(name: string, width: number, height: number, msaa?: boolean, mask?: boolean): IAttachmentObject;
+    getAttachment(name: string): IAttachmentObject | undefined;
+    setCurrentAttachment(attachment: IAttachmentObject | null): void;
+    getCurrentAttachment(): IAttachmentObject | null;
+    createRenderPassDescriptor(view: GPUTextureView, r?: number, g?: number, b?: number, a?: number, loadOp?: GPULoadOp, resolveTarget?: GPUTextureView | null): GPURenderPassDescriptor;
+    createStencilRenderPassDescriptor(colorView: GPUTextureView, stencilView: GPUTextureView, colorLoadOp?: GPULoadOp, stencilLoadOp?: GPULoadOp, resolveTarget?: GPUTextureView | null): GPURenderPassDescriptor;
+    destroyAttachment(name: string): void;
+    resizeAttachment(name: string, width: number, height: number): IAttachmentObject;
+    createTemporaryAttachment(width: number, height: number): IAttachmentObject;
+    releaseTemporaryAttachment(attachment: IAttachmentObject): void;
+    flushPendingReleases(): void;
+    dispose(): void;
+}

package/src/FrameBufferManager.js

@@ -0,0 +1,161 @@
+import { execute as frameBufferManagerCreateAttachmentUseCase } from "./FrameBufferManager/usecase/FrameBufferManagerCreateAttachmentUseCase";
+import { execute as frameBufferManagerReleaseTemporaryAttachmentUseCase } from "./FrameBufferManager/usecase/FrameBufferManagerReleaseTemporaryAttachmentUseCase";
+import { execute as frameBufferManagerCreateRenderPassDescriptorService } from "./FrameBufferManager/service/FrameBufferManagerCreateRenderPassDescriptorService";
+import { execute as frameBufferManagerCreateStencilRenderPassDescriptorService } from "./FrameBufferManager/service/FrameBufferManagerCreateStencilRenderPassDescriptorService";
+import { TexturePool } from "./TexturePool";
+export class FrameBufferManager {
+    constructor(device, format) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "format", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "attachments", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentAttachment", {
+            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, "texturePool", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pendingReleases", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        this.device = device;
+        this.format = format;
+        this.attachments = new Map();
+        this.currentAttachment = null;
+        this.idCounter = { "nextId": 1, "textureId": 1, "stencilId": 1 };
+        this.texturePool = new TexturePool(device);
+    }
+    beginFrame() {
+        this.texturePool.beginFrame();
+    }
+    createAttachment(name, width, height, msaa = false, mask = false) {
+        return frameBufferManagerCreateAttachmentUseCase(this.device, this.format, this.attachments, name, width, height, msaa, mask, this.idCounter);
+    }
+    getAttachment(name) {
+        return this.attachments.get(name);
+    }
+    setCurrentAttachment(attachment) {
+        this.currentAttachment = attachment;
+    }
+    getCurrentAttachment() {
+        return this.currentAttachment;
+    }
+    createRenderPassDescriptor(view, r = 0, g = 0, b = 0, a = 0, loadOp = "clear", resolveTarget = null) {
+        return frameBufferManagerCreateRenderPassDescriptorService(view, r, g, b, a, loadOp, resolveTarget);
+    }
+    createStencilRenderPassDescriptor(colorView, stencilView, colorLoadOp = "load", stencilLoadOp = "clear", resolveTarget = null) {
+        return frameBufferManagerCreateStencilRenderPassDescriptorService(colorView, stencilView, colorLoadOp, stencilLoadOp, resolveTarget);
+    }
+    destroyAttachment(name) {
+        const attachment = this.attachments.get(name);
+        if (attachment) {
+            if (attachment.texture) {
+                attachment.texture.resource.destroy();
+            }
+            if (attachment.stencil) {
+                attachment.stencil.resource.destroy();
+            }
+            this.attachments.delete(name);
+        }
+    }
+    resizeAttachment(name, width, height) {
+        this.destroyAttachment(name);
+        return this.createAttachment(name, width, height);
+    }
+    createTemporaryAttachment(width, height) {
+        const name = `temp_${this.idCounter.nextId}`;
+        const usage = GPUTextureUsage.RENDER_ATTACHMENT |
+            GPUTextureUsage.TEXTURE_BINDING |
+            GPUTextureUsage.COPY_SRC |
+            GPUTextureUsage.COPY_DST |
+            GPUTextureUsage.STORAGE_BINDING;
+        const gpuTexture = this.texturePool.acquire(width, height, "rgba8unorm", usage);
+        const textureView = gpuTexture.createView();
+        const texture = {
+            "id": this.idCounter.textureId++,
+            "resource": gpuTexture,
+            "view": textureView,
+            width,
+            height,
+            "area": width * height,
+            "smooth": true
+        };
+        const attachment = {
+            "id": this.idCounter.nextId++,
+            width,
+            height,
+            "clipLevel": 0,
+            "msaa": false,
+            "mask": false,
+            "color": null,
+            texture,
+            "stencil": null,
+            "msaaTexture": null,
+            "msaaStencil": null
+        };
+        this.attachments.set(name, attachment);
+        return attachment;
+    }
+    releaseTemporaryAttachment(attachment) {
+        frameBufferManagerReleaseTemporaryAttachmentUseCase(this.attachments, this.pendingReleases, attachment);
+    }
+    flushPendingReleases() {
+        for (const att of this.pendingReleases) {
+            if (att.texture) {
+                this.texturePool.release(att.texture.resource);
+            }
+            if (att.msaaTexture) {
+                att.msaaTexture.resource.destroy();
+            }
+            if (att.stencil) {
+                att.stencil.resource.destroy();
+            }
+            if (att.msaaStencil) {
+                att.msaaStencil.resource.destroy();
+            }
+        }
+        this.pendingReleases = [];
+    }
+    dispose() {
+        for (const attachment of this.attachments.values()) {
+            if (attachment.texture) {
+                attachment.texture.resource.destroy();
+            }
+            if (attachment.stencil) {
+                attachment.stencil.resource.destroy();
+            }
+        }
+        this.attachments.clear();
+        this.currentAttachment = null;
+        this.texturePool.dispose();
+    }
+}