@next2d/webgpu 3.0.4 → 3.1.0

package/src/Shader/PipelineManager.js

@@ -1,13 +1,21 @@
 import { ShaderSource } from "./ShaderSource";
 import { $samples } from "../WebGPUUtil";
-const VERTEX_BUFFER_LAYOUT_4F = {
+/**
+ * @description 4フロートストライドの頂点バッファレイアウト（position: float32x2, uv: float32x2）
+ *              Vertex buffer layout with 4-float stride (position: float32x2, uv: float32x2)
+ */
+const $VERTEX_BUFFER_LAYOUT_4F = {
     "arrayStride": 4 * 4,
     "attributes": [
         { "shaderLocation": 0, "offset": 0, "format": "float32x2" },
         { "shaderLocation": 1, "offset": 2 * 4, "format": "float32x2" }
     ]
 };
-const BLEND_PREMULTIPLIED_ALPHA = {
+/**
+ * @description プリマルチプライドアルファのブレンドステート
+ *              Premultiplied alpha blend state for standard compositing
+ */
+const $BLEND_PREMULTIPLIED_ALPHA = {
     "color": {
         "srcFactor": "one",
         "dstFactor": "one-minus-src-alpha",
@@ -19,56 +27,102 @@ const BLEND_PREMULTIPLIED_ALPHA = {
         "operation": "add"
     }
 };
+/**
+ * @description WebGPUレンダーパイプラインの管理クラス。パイプラインとバインドグループレイアウトの生成・キャッシュを行う
+ *              Manager class for WebGPU render pipelines. Creates, caches, and manages pipelines and bind group layouts
+ */
 export class PipelineManager {
+    /**
+     * @description PipelineManagerのコンストラクタ。GPUデバイスとフォーマットを設定し、パイプラインを初期化する
+     *              Construct PipelineManager. Sets GPU device, format, and initializes pipelines
+     * @param {GPUDevice} device - GPUデバイス / GPU device instance
+     * @param {GPUTextureFormat} format - テクスチャフォーマット / Texture format for output
+     */
     constructor(device, format) {
+        /**
+         * @description GPUデバイスの参照
+         *              Reference to the GPU device
+         */
         Object.defineProperty(this, "device", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /**
+         * @description 出力テクスチャフォーマット
+         *              Output texture format
+         */
         Object.defineProperty(this, "format", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /**
+         * @description パイプライン名からGPURenderPipelineへのキャッシュマップ
+         *              Cache map from pipeline name to GPURenderPipeline
+         */
         Object.defineProperty(this, "pipelines", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /**
+         * @description バインドグループレイアウト名からGPUBindGroupLayoutへのキャッシュマップ
+         *              Cache map from layout name to GPUBindGroupLayout
+         */
         Object.defineProperty(this, "bindGroupLayouts", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /**
+         * @description MSAAサンプル数
+         *              MSAA sample count
+         */
         Object.defineProperty(this, "sampleCount", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        /**
+         * @description シェーダーモジュールのキャッシュ
+         *              Shader module cache by key
+         */
         Object.defineProperty(this, "shaderModuleCache", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new Map()
         });
+        /**
+         * @description フィルター用バインドグループレイアウトキャッシュ（テクスチャ数別）
+         *              Filter bind group layout cache indexed by texture count
+         */
         Object.defineProperty(this, "filterBindGroupLayouts", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new Map()
         });
+        /**
+         * @description 初期化済みの遅延グループ名セット
+         *              Set of initialized lazy group names
+         */
         Object.defineProperty(this, "lazyInitGroups", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new Set()
         });
+        /**
+         * @description パイプライン名から遅延初期化グループ名への読み取り専用マップ
+         *              Read-only map from pipeline name to lazy initialization group name
+         */
         Object.defineProperty(this, "lazyGroupMap", {
             enumerable: true,
             configurable: true,
@@ -76,7 +130,7 @@ export class PipelineManager {
             value: new Map([
                 ...Array.from({ "length": 16 }, (_, i) => [`blur_filter_${i + 1}`, "blur_filter"]),
                 ["blur_filter", "blur_filter"],
-                ["texture_copy", "texture_copy"], ["texture_copy_rgba8", "texture_copy"], ["color_transform", "texture_copy"], ["y_flip_color_transform", "texture_copy"],
+                ["texture_copy", "texture_copy"], ["texture_copy_rgba8", "texture_copy"], ["texture_copy_rgba8_msaa", "texture_copy"], ["color_transform", "texture_copy"], ["y_flip_color_transform", "texture_copy"],
                 ["texture_erase", "texture_copy"], ["blur_texture_copy", "texture_copy"],
                 ["filter_blend", "texture_copy"], ["texture_copy_bgra", "texture_copy"],
                 ["filter_output", "texture_copy"], ["filter_output_add", "texture_copy"],
@@ -85,6 +139,7 @@ export class PipelineManager {
                 ["filter_output_msaa", "texture_copy"], ["filter_output_add_msaa", "texture_copy"],
                 ["filter_output_screen_msaa", "texture_copy"], ["filter_output_alpha_msaa", "texture_copy"],
                 ["filter_output_erase_msaa", "texture_copy"],
+                ["filter_output_masked", "texture_copy"], ["filter_output_masked_msaa", "texture_copy"],
                 ["positioned_texture", "texture_copy"], ["positioned_texture_rgba", "texture_copy"],
                 ["bitmap_render_msaa", "texture_copy"], ["bitmap_render", "texture_copy"],
                 ["texture_scale", "texture_copy"], ["texture_scale_blend", "texture_copy"],
@@ -101,24 +156,40 @@ export class PipelineManager {
                 ["filter_complex_blend_output_msaa", "complex_blend"]
             ])
         });
+        /**
+         * @description グラデーション用パイプラインレイアウト
+         *              Pipeline layout for gradient pipelines
+         */
         Object.defineProperty(this, "gradientPipelineLayout", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /**
+         * @description グラデーション用頂点シェーダーモジュール
+         *              Vertex shader module for gradient pipelines
+         */
         Object.defineProperty(this, "gradientVertexShaderModule", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /**
+         * @description グラデーション用フラグメントシェーダーモジュール
+         *              Fragment shader module for gradient pipelines
+         */
         Object.defineProperty(this, "gradientFragmentShaderModule", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        /**
+         * @description グラデーション用ステンシルフラグメントシェーダーモジュール
+         *              Stencil fragment shader module for gradient pipelines
+         */
         Object.defineProperty(this, "gradientStencilFragmentShaderModule", {
             enumerable: true,
             configurable: true,
@@ -132,6 +203,13 @@ export class PipelineManager {
         this.sampleCount = $samples;
         this.initialize();
     }
+    /**
+     * @description シェーダーモジュールをキャッシュから取得、または新規作成する
+     *              Get a shader module from cache, or create and cache a new one
+     * @param {string} key - キャッシュキー / Cache key
+     * @param {string} code - WGSLシェーダーコード / WGSL shader source code
+     * @return {GPUShaderModule} シェーダーモジュール / The shader module
+     */
     getOrCreateShaderModule(key, code) {
         let module = this.shaderModuleCache.get(key);
         if (!module) {
@@ -140,6 +218,10 @@ export class PipelineManager {
         }
         return module;
     }
+    /**
+     * @description 初期パイプライン群を一括作成する
+     *              Create all initial render pipelines
+     */
     initialize() {
         this.createFillPipeline();
         this.createStencilFillPipelines();
@@ -154,6 +236,11 @@ export class PipelineManager {
         this.createBlendPipeline();
         this.createNodeClearPipeline();
     }
+    /**
+     * @description 指定された名前に対応する遅延初期化グループをまだ初期化されていなければ初期化する
+     *              Ensure the lazy initialization group for the given name is initialized
+     * @param {string} name - パイプライン名 / Pipeline name to look up its lazy group
+     */
     ensureLazyGroup(name) {
         const group = this.lazyGroupMap.get(name);
         if (!group || this.lazyInitGroups.has(group)) {
@@ -178,12 +265,20 @@ export class PipelineManager {
                 break;
         }
     }
+    /**
+     * @description すべての遅延初期化グループを事前にロードする
+     *              Preload all lazy initialization groups eagerly
+     */
     preloadLazyGroups() {
         const groups = ["blur_filter", "texture_copy", "bitmap_sync", "filter", "complex_blend"];
         for (const group of groups) {
             this.ensureLazyGroup(group);
         }
     }
+    /**
+     * @description 塗りつぶし描画用パイプラインを作成する（RGBA/BGRA/ステンシル対応）
+     *              Create fill render pipelines (RGBA, BGRA, and stencil variants)
+     */
     createFillPipeline() {
         // Dynamic Offset対応のBindGroupLayout（fill + stencil共有）
         const dynamicBindGroupLayout = this.device.createBindGroupLayout({
@@ -201,8 +296,8 @@ export class PipelineManager {
         });
         const vertexShaderModule = this.getOrCreateShaderModule("fillVertex", ShaderSource.getFillVertexShader());
         const fragmentShaderModule = this.getOrCreateShaderModule("fillFragment", ShaderSource.getFillFragmentShader());
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
-        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
+        const blendState = $BLEND_PREMULTIPLIED_ALPHA;
         const pipelineRGBA = this.device.createRenderPipeline({
             "layout": pipelineLayout,
             "vertex": {
@@ -315,8 +410,12 @@ export class PipelineManager {
         });
         this.pipelines.set("fill_bgra_stencil", pipelineBGRAStencil);
     }
+    /**
+     * @description ステンシル塗りつぶし用パイプラインを作成する（書き込み・塗りつぶし・アトラス・メイン・マスク対応）
+     *              Create stencil fill pipelines (write, fill, atlas, main, and masked variants)
+     */
     createStencilFillPipelines() {
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
         // fill_dynamicレイアウトを共有（hasDynamicOffset: true）
         const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
         const stencilPipelineLayout = this.device.createPipelineLayout({
@@ -662,8 +761,12 @@ export class PipelineManager {
         });
         this.pipelines.set("stencil_fill_masked", stencilFillMaskedPipeline);
     }
+    /**
+     * @description クリッピング用パイプラインを作成する（レベル別の書き込み・クリア）
+     *              Create clip pipelines (level-based write and clear variants)
+     */
     createClipPipeline() {
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
         const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
         const clipPipelineLayout = this.device.createPipelineLayout({
             "bindGroupLayouts": [dynamicLayout]
@@ -804,8 +907,12 @@ export class PipelineManager {
             this.pipelines.set(`clip_clear_main_${level}`, clipClearMainPipeline);
         }
     }
+    /**
+     * @description マスク合成用パイプラインを作成する（レベル別のマージ・クリア）
+     *              Create mask union pipelines (level-based merge and clear variants)
+     */
     createMaskUnionPipelines() {
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
         const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
         const maskUnionPipelineLayout = this.device.createPipelineLayout({
             "bindGroupLayouts": [dynamicLayout]
@@ -895,6 +1002,10 @@ export class PipelineManager {
             this.pipelines.set(`mask_union_clear_${level}`, clearPipeline);
         }
     }
+    /**
+     * @description マスク描画用パイプラインを作成する
+     *              Create mask render pipeline
+     */
     createMaskPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -958,6 +1069,10 @@ export class PipelineManager {
         });
         this.pipelines.set("mask", pipeline);
     }
+    /**
+     * @description 基本描画パイプラインを作成する（RGBA/BGRA）
+     *              Create basic render pipelines (RGBA and BGRA variants)
+     */
     createBasicPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [{
@@ -987,7 +1102,7 @@ export class PipelineManager {
                 }
             ]
         };
-        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const blendState = $BLEND_PREMULTIPLIED_ALPHA;
         const pipelineRGBA = this.device.createRenderPipeline({
             "layout": pipelineLayout,
             "vertex": {
@@ -1035,6 +1150,10 @@ export class PipelineManager {
         this.pipelines.set("basic", pipelineRGBA);
         this.pipelines.set("basic_bgra", pipelineBGRA);
     }
+    /**
+     * @description テクスチャ描画用パイプラインを作成する
+     *              Create texture render pipeline
+     */
     createTexturePipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -1108,6 +1227,10 @@ export class PipelineManager {
         });
         this.pipelines.set("texture", pipeline);
     }
+    /**
+     * @description インスタンス描画用パイプラインを作成する（ブレンドバリアント・マスク対応）
+     *              Create instanced render pipelines (blend variants and masked)
+     */
     createInstancedPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -1276,18 +1399,7 @@ export class PipelineManager {
                 "entryPoint": "main",
                 "targets": [{
                         "format": this.format,
-                        "blend": {
-                            "color": {
-                                "srcFactor": "one",
-                                "dstFactor": "one-minus-src-alpha",
-                                "operation": "add"
-                            },
-                            "alpha": {
-                                "srcFactor": "one",
-                                "dstFactor": "one-minus-src-alpha",
-                                "operation": "add"
-                            }
-                        }
+                        "blend": $BLEND_PREMULTIPLIED_ALPHA
                     }]
             },
             "primitive": {
@@ -1317,6 +1429,10 @@ export class PipelineManager {
         });
         this.pipelines.set("instanced_masked", maskedPipeline);
     }
+    /**
+     * @description グラデーション塗りつぶし用パイプラインを作成する（RGBA/BGRA/ステンシル対応）
+     *              Create gradient fill pipelines (RGBA, BGRA, stencil, and stroke variants)
+     */
     createGradientPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -1348,8 +1464,8 @@ export class PipelineManager {
         this.gradientFragmentShaderModule = fragmentShaderModule;
         const stencilFragmentShaderModule = this.getOrCreateShaderModule("gradientFillStencilFragment", ShaderSource.getGradientFillStencilFragmentShader());
         this.gradientStencilFragmentShaderModule = stencilFragmentShaderModule;
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
-        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
+        const blendState = $BLEND_PREMULTIPLIED_ALPHA;
         const pipelineRGBA = this.device.createRenderPipeline({
             "label": "gradient_fill_no_stencil_pipeline",
             "layout": pipelineLayout,
@@ -1663,6 +1779,10 @@ export class PipelineManager {
         });
         this.pipelines.set("gradient_fill_bgra_stencil", pipelineBGRAStencil);
     }
+    /**
+     * @description ビットマップ塗りつぶし用パイプラインを作成する（RGBA/BGRA/ステンシル・ストローク対応）
+     *              Create bitmap fill pipelines (RGBA, BGRA, stencil, and stroke variants)
+     */
     createBitmapFillPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -1689,8 +1809,8 @@ export class PipelineManager {
         });
         const vertexShaderModule = this.getOrCreateShaderModule("bitmapFillVertex", ShaderSource.getBitmapFillVertexShader());
         const fragmentShaderModule = this.getOrCreateShaderModule("bitmapFillFragment", ShaderSource.getBitmapFillFragmentShader());
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
-        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
+        const blendState = $BLEND_PREMULTIPLIED_ALPHA;
         const pipelineRGBA = this.device.createRenderPipeline({
             "layout": pipelineLayout,
             "vertex": {
@@ -1888,6 +2008,10 @@ export class PipelineManager {
         });
         this.pipelines.set("bitmap_fill_bgra_stencil", pipelineBGRAStencil);
     }
+    /**
+     * @description ブレンド描画用パイプラインを作成する（デュアルテクスチャブレンド）
+     *              Create blend render pipeline for dual-texture blending
+     */
     createBlendPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -1976,6 +2100,10 @@ export class PipelineManager {
         });
         this.pipelines.set("blend", pipeline);
     }
+    /**
+     * @description ブラーフィルター用パイプラインを作成する（halfBlur 1〜16のバリアント）
+     *              Create blur filter pipelines (halfBlur 1-16 variants)
+     */
     createBlurFilterPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2037,6 +2165,10 @@ export class PipelineManager {
             this.pipelines.set(`blur_filter_${halfBlur}`, pipeline);
         }
     }
+    /**
+     * @description テクスチャコピー用パイプラインを作成する（各種ブレンド・フィルター出力・MSAA対応）
+     *              Create texture copy pipelines (various blend modes, filter output, MSAA variants)
+     */
     createTextureCopyPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2077,6 +2209,10 @@ export class PipelineManager {
         };
         this.pipelines.set("texture_copy", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, this.format, BLEND_REPLACE));
         this.pipelines.set("texture_copy_rgba8", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, "rgba8unorm", BLEND_REPLACE));
+        if (this.sampleCount > 1) {
+            const copyBlendRgba8 = { "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" } };
+            this.pipelines.set("texture_copy_rgba8_msaa", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, "rgba8unorm", copyBlendRgba8, this.sampleCount));
+        }
         const colorTransformFragmentModule = this.getOrCreateShaderModule("colorTransformFragment", ShaderSource.getColorTransformFragmentShader());
         this.pipelines.set("color_transform", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, colorTransformFragmentModule, "rgba8unorm", BLEND_REPLACE));
         const yFlipCTFragmentModule = this.getOrCreateShaderModule("yFlipColorTransformFragment", ShaderSource.getYFlipColorTransformFragmentShader());
@@ -2097,6 +2233,29 @@ export class PipelineManager {
         for (const [name, blend] of filterOutputBlendVariants) {
             this.pipelines.set(name, this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, blend));
         }
+        // マスク付きフィルター出力パイプライン（ステンシルテスト付き）
+        const filterMaskedStencil = {
+            "format": "stencil8",
+            "stencilFront": {
+                "compare": "equal",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilBack": {
+                "compare": "equal",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilReadMask": 0xFF,
+            "stencilWriteMask": 0x00
+        };
+        this.pipelines.set("filter_output_masked", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, BLEND_ALPHA, undefined, filterMaskedStencil));
+        if (this.sampleCount > 1) {
+            const normalBlendForMask = { "color": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" } };
+            this.pipelines.set("filter_output_masked_msaa", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, normalBlendForMask, this.sampleCount, filterMaskedStencil));
+        }
         if (this.sampleCount > 1) {
             const copyBlend = { "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" } };
             this.pipelines.set("texture_copy_bgra_msaa", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, this.format, copyBlend, this.sampleCount));
@@ -2109,6 +2268,10 @@ export class PipelineManager {
         this.createPositionedTexturePipeline();
         this.createTextureScalePipeline();
     }
+    /**
+     * @description 位置指定テクスチャ描画用パイプラインを作成する（RGBA/ビットマップレンダー対応）
+     *              Create positioned texture pipelines (RGBA, bitmap render, MSAA variants)
+     */
     createPositionedTexturePipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2297,6 +2460,10 @@ export class PipelineManager {
         });
         this.pipelines.set("bitmap_render", pipelineNonMsaa);
     }
+    /**
+     * @description テクスチャスケーリング用パイプラインを作成する
+     *              Create texture scale pipelines
+     */
     createTextureScalePipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2389,6 +2556,10 @@ export class PipelineManager {
         });
         this.pipelines.set("texture_scale_blend", blendPipeline);
     }
+    /**
+     * @description ビットマップ同期描画用パイプラインを作成する（MSAA 4x）
+     *              Create bitmap sync render pipeline (MSAA 4x)
+     */
     createBitmapSyncPipeline() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2451,6 +2622,10 @@ export class PipelineManager {
         });
         this.pipelines.set("bitmap_sync", pipeline);
     }
+    /**
+     * @description カラーマトリクスフィルター・ベベル・グロー・ドロップシャドウ等のフィルターパイプラインを作成する
+     *              Create filter pipelines (color matrix, bevel, glow, drop shadow, gradient glow/bevel)
+     */
     createColorMatrixFilterPipeline() {
         const BLEND_REPLACE = {
             "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" },
@@ -2468,6 +2643,10 @@ export class PipelineManager {
         this.createFilterPipelineWithLayout("gradient_glow_filter", ShaderSource.getGradientGlowFilterFragmentShader(), 3, BLEND_ALPHA);
         this.createFilterPipelineWithLayout("gradient_bevel_filter", ShaderSource.getGradientBevelFilterFragmentShader(), 3, BLEND_ALPHA);
     }
+    /**
+     * @description 複合ブレンド用パイプラインを作成する
+     *              Create complex blend pipelines
+     */
     createComplexBlendPipelines() {
         const bindGroupLayout = this.device.createBindGroupLayout({
             "entries": [
@@ -2534,6 +2713,10 @@ export class PipelineManager {
         this.createComplexBlendCopyPipeline();
         this.createComplexBlendOutputPipeline();
     }
+    /**
+     * @description 複合ブレンドのコピー・スケール用パイプラインを作成する
+     *              Create complex blend copy and scale pipelines
+     */
     createComplexBlendCopyPipeline() {
         const BLEND_REPLACE = {
             "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" },
@@ -2554,6 +2737,10 @@ export class PipelineManager {
             this.pipelines.set("complex_blend_scale", this.createFullscreenQuadPipeline(scalePipelineLayout, scaleVS, scaleFS, "rgba8unorm", BLEND_REPLACE));
         }
     }
+    /**
+     * @description 複合ブレンドの出力用パイプラインを作成する（MSAA対応含む）
+     *              Create complex blend output pipelines (including MSAA variants)
+     */
     createComplexBlendOutputPipeline() {
         const bindGroupLayout = this.bindGroupLayouts.get("positioned_texture");
         if (!bindGroupLayout) {
@@ -2576,35 +2763,55 @@ export class PipelineManager {
             this.pipelines.set("filter_complex_blend_output_msaa", this.createFullscreenQuadPipeline(pipelineLayout, filterBlendOutputVS, fragmentShaderModule, this.format, blend, this.sampleCount));
         }
     }
-    createFilterPipelineWithLayout(name, fragmentShaderCode, textureCount, blend) {
-        let bindGroupLayout = this.filterBindGroupLayouts.get(textureCount);
+    /**
+     * @description 指定されたフラグメントシェーダーとテクスチャ数でフィルターパイプラインを作成する
+     *              Create a filter pipeline with the specified fragment shader and texture count
+     * @param {string} name - パイプライン名 / Pipeline name
+     * @param {string} fragment_shader_code - フラグメントシェーダーコード / Fragment shader WGSL source code
+     * @param {number} texture_count - テクスチャバインディング数 / Number of texture bindings
+     * @param {GPUBlendState} blend - ブレンドステート / Blend state configuration
+     */
+    createFilterPipelineWithLayout(name, fragment_shader_code, texture_count, blend) {
+        let bindGroupLayout = this.filterBindGroupLayouts.get(texture_count);
         if (!bindGroupLayout) {
             const entries = [
                 { "binding": 0, "visibility": GPUShaderStage.FRAGMENT, "buffer": { "type": "uniform" } },
                 { "binding": 1, "visibility": GPUShaderStage.FRAGMENT, "sampler": {} }
             ];
-            for (let i = 0; i < textureCount; i++) {
+            for (let i = 0; i < texture_count; i++) {
                 entries.push({ "binding": 2 + i, "visibility": GPUShaderStage.FRAGMENT, "texture": {} });
             }
             bindGroupLayout = this.device.createBindGroupLayout({ "entries": entries });
-            this.filterBindGroupLayouts.set(textureCount, bindGroupLayout);
+            this.filterBindGroupLayouts.set(texture_count, bindGroupLayout);
         }
         this.bindGroupLayouts.set(name, bindGroupLayout);
         const pipelineLayout = this.device.createPipelineLayout({ "bindGroupLayouts": [bindGroupLayout] });
         const vertexShaderModule = this.getOrCreateShaderModule("blurFilterVertex", ShaderSource.getBlurFilterVertexShader());
-        const fragmentShaderModule = this.getOrCreateShaderModule(`filter_${name}`, fragmentShaderCode);
+        const fragmentShaderModule = this.getOrCreateShaderModule(`filter_${name}`, fragment_shader_code);
         this.pipelines.set(name, this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, "rgba8unorm", blend));
     }
-    createFullscreenQuadPipeline(pipelineLayout, vertexModule, fragmentModule, format, blend, multisampleCount, depthStencil) {
+    /**
+     * @description フルスクリーンクアッド描画用の汎用パイプラインを作成する
+     *              Create a generic fullscreen quad render pipeline
+     * @param {GPUPipelineLayout} pipeline_layout - パイプラインレイアウト / Pipeline layout
+     * @param {GPUShaderModule} vertex_module - 頂点シェーダーモジュール / Vertex shader module
+     * @param {GPUShaderModule} fragment_module - フラグメントシェーダーモジュール / Fragment shader module
+     * @param {GPUTextureFormat} format - テクスチャフォーマット / Target texture format
+     * @param {GPUBlendState} blend - ブレンドステート / Blend state configuration
+     * @param {number} multisample_count - MSAAサンプル数（任意） / Optional MSAA sample count
+     * @param {GPUDepthStencilState} depth_stencil - 深度ステンシルステート（任意） / Optional depth-stencil state
+     * @return {GPURenderPipeline} レンダーパイプライン / The created render pipeline
+     */
+    createFullscreenQuadPipeline(pipeline_layout, vertex_module, fragment_module, format, blend, multisample_count, depth_stencil) {
         const descriptor = {
-            "layout": pipelineLayout,
+            "layout": pipeline_layout,
             "vertex": {
-                "module": vertexModule,
+                "module": vertex_module,
                 "entryPoint": "main",
                 "buffers": []
             },
             "fragment": {
-                "module": fragmentModule,
+                "module": fragment_module,
                 "entryPoint": "main",
                 "targets": [{ "format": format, "blend": blend }]
             },
@@ -2613,14 +2820,20 @@ export class PipelineManager {
                 "cullMode": "none"
             }
         };
-        if (multisampleCount && multisampleCount > 1) {
-            descriptor.multisample = { "count": multisampleCount };
+        if (multisample_count && multisample_count > 1) {
+            descriptor.multisample = { "count": multisample_count };
         }
-        if (depthStencil) {
-            descriptor.depthStencil = depthStencil;
+        if (depth_stencil) {
+            descriptor.depthStencil = depth_stencil;
         }
         return this.device.createRenderPipeline(descriptor);
     }
+    /**
+     * @description 名前からレンダーパイプラインを取得する（遅延初期化を含む）
+     *              Get a render pipeline by name, initializing lazy groups if needed
+     * @param {string} name - パイプライン名 / Pipeline name
+     * @return {GPURenderPipeline | undefined} パイプラインまたはundefined / The pipeline or undefined
+     */
     getPipeline(name) {
         let pipeline = this.pipelines.get(name);
         if (!pipeline) {
@@ -2630,25 +2843,28 @@ export class PipelineManager {
         return pipeline;
     }
     /**
-     * @description フィルターパイプラインのoverride定数バリアントを取得
-     *              GPU warp divergenceを排除するコンパイル時分岐特殊化
+     * @description フィルターパイプラインのoverride定数バリアントを取得する。GPU warp divergenceを排除するコンパイル時分岐特殊化
+     *              Get a filter pipeline variant with override constants. Compile-time branch specialization to eliminate GPU warp divergence
+     * @param {string} base_name - ベースパイプライン名 / Base pipeline name
+     * @param {Record<string, number>} constants - オーバーライド定数 / Override constant values
+     * @return {GPURenderPipeline | undefined} パイプラインまたはundefined / The pipeline or undefined
      */
-    getFilterPipeline(baseName, constants) {
+    getFilterPipeline(base_name, constants) {
         // キャッシュキーを生成
         const keys = Object.keys(constants).sort();
         const suffix = keys.map((k) => `${k}${constants[k]}`).join("_");
-        const cacheKey = `${baseName}_${suffix}`;
+        const cacheKey = `${base_name}_${suffix}`;
         let pipeline = this.pipelines.get(cacheKey);
         if (pipeline) {
             return pipeline;
         }
         // ベースグループのロードを確保
-        this.ensureLazyGroup(baseName);
-        const fragmentModule = this.shaderModuleCache.get(`filter_${baseName}`);
+        this.ensureLazyGroup(base_name);
+        const fragmentModule = this.shaderModuleCache.get(`filter_${base_name}`);
         const vertexModule = this.shaderModuleCache.get("blurFilterVertex");
-        const bindGroupLayout = this.bindGroupLayouts.get(baseName);
+        const bindGroupLayout = this.bindGroupLayouts.get(base_name);
         if (!fragmentModule || !vertexModule || !bindGroupLayout) {
-            return this.pipelines.get(baseName);
+            return this.pipelines.get(base_name);
         }
         const pipelineLayout = this.device.createPipelineLayout({
             "bindGroupLayouts": [bindGroupLayout]
@@ -2681,50 +2897,62 @@ export class PipelineManager {
         return pipeline;
     }
     /**
-     * @description グラデーションタイプとスプレッドモードに応じた特殊化パイプラインを取得
-     *              override定数でGPU warp divergenceを排除
+     * @description グラデーションタイプとスプレッドモードに応じた特殊化パイプラインを取得する。override定数でGPU warp divergenceを排除
+     *              Get a gradient pipeline specialized by gradient type and spread mode. Uses override constants to eliminate GPU warp divergence
+     * @param {string} base_name - ベースパイプライン名 / Base pipeline name
+     * @param {number} gradient_type - グラデーションタイプ / Gradient type identifier
+     * @param {number} spread_mode - スプレッドモード / Spread mode identifier
+     * @return {GPURenderPipeline | undefined} パイプラインまたはundefined / The pipeline or undefined
      */
-    getGradientPipeline(baseName, gradientType, spreadMode) {
-        const key = `${baseName}_t${gradientType}s${spreadMode}`;
+    getGradientPipeline(base_name, gradient_type, spread_mode) {
+        const key = `${base_name}_t${gradient_type}s${spread_mode}`;
         let pipeline = this.pipelines.get(key);
         if (pipeline) {
             return pipeline;
         }
         if (!this.gradientPipelineLayout) {
-            return this.getPipeline(baseName);
+            return this.getPipeline(base_name);
         }
         // ベースパイプラインと同じ構成でoverride定数を変えて作成
-        pipeline = this.createGradientVariant(baseName, gradientType, spreadMode);
+        pipeline = this.createGradientVariant(base_name, gradient_type, spread_mode);
         if (pipeline) {
             this.pipelines.set(key, pipeline);
             return pipeline;
         }
         // フォールバック: デフォルト定数のベースパイプラインを使用
-        return this.getPipeline(baseName);
+        return this.getPipeline(base_name);
     }
-    createGradientVariant(baseName, gradientType, spreadMode) {
+    /**
+     * @description グラデーションバリアントパイプラインを作成する（override定数による特殊化）
+     *              Create a gradient variant pipeline with override constants for specialization
+     * @param {string} base_name - ベースパイプライン名 / Base pipeline name
+     * @param {number} gradient_type - グラデーションタイプ / Gradient type identifier
+     * @param {number} spread_mode - スプレッドモード / Spread mode identifier
+     * @return {GPURenderPipeline | undefined} パイプラインまたはundefined / The pipeline or undefined
+     */
+    createGradientVariant(base_name, gradient_type, spread_mode) {
         if (!this.gradientPipelineLayout) {
             return undefined;
         }
         const constants = {
-            "GRADIENT_TYPE": gradientType,
-            "SPREAD_MODE": spreadMode
+            "GRADIENT_TYPE": gradient_type,
+            "SPREAD_MODE": spread_mode
         };
-        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
-        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const vertexBufferLayout = $VERTEX_BUFFER_LAYOUT_4F;
+        const blendState = $BLEND_PREMULTIPLIED_ALPHA;
         // ベース名からパイプライン構成を決定
-        const isStencilFragment = baseName.includes("stencil_atlas") || baseName === "gradient_fill_stencil_main";
+        const isStencilFragment = base_name.includes("stencil_atlas") || base_name === "gradient_fill_stencil_main";
         const fragModule = isStencilFragment ? this.gradientStencilFragmentShaderModule : this.gradientFragmentShaderModule;
-        const isBGRA = baseName.includes("bgra") || baseName === "gradient_fill_stencil_main";
+        const isBGRA = base_name.includes("bgra") || base_name === "gradient_fill_stencil_main";
         const format = isBGRA ? this.format : "rgba8unorm";
-        const needsYFlip = baseName.includes("bgra") || baseName === "gradient_fill_stencil_main";
+        const needsYFlip = base_name.includes("bgra") || base_name === "gradient_fill_stencil_main";
         const vertexConstants = {};
         if (needsYFlip) {
             vertexConstants.yFlipSign = -1.0;
         }
         let depthStencil;
         let sampleCount = this.sampleCount;
-        if (baseName.includes("stroke")) {
+        if (base_name.includes("stroke")) {
             depthStencil = {
                 "format": "stencil8",
                 "stencilFront": { "compare": "always", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
@@ -2733,7 +2961,7 @@ export class PipelineManager {
                 "stencilWriteMask": 0x00
             };
         }
-        else if (baseName === "gradient_fill_stencil" || baseName === "gradient_fill_stencil_atlas") {
+        else if (base_name === "gradient_fill_stencil" || base_name === "gradient_fill_stencil_atlas") {
             depthStencil = {
                 "format": "stencil8",
                 "stencilFront": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
@@ -2742,7 +2970,7 @@ export class PipelineManager {
                 "stencilWriteMask": 0xFF
             };
         }
-        else if (baseName === "gradient_fill_stencil_main") {
+        else if (base_name === "gradient_fill_stencil_main") {
             depthStencil = {
                 "format": "stencil8",
                 "stencilFront": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
@@ -2752,7 +2980,7 @@ export class PipelineManager {
             };
             sampleCount = 1;
         }
-        else if (baseName === "gradient_fill_bgra_stencil") {
+        else if (base_name === "gradient_fill_bgra_stencil") {
             depthStencil = {
                 "format": "stencil8",
                 "stencilFront": { "compare": "equal", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
@@ -2761,7 +2989,7 @@ export class PipelineManager {
                 "stencilWriteMask": 0x00
             };
         }
-        else if (baseName === "gradient_fill_bgra_no_msaa") {
+        else if (base_name === "gradient_fill_bgra_no_msaa") {
             sampleCount = 1;
         }
         const descriptor = {
@@ -2786,6 +3014,12 @@ export class PipelineManager {
         }
         return this.device.createRenderPipeline(descriptor);
     }
+    /**
+     * @description 名前からバインドグループレイアウトを取得する（遅延初期化を含む）
+     *              Get a bind group layout by name, initializing lazy groups if needed
+     * @param {string} name - バインドグループレイアウト名 / Bind group layout name
+     * @return {GPUBindGroupLayout | undefined} レイアウトまたはundefined / The layout or undefined
+     */
     getBindGroupLayout(name) {
         let layout = this.bindGroupLayouts.get(name);
         if (!layout) {
@@ -2794,6 +3028,10 @@ export class PipelineManager {
         }
         return layout;
     }
+    /**
+     * @description ノードクリア用パイプラインを作成する（カラーとステンシルの同時クリア）
+     *              Create node clear pipeline for simultaneous color and stencil clear
+     */
     createNodeClearPipeline() {
         const vertexBufferLayout = {
             "arrayStride": 2 * 4,
@@ -2859,6 +3097,10 @@ export class PipelineManager {
         });
         this.pipelines.set("node_clear_atlas", nodeClearPipeline);
     }
+    /**
+     * @description すべてのパイプライン・レイアウト・シェーダーモジュールを解放する
+     *              Dispose all pipelines, layouts, and shader module caches
+     */
     dispose() {
         this.pipelines.clear();
         this.bindGroupLayouts.clear();