@next2d/webgpu 3.0.0

package/src/Shader/PipelineManager.js

@@ -0,0 +1,2868 @@
+import { ShaderSource } from "./ShaderSource";
+import { $samples } from "../WebGPUUtil";
+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 = {
+    "color": {
+        "srcFactor": "one",
+        "dstFactor": "one-minus-src-alpha",
+        "operation": "add"
+    },
+    "alpha": {
+        "srcFactor": "one",
+        "dstFactor": "one-minus-src-alpha",
+        "operation": "add"
+    }
+};
+export class PipelineManager {
+    constructor(device, format) {
+        Object.defineProperty(this, "device", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "format", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pipelines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "bindGroupLayouts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "sampleCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "shaderModuleCache", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "filterBindGroupLayouts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "lazyInitGroups", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+        Object.defineProperty(this, "lazyGroupMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            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_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"],
+                ["filter_output_screen", "texture_copy"], ["filter_output_alpha", "texture_copy"],
+                ["filter_output_erase", "texture_copy"], ["texture_copy_bgra_msaa", "texture_copy"],
+                ["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"],
+                ["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"],
+                ["bitmap_sync", "bitmap_sync"],
+                ["color_matrix_filter", "filter"], ["bevel_base", "filter"],
+                ["glow_filter", "filter"], ["drop_shadow_filter", "filter"],
+                ["bevel_filter", "filter"], ["gradient_glow_filter", "filter"],
+                ["gradient_bevel_filter", "filter"],
+                ["complex_blend", "complex_blend"],
+                ["complex_blend_copy", "complex_blend"],
+                ["complex_blend_scale", "complex_blend"], ["complex_blend_output", "complex_blend"],
+                ["complex_blend_output_msaa", "complex_blend"],
+                ["filter_complex_blend_output", "complex_blend"],
+                ["filter_complex_blend_output_msaa", "complex_blend"]
+            ])
+        });
+        Object.defineProperty(this, "gradientPipelineLayout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "gradientVertexShaderModule", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "gradientFragmentShaderModule", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "gradientStencilFragmentShaderModule", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        this.device = device;
+        this.format = format;
+        this.pipelines = new Map();
+        this.bindGroupLayouts = new Map();
+        this.sampleCount = $samples;
+        this.initialize();
+    }
+    getOrCreateShaderModule(key, code) {
+        let module = this.shaderModuleCache.get(key);
+        if (!module) {
+            module = this.device.createShaderModule({ code });
+            this.shaderModuleCache.set(key, module);
+        }
+        return module;
+    }
+    initialize() {
+        this.createFillPipeline();
+        this.createStencilFillPipelines();
+        this.createClipPipeline();
+        this.createMaskUnionPipelines();
+        this.createMaskPipeline();
+        this.createBasicPipeline();
+        this.createTexturePipeline();
+        this.createInstancedPipeline();
+        this.createGradientPipeline();
+        this.createBitmapFillPipeline();
+        this.createBlendPipeline();
+        this.createNodeClearPipeline();
+    }
+    ensureLazyGroup(name) {
+        const group = this.lazyGroupMap.get(name);
+        if (!group || this.lazyInitGroups.has(group)) {
+            return;
+        }
+        this.lazyInitGroups.add(group);
+        switch (group) {
+            case "blur_filter":
+                this.createBlurFilterPipeline();
+                break;
+            case "texture_copy":
+                this.createTextureCopyPipeline();
+                break;
+            case "bitmap_sync":
+                this.createBitmapSyncPipeline();
+                break;
+            case "filter":
+                this.createColorMatrixFilterPipeline();
+                break;
+            case "complex_blend":
+                this.createComplexBlendPipelines();
+                break;
+        }
+    }
+    preloadLazyGroups() {
+        const groups = ["blur_filter", "texture_copy", "bitmap_sync", "filter", "complex_blend"];
+        for (const group of groups) {
+            this.ensureLazyGroup(group);
+        }
+    }
+    createFillPipeline() {
+        // Dynamic Offset対応のBindGroupLayout（fill + stencil共有）
+        const dynamicBindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform", "hasDynamicOffset": true }
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("fill_dynamic", dynamicBindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [dynamicBindGroupLayout]
+        });
+        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 pipelineRGBA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilReadMask": 0x00,
+                "stencilWriteMask": 0x00
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        const pipelineBGRA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        this.pipelines.set("fill", pipelineRGBA);
+        this.pipelines.set("fill_bgra", pipelineBGRA);
+        const pipelineBGRAStencil = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0x00
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        this.pipelines.set("fill_bgra_stencil", pipelineBGRAStencil);
+    }
+    createStencilFillPipelines() {
+        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        // fill_dynamicレイアウトを共有（hasDynamicOffset: true）
+        const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
+        const stencilPipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [dynamicLayout]
+        });
+        const stencilWritePipeline = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "writeMask": 0
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none",
+                "frontFace": "ccw"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "increment-wrap"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "decrement-wrap"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        this.pipelines.set("stencil_write", stencilWritePipeline);
+        const stencilFillPipeline = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilFillVertex", ShaderSource.getStencilFillVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilFillFragment", ShaderSource.getStencilFillFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("stencil_fill", stencilFillPipeline);
+        const stencilWritePipelineAtlas = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "writeMask": 0
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none",
+                "frontFace": "ccw"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "increment-wrap"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "decrement-wrap"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        this.pipelines.set("stencil_write_atlas", stencilWritePipelineAtlas);
+        const stencilWritePipelineMain = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "writeMask": 0
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none",
+                "frontFace": "ccw"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "increment-wrap"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "decrement-wrap"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount,
+                "alphaToCoverageEnabled": true
+            }
+        });
+        this.pipelines.set("stencil_write_main", stencilWritePipelineMain);
+        const stencilFillPipelineAtlas = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilFillVertex", ShaderSource.getStencilFillVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilFillFragment", ShaderSource.getStencilFillFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one",
+                                "operation": "max"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("stencil_fill_atlas", stencilFillPipelineAtlas);
+        const stencilFillPipelineMain = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilFillVertex", ShaderSource.getStencilFillVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilFillFragment", ShaderSource.getStencilFillFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one",
+                                "operation": "max"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("stencil_fill_main", stencilFillPipelineMain);
+        const stencilFillMaskedPipeline = this.device.createRenderPipeline({
+            "layout": stencilPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilFillVertex", ShaderSource.getStencilFillVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilFillFragment", ShaderSource.getStencilFillFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "greater",
+                    "failOp": "keep",
+                    "depthFailOp": "replace",
+                    "passOp": "replace"
+                },
+                "stencilBack": {
+                    "compare": "greater",
+                    "failOp": "keep",
+                    "depthFailOp": "replace",
+                    "passOp": "replace"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("stencil_fill_masked", stencilFillMaskedPipeline);
+    }
+    createClipPipeline() {
+        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
+        const clipPipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [dynamicLayout]
+        });
+        const clipWritePipeline = this.device.createRenderPipeline({
+            "layout": clipPipelineLayout,
+            "vertex": {
+                "module": this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "writeMask": 0
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "zero",
+                    "depthFailOp": "invert",
+                    "passOp": "invert"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "zero",
+                    "depthFailOp": "invert",
+                    "passOp": "invert"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("clip_write", clipWritePipeline);
+        const vertexShaderModule = this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader());
+        for (let level = 1; level <= 8; level++) {
+            const stencilWriteMask = 1 << level - 1;
+            const clipWriteMainPipeline = this.device.createRenderPipeline({
+                "layout": clipPipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": [vertexBufferLayout],
+                    "constants": { "yFlipSign": -1.0 }
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{
+                            "format": this.format,
+                            "writeMask": 0
+                        }]
+                },
+                "primitive": {
+                    "topology": "triangle-list",
+                    "cullMode": "none"
+                },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": {
+                        "compare": "always",
+                        "failOp": "zero",
+                        "depthFailOp": "invert",
+                        "passOp": "invert"
+                    },
+                    "stencilBack": {
+                        "compare": "always",
+                        "failOp": "zero",
+                        "depthFailOp": "invert",
+                        "passOp": "invert"
+                    },
+                    "stencilReadMask": 0xFF,
+                    "stencilWriteMask": stencilWriteMask
+                },
+                "multisample": {
+                    "count": this.sampleCount,
+                    "alphaToCoverageEnabled": true
+                }
+            });
+            this.pipelines.set(`clip_write_main_${level}`, clipWriteMainPipeline);
+        }
+        this.pipelines.set("clip_write_main", this.pipelines.get("clip_write_main_1"));
+        for (let level = 1; level <= 8; level++) {
+            const stencilWriteMask = 1 << level - 1;
+            const clipClearMainPipeline = this.device.createRenderPipeline({
+                "layout": clipPipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": [vertexBufferLayout],
+                    "constants": { "yFlipSign": -1.0 }
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{
+                            "format": this.format,
+                            "writeMask": 0
+                        }]
+                },
+                "primitive": {
+                    "topology": "triangle-list",
+                    "cullMode": "none"
+                },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": {
+                        "compare": "always",
+                        "failOp": "replace",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilBack": {
+                        "compare": "always",
+                        "failOp": "replace",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilReadMask": 0xFF,
+                    "stencilWriteMask": stencilWriteMask
+                },
+                "multisample": {
+                    "count": this.sampleCount
+                }
+            });
+            this.pipelines.set(`clip_clear_main_${level}`, clipClearMainPipeline);
+        }
+    }
+    createMaskUnionPipelines() {
+        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const dynamicLayout = this.bindGroupLayouts.get("fill_dynamic");
+        const maskUnionPipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [dynamicLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("stencilWriteVertex", ShaderSource.getStencilWriteVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("stencilWriteFragment", ShaderSource.getStencilWriteFragmentShader());
+        for (let level = 1; level <= 8; level++) {
+            const mask = 1 << level - 1;
+            const upperBitsMask = ~mask & 0xFF;
+            const mergePipeline = this.device.createRenderPipeline({
+                "layout": maskUnionPipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": [vertexBufferLayout],
+                    "constants": { "yFlipSign": -1.0 }
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{
+                            "format": this.format,
+                            "writeMask": 0
+                        }]
+                },
+                "primitive": {
+                    "topology": "triangle-list",
+                    "cullMode": "none"
+                },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": {
+                        "compare": "less-equal",
+                        "failOp": "zero",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilBack": {
+                        "compare": "less-equal",
+                        "failOp": "zero",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilReadMask": 0xFF,
+                    "stencilWriteMask": upperBitsMask
+                }
+            });
+            this.pipelines.set(`mask_union_merge_${level}`, mergePipeline);
+            const clearPipeline = this.device.createRenderPipeline({
+                "layout": maskUnionPipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": [vertexBufferLayout],
+                    "constants": { "yFlipSign": -1.0 }
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{
+                            "format": this.format,
+                            "writeMask": 0
+                        }]
+                },
+                "primitive": {
+                    "topology": "triangle-list",
+                    "cullMode": "none"
+                },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": {
+                        "compare": "always",
+                        "failOp": "replace",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilBack": {
+                        "compare": "always",
+                        "failOp": "replace",
+                        "depthFailOp": "replace",
+                        "passOp": "replace"
+                    },
+                    "stencilReadMask": 0xFF,
+                    "stencilWriteMask": 1 << level
+                }
+            });
+            this.pipelines.set(`mask_union_clear_${level}`, clearPipeline);
+        }
+    }
+    createMaskPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX,
+                    "buffer": { "type": "uniform" }
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("mask", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("maskVertex", ShaderSource.getMaskVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("maskFragment", ShaderSource.getMaskFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [{
+                        "arrayStride": 4 * 4,
+                        "attributes": [
+                            {
+                                "shaderLocation": 0,
+                                "offset": 0,
+                                "format": "float32x2"
+                            },
+                            {
+                                "shaderLocation": 1,
+                                "offset": 2 * 4,
+                                "format": "float32x2"
+                            }
+                        ]
+                    }]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("mask", pipeline);
+    }
+    createBasicPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [{
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                }]
+        });
+        this.bindGroupLayouts.set("basic", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("basicVertex", ShaderSource.getBasicVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("basicFragment", ShaderSource.getBasicFragmentShader());
+        const vertexBufferLayout = {
+            "arrayStride": 4 * 4,
+            "attributes": [
+                {
+                    "shaderLocation": 0,
+                    "offset": 0,
+                    "format": "float32x2"
+                },
+                {
+                    "shaderLocation": 1,
+                    "offset": 2 * 4,
+                    "format": "float32x2"
+                }
+            ]
+        };
+        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        const pipelineRGBA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        const pipelineBGRA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("basic", pipelineRGBA);
+        this.pipelines.set("basic_bgra", pipelineBGRA);
+    }
+    createTexturePipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("texture", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("basicVertex", ShaderSource.getBasicVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("textureFragment", ShaderSource.getTextureFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [{
+                        "arrayStride": 4 * 4,
+                        "attributes": [
+                            {
+                                "shaderLocation": 0,
+                                "offset": 0,
+                                "format": "float32x2"
+                            },
+                            {
+                                "shaderLocation": 1,
+                                "offset": 2 * 4,
+                                "format": "float32x2"
+                            }
+                        ]
+                    }]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("texture", pipeline);
+    }
+    createInstancedPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("instanced", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("instancedVertex", ShaderSource.getInstancedVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("instancedFragment", ShaderSource.getInstancedFragmentShader());
+        const instanceBufferLayout = {
+            "arrayStride": 96,
+            "stepMode": "instance",
+            "attributes": [
+                {
+                    "shaderLocation": 2,
+                    "offset": 0,
+                    "format": "float32x4"
+                },
+                {
+                    "shaderLocation": 3,
+                    "offset": 16,
+                    "format": "float32x4"
+                },
+                {
+                    "shaderLocation": 4,
+                    "offset": 32,
+                    "format": "float32x4"
+                },
+                {
+                    "shaderLocation": 5,
+                    "offset": 48,
+                    "format": "float32x4"
+                },
+                {
+                    "shaderLocation": 6,
+                    "offset": 64,
+                    "format": "float32x4"
+                },
+                {
+                    "shaderLocation": 7,
+                    "offset": 80,
+                    "format": "float32x4"
+                }
+            ]
+        };
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [
+                    {
+                        "arrayStride": 4 * 4,
+                        "stepMode": "vertex",
+                        "attributes": [
+                            {
+                                "shaderLocation": 0,
+                                "offset": 0,
+                                "format": "float32x2"
+                            },
+                            {
+                                "shaderLocation": 1,
+                                "offset": 2 * 4,
+                                "format": "float32x2"
+                            }
+                        ]
+                    },
+                    instanceBufferLayout
+                ]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("instanced", pipeline);
+        const vertexBuffers = [
+            {
+                "arrayStride": 4 * 4,
+                "stepMode": "vertex",
+                "attributes": [
+                    { "shaderLocation": 0, "offset": 0, "format": "float32x2" },
+                    { "shaderLocation": 1, "offset": 2 * 4, "format": "float32x2" }
+                ]
+            },
+            instanceBufferLayout
+        ];
+        const blendVariants = [
+            ["instanced_add", { "color": { "srcFactor": "one", "dstFactor": "one", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" } }],
+            ["instanced_screen", { "color": { "srcFactor": "one-minus-dst", "dstFactor": "one", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" } }],
+            ["instanced_alpha", { "color": { "srcFactor": "zero", "dstFactor": "src-alpha", "operation": "add" }, "alpha": { "srcFactor": "zero", "dstFactor": "src-alpha", "operation": "add" } }],
+            ["instanced_erase", { "color": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" }, "alpha": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" } }],
+            ["instanced_copy", { "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" } }]
+        ];
+        for (const [name, blend] of blendVariants) {
+            const variantPipeline = this.device.createRenderPipeline({
+                "layout": pipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": vertexBuffers
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{ "format": this.format, "blend": blend }]
+                },
+                "primitive": { "topology": "triangle-list", "cullMode": "none" },
+                "multisample": { "count": this.sampleCount }
+            });
+            this.pipelines.set(name, variantPipeline);
+        }
+        const maskedPipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [
+                    {
+                        "arrayStride": 4 * 4,
+                        "stepMode": "vertex",
+                        "attributes": [
+                            { "shaderLocation": 0, "offset": 0, "format": "float32x2" },
+                            { "shaderLocation": 1, "offset": 2 * 4, "format": "float32x2" }
+                        ]
+                    },
+                    instanceBufferLayout
+                ]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0x00
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("instanced_masked", maskedPipeline);
+    }
+    createGradientPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("gradient_fill", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        this.gradientPipelineLayout = pipelineLayout;
+        const vertexShaderModule = this.getOrCreateShaderModule("gradientFillVertex", ShaderSource.getGradientFillVertexShader());
+        this.gradientVertexShaderModule = vertexShaderModule;
+        const fragmentShaderModule = this.getOrCreateShaderModule("gradientFillFragment", ShaderSource.getGradientFillFragmentShader());
+        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 pipelineRGBA = this.device.createRenderPipeline({
+            "label": "gradient_fill_no_stencil_pipeline",
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        const pipelineBGRA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_fill", pipelineRGBA);
+        this.pipelines.set("gradient_fill_no_stencil", pipelineRGBA);
+        this.pipelines.set("gradient_fill_bgra", pipelineBGRA);
+        const strokeStencilState = {
+            "format": "stencil8",
+            "stencilFront": {
+                "compare": "always",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilBack": {
+                "compare": "always",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilReadMask": 0x00,
+            "stencilWriteMask": 0x00
+        };
+        const pipelineGradientStrokeAtlas = this.device.createRenderPipeline({
+            "label": "gradient_stroke_atlas_pipeline",
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": strokeStencilState,
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_stroke_atlas", pipelineGradientStrokeAtlas);
+        const pipelineGradientStrokeBGRA = this.device.createRenderPipeline({
+            "label": "gradient_stroke_bgra_pipeline",
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": strokeStencilState,
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_stroke_bgra", pipelineGradientStrokeBGRA);
+        const pipelineBGRA_noMSAA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": 1
+            }
+        });
+        this.pipelines.set("gradient_fill_bgra_no_msaa", pipelineBGRA_noMSAA);
+        const pipelineRGBAStencil = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_fill_stencil", pipelineRGBAStencil);
+        const pipelineRGBAStencilAtlas = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": stencilFragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_fill_stencil_atlas", pipelineRGBAStencilAtlas);
+        const pipelineStencilMain = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": stencilFragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": 1
+            }
+        });
+        this.pipelines.set("gradient_fill_stencil_main", pipelineStencilMain);
+        const pipelineBGRAStencil = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "equal",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0x00
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("gradient_fill_bgra_stencil", pipelineBGRAStencil);
+    }
+    createBitmapFillPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("bitmap_fill", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        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 pipelineRGBA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        const pipelineBGRA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("bitmap_fill", pipelineRGBA);
+        this.pipelines.set("bitmap_fill_bgra", pipelineBGRA);
+        const bitmapStrokeStencilState = {
+            "format": "stencil8",
+            "stencilFront": {
+                "compare": "always",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilBack": {
+                "compare": "always",
+                "failOp": "keep",
+                "depthFailOp": "keep",
+                "passOp": "keep"
+            },
+            "stencilReadMask": 0x00,
+            "stencilWriteMask": 0x00
+        };
+        const pipelineBitmapStrokeAtlas = this.device.createRenderPipeline({
+            "label": "bitmap_stroke_atlas_pipeline",
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": bitmapStrokeStencilState,
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("bitmap_stroke_atlas", pipelineBitmapStrokeAtlas);
+        const pipelineBitmapStrokeBGRA = this.device.createRenderPipeline({
+            "label": "bitmap_stroke_bgra_pipeline",
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": bitmapStrokeStencilState,
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("bitmap_stroke_bgra", pipelineBitmapStrokeBGRA);
+        const pipelineRGBAStencil = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "not-equal",
+                    "failOp": "keep",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("bitmap_fill_stencil", pipelineRGBAStencil);
+        const pipelineBGRAStencil = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": { "yFlipSign": -1.0 }
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": this.format,
+                        "blend": blendState
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "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("bitmap_fill_bgra_stencil", pipelineBGRAStencil);
+    }
+    createBlendPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 3,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                },
+                {
+                    "binding": 4,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 5,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("blend", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("basicVertex", ShaderSource.getBasicVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("blendFragment", ShaderSource.getBlendFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [{
+                        "arrayStride": 4 * 4,
+                        "attributes": [
+                            {
+                                "shaderLocation": 0,
+                                "offset": 0,
+                                "format": "float32x2"
+                            },
+                            {
+                                "shaderLocation": 1,
+                                "offset": 2 * 4,
+                                "format": "float32x2"
+                            }
+                        ]
+                    }]
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("blend", pipeline);
+    }
+    createBlurFilterPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("blur_filter", bindGroupLayout);
+        const vertexShaderModule = this.getOrCreateShaderModule("blurFilterVertex", ShaderSource.getBlurFilterVertexShader());
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        for (let halfBlur = 1; halfBlur <= 16; halfBlur++) {
+            const fragmentShaderModule = this.getOrCreateShaderModule(`blurFilterFragment_${halfBlur}`, ShaderSource.getBlurFilterFragmentShader(halfBlur));
+            const pipeline = this.device.createRenderPipeline({
+                "layout": pipelineLayout,
+                "vertex": {
+                    "module": vertexShaderModule,
+                    "entryPoint": "main",
+                    "buffers": []
+                },
+                "fragment": {
+                    "module": fragmentShaderModule,
+                    "entryPoint": "main",
+                    "targets": [{
+                            "format": "rgba8unorm",
+                            "blend": {
+                                "color": {
+                                    "srcFactor": "one",
+                                    "dstFactor": "zero",
+                                    "operation": "add"
+                                },
+                                "alpha": {
+                                    "srcFactor": "one",
+                                    "dstFactor": "zero",
+                                    "operation": "add"
+                                }
+                            }
+                        }]
+                },
+                "primitive": {
+                    "topology": "triangle-list",
+                    "cullMode": "none"
+                }
+            });
+            this.pipelines.set(`blur_filter_${halfBlur}`, pipeline);
+        }
+    }
+    createTextureCopyPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("texture_copy", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("blurFilterVertex", ShaderSource.getBlurFilterVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("textureCopyFragment", ShaderSource.getTextureCopyFragmentShader());
+        const BLEND_REPLACE = {
+            "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }
+        };
+        const BLEND_ALPHA = {
+            "color": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" }
+        };
+        const BLEND_ERASE = {
+            "color": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" },
+            "alpha": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" }
+        };
+        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));
+        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());
+        this.pipelines.set("y_flip_color_transform", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, yFlipCTFragmentModule, "rgba8unorm", BLEND_REPLACE));
+        const blurCopyFragmentModule = this.getOrCreateShaderModule("blurTextureCopyFragment", ShaderSource.getBlurTextureCopyFragmentShader());
+        this.pipelines.set("texture_erase", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, blurCopyFragmentModule, "rgba8unorm", BLEND_ERASE));
+        this.pipelines.set("blur_texture_copy", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, blurCopyFragmentModule, "rgba8unorm", BLEND_REPLACE));
+        this.pipelines.set("filter_blend", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, this.format, BLEND_ALPHA));
+        this.pipelines.set("texture_copy_bgra", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, this.format, BLEND_REPLACE));
+        const filterOutputShaderModule = this.getOrCreateShaderModule("filterOutputFragment", ShaderSource.getFilterOutputFragmentShader());
+        this.pipelines.set("filter_output", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, BLEND_ALPHA));
+        const filterOutputBlendVariants = [
+            ["filter_output_add", { "color": { "srcFactor": "one", "dstFactor": "one", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "one", "operation": "add" } }],
+            ["filter_output_screen", { "color": { "srcFactor": "one", "dstFactor": "one-minus-src", "operation": "add" }, "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" } }],
+            ["filter_output_alpha", { "color": { "srcFactor": "zero", "dstFactor": "src-alpha", "operation": "add" }, "alpha": { "srcFactor": "zero", "dstFactor": "src-alpha", "operation": "add" } }],
+            ["filter_output_erase", { "color": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" }, "alpha": { "srcFactor": "zero", "dstFactor": "one-minus-src-alpha", "operation": "add" } }]
+        ];
+        for (const [name, blend] of filterOutputBlendVariants) {
+            this.pipelines.set(name, this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, blend));
+        }
+        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));
+            const normalBlend = { "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_msaa", this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, normalBlend, this.sampleCount));
+            for (const [name, blend] of filterOutputBlendVariants) {
+                this.pipelines.set(`${name}_msaa`, this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, filterOutputShaderModule, this.format, blend, this.sampleCount));
+            }
+        }
+        this.createPositionedTexturePipeline();
+        this.createTextureScalePipeline();
+    }
+    createPositionedTexturePipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("positioned_texture", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("positionedTextureVertex", ShaderSource.getPositionedTextureVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("positionedTextureFragment", ShaderSource.getPositionedTextureFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "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"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("positioned_texture", pipeline);
+        const pipelineRGBA = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "one-minus-src-alpha",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("positioned_texture_rgba", pipelineRGBA);
+        const pipelineMsaa = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": 4
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                }
+            }
+        });
+        this.pipelines.set("bitmap_render_msaa", pipelineMsaa);
+        const pipelineNonMsaa = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "keep",
+                    "depthFailOp": "keep",
+                    "passOp": "keep"
+                }
+            }
+        });
+        this.pipelines.set("bitmap_render", pipelineNonMsaa);
+    }
+    createTextureScalePipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("texture_scale", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("textureScaleVertex", ShaderSource.getTextureScaleVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("positionedTextureFragment", ShaderSource.getPositionedTextureFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("texture_scale", pipeline);
+        const blendVertexShaderModule = this.getOrCreateShaderModule("textureScaleBlendVertex", ShaderSource.getTextureScaleBlendVertexShader());
+        const blendPipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": blendVertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("texture_scale_blend", blendPipeline);
+    }
+    createBitmapSyncPipeline() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.VERTEX,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": { "type": "filtering" }
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": { "sampleType": "float" }
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("bitmap_sync", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("bitmapSyncVertex", ShaderSource.getBitmapSyncVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("bitmapSyncFragment", ShaderSource.getBitmapSyncFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "multisample": {
+                "count": 4
+            }
+        });
+        this.pipelines.set("bitmap_sync", pipeline);
+    }
+    createColorMatrixFilterPipeline() {
+        const BLEND_REPLACE = {
+            "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }
+        };
+        const BLEND_ALPHA = {
+            "color": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" }
+        };
+        this.createFilterPipelineWithLayout("color_matrix_filter", ShaderSource.getColorMatrixFilterFragmentShader(), 1, BLEND_REPLACE);
+        this.createFilterPipelineWithLayout("bevel_base", ShaderSource.getBevelBaseFragmentShader(), 1, BLEND_REPLACE);
+        this.createFilterPipelineWithLayout("glow_filter", ShaderSource.getGlowFilterFragmentShader(), 2, BLEND_ALPHA);
+        this.createFilterPipelineWithLayout("drop_shadow_filter", ShaderSource.getDropShadowFilterFragmentShader(), 2, BLEND_ALPHA);
+        this.createFilterPipelineWithLayout("bevel_filter", ShaderSource.getBevelFilterFragmentShader(), 2, BLEND_ALPHA);
+        this.createFilterPipelineWithLayout("gradient_glow_filter", ShaderSource.getGradientGlowFilterFragmentShader(), 3, BLEND_ALPHA);
+        this.createFilterPipelineWithLayout("gradient_bevel_filter", ShaderSource.getGradientBevelFilterFragmentShader(), 3, BLEND_ALPHA);
+    }
+    createComplexBlendPipelines() {
+        const bindGroupLayout = this.device.createBindGroupLayout({
+            "entries": [
+                {
+                    "binding": 0,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "buffer": { "type": "uniform" }
+                },
+                {
+                    "binding": 1,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "sampler": {}
+                },
+                {
+                    "binding": 2,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                },
+                {
+                    "binding": 3,
+                    "visibility": GPUShaderStage.FRAGMENT,
+                    "texture": {}
+                }
+            ]
+        });
+        this.bindGroupLayouts.set("complex_blend", bindGroupLayout);
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        const vertexShaderModule = this.getOrCreateShaderModule("complexBlendVertex", ShaderSource.getComplexBlendVertexShader());
+        const fragmentShaderModule = this.getOrCreateShaderModule("unifiedComplexBlendFragment", ShaderSource.getUnifiedComplexBlendFragmentShader());
+        const pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexShaderModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentShaderModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        }
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set("complex_blend", pipeline);
+        this.createComplexBlendCopyPipeline();
+        this.createComplexBlendOutputPipeline();
+    }
+    createComplexBlendCopyPipeline() {
+        const BLEND_REPLACE = {
+            "color": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "zero", "operation": "add" }
+        };
+        const copyLayout = this.bindGroupLayouts.get("texture_copy");
+        if (copyLayout) {
+            const copyPipelineLayout = this.device.createPipelineLayout({ "bindGroupLayouts": [copyLayout] });
+            const copyVS = this.getOrCreateShaderModule("complexBlendCopyVertex", ShaderSource.getComplexBlendCopyVertexShader());
+            const copyFS = this.getOrCreateShaderModule("textureCopyFragment", ShaderSource.getTextureCopyFragmentShader());
+            this.pipelines.set("complex_blend_copy", this.createFullscreenQuadPipeline(copyPipelineLayout, copyVS, copyFS, "rgba8unorm", BLEND_REPLACE));
+        }
+        const scaleLayout = this.bindGroupLayouts.get("texture_scale");
+        if (scaleLayout) {
+            const scalePipelineLayout = this.device.createPipelineLayout({ "bindGroupLayouts": [scaleLayout] });
+            const scaleVS = this.getOrCreateShaderModule("complexBlendScaleVertex", ShaderSource.getComplexBlendScaleVertexShader());
+            const scaleFS = this.getOrCreateShaderModule("positionedTextureFragment", ShaderSource.getPositionedTextureFragmentShader());
+            this.pipelines.set("complex_blend_scale", this.createFullscreenQuadPipeline(scalePipelineLayout, scaleVS, scaleFS, "rgba8unorm", BLEND_REPLACE));
+        }
+    }
+    createComplexBlendOutputPipeline() {
+        const bindGroupLayout = this.bindGroupLayouts.get("positioned_texture");
+        if (!bindGroupLayout) {
+            return;
+        }
+        const pipelineLayout = this.device.createPipelineLayout({ "bindGroupLayouts": [bindGroupLayout] });
+        const fragmentShaderModule = this.getOrCreateShaderModule("positionedTextureFragment", ShaderSource.getPositionedTextureFragmentShader());
+        const blend = {
+            "color": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" },
+            "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" }
+        };
+        const blendOutputVS = this.getOrCreateShaderModule("complexBlendOutputVertex", ShaderSource.getComplexBlendOutputVertexShader());
+        this.pipelines.set("complex_blend_output", this.createFullscreenQuadPipeline(pipelineLayout, blendOutputVS, fragmentShaderModule, this.format, blend));
+        if (this.sampleCount > 1) {
+            this.pipelines.set("complex_blend_output_msaa", this.createFullscreenQuadPipeline(pipelineLayout, blendOutputVS, fragmentShaderModule, this.format, blend, this.sampleCount));
+        }
+        const filterBlendOutputVS = this.getOrCreateShaderModule("filterComplexBlendOutputVertex", ShaderSource.getFilterComplexBlendOutputVertexShader());
+        this.pipelines.set("filter_complex_blend_output", this.createFullscreenQuadPipeline(pipelineLayout, filterBlendOutputVS, fragmentShaderModule, this.format, blend));
+        if (this.sampleCount > 1) {
+            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);
+        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++) {
+                entries.push({ "binding": 2 + i, "visibility": GPUShaderStage.FRAGMENT, "texture": {} });
+            }
+            bindGroupLayout = this.device.createBindGroupLayout({ "entries": entries });
+            this.filterBindGroupLayouts.set(textureCount, 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);
+        this.pipelines.set(name, this.createFullscreenQuadPipeline(pipelineLayout, vertexShaderModule, fragmentShaderModule, "rgba8unorm", blend));
+    }
+    createFullscreenQuadPipeline(pipelineLayout, vertexModule, fragmentModule, format, blend, multisampleCount, depthStencil) {
+        const descriptor = {
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentModule,
+                "entryPoint": "main",
+                "targets": [{ "format": format, "blend": blend }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        };
+        if (multisampleCount && multisampleCount > 1) {
+            descriptor.multisample = { "count": multisampleCount };
+        }
+        if (depthStencil) {
+            descriptor.depthStencil = depthStencil;
+        }
+        return this.device.createRenderPipeline(descriptor);
+    }
+    getPipeline(name) {
+        let pipeline = this.pipelines.get(name);
+        if (!pipeline) {
+            this.ensureLazyGroup(name);
+            pipeline = this.pipelines.get(name);
+        }
+        return pipeline;
+    }
+    /**
+     * @description フィルターパイプラインのoverride定数バリアントを取得
+     *              GPU warp divergenceを排除するコンパイル時分岐特殊化
+     */
+    getFilterPipeline(baseName, constants) {
+        // キャッシュキーを生成
+        const keys = Object.keys(constants).sort();
+        const suffix = keys.map((k) => `${k}${constants[k]}`).join("_");
+        const cacheKey = `${baseName}_${suffix}`;
+        let pipeline = this.pipelines.get(cacheKey);
+        if (pipeline) {
+            return pipeline;
+        }
+        // ベースグループのロードを確保
+        this.ensureLazyGroup(baseName);
+        const fragmentModule = this.shaderModuleCache.get(`filter_${baseName}`);
+        const vertexModule = this.shaderModuleCache.get("blurFilterVertex");
+        const bindGroupLayout = this.bindGroupLayouts.get(baseName);
+        if (!fragmentModule || !vertexModule || !bindGroupLayout) {
+            return this.pipelines.get(baseName);
+        }
+        const pipelineLayout = this.device.createPipelineLayout({
+            "bindGroupLayouts": [bindGroupLayout]
+        });
+        pipeline = this.device.createRenderPipeline({
+            "layout": pipelineLayout,
+            "vertex": {
+                "module": vertexModule,
+                "entryPoint": "main",
+                "buffers": []
+            },
+            "fragment": {
+                "module": fragmentModule,
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" },
+                            "alpha": { "srcFactor": "one", "dstFactor": "one-minus-src-alpha", "operation": "add" }
+                        }
+                    }],
+                "constants": constants
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            }
+        });
+        this.pipelines.set(cacheKey, pipeline);
+        return pipeline;
+    }
+    /**
+     * @description グラデーションタイプとスプレッドモードに応じた特殊化パイプラインを取得
+     *              override定数でGPU warp divergenceを排除
+     */
+    getGradientPipeline(baseName, gradientType, spreadMode) {
+        const key = `${baseName}_t${gradientType}s${spreadMode}`;
+        let pipeline = this.pipelines.get(key);
+        if (pipeline) {
+            return pipeline;
+        }
+        if (!this.gradientPipelineLayout) {
+            return this.getPipeline(baseName);
+        }
+        // ベースパイプラインと同じ構成でoverride定数を変えて作成
+        pipeline = this.createGradientVariant(baseName, gradientType, spreadMode);
+        if (pipeline) {
+            this.pipelines.set(key, pipeline);
+            return pipeline;
+        }
+        // フォールバック: デフォルト定数のベースパイプラインを使用
+        return this.getPipeline(baseName);
+    }
+    createGradientVariant(baseName, gradientType, spreadMode) {
+        if (!this.gradientPipelineLayout) {
+            return undefined;
+        }
+        const constants = {
+            "GRADIENT_TYPE": gradientType,
+            "SPREAD_MODE": spreadMode
+        };
+        const vertexBufferLayout = VERTEX_BUFFER_LAYOUT_4F;
+        const blendState = BLEND_PREMULTIPLIED_ALPHA;
+        // ベース名からパイプライン構成を決定
+        const isStencilFragment = baseName.includes("stencil_atlas") || baseName === "gradient_fill_stencil_main";
+        const fragModule = isStencilFragment ? this.gradientStencilFragmentShaderModule : this.gradientFragmentShaderModule;
+        const isBGRA = baseName.includes("bgra") || baseName === "gradient_fill_stencil_main";
+        const format = isBGRA ? this.format : "rgba8unorm";
+        const needsYFlip = baseName.includes("bgra") || baseName === "gradient_fill_stencil_main";
+        const vertexConstants = {};
+        if (needsYFlip) {
+            vertexConstants.yFlipSign = -1.0;
+        }
+        let depthStencil;
+        let sampleCount = this.sampleCount;
+        if (baseName.includes("stroke")) {
+            depthStencil = {
+                "format": "stencil8",
+                "stencilFront": { "compare": "always", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                "stencilBack": { "compare": "always", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                "stencilReadMask": 0x00,
+                "stencilWriteMask": 0x00
+            };
+        }
+        else if (baseName === "gradient_fill_stencil" || baseName === "gradient_fill_stencil_atlas") {
+            depthStencil = {
+                "format": "stencil8",
+                "stencilFront": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
+                "stencilBack": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            };
+        }
+        else if (baseName === "gradient_fill_stencil_main") {
+            depthStencil = {
+                "format": "stencil8",
+                "stencilFront": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
+                "stencilBack": { "compare": "not-equal", "failOp": "keep", "depthFailOp": "zero", "passOp": "zero" },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            };
+            sampleCount = 1;
+        }
+        else if (baseName === "gradient_fill_bgra_stencil") {
+            depthStencil = {
+                "format": "stencil8",
+                "stencilFront": { "compare": "equal", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                "stencilBack": { "compare": "equal", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0x00
+            };
+        }
+        else if (baseName === "gradient_fill_bgra_no_msaa") {
+            sampleCount = 1;
+        }
+        const descriptor = {
+            "layout": this.gradientPipelineLayout,
+            "vertex": {
+                "module": this.gradientVertexShaderModule,
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout],
+                "constants": Object.keys(vertexConstants).length > 0 ? vertexConstants : undefined
+            },
+            "fragment": {
+                "module": fragModule,
+                "entryPoint": "main",
+                "targets": [{ "format": format, "blend": blendState }],
+                "constants": constants
+            },
+            "primitive": { "topology": "triangle-list", "cullMode": "none" },
+            "multisample": { "count": sampleCount }
+        };
+        if (depthStencil) {
+            descriptor.depthStencil = depthStencil;
+        }
+        return this.device.createRenderPipeline(descriptor);
+    }
+    getBindGroupLayout(name) {
+        let layout = this.bindGroupLayouts.get(name);
+        if (!layout) {
+            this.ensureLazyGroup(name);
+            layout = this.bindGroupLayouts.get(name);
+        }
+        return layout;
+    }
+    createNodeClearPipeline() {
+        const vertexBufferLayout = {
+            "arrayStride": 2 * 4,
+            "attributes": [
+                {
+                    "shaderLocation": 0,
+                    "offset": 0,
+                    "format": "float32x2"
+                }
+            ]
+        };
+        const nodeClearPipeline = this.device.createRenderPipeline({
+            "layout": "auto",
+            "vertex": {
+                "module": this.getOrCreateShaderModule("nodeClearVertex", ShaderSource.getNodeClearVertexShader()),
+                "entryPoint": "main",
+                "buffers": [vertexBufferLayout]
+            },
+            "fragment": {
+                "module": this.getOrCreateShaderModule("nodeClearFragment", ShaderSource.getNodeClearFragmentShader()),
+                "entryPoint": "main",
+                "targets": [{
+                        "format": "rgba8unorm",
+                        "blend": {
+                            "color": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            },
+                            "alpha": {
+                                "srcFactor": "one",
+                                "dstFactor": "zero",
+                                "operation": "add"
+                            }
+                        },
+                        "writeMask": GPUColorWrite.ALL
+                    }]
+            },
+            "primitive": {
+                "topology": "triangle-list",
+                "cullMode": "none"
+            },
+            "depthStencil": {
+                "format": "stencil8",
+                "stencilFront": {
+                    "compare": "always",
+                    "failOp": "zero",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilBack": {
+                    "compare": "always",
+                    "failOp": "zero",
+                    "depthFailOp": "zero",
+                    "passOp": "zero"
+                },
+                "stencilReadMask": 0xFF,
+                "stencilWriteMask": 0xFF
+            },
+            "multisample": {
+                "count": this.sampleCount
+            }
+        });
+        this.pipelines.set("node_clear_atlas", nodeClearPipeline);
+    }
+    dispose() {
+        this.pipelines.clear();
+        this.bindGroupLayouts.clear();
+        this.shaderModuleCache.clear();
+        this.filterBindGroupLayouts.clear();
+    }
+}