@next2d/webgpu 3.0.0

package/src/Context/usecase/ContextBitmapFillUseCase.d.ts

@@ -0,0 +1,4 @@
+import type { IPath } from "../../interface/IPath";
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, path_vertices: IPath[], context_matrix: Float32Array, fill_style: Float32Array, pixels: Uint8Array, bitmap_matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline?: boolean, _clip_level?: number) => GPUTexture | null;

package/src/Context/usecase/ContextBitmapFillUseCase.js

@@ -0,0 +1,210 @@
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { execute as contextComputeBitmapMatrixService } from "../service/ContextComputeBitmapMatrixService";
+import { $acquireFillTexture, $releaseFillTexture } from "../../FillTexturePool";
+import { $isMaskDrawing, $getMaskStencilReference } from "../../Mask";
+const $bitmapSamplerCache = new Map();
+const $uniformData32 = new Float32Array(32);
+const $stencilData16 = new Float32Array(16);
+let $stencilDynamicBindGroup = null;
+let $stencilDynamicBuffer = null;
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, path_vertices, context_matrix, fill_style, pixels, bitmap_matrix, width, height, repeat, smooth, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline = false, _clip_level = 1) => {
+    // MeshFillGenerateUseCaseで頂点データを生成（4 floats/vertex: position + bezier）
+    const mesh = meshFillGenerateUseCase(path_vertices);
+    if (mesh.indexCount === 0) {
+        return null;
+    }
+    // 頂点バッファを取得（プールから再利用）
+    const vertexBuffer = buffer_manager.acquireVertexBuffer(mesh.buffer.byteLength, mesh.buffer);
+    // ビットマップテクスチャをプールから取得
+    const bitmapTexture = $acquireFillTexture(device, width, height);
+    // ピクセルデータをテクスチャに転送
+    device.queue.writeTexture({ "texture": bitmapTexture }, pixels.buffer, { "bytesPerRow": width * 4, "rowsPerImage": height, "offset": pixels.byteOffset }, { width, height });
+    // ビットマップ変換行列を計算（コンテキスト行列と合成して逆行列）
+    const computedBitmapMatrix = contextComputeBitmapMatrixService(bitmap_matrix, context_matrix);
+    // 色とmatrix
+    const red = fill_style[0];
+    const green = fill_style[1];
+    const blue = fill_style[2];
+    const alpha = fill_style[3];
+    const a = context_matrix[0];
+    const b = context_matrix[1];
+    const c = context_matrix[3];
+    const d = context_matrix[4];
+    const tx = context_matrix[6];
+    const ty = context_matrix[7];
+    // Uniformバッファを作成（BitmapUniforms: 28 floats = 112 bytes）
+    // bitmapMatrix: mat3x3<f32> (48 bytes)
+    $uniformData32[0] = computedBitmapMatrix[0]; // col0.x = a
+    $uniformData32[1] = computedBitmapMatrix[1]; // col0.y = c
+    $uniformData32[2] = computedBitmapMatrix[2]; // col0.z = 0
+    $uniformData32[3] = 0; // padding
+    $uniformData32[4] = computedBitmapMatrix[3]; // col1.x = b
+    $uniformData32[5] = computedBitmapMatrix[4]; // col1.y = d
+    $uniformData32[6] = computedBitmapMatrix[5]; // col1.z = 0
+    $uniformData32[7] = 0; // padding
+    $uniformData32[8] = computedBitmapMatrix[6]; // col2.x = tx
+    $uniformData32[9] = computedBitmapMatrix[7]; // col2.y = ty
+    $uniformData32[10] = computedBitmapMatrix[8]; // col2.z = 1
+    $uniformData32[11] = 0; // padding
+    // ビットマップパラメータ
+    $uniformData32[12] = width;
+    $uniformData32[13] = height;
+    $uniformData32[14] = repeat ? 1.0 : 0.0;
+    $uniformData32[15] = 0; // padding
+    // color
+    $uniformData32[16] = red;
+    $uniformData32[17] = green;
+    $uniformData32[18] = blue;
+    $uniformData32[19] = alpha;
+    // contextMatrix（viewport正規化済み）
+    $uniformData32[20] = a / viewport_width;
+    $uniformData32[21] = b / viewport_height;
+    $uniformData32[22] = 0;
+    $uniformData32[23] = 0;
+    $uniformData32[24] = c / viewport_width;
+    $uniformData32[25] = d / viewport_height;
+    $uniformData32[26] = 0;
+    $uniformData32[27] = 0;
+    // contextMatrix2
+    $uniformData32[28] = tx / viewport_width;
+    $uniformData32[29] = ty / viewport_height;
+    $uniformData32[30] = 1;
+    $uniformData32[31] = 0;
+    const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniformData32);
+    // サンプラーを取得（キャッシュ済み）
+    const samplerKey = `bitmap_${smooth ? "s" : "n"}_${repeat ? "r" : "c"}`;
+    let sampler = $bitmapSamplerCache.get(samplerKey);
+    if (!sampler) {
+        sampler = device.createSampler({
+            "magFilter": smooth ? "linear" : "nearest",
+            "minFilter": smooth ? "linear" : "nearest",
+            "addressModeU": repeat ? "repeat" : "clamp-to-edge",
+            "addressModeV": repeat ? "repeat" : "clamp-to-edge"
+        });
+        $bitmapSamplerCache.set(samplerKey, sampler);
+    }
+    // バインドグループを作成
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("bitmap_fill");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] bitmap_fill bind group layout not found");
+        $releaseFillTexture(bitmapTexture);
+        return null;
+    }
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = bitmapTexture.createView();
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    // ステンシル書き込みパス用のDynamic BindGroup + offset作成ヘルパー
+    const createStencilDynamic = () => {
+        const dynamicLayout = pipeline_manager.getBindGroupLayout("fill_dynamic");
+        if (!dynamicLayout) {
+            return null;
+        }
+        // FillUniforms: color(16) + matrix0(16) + matrix1(16) + matrix2(16) = 64 bytes
+        $stencilData16[0] = red;
+        $stencilData16[1] = green;
+        $stencilData16[2] = blue;
+        $stencilData16[3] = alpha;
+        $stencilData16[4] = a / viewport_width;
+        $stencilData16[5] = b / viewport_height;
+        $stencilData16[6] = 0;
+        $stencilData16[7] = 0;
+        $stencilData16[8] = c / viewport_width;
+        $stencilData16[9] = d / viewport_height;
+        $stencilData16[10] = 0;
+        $stencilData16[11] = 0;
+        $stencilData16[12] = tx / viewport_width;
+        $stencilData16[13] = ty / viewport_height;
+        $stencilData16[14] = 1;
+        $stencilData16[15] = 0;
+        const offset = buffer_manager.dynamicUniform.allocate($stencilData16);
+        const currentBuffer = buffer_manager.dynamicUniform.getBuffer();
+        if (!$stencilDynamicBindGroup || $stencilDynamicBuffer !== currentBuffer) {
+            $stencilDynamicBindGroup = device.createBindGroup({
+                "layout": dynamicLayout,
+                "entries": [{
+                        "binding": 0,
+                        "resource": {
+                            "buffer": currentBuffer,
+                            "size": 256
+                        }
+                    }]
+            });
+            $stencilDynamicBuffer = currentBuffer;
+        }
+        return { "bindGroup": $stencilDynamicBindGroup, "offset": offset };
+    };
+    // アトラス描画時は2パスステンシル処理を使用（WebGL版と同じ）
+    if (use_atlas_target && use_stencil_pipeline) {
+        // === Pass 1: ステンシル書き込み（カラー書き込みなし） ===
+        const stencilWritePipeline = pipeline_manager.getPipeline("stencil_write");
+        if (stencilWritePipeline) {
+            const stencilDynamic = createStencilDynamic();
+            if (stencilDynamic) {
+                render_pass_encoder.setPipeline(stencilWritePipeline);
+                render_pass_encoder.setStencilReference(0);
+                render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+                render_pass_encoder.setBindGroup(0, stencilDynamic.bindGroup, [stencilDynamic.offset]);
+                render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+            }
+        }
+        // === Pass 2: ビットマップ描画（NOT_EQUAL 0） ===
+        const bitmapPipeline = pipeline_manager.getPipeline("bitmap_fill_stencil");
+        if (bitmapPipeline) {
+            render_pass_encoder.setPipeline(bitmapPipeline);
+            render_pass_encoder.setStencilReference(0);
+            render_pass_encoder.setBindGroup(0, bindGroup);
+            render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+        }
+    }
+    else {
+        // パイプラインを取得
+        // - アトラス用: "bitmap_fill" (rgba8unorm, ステンシルなし)
+        // - キャンバス用: "bitmap_fill_bgra" (bgra8unorm, ステンシルなし)
+        // - マスク描画モード時: 何もしない（clip()でステンシル書き込み）
+        // - マスクテストモード時: "bitmap_fill_bgra_stencil" (bgra8unorm, ステンシルテストあり)
+        let pipelineName;
+        if (use_atlas_target) {
+            pipelineName = "bitmap_fill";
+        }
+        else if (use_stencil_pipeline) {
+            if ($isMaskDrawing()) {
+                // マスク描画モード: ステンシルへの書き込みはclip()で行うため、ここでは何もしない
+                // clip()がINVERTでステンシルを書き込み、重複書き込みによるINVERT打ち消しを防止
+                // ビットマップテクスチャは解放してnullを返す
+                $releaseFillTexture(bitmapTexture);
+                return null;
+            }
+            // マスクテストモード: ステンシル値をテストしてビットマップを描画
+            pipelineName = "bitmap_fill_bgra_stencil";
+        }
+        else {
+            pipelineName = "bitmap_fill_bgra";
+        }
+        const pipeline = pipeline_manager.getPipeline(pipelineName);
+        if (!pipeline) {
+            console.error(`[WebGPU] ${pipelineName} pipeline not found`);
+            $releaseFillTexture(bitmapTexture);
+            return null;
+        }
+        // 描画
+        render_pass_encoder.setPipeline(pipeline);
+        render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+        render_pass_encoder.setBindGroup(0, bindGroup);
+        // マスクテストモード時はステンシル参照値を設定
+        if (use_stencil_pipeline && !use_atlas_target && !$isMaskDrawing()) {
+            render_pass_encoder.setStencilReference($getMaskStencilReference());
+        }
+        render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    }
+    // ビットマップテクスチャを返す（Context.tsでフレーム終了時に解放）
+    return bitmapTexture;
+};

package/src/Context/usecase/ContextBitmapStrokeUseCase.d.ts

@@ -0,0 +1,4 @@
+import type { IPath } from "../../interface/IPath";
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, vertices: IPath[], thickness: number, context_matrix: Float32Array, stroke_style: Float32Array, pixels: Uint8Array, bitmap_matrix: Float32Array, width: number, height: number, repeat: boolean, smooth: boolean, viewport_width: number, viewport_height: number, use_atlas_target: boolean, use_stencil_pipeline: boolean) => GPUTexture | null;

package/src/Context/usecase/ContextBitmapStrokeUseCase.js

@@ -0,0 +1,119 @@
+import { execute as meshBitmapStrokeGenerateUseCase } from "../../Mesh/usecase/MeshBitmapStrokeGenerateUseCase";
+import { execute as contextComputeBitmapMatrixService } from "../service/ContextComputeBitmapMatrixService";
+import { $acquireFillTexture, $releaseFillTexture } from "../../FillTexturePool";
+const $bitmapSamplerCache = new Map();
+const $uniformData32 = new Float32Array(32);
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, vertices, thickness, context_matrix, stroke_style, pixels, bitmap_matrix, width, height, repeat, smooth, viewport_width, viewport_height, use_atlas_target, use_stencil_pipeline) => {
+    // ビットマップストローク用メッシュを生成（4 floats/vertex: position + bezier）
+    const mesh = meshBitmapStrokeGenerateUseCase(vertices, thickness);
+    if (mesh.indexCount === 0) {
+        return null;
+    }
+    // 頂点バッファを取得（プールから再利用）
+    const vertexBuffer = buffer_manager.acquireVertexBuffer(mesh.buffer.byteLength, mesh.buffer);
+    // ビットマップテクスチャをプールから取得
+    const bitmapTexture = $acquireFillTexture(device, width, height);
+    // ピクセルデータをテクスチャに転送
+    device.queue.writeTexture({ "texture": bitmapTexture }, pixels.buffer, { "bytesPerRow": width * 4, "rowsPerImage": height, "offset": pixels.byteOffset }, { width, height });
+    // ビットマップ変換行列を計算（コンテキスト行列と合成して逆行列）
+    const computedBitmapMatrix = contextComputeBitmapMatrixService(bitmap_matrix, context_matrix);
+    // 色とmatrix
+    const red = 1;
+    const green = 1;
+    const blue = 1;
+    const alpha = stroke_style[3] > 0 ? stroke_style[3] : 1;
+    const a = context_matrix[0];
+    const b = context_matrix[1];
+    const c = context_matrix[3];
+    const d = context_matrix[4];
+    const tx = context_matrix[6];
+    const ty = context_matrix[7];
+    // Uniformバッファを作成（BitmapUniforms: 32 floats = 128 bytes）
+    $uniformData32[0] = computedBitmapMatrix[0]; // col0.x = a
+    $uniformData32[1] = computedBitmapMatrix[1]; // col0.y = c
+    $uniformData32[2] = computedBitmapMatrix[2]; // col0.z = 0
+    $uniformData32[3] = 0; // padding
+    $uniformData32[4] = computedBitmapMatrix[3]; // col1.x = b
+    $uniformData32[5] = computedBitmapMatrix[4]; // col1.y = d
+    $uniformData32[6] = computedBitmapMatrix[5]; // col1.z = 0
+    $uniformData32[7] = 0; // padding
+    $uniformData32[8] = computedBitmapMatrix[6]; // col2.x = tx
+    $uniformData32[9] = computedBitmapMatrix[7]; // col2.y = ty
+    $uniformData32[10] = computedBitmapMatrix[8]; // col2.z = 1
+    $uniformData32[11] = 0; // padding
+    // ビットマップパラメータ
+    $uniformData32[12] = width;
+    $uniformData32[13] = height;
+    $uniformData32[14] = repeat ? 1.0 : 0.0;
+    $uniformData32[15] = 0; // padding
+    // color
+    $uniformData32[16] = red;
+    $uniformData32[17] = green;
+    $uniformData32[18] = blue;
+    $uniformData32[19] = alpha;
+    // contextMatrix（viewport正規化済み）
+    $uniformData32[20] = a / viewport_width;
+    $uniformData32[21] = b / viewport_height;
+    $uniformData32[22] = 0;
+    $uniformData32[23] = 0;
+    $uniformData32[24] = c / viewport_width;
+    $uniformData32[25] = d / viewport_height;
+    $uniformData32[26] = 0;
+    $uniformData32[27] = 0;
+    $uniformData32[28] = tx / viewport_width;
+    $uniformData32[29] = ty / viewport_height;
+    $uniformData32[30] = 1;
+    $uniformData32[31] = 0;
+    const uniformBuffer = buffer_manager.acquireAndWriteUniformBuffer($uniformData32);
+    // サンプラーを取得（キャッシュ済み）
+    const samplerKey = `bitmap_${smooth ? "s" : "n"}_${repeat ? "r" : "c"}`;
+    let sampler = $bitmapSamplerCache.get(samplerKey);
+    if (!sampler) {
+        sampler = device.createSampler({
+            "magFilter": smooth ? "linear" : "nearest",
+            "minFilter": smooth ? "linear" : "nearest",
+            "addressModeU": repeat ? "repeat" : "clamp-to-edge",
+            "addressModeV": repeat ? "repeat" : "clamp-to-edge"
+        });
+        $bitmapSamplerCache.set(samplerKey, sampler);
+    }
+    // バインドグループを作成
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("bitmap_fill");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] bitmap_fill bind group layout not found");
+        $releaseFillTexture(bitmapTexture);
+        return null;
+    }
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = bitmapTexture.createView();
+    const bindGroup = device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    // パイプラインを取得
+    // ストロークのメッシュは各セグメントが独立した凸多角形のため、
+    // フィルのような2パスステンシル描画は不要で、直接描画で正しく描画される。
+    // ステンシル付きレンダーパスの場合はステンシル互換パイプライン（compare: always）を使用する。
+    const pipelineName = use_stencil_pipeline
+        ? use_atlas_target ? "bitmap_stroke_atlas" : "bitmap_stroke_bgra"
+        : use_atlas_target ? "bitmap_fill" : "bitmap_fill_bgra";
+    const pipeline = pipeline_manager.getPipeline(pipelineName);
+    if (!pipeline) {
+        console.error(`[WebGPU] ${pipelineName} pipeline not found`);
+        $releaseFillTexture(bitmapTexture);
+        return null;
+    }
+    // 描画
+    render_pass_encoder.setPipeline(pipeline);
+    render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+    render_pass_encoder.setBindGroup(0, bindGroup);
+    render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    // ビットマップテクスチャを返す（Context.tsでフレーム終了時に解放）
+    return bitmapTexture;
+};

package/src/Context/usecase/ContextClipUseCase.d.ts

@@ -0,0 +1,5 @@
+import type { IPath } from "../../interface/IPath";
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { BufferManager } from "../../BufferManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, render_pass_encoder: GPURenderPassEncoder, buffer_manager: BufferManager, pipeline_manager: PipelineManager, current_attachment: IAttachmentObject, path_vertices: IPath[], context_matrix: Float32Array, fill_style: Float32Array, global_alpha: number, is_main_attachment?: boolean) => void;

package/src/Context/usecase/ContextClipUseCase.js

@@ -0,0 +1,101 @@
+import { execute as meshFillGenerateUseCase } from "../../Mesh/usecase/MeshFillGenerateUseCase";
+import { execute as maskUnionMaskService } from "../../Mask/service/MaskUnionMaskService";
+import { $clipLevels } from "../../Mask";
+const $clipUniform16 = new Float32Array(16);
+export const execute = (device, render_pass_encoder, buffer_manager, pipeline_manager, current_attachment, path_vertices, context_matrix, fill_style, global_alpha, is_main_attachment = false) => {
+    // クリップ境界を取得
+    const clipLevel = current_attachment.clipLevel;
+    // メッシュを生成
+    const viewportWidth = current_attachment.width;
+    const viewportHeight = current_attachment.height;
+    const red = fill_style[0];
+    const green = fill_style[1];
+    const blue = fill_style[2];
+    const alpha = fill_style[3] * global_alpha;
+    if (path_vertices.length === 0) {
+        return;
+    }
+    const mesh = meshFillGenerateUseCase(path_vertices);
+    if (mesh.indexCount === 0) {
+        return;
+    }
+    // 頂点バッファを取得（プールから再利用）
+    const vertexBuffer = buffer_manager.acquireVertexBuffer(mesh.buffer.byteLength, mesh.buffer);
+    // Uniform bufferにcolor/matrixを書き込み
+    const a = context_matrix[0];
+    const b = context_matrix[1];
+    const c = context_matrix[3];
+    const d = context_matrix[4];
+    const tx = context_matrix[6];
+    const ty = context_matrix[7];
+    $clipUniform16[0] = red;
+    $clipUniform16[1] = green;
+    $clipUniform16[2] = blue;
+    $clipUniform16[3] = alpha;
+    $clipUniform16[4] = a / viewportWidth;
+    $clipUniform16[5] = b / viewportHeight;
+    $clipUniform16[6] = 0;
+    $clipUniform16[7] = 0;
+    $clipUniform16[8] = c / viewportWidth;
+    $clipUniform16[9] = d / viewportHeight;
+    $clipUniform16[10] = 0;
+    $clipUniform16[11] = 0;
+    $clipUniform16[12] = tx / viewportWidth;
+    $clipUniform16[13] = ty / viewportHeight;
+    $clipUniform16[14] = 1;
+    $clipUniform16[15] = 0;
+    // Dynamic Uniform Bufferにデータを書き込み
+    const uniformOffset = buffer_manager.dynamicUniform.allocate($clipUniform16);
+    // 現在のマスクレベルを取得（WebGL版: $clipLevels.get(clipLevel)）
+    // レベルは1から始まり、各パスごとにインクリメントされる
+    let level = $clipLevels.get(clipLevel) ?? clipLevel;
+    // ステンシルパイプラインを取得
+    // メインアタッチメント: レベルに対応するパイプライン（stencilWriteMask = 1 << (level - 1)）
+    // アトラス: 通常のクリップパイプライン
+    let pipelineName;
+    if (is_main_attachment) {
+        // レベルを1-8の範囲にクランプ（8レベルまでサポート）
+        const clampedLevel = Math.min(8, Math.max(1, level));
+        pipelineName = `clip_write_main_${clampedLevel}`;
+    }
+    else {
+        pipelineName = "clip_write";
+    }
+    const pipeline = pipeline_manager.getPipeline(pipelineName);
+    if (!pipeline) {
+        console.error(`[WebGPU] ${pipelineName} pipeline not found`);
+        return;
+    }
+    // Dynamic BindGroupを取得
+    const layout = pipeline_manager.getBindGroupLayout("fill_dynamic");
+    if (!layout) {
+        return;
+    }
+    const bindGroup = device.createBindGroup({
+        "layout": layout,
+        "entries": [{
+                "binding": 0,
+                "resource": {
+                    "buffer": buffer_manager.dynamicUniform.getBuffer(),
+                    "size": 256
+                }
+            }]
+    });
+    // INVERT操作でマスク形状を描画
+    // カバーされたピクセルのステンシル値が反転される（ビット単位）
+    // 奇数回カバーされたピクセルのみがマスク領域となる
+    render_pass_encoder.setPipeline(pipeline);
+    render_pass_encoder.setStencilReference(0); // INVERT操作では参照値は使用されないが、設定は必要
+    render_pass_encoder.setVertexBuffer(0, vertexBuffer);
+    render_pass_encoder.setBindGroup(0, bindGroup, [uniformOffset]);
+    render_pass_encoder.draw(mesh.indexCount, 1, 0, 0);
+    // レベルをインクリメント（WebGL版: ++level）
+    level++;
+    // レベルが8を超えた場合、ステンシルビットをマージして再利用
+    // WebGL版: if (level > 7) { maskUnionMaskService(); level = clipLevel + 1; }
+    if (level > 8) {
+        maskUnionMaskService(device, render_pass_encoder, buffer_manager, pipeline_manager, current_attachment);
+        level = clipLevel + 1;
+    }
+    $clipLevels.set(clipLevel, level);
+};

package/src/Context/usecase/ContextContainerEndLayerUseCase.d.ts

@@ -0,0 +1,5 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { IBlendMode } from "../../interface/IBlendMode";
+import type { ILocalFilterConfig } from "../../interface/ILocalFilterConfig";
+import type { BufferManager } from "../../BufferManager";
+export declare const execute: (tempAttachment: IAttachmentObject, mainAttachment: IAttachmentObject, _tempName: string, blendMode: IBlendMode, matrix: Float32Array, colorTransform: Float32Array | null, useFilter: boolean, filterBounds: Float32Array | null, params: Float32Array | null, uniqueKey: string, filterKey: string, _contentWidth: number, _contentHeight: number, config: ILocalFilterConfig, bufferManager: BufferManager) => void;