@next2d/webgpu 3.0.0

package/src/Context/usecase/ContextProcessComplexBlendQueueUseCase.js

@@ -0,0 +1,213 @@
+import { getComplexBlendQueue, clearComplexBlendQueue } from "../../Blend/BlendInstancedManager";
+import { execute as blendApplyComplexBlendUseCase } from "../../Blend/usecase/BlendApplyComplexBlendUseCase";
+import { $getAtlasAttachmentObject } from "../../AtlasManager";
+// プリアロケート配列
+const $uniform4 = new Float32Array(4);
+const $uniform6 = new Float32Array(6);
+const $uniform8 = new Float32Array(8);
+const $uniform12 = new Float32Array(12);
+// プリアロケート BindGroup Entry 配列
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+const copyTextureRegionViaRenderPass = (device, commandEncoder, srcView, dstAttachment, srcX, srcY, srcWidth, srcHeight, copyWidth, copyHeight, frameBufferManager, textureManager, pipelineManager, bufferManager) => {
+    const pipeline = pipelineManager.getPipeline("complex_blend_copy");
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("texture_copy");
+    if (!pipeline || !bindGroupLayout) {
+        return;
+    }
+    $uniform4[0] = copyWidth / srcWidth;
+    $uniform4[1] = copyHeight / srcHeight;
+    $uniform4[2] = srcX / srcWidth;
+    $uniform4[3] = srcY / srcHeight;
+    const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform4);
+    const sampler = textureManager.createSampler("complex_blend_copy_sampler", false);
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = srcView;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(dstAttachment.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();
+};
+const drawToMainAttachment = (device, commandEncoder, srcAttachment, mainAttachment, dstX, dstY, frameBufferManager, textureManager, pipelineManager, bufferManager) => {
+    const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+    const pipelineName = useMsaa ? "complex_blend_output_msaa" : "complex_blend_output";
+    const pipeline = pipelineManager.getPipeline(pipelineName);
+    const bindGroupLayout = pipelineManager.getBindGroupLayout("positioned_texture");
+    if (!pipeline || !bindGroupLayout) {
+        return;
+    }
+    $uniform8[0] = dstX;
+    $uniform8[1] = dstY;
+    $uniform8[2] = srcAttachment.width;
+    $uniform8[3] = srcAttachment.height;
+    $uniform8[4] = mainAttachment.width;
+    $uniform8[5] = mainAttachment.height;
+    $uniform8[6] = 0;
+    $uniform8[7] = 0;
+    const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform8);
+    const sampler = textureManager.createSampler("complex_blend_output_sampler", false);
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = srcAttachment.texture.view;
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
+    const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+    const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+};
+export const execute = (device, commandEncoder, mainAttachment, frameBufferManager, textureManager, pipelineManager, bufferManager) => {
+    const queue = getComplexBlendQueue();
+    if (queue.length === 0) {
+        return;
+    }
+    if (!mainAttachment || !mainAttachment.texture) {
+        clearComplexBlendQueue();
+        return;
+    }
+    const atlasAttachment = $getAtlasAttachmentObject() || frameBufferManager.getAttachment("atlas");
+    if (!atlasAttachment || !atlasAttachment.texture) {
+        clearComplexBlendQueue();
+        return;
+    }
+    for (const item of queue) {
+        const { node, x_min, y_min, x_max, y_max, color_transform, matrix, blend_mode, global_alpha } = item;
+        const width = Math.ceil(Math.abs(x_max - x_min));
+        const height = Math.ceil(Math.abs(y_max - y_min));
+        if (width <= 0 || height <= 0) {
+            continue;
+        }
+        const dstX = Math.max(0, Math.floor(matrix[6]));
+        const dstY = Math.max(0, Math.floor(matrix[7]));
+        if (dstX >= mainAttachment.width || dstY >= mainAttachment.height) {
+            continue;
+        }
+        const hasScale = matrix[0] !== 1 || matrix[1] !== 0 || matrix[3] !== 0 || matrix[4] !== 1;
+        const blendWidth = hasScale ? width : node.w;
+        const blendHeight = hasScale ? height : node.h;
+        const clippedWidth = Math.min(blendWidth, mainAttachment.width - dstX);
+        const clippedHeight = Math.min(blendHeight, mainAttachment.height - dstY);
+        if (clippedWidth <= 0 || clippedHeight <= 0) {
+            continue;
+        }
+        // 1. ソーステクスチャを作成
+        let srcAttachment;
+        if (hasScale) {
+            srcAttachment = frameBufferManager.createTemporaryAttachment(blendWidth, blendHeight);
+            const scalePipeline = pipelineManager.getPipeline("complex_blend_scale");
+            const scaleBindGroupLayout = pipelineManager.getBindGroupLayout("texture_scale");
+            if (scalePipeline && scaleBindGroupLayout) {
+                const halfW = blendWidth / 2;
+                const halfH = blendHeight / 2;
+                const halfNodeW = node.w / 2;
+                const halfNodeH = node.h / 2;
+                $uniform6[0] = matrix[0];
+                $uniform6[1] = matrix[1];
+                $uniform6[2] = matrix[3];
+                $uniform6[3] = matrix[4];
+                $uniform6[4] = -halfNodeW * matrix[0] - halfNodeH * matrix[3] + halfW;
+                $uniform6[5] = -halfNodeW * matrix[1] - halfNodeH * matrix[4] + halfH;
+                const originalAttachment = frameBufferManager.createTemporaryAttachment(node.w, node.h);
+                commandEncoder.copyTextureToTexture({
+                    "texture": atlasAttachment.texture.resource,
+                    "origin": { "x": node.x, "y": node.y, "z": 0 }
+                }, {
+                    "texture": originalAttachment.texture.resource,
+                    "origin": { "x": 0, "y": 0, "z": 0 }
+                }, { "width": node.w, "height": node.h });
+                $uniform12[0] = $uniform6[0];
+                $uniform12[1] = $uniform6[1];
+                $uniform12[2] = $uniform6[2];
+                $uniform12[3] = $uniform6[3];
+                $uniform12[4] = $uniform6[4];
+                $uniform12[5] = $uniform6[5];
+                $uniform12[6] = node.w;
+                $uniform12[7] = node.h;
+                $uniform12[8] = blendWidth;
+                $uniform12[9] = blendHeight;
+                $uniform12[10] = 0;
+                $uniform12[11] = 0;
+                const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform12, 48);
+                const sampler = textureManager.createSampler("scale_sampler", true);
+                $entries3[0].resource.buffer = uniformBuffer;
+                $entries3[1].resource = sampler;
+                $entries3[2].resource = originalAttachment.texture.view;
+                const bindGroup = device.createBindGroup({
+                    "layout": scaleBindGroupLayout,
+                    "entries": $entries3
+                });
+                const renderPassDescriptor = frameBufferManager.createRenderPassDescriptor(srcAttachment.texture.view, 0, 0, 0, 0, "clear");
+                const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+                passEncoder.setPipeline(scalePipeline);
+                passEncoder.setBindGroup(0, bindGroup);
+                passEncoder.draw(6, 1, 0, 0);
+                passEncoder.end();
+                frameBufferManager.releaseTemporaryAttachment(originalAttachment);
+            }
+            else {
+                commandEncoder.copyTextureToTexture({
+                    "texture": atlasAttachment.texture.resource,
+                    "origin": { "x": node.x, "y": node.y, "z": 0 }
+                }, {
+                    "texture": srcAttachment.texture.resource,
+                    "origin": { "x": 0, "y": 0, "z": 0 }
+                }, { "width": Math.min(node.w, blendWidth), "height": Math.min(node.h, blendHeight) });
+            }
+        }
+        else {
+            srcAttachment = frameBufferManager.createTemporaryAttachment(blendWidth, blendHeight);
+            commandEncoder.copyTextureToTexture({
+                "texture": atlasAttachment.texture.resource,
+                "origin": { "x": node.x, "y": node.y, "z": 0 }
+            }, {
+                "texture": srcAttachment.texture.resource,
+                "origin": { "x": 0, "y": 0, "z": 0 }
+            }, { "width": blendWidth, "height": blendHeight });
+        }
+        // 2. デスティネーションテクスチャを作成（メインからレンダーパスでコピー）
+        const dstAttachment = frameBufferManager.createTemporaryAttachment(blendWidth, blendHeight);
+        copyTextureRegionViaRenderPass(device, commandEncoder, mainAttachment.texture.view, dstAttachment, dstX, dstY, mainAttachment.width, mainAttachment.height, blendWidth, blendHeight, frameBufferManager, textureManager, pipelineManager, bufferManager);
+        // 3. カラートランスフォームを準備（add値は生値）
+        $uniform8[0] = color_transform[0];
+        $uniform8[1] = color_transform[1];
+        $uniform8[2] = color_transform[2];
+        $uniform8[3] = global_alpha;
+        $uniform8[4] = color_transform[4];
+        $uniform8[5] = color_transform[5];
+        $uniform8[6] = color_transform[6];
+        $uniform8[7] = 0;
+        // 4. 複雑なブレンドを適用
+        const blendedAttachment = blendApplyComplexBlendUseCase(srcAttachment, dstAttachment, blend_mode, $uniform8, {
+            device,
+            commandEncoder,
+            bufferManager,
+            frameBufferManager,
+            pipelineManager,
+            textureManager,
+            "frameTextures": []
+        });
+        // 5. 結果をメインアタッチメントに描画
+        drawToMainAttachment(device, commandEncoder, blendedAttachment, mainAttachment, dstX, dstY, frameBufferManager, textureManager, pipelineManager, bufferManager);
+        // 6. 一時テクスチャを解放
+        frameBufferManager.releaseTemporaryAttachment(srcAttachment);
+        frameBufferManager.releaseTemporaryAttachment(dstAttachment);
+        frameBufferManager.releaseTemporaryAttachment(blendedAttachment);
+    }
+    clearComplexBlendQueue();
+};

package/src/Context.d.ts

@@ -0,0 +1,430 @@
+import type { IAttachmentObject } from "./interface/IAttachmentObject";
+import type { IBlendMode } from "./interface/IBlendMode";
+import type { IBounds } from "./interface/IBounds";
+import type { Node } from "@next2d/texture-packer";
+/**
+ * @description WebGPU版、Next2Dのコンテキスト
+ *              WebGPU version, Next2D context
+ *
+ * @class
+ */
+export declare class Context {
+    readonly $stack: Float32Array[];
+    readonly $matrix: Float32Array;
+    $clearColorR: number;
+    $clearColorG: number;
+    $clearColorB: number;
+    $clearColorA: number;
+    $mainAttachmentObject: IAttachmentObject | null;
+    readonly $stackAttachmentObject: IAttachmentObject[];
+    globalAlpha: number;
+    globalCompositeOperation: IBlendMode;
+    imageSmoothingEnabled: boolean;
+    $fillStyle: Float32Array;
+    $strokeStyle: Float32Array;
+    readonly maskBounds: IBounds;
+    thickness: number;
+    caps: number;
+    joints: number;
+    miterLimit: number;
+    private device;
+    private canvasContext;
+    private preferredFormat;
+    private commandEncoder;
+    private renderPassEncoder;
+    private mainTexture;
+    private mainTextureView;
+    private frameStarted;
+    private frameTextures;
+    private pooledTextures;
+    private pooledRenderTextures;
+    private currentRenderTarget;
+    private viewportWidth;
+    private viewportHeight;
+    private pathCommand;
+    private bufferManager;
+    private textureManager;
+    private frameBufferManager;
+    private pipelineManager;
+    private computePipelineManager;
+    private attachmentManager;
+    newDrawState: boolean;
+    private readonly $containerLayerStack;
+    private containerLayerContentSizes;
+    private inMaskMode;
+    private nodeAreaCleared;
+    private currentNodeScissor;
+    private nodeRenderPassAtlasIndex;
+    private fillDynamicBindGroup;
+    private fillDynamicBindGroupBuffer;
+    private nodeClearQuadBuffer;
+    private useOptimizedInstancing;
+    private readonly $uniformData8;
+    private readonly $scissorRect;
+    private readonly $filterConfig;
+    constructor(device: GPUDevice, canvas_context: GPUCanvasContext, preferred_format: GPUTextureFormat, device_pixel_ratio?: number);
+    /**
+     * @description 転送範囲をリセット（フレーム開始）
+     */
+    clearTransferBounds(): void;
+    /**
+     * @description 背景色を更新
+     */
+    updateBackgroundColor(red: number, green: number, blue: number, alpha: number): void;
+    /**
+     * @description 背景色で塗りつぶす（メインアタッチメント）
+     */
+    fillBackgroundColor(): void;
+    /**
+     * @description メインcanvasのサイズを変更
+     */
+    resize(width: number, height: number, cache_clear?: boolean): void;
+    /**
+     * @description 指定範囲をクリアする
+     */
+    clearRect(_x: number, _y: number, _w: number, _h: number): void;
+    /**
+     * @description 現在の2D変換行列を保存
+     */
+    save(): void;
+    /**
+     * @description 2D変換行列を復元
+     */
+    restore(): void;
+    /**
+     * @description 2D変換行列を設定
+     */
+    setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    /**
+     * @description 現在の2D変換行列に対して乗算を行います
+     */
+    transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+    /**
+     * @description コンテキストの値を初期化する
+     */
+    reset(): void;
+    /**
+     * @description パスを開始
+     */
+    beginPath(): void;
+    /**
+     * @description パスを移動
+     */
+    moveTo(x: number, y: number): void;
+    /**
+     * @description パスを線で結ぶ
+     */
+    lineTo(x: number, y: number): void;
+    /**
+     * @description 二次ベジェ曲線を描画
+     */
+    quadraticCurveTo(cx: number, cy: number, x: number, y: number): void;
+    /**
+     * @description 塗りつぶしスタイルを設定
+     */
+    fillStyle(red: number, green: number, blue: number, alpha: number): void;
+    /**
+     * @description 線のスタイルを設定
+     */
+    strokeStyle(red: number, green: number, blue: number, alpha: number): void;
+    /**
+     * @description パスを閉じる
+     */
+    closePath(): void;
+    /**
+     * @description 円弧を描画
+     */
+    arc(x: number, y: number, radius: number): void;
+    /**
+     * @description 3次ベジェ曲線を描画
+     */
+    bezierCurveTo(cx1: number, cy1: number, cx2: number, cy2: number, x: number, y: number): void;
+    /**
+     * @description 描画メソッド共通: レンダーパスの確保とノード領域クリア
+     *              fill(), stroke(), gradientFill(), bitmapFill(), gradientStroke(), bitmapStroke() で使用
+     */
+    private ensureFillRenderPass;
+    /**
+     * @description 塗りつぶしを実行（Loop-Blinn方式対応）
+     */
+    fill(): void;
+    /**
+     * @description Dynamic Uniform BindGroupを取得（フレーム内で初回呼び出し時に作成）
+     */
+    private getOrCreateFillDynamicBindGroup;
+    /**
+     * @description fill/stroke用のcolor/matrix uniformを書き込む
+     * FillUniforms構造体: color(vec4) + matrix0(vec4) + matrix1(vec4) + matrix2(vec4) = 64 bytes
+     * @return Dynamic Uniform Buffer内のアライメント済みオフセット
+     */
+    private writeFillUniform;
+    /**
+     * @description 2パスステンシルフィル（アトラス用）
+     */
+    private fillWithStencil;
+    /**
+     * @description 2パスステンシルフィル（メインキャンバス用）
+     */
+    private fillWithStencilMain;
+    /**
+     * @description 単純なフィル（ステンシルなし、キャンバス描画用）
+     */
+    private fillSimple;
+    /**
+     * @description オフスクリーンアタッチメントにバインド
+     * WebGL: FrameBufferManagerBindAttachmentObjectService
+     */
+    bindAttachment(attachment: IAttachmentObject): void;
+    /**
+     * @description メインキャンバスにバインド
+     * WebGL: FrameBufferManagerUnBindAttachmentObjectService
+     */
+    unbindAttachment(): void;
+    /**
+     * @description アタッチメントオブジェクトを取得
+     * WebGL: FrameBufferManagerGetAttachmentObjectUseCase
+     */
+    getAttachmentObject(width: number, height: number, msaa?: boolean): IAttachmentObject;
+    /**
+     * @description アタッチメントオブジェクトを解放
+     * WebGL: FrameBufferManagerReleaseAttachmentObjectUseCase
+     */
+    releaseAttachment(attachment: IAttachmentObject): void;
+    /**
+     * @description 線の描画を実行（WebGL版と同じ仕様）
+     *              WebGL版と同様に、ストロークを塗りとして描画する
+     */
+    stroke(): void;
+    /**
+     * @description グラデーションの塗りつぶしを実行
+     */
+    gradientFill(type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number): void;
+    /**
+     * @description ビットマップの塗りつぶしを実行
+     */
+    bitmapFill(pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean): void;
+    /**
+     * @description グラデーション線の描画を実行
+     */
+    gradientStroke(type: number, stops: number[], matrix: Float32Array, spread: number, interpolation: number, focal: number): void;
+    /**
+     * @description ビットマップ線の描画を実行
+     */
+    bitmapStroke(pixels: Uint8Array, matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean): void;
+    /**
+     * @description マスク処理を実行
+     *              WebGL版と同様にステンシルバッファを使用したクリッピング
+     *              メインアタッチメントとアトラス両方でマスク処理をサポート
+     */
+    clip(): void;
+    /**
+     * @description アタッチメントオブジェクトをバインド
+     */
+    bind(attachment_object: IAttachmentObject): void;
+    /**
+     * @description 現在のアタッチメントオブジェクトを取得
+     *              アトラスがバインドされていない場合はメインアタッチメントを返す
+     *              When no atlas is bound, returns the main attachment
+     */
+    get currentAttachmentObject(): IAttachmentObject | null;
+    /**
+     * @description アトラス専用のアタッチメントオブジェクトを取得
+     */
+    get atlasAttachmentObject(): IAttachmentObject | null;
+    /**
+     * @description グリッドの描画データをセット
+     */
+    useGrid(grid_data: Float32Array | null): void;
+    /**
+     * @description 指定のノード範囲で描画を開始（アトラステクスチャへの描画）
+     *              2パスステンシルフィル対応: ステンシルバッファ付きレンダーパスを使用
+     */
+    beginNodeRendering(node: Node): void;
+    /**
+     * @description ノード領域がまだクリアされていない場合にクリアを実行
+     *              最初の描画操作（fill, gradientFill, gradientStroke等）で呼び出される
+     */
+    private ensureNodeAreaCleared;
+    /**
+     * @description ノード領域をクリア（透明色 + ステンシル=0）
+     *              WebGL版の gl.clear(COLOR_BUFFER_BIT | STENCIL_BUFFER_BIT) と同等
+     */
+    private clearNodeArea;
+    /**
+     * @description 指定のノード範囲で描画を終了
+     *              レンダーパスは終了しない（次のbeginNodeRenderingで再利用するため）
+     */
+    endNodeRendering(): void;
+    /**
+     * @description 塗りの描画を実行
+     */
+    drawFill(): void;
+    /**
+     * @description インスタンスを描画
+     */
+    drawDisplayObject(node: Node, x_min: number, y_min: number, x_max: number, y_max: number, color_transform: Float32Array): void;
+    /**
+     * @description インスタンス配列を描画
+     *              Draw instanced arrays
+     *
+     * useOptimizedInstancingがtrueの場合、Storage BufferとIndirect Drawingを使用。
+     * - Storage Buffer: メモリアロケーション削減、CPU負荷15-25%軽減
+     * - Indirect Drawing: CPU-GPUオーバーヘッド5-15%削減
+     *
+     */
+    drawArraysInstanced(): void;
+    /**
+     * @description 最適化インスタンス描画の有効/無効を設定
+     *              Enable or disable optimized instancing
+     *
+     */
+    setOptimizedInstancing(enabled: boolean): void;
+    /**
+     * @description 最適化インスタンス描画が有効かどうか
+     *              Whether optimized instancing is enabled
+     *
+     */
+    isOptimizedInstancingEnabled(): boolean;
+    /**
+     * @description 複雑なブレンドモードのキューを処理
+     */
+    private processComplexBlendQueue;
+    /**
+     * @description インスタンス配列をクリア
+     */
+    clearArraysInstanced(): void;
+    /**
+     * @description ピクセルバッファをNodeの指定箇所に転送
+     *              WebGPUでは、Shapeのシェーダーが-ndc.yでY軸反転しているため、
+     *              Bitmapも同じ方向になるよう画像を上下反転して書き込む
+     */
+    drawPixels(node: Node, pixels: Uint8Array): void;
+    /**
+     * @description 一時テクスチャ経由でピクセルデータをMSAAテクスチャに描画
+     */
+    private drawPixelsToMsaa;
+    /**
+     * @description OffscreenCanvasをNodeの指定箇所に転送
+     *              WebGPUでは、Shapeのシェーダーが-ndc.yでY軸反転しているため、
+     *              Bitmapも同じ方向になるよう画像を上下反転して書き込む
+     */
+    drawElement(node: Node, element: OffscreenCanvas | ImageBitmap, flipY?: boolean): void;
+    /**
+     * @description 一時テクスチャ経由でMSAAテクスチャに直接描画
+     */
+    private drawElementToMsaa;
+    /**
+     * @description 一時テクスチャ経由で通常テクスチャに描画（非MSAA版）
+     */
+    private drawElementToTexture;
+    /**
+     * @description フィルターを適用
+     */
+    applyFilter(node: Node, _unique_key: string, _updated: boolean, width: number, height: number, _is_bitmap: boolean, matrix: Float32Array, color_transform: Float32Array, blend_mode: IBlendMode, bounds: Float32Array, params: Float32Array): void;
+    /**
+     * @description コンテナのフィルター/ブレンド用のレイヤーを開始
+     *              Begin a container layer for filter/blend processing
+     *
+     */
+    containerBeginLayer(width: number, height: number): void;
+    /**
+     * @description コンテナのフィルター/ブレンド用レイヤーを終了し、結果を元のメインに合成
+     *              End the container layer and composite the result back to the original main
+     *
+     * @param  {IBlendMode} blend_mode
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array | null} color_transform
+     * @param  {boolean} use_filter
+     * @param  {Float32Array | null} filter_bounds
+     * @param  {Float32Array | null} filter_params
+     * @param  {string} unique_key
+     * @param  {string} filter_key
+     */
+    containerEndLayer(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array | null, use_filter: boolean, filter_bounds: Float32Array | null, filter_params: Float32Array | null, unique_key: string, filter_key: string): void;
+    /**
+     * @description キャッシュされたコンテナフィルターテクスチャをメインに描画
+     *              Draw a cached container filter texture to the main attachment
+     *
+     * @param  {IBlendMode} blend_mode
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @param  {Float32Array} filter_bounds
+     * @param  {string} unique_key
+     * @param  {string} filter_key
+     */
+    containerDrawCachedFilter(blend_mode: IBlendMode, matrix: Float32Array, color_transform: Float32Array, filter_bounds: Float32Array, unique_key: string, filter_key: string): void;
+    /**
+     * @description メインテクスチャを確保（フレーム開始時に一度だけgetCurrentTexture呼び出し）
+     */
+    private ensureMainTexture;
+    /**
+     * @description 現在の描画ターゲットのテクスチャビューを取得
+     */
+    private getCurrentTextureView;
+    /**
+     * @description コマンドエンコーダーが存在することを保証
+     */
+    private ensureCommandEncoder;
+    /**
+     * @description フレーム開始（レンダリング開始前に呼ぶ）
+     */
+    beginFrame(): void;
+    /**
+     * @description フレームごとのプール管理テクスチャを追加（endFrame()でプールに返却）
+     */
+    addFrameTexture(texture: GPUTexture): void;
+    /**
+     * @description フレーム終了とコマンド送信（レンダリング完了後に呼ぶ）
+     */
+    endFrame(): void;
+    /**
+     * @description コマンドを送信（後方互換性のため残す）
+     */
+    submit(): void;
+    /**
+     * @description ノードを作成
+     *              アトラスがいっぱいの場合は新しいアトラスを作成して再試行
+     */
+    createNode(width: number, height: number): Node;
+    /**
+     * @description ノードを削除
+     */
+    removeNode(node: Node): void;
+    /**
+     * @description フレームバッファの描画情報をキャンバスに転送
+     *              スワップチェーンはCopyDstをサポートしないため、レンダーパスでブリット
+     */
+    transferMainCanvas(): void;
+    /**
+     * @description ImageBitmapを生成
+     */
+    createImageBitmap(width: number, height: number): Promise<ImageBitmap>;
+    /**
+     * @description マスク描画の開始準備
+     *              Prepare to start drawing the mask
+     *
+     */
+    beginMask(): void;
+    /**
+     * @description マスクの描画範囲を設定
+     *              Set the mask drawing bounds
+     *
+     * @param  {number} x_min
+     * @param  {number} y_min
+     * @param  {number} x_max
+     * @param  {number} y_max
+     */
+    setMaskBounds(x_min: number, y_min: number, x_max: number, y_max: number): void;
+    /**
+     * @description マスクの描画を終了
+     *              End mask drawing
+     *
+     */
+    endMask(): void;
+    /**
+     * @description マスクの終了処理
+     *              Mask end processing
+     *
+     */
+    leaveMask(): void;
+}