@next2d/webgpu 3.0.0

package/src/Context/usecase/ContextContainerEndLayerUseCase.js

@@ -0,0 +1,476 @@
+import { $offset } from "../../Filter/FilterOffset";
+import { WebGPUUtil } from "../../WebGPUUtil";
+import { $cacheStore } from "@next2d/cache";
+import { execute as filterApplyBlurFilterUseCase } from "../../Filter/BlurFilter/FilterApplyBlurFilterUseCase";
+import { execute as filterApplyColorMatrixFilterUseCase } from "../../Filter/ColorMatrixFilter/FilterApplyColorMatrixFilterUseCase";
+import { execute as filterApplyGlowFilterUseCase } from "../../Filter/GlowFilter/FilterApplyGlowFilterUseCase";
+import { execute as filterApplyDropShadowFilterUseCase } from "../../Filter/DropShadowFilter/FilterApplyDropShadowFilterUseCase";
+import { execute as filterApplyBevelFilterUseCase } from "../../Filter/BevelFilter/FilterApplyBevelFilterUseCase";
+import { execute as filterApplyConvolutionFilterUseCase } from "../../Filter/ConvolutionFilter/FilterApplyConvolutionFilterUseCase";
+import { execute as filterApplyGradientBevelFilterUseCase } from "../../Filter/GradientBevelFilter/FilterApplyGradientBevelFilterUseCase";
+import { execute as filterApplyGradientGlowFilterUseCase } from "../../Filter/GradientGlowFilter/FilterApplyGradientGlowFilterUseCase";
+import { execute as filterApplyDisplacementMapFilterUseCase } from "../../Filter/DisplacementMapFilter/FilterApplyDisplacementMapFilterUseCase";
+import { execute as blendApplyComplexBlendUseCase } from "../../Blend/usecase/BlendApplyComplexBlendUseCase";
+const $uniform4 = new Float32Array(4);
+const $uniform8 = new Float32Array(8);
+const $uniform20 = new Float32Array(20);
+// プリアロケート BindGroup Entry 配列
+const $entries3 = [
+    { "binding": 0, "resource": { "buffer": null } },
+    { "binding": 1, "resource": null },
+    { "binding": 2, "resource": null }
+];
+const SIMPLE_BLEND_MODES = new Set([
+    "normal", "layer", "add", "screen", "alpha", "erase", "copy"
+]);
+const $identityColorTransform = new Float32Array([1, 1, 1, 1, 0, 0, 0, 0]);
+const isIdentityColorTransform = (ct) => {
+    if (!ct) {
+        return true;
+    }
+    return ct[0] === 1 && ct[1] === 1 && ct[2] === 1 && ct[3] === 1
+        && ct[4] === 0 && ct[5] === 0 && ct[6] === 0 && ct[7] === 0;
+};
+const applyColorTransform = (config, attachment, colorTransform) => {
+    const ctAttachment = config.frameBufferManager.createTemporaryAttachment(attachment.width, attachment.height);
+    const pipeline = config.pipelineManager.getPipeline("color_transform");
+    const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
+    if (!pipeline || !bindGroupLayout || !attachment.texture || !ctAttachment.texture) {
+        return attachment;
+    }
+    $uniform8[0] = colorTransform[0];
+    $uniform8[1] = colorTransform[1];
+    $uniform8[2] = colorTransform[2];
+    $uniform8[3] = colorTransform[3];
+    $uniform8[4] = colorTransform[4];
+    $uniform8[5] = colorTransform[5];
+    $uniform8[6] = colorTransform[6];
+    $uniform8[7] = 0;
+    const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer($uniform8);
+    const sampler = config.textureManager.createSampler("container_ct_sampler", false);
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = attachment.texture.view;
+    const bindGroup = config.device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(ctAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    return ctAttachment;
+};
+const copyRegionToFilterAttachment = (config, srcAttachment, x, y, width, height) => {
+    const dstAttachment = config.frameBufferManager.createTemporaryAttachment(width, height);
+    const pipeline = config.pipelineManager.getPipeline("complex_blend_copy");
+    const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
+    if (!pipeline || !bindGroupLayout || !srcAttachment.texture || !dstAttachment.texture) {
+        return dstAttachment;
+    }
+    const scaleX = width / srcAttachment.width;
+    const offsetX = x / srcAttachment.width;
+    // ComplexBlendCopyVertexはOpenGL座標系のtexCoord（Y軸反転）を使用するため、
+    // UV uniformでY反転を補正して正しい向きの出力を得る
+    // texCoord.y=1(fb上端) → uv.y=y/H(ソース上端), texCoord.y=0(fb下端) → uv.y=(y+h)/H(ソース下端)
+    const scaleY = -(height / srcAttachment.height);
+    const offsetY = (y + height) / srcAttachment.height;
+    $uniform4[0] = scaleX;
+    $uniform4[1] = scaleY;
+    $uniform4[2] = offsetX;
+    $uniform4[3] = offsetY;
+    const uniformBuffer = config.bufferManager.acquireAndWriteUniformBuffer($uniform4);
+    const sampler = config.textureManager.createSampler("container_copy_sampler", false);
+    $entries3[0].resource.buffer = uniformBuffer;
+    $entries3[1].resource = sampler;
+    $entries3[2].resource = srcAttachment.texture.view;
+    const bindGroup = config.device.createBindGroup({
+        "layout": bindGroupLayout,
+        "entries": $entries3
+    });
+    const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(dstAttachment.texture.view, 0, 0, 0, 0, "clear");
+    const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6, 1, 0, 0);
+    passEncoder.end();
+    return dstAttachment;
+};
+const drawFilterResultToMain = (config, filterAttachment, mainAttachment, blendMode, x, y, bufferManager) => {
+    if (!mainAttachment.texture || !filterAttachment.texture) {
+        return;
+    }
+    // WebGLと同じサブピクセル精度を維持するため、Math.floorを使用しない
+    let drawX = x;
+    let drawY = y;
+    let drawWidth = filterAttachment.width;
+    let drawHeight = filterAttachment.height;
+    let uvOffsetX = 0;
+    let uvOffsetY = 0;
+    if (drawX < 0) {
+        uvOffsetX = -drawX / filterAttachment.width;
+        drawWidth += drawX;
+        drawX = 0;
+    }
+    if (drawY < 0) {
+        uvOffsetY = -drawY / filterAttachment.height;
+        drawHeight += drawY;
+        drawY = 0;
+    }
+    if (drawWidth <= 0 || drawHeight <= 0) {
+        return;
+    }
+    const mainWidth = mainAttachment.width;
+    const mainHeight = mainAttachment.height;
+    if (drawX + drawWidth > mainWidth) {
+        drawWidth = mainWidth - drawX;
+    }
+    if (drawY + drawHeight > mainHeight) {
+        drawHeight = mainHeight - drawY;
+    }
+    if (SIMPLE_BLEND_MODES.has(blendMode)) {
+        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        let pipelineName;
+        switch (blendMode) {
+            case "add":
+                pipelineName = useMsaa ? "filter_output_add_msaa" : "filter_output_add";
+                break;
+            case "screen":
+                pipelineName = useMsaa ? "filter_output_screen_msaa" : "filter_output_screen";
+                break;
+            case "alpha":
+                pipelineName = useMsaa ? "filter_output_alpha_msaa" : "filter_output_alpha";
+                break;
+            case "erase":
+                pipelineName = useMsaa ? "filter_output_erase_msaa" : "filter_output_erase";
+                break;
+            case "copy":
+                pipelineName = useMsaa ? "texture_copy_bgra_msaa" : "texture_copy_bgra";
+                break;
+            default:
+                pipelineName = useMsaa ? "filter_output_msaa" : "filter_output";
+                break;
+        }
+        const pipeline = config.pipelineManager.getPipeline(pipelineName);
+        const bindGroupLayout = config.pipelineManager.getBindGroupLayout("texture_copy");
+        if (!pipeline || !bindGroupLayout) {
+            return;
+        }
+        const sampler = config.textureManager.createSampler("container_output_sampler", true);
+        const uvScaleX = drawWidth / filterAttachment.width;
+        const uvScaleY = drawHeight / filterAttachment.height;
+        $uniform4[0] = uvScaleX;
+        $uniform4[1] = uvScaleY;
+        $uniform4[2] = uvOffsetX;
+        $uniform4[3] = uvOffsetY;
+        const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform4);
+        $entries3[0].resource.buffer = uniformBuffer;
+        $entries3[1].resource = sampler;
+        $entries3[2].resource = filterAttachment.texture.view;
+        const bindGroup = config.device.createBindGroup({
+            "layout": bindGroupLayout,
+            "entries": $entries3
+        });
+        const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
+        const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+        const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+        // Viewportはfloat値でサブピクセル精度を維持（WebGLのsetTransform相当）
+        const vpX = Math.max(0, drawX);
+        const vpY = Math.max(0, drawY);
+        const vpW = Math.max(1, drawWidth);
+        const vpH = Math.max(1, drawHeight);
+        const scissorX = Math.max(0, Math.floor(vpX));
+        const scissorY = Math.max(0, Math.floor(vpY));
+        const scissorW = Math.max(1, Math.min(Math.ceil(vpX + vpW) - scissorX, mainWidth - scissorX));
+        const scissorH = Math.max(1, Math.min(Math.ceil(vpY + vpH) - scissorY, mainHeight - scissorY));
+        if (scissorW <= 0 || scissorH <= 0 || scissorX >= mainWidth || scissorY >= mainHeight) {
+            return;
+        }
+        const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
+        passEncoder.setPipeline(pipeline);
+        passEncoder.setBindGroup(0, bindGroup);
+        passEncoder.setViewport(vpX, vpY, vpW, vpH, 0, 1);
+        passEncoder.setScissorRect(scissorX, scissorY, scissorW, scissorH);
+        passEncoder.draw(6, 1, 0, 0);
+        passEncoder.end();
+    }
+    else {
+        // 複雑なブレンドモード
+        const dstAttachment = copyRegionToFilterAttachment(config, mainAttachment, drawX, drawY, drawWidth, drawHeight);
+        $uniform8[0] = $identityColorTransform[0];
+        $uniform8[1] = $identityColorTransform[1];
+        $uniform8[2] = $identityColorTransform[2];
+        $uniform8[3] = $identityColorTransform[3];
+        $uniform8[4] = $identityColorTransform[4] / 255;
+        $uniform8[5] = $identityColorTransform[5] / 255;
+        $uniform8[6] = $identityColorTransform[6] / 255;
+        $uniform8[7] = 0;
+        const blendedAttachment = blendApplyComplexBlendUseCase(filterAttachment, dstAttachment, blendMode, $uniform8, {
+            "device": config.device,
+            "commandEncoder": config.commandEncoder,
+            "bufferManager": config.bufferManager,
+            "frameBufferManager": config.frameBufferManager,
+            "pipelineManager": config.pipelineManager,
+            "textureManager": config.textureManager,
+            "frameTextures": config.frameTextures
+        });
+        // 結果をメインに描画
+        const useMsaa = mainAttachment.msaa && mainAttachment.msaaTexture?.view;
+        const resultPipelineName = useMsaa ? "filter_complex_blend_output_msaa" : "filter_complex_blend_output";
+        const resultPipeline = config.pipelineManager.getPipeline(resultPipelineName);
+        const resultLayout = config.pipelineManager.getBindGroupLayout("positioned_texture");
+        if (resultPipeline && resultLayout && blendedAttachment.texture && mainAttachment.texture) {
+            $uniform8[0] = drawX;
+            $uniform8[1] = drawY;
+            $uniform8[2] = blendedAttachment.width;
+            $uniform8[3] = blendedAttachment.height;
+            $uniform8[4] = mainAttachment.width;
+            $uniform8[5] = mainAttachment.height;
+            $uniform8[6] = 0;
+            $uniform8[7] = 0;
+            const uniformBuffer = bufferManager.acquireAndWriteUniformBuffer($uniform8);
+            const sampler = config.textureManager.createSampler("container_blend_output_sampler", false);
+            $entries3[0].resource.buffer = uniformBuffer;
+            $entries3[1].resource = sampler;
+            $entries3[2].resource = blendedAttachment.texture.view;
+            const bindGroup = config.device.createBindGroup({
+                "layout": resultLayout,
+                "entries": $entries3
+            });
+            const colorView = useMsaa ? mainAttachment.msaaTexture.view : mainAttachment.texture.view;
+            const resolveTarget = useMsaa ? mainAttachment.texture.view : null;
+            const renderPassDescriptor = config.frameBufferManager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", resolveTarget);
+            const passEncoder = config.commandEncoder.beginRenderPass(renderPassDescriptor);
+            passEncoder.setPipeline(resultPipeline);
+            passEncoder.setBindGroup(0, bindGroup);
+            passEncoder.draw(6, 1, 0, 0);
+            passEncoder.end();
+        }
+        config.frameBufferManager.releaseTemporaryAttachment(dstAttachment);
+        config.frameBufferManager.releaseTemporaryAttachment(blendedAttachment);
+    }
+};
+const applyFilterChain = (filterAttachment, matrix, params, devicePixelRatio, config) => {
+    $offset.x = 0;
+    $offset.y = 0;
+    for (let idx = 0; params.length > idx;) {
+        const type = params[idx++];
+        switch (type) {
+            case 0: // BevelFilter
+                {
+                    const newAtt = filterApplyBevelFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 1: // BlurFilter
+                {
+                    const newAtt = filterApplyBlurFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 2: // ColorMatrixFilter
+                {
+                    $uniform20[0] = params[idx++];
+                    $uniform20[1] = params[idx++];
+                    $uniform20[2] = params[idx++];
+                    $uniform20[3] = params[idx++];
+                    $uniform20[4] = params[idx++];
+                    $uniform20[5] = params[idx++];
+                    $uniform20[6] = params[idx++];
+                    $uniform20[7] = params[idx++];
+                    $uniform20[8] = params[idx++];
+                    $uniform20[9] = params[idx++];
+                    $uniform20[10] = params[idx++];
+                    $uniform20[11] = params[idx++];
+                    $uniform20[12] = params[idx++];
+                    $uniform20[13] = params[idx++];
+                    $uniform20[14] = params[idx++];
+                    $uniform20[15] = params[idx++];
+                    $uniform20[16] = params[idx++];
+                    $uniform20[17] = params[idx++];
+                    $uniform20[18] = params[idx++];
+                    $uniform20[19] = params[idx++];
+                    const newAtt = filterApplyColorMatrixFilterUseCase(filterAttachment, $uniform20, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 3: // ConvolutionFilter
+                {
+                    const matrixX = params[idx++];
+                    const matrixY = params[idx++];
+                    const length = matrixX * matrixY;
+                    const convMatrix = new Float32Array(length);
+                    for (let i = 0; i < length; i++) {
+                        convMatrix[i] = params[idx++];
+                    }
+                    const newAtt = filterApplyConvolutionFilterUseCase(filterAttachment, matrixX, matrixY, convMatrix, params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), params[idx++], params[idx++], config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 4: // DisplacementMapFilter
+                {
+                    const dmLen = params[idx++];
+                    const dmBuffer = new Uint8Array(dmLen);
+                    for (let i = 0; i < dmLen; i++) {
+                        dmBuffer[i] = params[idx++];
+                    }
+                    const newAtt = filterApplyDisplacementMapFilterUseCase(filterAttachment, matrix, dmBuffer, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 5: // DropShadowFilter
+                {
+                    const newAtt = filterApplyDropShadowFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), Boolean(params[idx++]), devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 6: // GlowFilter
+                {
+                    const newAtt = filterApplyGlowFilterUseCase(filterAttachment, matrix, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), Boolean(params[idx++]), devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 7: // GradientBevelFilter
+                {
+                    const gbDist = params[idx++];
+                    const gbAngle = params[idx++];
+                    const gbColorsLen = params[idx++];
+                    const gbColors = new Float32Array(gbColorsLen);
+                    for (let i = 0; i < gbColorsLen; i++) {
+                        gbColors[i] = params[idx++];
+                    }
+                    const gbAlphasLen = params[idx++];
+                    const gbAlphas = new Float32Array(gbAlphasLen);
+                    for (let i = 0; i < gbAlphasLen; i++) {
+                        gbAlphas[i] = params[idx++];
+                    }
+                    const gbRatiosLen = params[idx++];
+                    const gbRatios = new Float32Array(gbRatiosLen);
+                    for (let i = 0; i < gbRatiosLen; i++) {
+                        gbRatios[i] = params[idx++];
+                    }
+                    const newAtt = filterApplyGradientBevelFilterUseCase(filterAttachment, matrix, gbDist, gbAngle, gbColors, gbAlphas, gbRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+            case 8: // GradientGlowFilter
+                {
+                    const ggDist = params[idx++];
+                    const ggAngle = params[idx++];
+                    const ggColorsLen = params[idx++];
+                    const ggColors = new Float32Array(ggColorsLen);
+                    for (let i = 0; i < ggColorsLen; i++) {
+                        ggColors[i] = params[idx++];
+                    }
+                    const ggAlphasLen = params[idx++];
+                    const ggAlphas = new Float32Array(ggAlphasLen);
+                    for (let i = 0; i < ggAlphasLen; i++) {
+                        ggAlphas[i] = params[idx++];
+                    }
+                    const ggRatiosLen = params[idx++];
+                    const ggRatios = new Float32Array(ggRatiosLen);
+                    for (let i = 0; i < ggRatiosLen; i++) {
+                        ggRatios[i] = params[idx++];
+                    }
+                    const newAtt = filterApplyGradientGlowFilterUseCase(filterAttachment, matrix, ggDist, ggAngle, ggColors, ggAlphas, ggRatios, params[idx++], params[idx++], params[idx++], params[idx++], params[idx++], Boolean(params[idx++]), devicePixelRatio, config);
+                    if (filterAttachment !== newAtt) {
+                        config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+                    }
+                    filterAttachment = newAtt;
+                }
+                break;
+        }
+    }
+    return filterAttachment;
+};
+export const execute = (tempAttachment, mainAttachment, _tempName, blendMode, matrix, colorTransform, useFilter, filterBounds, params, uniqueKey, filterKey, _contentWidth, _contentHeight, config, bufferManager) => {
+    if (useFilter && matrix && filterBounds && params) {
+        // containerEndLayerが呼ばれる＝ディスプレイレイヤーがコンテンツ変更を検出して再レンダリングを要求
+        // 常に新鮮なテクスチャを抽出してフィルターを適用する
+        // （キャッシュはディスプレイレイヤーのcontainerDrawCachedFilterで管理）
+        // WebGL版と同じ: レイヤー全体をフィルター用にコピー
+        // レイヤーはコンテンツサイズで作成され、childrenは相対座標で描画されているため
+        // (0, 0, layerWidth, layerHeight) = コンテンツ全体
+        let filterAttachment = copyRegionToFilterAttachment(config, tempAttachment, 0, 0, tempAttachment.width, tempAttachment.height);
+        // 一時アタッチメントを遅延解放（コマンドバッファsubmit後に解放）
+        // destroyAttachmentは即座にGPUテクスチャを破棄するため、
+        // コマンドエンコーダに記録済みのレンダーパスが参照するテクスチャが無効になる
+        config.frameBufferManager.releaseTemporaryAttachment(tempAttachment);
+        // フィルターチェーンを適用
+        const devicePixelRatio = WebGPUUtil.getDevicePixelRatio();
+        filterAttachment = applyFilterChain(filterAttachment, matrix, params, devicePixelRatio, config);
+        // キャッシュに保存
+        if (uniqueKey) {
+            $cacheStore.set(uniqueKey, "fKey", filterKey);
+            $cacheStore.set(uniqueKey, "fTexture", filterAttachment);
+        }
+        // フィルター結果をメインに描画
+        if (filterAttachment) {
+            // ColorTransformが恒等変換でない場合、描画用に一時コピーを作成してCTを適用
+            // キャッシュにはフィルター結果のみ保存（CTは毎フレーム適用する）
+            let drawAttachment = filterAttachment;
+            let ctAttachment = null;
+            if (!isIdentityColorTransform(colorTransform)) {
+                ctAttachment = applyColorTransform(config, filterAttachment, colorTransform);
+                drawAttachment = ctAttachment;
+            }
+            const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
+            const scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
+            const boundsXMin = filterBounds[0] * (scaleX / devicePixelRatio);
+            const boundsYMin = filterBounds[1] * (scaleY / devicePixelRatio);
+            // WebGL版と同じ: boundsXMin + matrix[4] で絶対位置
+            const drawX = boundsXMin + matrix[4];
+            const drawY = boundsYMin + matrix[5];
+            drawFilterResultToMain(config, drawAttachment, mainAttachment, blendMode, drawX, drawY, bufferManager);
+            // CT一時アタッチメントを解放
+            if (ctAttachment) {
+                config.frameBufferManager.releaseTemporaryAttachment(ctAttachment);
+            }
+            // キャッシュされていないフィルター結果のみ解放
+            if (!uniqueKey) {
+                config.frameBufferManager.releaseTemporaryAttachment(filterAttachment);
+            }
+        }
+    }
+    else {
+        // ブレンドのみ：レイヤー全体をフィルター用にコピーしてメインに描画
+        let fullAttachment = copyRegionToFilterAttachment(config, tempAttachment, 0, 0, tempAttachment.width, tempAttachment.height);
+        // 一時アタッチメントを遅延解放（コマンドバッファsubmit後に解放）
+        config.frameBufferManager.releaseTemporaryAttachment(tempAttachment);
+        // ColorTransformが恒等変換でない場合、適用
+        if (!isIdentityColorTransform(colorTransform)) {
+            const ctAttachment = applyColorTransform(config, fullAttachment, colorTransform);
+            config.frameBufferManager.releaseTemporaryAttachment(fullAttachment);
+            fullAttachment = ctAttachment;
+        }
+        // WebGL版と同じ: matrix[4], matrix[5] = layerBounds の絶対位置に描画
+        drawFilterResultToMain(config, fullAttachment, mainAttachment, blendMode, matrix[4], matrix[5], bufferManager);
+        config.frameBufferManager.releaseTemporaryAttachment(fullAttachment);
+    }
+};

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

@@ -0,0 +1,6 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { BufferManager } from "../../BufferManager";
+import type { FrameBufferManager } from "../../FrameBufferManager";
+import type { TextureManager } from "../../TextureManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, command_encoder: GPUCommandEncoder, render_pass_encoder: GPURenderPassEncoder | null, main_attachment: IAttachmentObject, buffer_manager: BufferManager, frame_buffer_manager: FrameBufferManager, texture_manager: TextureManager, pipeline_manager: PipelineManager) => GPURenderPassEncoder | null;

package/src/Context/usecase/ContextDrawArraysInstancedUseCase.js

@@ -0,0 +1,135 @@
+import { getInstancedShaderManager } from "../../Blend/BlendInstancedManager";
+import { $currentBlendMode } from "../../Blend";
+import { renderQueue } from "@next2d/render-queue";
+import { $isMaskTestEnabled, $getMaskStencilReference } from "../../Mask";
+import { $getAtlasAttachmentObject } from "../../AtlasManager";
+let $cachedBindGroup = null;
+let $cachedAtlasView = null;
+export const execute = (device, command_encoder, render_pass_encoder, main_attachment, buffer_manager, frame_buffer_manager, texture_manager, pipeline_manager) => {
+    const shaderManager = getInstancedShaderManager();
+    if (shaderManager.count === 0) {
+        return render_pass_encoder;
+    }
+    // 既存のレンダーパスを終了
+    if (render_pass_encoder) {
+        render_pass_encoder.end();
+        render_pass_encoder = null;
+    }
+    const isMasked = $isMaskTestEnabled();
+    const maskReference = $getMaskStencilReference();
+    // 現在のブレンドモードを取得
+    const blendMode = $currentBlendMode;
+    // ブレンドモードに応じたパイプライン名を生成
+    // simpleBlendModes: normal, layer, add, screen, alpha, erase, copy
+    const getPipelineName = (mode) => {
+        switch (mode) {
+            case "add":
+                return "instanced_add";
+            case "screen":
+                return "instanced_screen";
+            case "alpha":
+                return "instanced_alpha";
+            case "erase":
+                return "instanced_erase";
+            case "copy":
+                return "instanced_copy";
+            default:
+                // normal, layer
+                return "instanced";
+        }
+    };
+    const pipelineName = getPipelineName(blendMode);
+    const normalPipeline = pipeline_manager.getPipeline(pipelineName);
+    const maskedPipeline = pipeline_manager.getPipeline("instanced_masked");
+    // 実際にマスクを使用するか判定
+    // maskedパイプラインが存在し、マスクが有効で、ステンシルがある場合のみ
+    const useStencil = isMasked && maskedPipeline
+        && (main_attachment.msaaStencil?.view || main_attachment.stencil?.view);
+    const pipeline = useStencil ? maskedPipeline : normalPipeline;
+    if (!pipeline) {
+        console.error("[WebGPU] Instanced pipeline not found");
+        return null;
+    }
+    // レンダーパスを作成（パイプラインに合わせてステンシルの有無を決定）
+    let passEncoder;
+    if (useStencil) {
+        // ステンシル付きレンダーパス（マスク用）- MSAA対応
+        const useMsaa = main_attachment.msaa && main_attachment.msaaTexture?.view;
+        const colorView = useMsaa ? main_attachment.msaaTexture.view : main_attachment.texture.view;
+        const stencilView = useMsaa && main_attachment.msaaStencil?.view
+            ? main_attachment.msaaStencil.view : main_attachment.stencil.view;
+        const resolveTarget = useMsaa ? main_attachment.texture.view : null;
+        const renderPassDescriptor = frame_buffer_manager.createStencilRenderPassDescriptor(colorView, stencilView, "load", // カラーは既存の内容を保持
+        "load", // ステンシルも既存の内容を保持（マスク情報）
+        resolveTarget);
+        passEncoder = command_encoder.beginRenderPass(renderPassDescriptor);
+    }
+    else {
+        // 通常のレンダーパス（MSAA対応）
+        const useMsaa = main_attachment.msaa && main_attachment.msaaTexture?.view;
+        const colorView = useMsaa ? main_attachment.msaaTexture.view : main_attachment.texture.view;
+        const resolveTarget = useMsaa ? main_attachment.texture.view : null;
+        const renderPassDescriptor = frame_buffer_manager.createRenderPassDescriptor(colorView, 0, 0, 0, 0, "load", // 既存の内容を保持
+        resolveTarget);
+        passEncoder = command_encoder.beginRenderPass(renderPassDescriptor);
+    }
+    passEncoder.setPipeline(pipeline);
+    // マスク有効時はステンシル参照値を設定
+    if (useStencil) {
+        passEncoder.setStencilReference(maskReference);
+    }
+    // インスタンスバッファを作成
+    // renderQueue.offsetは配列のインデックスなので、そのまま使用
+    const instanceData = new Float32Array(renderQueue.buffer.buffer, renderQueue.buffer.byteOffset, renderQueue.offset // 要素数
+    );
+    const instanceBuffer = buffer_manager.acquireVertexBuffer(instanceData.byteLength, instanceData);
+    // 頂点バッファ（矩形）を取得（キャッシュ済み）
+    const vertexBuffer = buffer_manager.getUnitRectBuffer();
+    // アトラステクスチャをバインド（複数アトラス対応）
+    // AtlasManagerから取得、フォールバックとしてFrameBufferManagerから取得
+    const atlasAttachment = $getAtlasAttachmentObject() || frame_buffer_manager.getAttachment("atlas");
+    if (!atlasAttachment) {
+        console.error("[WebGPU] Atlas attachment not found");
+        passEncoder.end();
+        return null;
+    }
+    // アトラス用サンプラーを取得（キャッシュ済み）
+    // MIN_FILTER: linear（縮小時・回転時にスムーズ）
+    // MAG_FILTER: nearest（拡大時にシャープ）
+    const sampler = texture_manager.createSampler("atlas_instanced_sampler", false);
+    // バインドグループを作成
+    const bindGroupLayout = pipeline_manager.getBindGroupLayout("instanced");
+    if (!bindGroupLayout) {
+        console.error("[WebGPU] Instanced bind group layout not found");
+        passEncoder.end();
+        return null;
+    }
+    // BindGroupキャッシュ: アトラスのテクスチャビューが同じなら再利用
+    const atlasView = atlasAttachment.texture.view;
+    if (!$cachedBindGroup || $cachedAtlasView !== atlasView) {
+        $cachedBindGroup = device.createBindGroup({
+            "layout": bindGroupLayout,
+            "entries": [
+                {
+                    "binding": 0,
+                    "resource": sampler
+                },
+                {
+                    "binding": 1,
+                    "resource": atlasView
+                }
+            ]
+        });
+        $cachedAtlasView = atlasView;
+    }
+    // 描画
+    passEncoder.setVertexBuffer(0, vertexBuffer);
+    passEncoder.setVertexBuffer(1, instanceBuffer);
+    passEncoder.setBindGroup(0, $cachedBindGroup);
+    passEncoder.draw(6, shaderManager.count, 0, 0);
+    // レンダーパスを終了
+    passEncoder.end();
+    // インスタンスデータをクリア
+    shaderManager.clear();
+    return null;
+};

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

@@ -0,0 +1,6 @@
+import type { IAttachmentObject } from "../../interface/IAttachmentObject";
+import type { BufferManager } from "../../BufferManager";
+import type { FrameBufferManager } from "../../FrameBufferManager";
+import type { TextureManager } from "../../TextureManager";
+import type { PipelineManager } from "../../Shader/PipelineManager";
+export declare const execute: (device: GPUDevice, commandEncoder: GPUCommandEncoder, renderPassEncoder: GPURenderPassEncoder | null, mainAttachment: IAttachmentObject, bufferManager: BufferManager, frameBufferManager: FrameBufferManager, textureManager: TextureManager, pipelineManager: PipelineManager, useIndirect?: boolean, useStorageBuffer?: boolean) => GPURenderPassEncoder | null;