@next2d/webgpu 3.0.0

package/src/Shader/wgsl/fragment/FilterFragment.js

@@ -0,0 +1,212 @@
+import { WgslVertexOutput } from "../common/SharedWgsl";
+export const TextureCopyFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct CopyUniforms {
+    scale: vec2<f32>,
+    offset: vec2<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: CopyUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let uv = input.texCoord * uniforms.scale + uniforms.offset;
+    return textureSampleLevel(inputTexture, textureSampler, uv, 0);
+}
+`;
+export const BlurTextureCopyFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct CopyUniforms {
+    scale: vec2<f32>,
+    offset: vec2<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: CopyUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let uv = (input.texCoord - uniforms.offset) * uniforms.scale;
+    let clampedUv = clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0));
+    let color = textureSampleLevel(inputTexture, textureSampler, clampedUv, 0);
+    let inBounds = uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0;
+    return select(vec4<f32>(0.0, 0.0, 0.0, 0.0), color, inBounds);
+}
+`;
+export const FilterOutputFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct CopyUniforms {
+    scale: vec2<f32>,
+    offset: vec2<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: CopyUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let uv = input.texCoord * uniforms.scale + uniforms.offset;
+    let clampedUv = clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0));
+    let color = textureSampleLevel(inputTexture, textureSampler, clampedUv, 0);
+    let inBounds = uv.x >= 0.0 && uv.x <= 1.0 && uv.y >= 0.0 && uv.y <= 1.0;
+    return select(vec4<f32>(0.0, 0.0, 0.0, 0.0), color, inBounds);
+}
+`;
+export const ColorTransformFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct ColorTransformUniforms {
+    mul: vec4<f32>,
+    add: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> ct: ColorTransformUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    var color = textureSampleLevel(inputTexture, textureSampler, input.texCoord, 0);
+
+    color = vec4<f32>(color.rgb / max(vec3<f32>(0.0001), vec3<f32>(color.a)), color.a);
+    color = clamp(color * ct.mul + ct.add, vec4<f32>(0.0), vec4<f32>(1.0));
+    color = vec4<f32>(color.rgb * color.a, color.a);
+
+    return color;
+}
+`;
+export const YFlipColorTransformFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct YFlipCTUniforms {
+    scale: vec2<f32>,
+    offset: vec2<f32>,
+    mul: vec4<f32>,
+    add: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: YFlipCTUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let uv = input.texCoord * uniforms.scale + uniforms.offset;
+    var color = textureSampleLevel(inputTexture, textureSampler, uv, 0);
+
+    color = vec4<f32>(color.rgb / max(vec3<f32>(0.0001), vec3<f32>(color.a)), color.a);
+    color = clamp(color * uniforms.mul + uniforms.add, vec4<f32>(0.0), vec4<f32>(1.0));
+    color = vec4<f32>(color.rgb * color.a, color.a);
+
+    return color;
+}
+`;
+export const ColorMatrixFilterFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+struct ColorMatrixUniforms {
+    matrix: mat4x4<f32>,
+    offset: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: ColorMatrixUniforms;
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    var color = textureSampleLevel(inputTexture, textureSampler, input.texCoord, 0);
+
+    color = vec4<f32>(color.rgb / max(vec3<f32>(0.0001), vec3<f32>(color.a)), color.a);
+    var result = uniforms.matrix * color + uniforms.offset;
+    result = clamp(result, vec4<f32>(0.0), vec4<f32>(1.0));
+    result = vec4<f32>(result.rgb * result.a, result.a);
+
+    return result;
+}
+`;
+export const NodeClearFragment = /* wgsl */ `
+@fragment
+fn main() -> @location(0) vec4<f32> {
+    return vec4<f32>(0.0, 0.0, 0.0, 0.0);
+}
+`;
+export const PositionedTextureFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    return textureSampleLevel(inputTexture, textureSampler, input.texCoord, 0);
+}
+`;
+export const BitmapSyncFragment = /* wgsl */ `
+${WgslVertexOutput}
+
+@group(0) @binding(1) var textureSampler: sampler;
+@group(0) @binding(2) var inputTexture: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    return textureSampleLevel(inputTexture, textureSampler, input.texCoord, 0);
+}
+`;
+export const BlendGenericFragment = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+
+struct BlendUniforms {
+    blendMode: f32,
+}
+
+@group(0) @binding(1) var<uniform> blend: BlendUniforms;
+@group(0) @binding(2) var srcSampler: sampler;
+@group(0) @binding(3) var srcTexture: texture_2d<f32>;
+@group(0) @binding(4) var dstSampler: sampler;
+@group(0) @binding(5) var dstTexture: texture_2d<f32>;
+
+fn blendNormal(src: vec4<f32>, dst: vec4<f32>) -> vec4<f32> {
+    return src;
+}
+
+fn blendMultiply(src: vec4<f32>, dst: vec4<f32>) -> vec4<f32> {
+    return src * dst;
+}
+
+fn blendScreen(src: vec4<f32>, dst: vec4<f32>) -> vec4<f32> {
+    return src + dst - src * dst;
+}
+
+fn blendAdd(src: vec4<f32>, dst: vec4<f32>) -> vec4<f32> {
+    return min(src + dst, vec4<f32>(1.0));
+}
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let src = textureSampleLevel(srcTexture, srcSampler, input.texCoord, 0);
+    let dst = textureSampleLevel(dstTexture, dstSampler, input.texCoord, 0);
+    var result: vec4<f32>;
+    if (blend.blendMode < 0.5) {
+        result = blendNormal(src, dst);
+    } else if (blend.blendMode < 1.5) {
+        result = blendMultiply(src, dst);
+    } else if (blend.blendMode < 2.5) {
+        result = blendScreen(src, dst);
+    } else {
+        result = blendAdd(src, dst);
+    }
+    return result * input.color;
+}
+`;

package/src/Shader/wgsl/fragment/GradientFragment.d.ts

@@ -0,0 +1,3 @@
+export declare const GradientFillFragment = "\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) v_uv: vec2<f32>,\n    @location(1) bezier: vec2<f32>,\n    @location(2) color: vec4<f32>,\n}\n\nstruct GradientUniforms {\n    inverseMatrix: mat3x3<f32>,\n    gradientType: f32,\n    focal: f32,\n    spread: f32,\n    radius: f32,\n    linearPoints: vec4<f32>,\n}\n\n@group(0) @binding(0) var<uniform> gradient: GradientUniforms;\n@group(0) @binding(1) var gradientSampler: sampler;\n@group(0) @binding(2) var gradientTexture: texture_2d<f32>;\n\noverride GRADIENT_TYPE: u32 = 0u;\noverride SPREAD_MODE: u32 = 2u;\n\nfn applySpread(t: f32) -> f32 {\n    if (SPREAD_MODE == 0u) {\n        return 1.0 - abs(fract(t * 0.5) * 2.0 - 1.0);\n    } else if (SPREAD_MODE == 1u) {\n        return fract(t);\n    } else {\n        return clamp(t, 0.0, 1.0);\n    }\n}\n\n\n@fragment\nfn main(input: VertexOutput) -> @location(0) vec4<f32> {\n    let p = input.v_uv;\n\n    var t: f32;\n    if (GRADIENT_TYPE == 0u) {\n        let a = gradient.linearPoints.xy;\n        let b = gradient.linearPoints.zw;\n        let ab = b - a;\n        let ap = p - a;\n        let dotAB = dot(ab, ab);\n        if (dotAB < 0.0001) {\n            t = 0.0;\n        } else {\n            t = dot(ab, ap) / dotAB;\n        }\n    } else {\n        let r = gradient.radius;\n        let coord = p / r;\n        let focalRatio = gradient.focal;\n\n        if (abs(focalRatio) < 0.001) {\n            t = length(coord);\n        } else {\n            let focal = vec2<f32>(focalRatio, 0.0);\n            let diff = coord - focal;\n            let lenDiff = length(diff);\n\n            if (lenDiff < 0.0001) {\n                t = 0.0;\n            } else {\n                let dir = diff / lenDiff;\n\n                // Solve quadratic equation for unit circle intersection (a=1 since dir is normalized)\n                let b_coef = 2.0 * dot(dir, focal);\n                let c_coef = dot(focal, focal) - 1.0;\n                let discriminant = b_coef * b_coef - 4.0 * c_coef;\n                let x = (-b_coef + sqrt(max(discriminant, 0.0))) * 0.5;\n                t = lenDiff / abs(x);\n            }\n        }\n    }\n    t = applySpread(t);\n    let gradientColor = textureSampleLevel(gradientTexture, gradientSampler, vec2<f32>(t, 0.5), 0);\n\n    let result = gradientColor * input.color;\n    return vec4<f32>(result.rgb * result.a, result.a);\n}\n";
+export declare const GradientFillStencilFragment = "\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) v_uv: vec2<f32>,\n    @location(1) bezier: vec2<f32>,\n    @location(2) color: vec4<f32>,\n}\n\nstruct GradientUniforms {\n    inverseMatrix: mat3x3<f32>,\n    gradientType: f32,\n    focal: f32,\n    spread: f32,\n    radius: f32,\n    linearPoints: vec4<f32>,\n}\n\n@group(0) @binding(0) var<uniform> gradient: GradientUniforms;\n@group(0) @binding(1) var gradientSampler: sampler;\n@group(0) @binding(2) var gradientTexture: texture_2d<f32>;\n\noverride GRADIENT_TYPE: u32 = 0u;\noverride SPREAD_MODE: u32 = 2u;\n\nfn applySpread(t: f32) -> f32 {\n    if (SPREAD_MODE == 0u) {\n        return 1.0 - abs(fract(t * 0.5) * 2.0 - 1.0);\n    } else if (SPREAD_MODE == 1u) {\n        return fract(t);\n    } else {\n        return clamp(t, 0.0, 1.0);\n    }\n}\n\n\n@fragment\nfn main(input: VertexOutput) -> @location(0) vec4<f32> {\n    let p = input.v_uv;\n\n    var t: f32;\n    if (GRADIENT_TYPE == 0u) {\n        let a = gradient.linearPoints.xy;\n        let b = gradient.linearPoints.zw;\n        let ab = b - a;\n        let ap = p - a;\n        let dotAB = dot(ab, ab);\n        if (dotAB < 0.0001) {\n            t = 0.0;\n        } else {\n            t = dot(ab, ap) / dotAB;\n        }\n    } else {\n        let r = gradient.radius;\n        let coord = p / r;\n        let focalRatio = gradient.focal;\n\n        if (abs(focalRatio) < 0.001) {\n            t = length(coord);\n        } else {\n            let focal = vec2<f32>(focalRatio, 0.0);\n            let diff = coord - focal;\n            let lenDiff = length(diff);\n\n            if (lenDiff < 0.0001) {\n                t = 0.0;\n            } else {\n                let dir = diff / lenDiff;\n\n                // Solve quadratic equation for unit circle intersection (a=1 since dir is normalized)\n                let b_coef = 2.0 * dot(dir, focal);\n                let c_coef = dot(focal, focal) - 1.0;\n                let discriminant = b_coef * b_coef - 4.0 * c_coef;\n                let x = (-b_coef + sqrt(max(discriminant, 0.0))) * 0.5;\n                t = lenDiff / abs(x);\n            }\n        }\n    }\n    t = applySpread(t);\n    let gradientColor = textureSampleLevel(gradientTexture, gradientSampler, vec2<f32>(t, 0.5), 0);\n\n    return vec4<f32>(gradientColor.rgb * gradientColor.a, gradientColor.a);\n}\n";
+export declare const GradientFragment = "\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n    @location(1) color: vec4<f32>,\n}\n\nstruct GradientUniforms {\n    inverseMatrix: mat3x3<f32>,\n    gradientType: f32,\n    focal: f32,\n    spread: f32,\n    radius: f32,\n    linearPoints: vec4<f32>,\n}\n\n@group(0) @binding(0) var<uniform> gradient: GradientUniforms;\n@group(0) @binding(1) var gradientSampler: sampler;\n@group(0) @binding(2) var gradientTexture: texture_2d<f32>;\n\noverride GRADIENT_TYPE: u32 = 0u;\noverride SPREAD_MODE: u32 = 2u;\n\nfn applySpread(t: f32) -> f32 {\n    if (SPREAD_MODE == 0u) {\n        return 1.0 - abs(fract(t * 0.5) * 2.0 - 1.0);\n    } else if (SPREAD_MODE == 1u) {\n        return fract(t);\n    } else {\n        return clamp(t, 0.0, 1.0);\n    }\n}\n\n\n@fragment\nfn main(input: VertexOutput) -> @location(0) vec4<f32> {\n    let p = input.texCoord;\n\n    var t: f32;\n    if (GRADIENT_TYPE == 0u) {\n        let a = gradient.linearPoints.xy;\n        let b = gradient.linearPoints.zw;\n        let ab = b - a;\n        let ap = p - a;\n        let dotAB = dot(ab, ab);\n        if (dotAB < 0.0001) {\n            t = 0.0;\n        } else {\n            t = dot(ab, ap) / dotAB;\n        }\n    } else {\n        let r = gradient.radius;\n        let coord = p / r;\n        let focalRatio = gradient.focal;\n\n        if (abs(focalRatio) < 0.001) {\n            t = length(coord);\n        } else {\n            let focal = vec2<f32>(focalRatio, 0.0);\n            let diff = coord - focal;\n            let lenDiff = length(diff);\n\n            if (lenDiff < 0.0001) {\n                t = 0.0;\n            } else {\n                let dir = diff / lenDiff;\n\n                // Solve quadratic equation for unit circle intersection (a=1 since dir is normalized)\n                let b_coef = 2.0 * dot(dir, focal);\n                let c_coef = dot(focal, focal) - 1.0;\n                let discriminant = b_coef * b_coef - 4.0 * c_coef;\n                let x = (-b_coef + sqrt(max(discriminant, 0.0))) * 0.5;\n                t = lenDiff / abs(x);\n            }\n        }\n    }\n    t = applySpread(t);\n    let gradientColor = textureSampleLevel(gradientTexture, gradientSampler, vec2<f32>(t, 0.5), 0);\n\n    let result = gradientColor * input.color;\n    return vec4<f32>(result.rgb * result.a, result.a);\n}\n";

package/src/Shader/wgsl/fragment/GradientFragment.js

@@ -0,0 +1,118 @@
+const GradientUniformsAndSpread = `
+struct GradientUniforms {
+    inverseMatrix: mat3x3<f32>,
+    gradientType: f32,
+    focal: f32,
+    spread: f32,
+    radius: f32,
+    linearPoints: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> gradient: GradientUniforms;
+@group(0) @binding(1) var gradientSampler: sampler;
+@group(0) @binding(2) var gradientTexture: texture_2d<f32>;
+
+override GRADIENT_TYPE: u32 = 0u;
+override SPREAD_MODE: u32 = 2u;
+
+fn applySpread(t: f32) -> f32 {
+    if (SPREAD_MODE == 0u) {
+        return 1.0 - abs(fract(t * 0.5) * 2.0 - 1.0);
+    } else if (SPREAD_MODE == 1u) {
+        return fract(t);
+    } else {
+        return clamp(t, 0.0, 1.0);
+    }
+}
+`;
+const GradientCalculation = `
+    var t: f32;
+    if (GRADIENT_TYPE == 0u) {
+        let a = gradient.linearPoints.xy;
+        let b = gradient.linearPoints.zw;
+        let ab = b - a;
+        let ap = p - a;
+        let dotAB = dot(ab, ab);
+        if (dotAB < 0.0001) {
+            t = 0.0;
+        } else {
+            t = dot(ab, ap) / dotAB;
+        }
+    } else {
+        let r = gradient.radius;
+        let coord = p / r;
+        let focalRatio = gradient.focal;
+
+        if (abs(focalRatio) < 0.001) {
+            t = length(coord);
+        } else {
+            let focal = vec2<f32>(focalRatio, 0.0);
+            let diff = coord - focal;
+            let lenDiff = length(diff);
+
+            if (lenDiff < 0.0001) {
+                t = 0.0;
+            } else {
+                let dir = diff / lenDiff;
+
+                // Solve quadratic equation for unit circle intersection (a=1 since dir is normalized)
+                let b_coef = 2.0 * dot(dir, focal);
+                let c_coef = dot(focal, focal) - 1.0;
+                let discriminant = b_coef * b_coef - 4.0 * c_coef;
+                let x = (-b_coef + sqrt(max(discriminant, 0.0))) * 0.5;
+                t = lenDiff / abs(x);
+            }
+        }
+    }
+    t = applySpread(t);
+    let gradientColor = textureSampleLevel(gradientTexture, gradientSampler, vec2<f32>(t, 0.5), 0);
+`;
+export const GradientFillFragment = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) v_uv: vec2<f32>,
+    @location(1) bezier: vec2<f32>,
+    @location(2) color: vec4<f32>,
+}
+${GradientUniformsAndSpread}
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let p = input.v_uv;
+${GradientCalculation}
+    let result = gradientColor * input.color;
+    return vec4<f32>(result.rgb * result.a, result.a);
+}
+`;
+export const GradientFillStencilFragment = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) v_uv: vec2<f32>,
+    @location(1) bezier: vec2<f32>,
+    @location(2) color: vec4<f32>,
+}
+${GradientUniformsAndSpread}
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let p = input.v_uv;
+${GradientCalculation}
+    return vec4<f32>(gradientColor.rgb * gradientColor.a, gradientColor.a);
+}
+`;
+export const GradientFragment = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+${GradientUniformsAndSpread}
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    let p = input.texCoord;
+${GradientCalculation}
+    let result = gradientColor * input.color;
+    return vec4<f32>(result.rgb * result.a, result.a);
+}
+`;

package/src/Shader/wgsl/fragment/InstancedFragment.d.ts

@@ -0,0 +1 @@
+export declare const InstancedFragment = "\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n    @location(1) mulColor: vec4<f32>,\n    @location(2) addColor: vec4<f32>,\n}\n\n@group(0) @binding(0) var textureSampler: sampler;\n@group(0) @binding(1) var textureData: texture_2d<f32>;\n\n@fragment\nfn main(input: VertexOutput) -> @location(0) vec4<f32> {\n    var src = textureSample(textureData, textureSampler, input.texCoord);\n    src = vec4<f32>(src.rgb / max(0.0001, src.a), src.a);\n    src = clamp(src * input.mulColor + input.addColor, vec4<f32>(0.0), vec4<f32>(1.0));\n    src = vec4<f32>(src.rgb * src.a, src.a);\n    return src;\n}\n";

package/src/Shader/wgsl/fragment/InstancedFragment.js

@@ -0,0 +1,20 @@
+export const InstancedFragment = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) mulColor: vec4<f32>,
+    @location(2) addColor: vec4<f32>,
+}
+
+@group(0) @binding(0) var textureSampler: sampler;
+@group(0) @binding(1) var textureData: texture_2d<f32>;
+
+@fragment
+fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+    var src = textureSample(textureData, textureSampler, input.texCoord);
+    src = vec4<f32>(src.rgb / max(0.0001, src.a), src.a);
+    src = clamp(src * input.mulColor + input.addColor, vec4<f32>(0.0), vec4<f32>(1.0));
+    src = vec4<f32>(src.rgb * src.a, src.a);
+    return src;
+}
+`;

package/src/Shader/wgsl/fragment/MaskFragment.d.ts

@@ -0,0 +1 @@
+export declare const MaskFragment = "\nstruct FragmentInput {\n    @location(0) bezier: vec2<f32>,\n}\n\n@fragment\nfn main(input: FragmentInput) -> @location(0) vec4<f32> {\n    let px = dpdx(input.bezier);\n    let py = dpdy(input.bezier);\n    let f = (2.0 * input.bezier.x) * vec2<f32>(px.x, py.x) - vec2<f32>(px.y, py.y);\n    let alpha = 0.5 - (input.bezier.x * input.bezier.x - input.bezier.y) / length(f);\n    if (alpha <= 0.0) {\n        discard;\n    }\n    return vec4<f32>(min(alpha, 1.0));\n}\n";

package/src/Shader/wgsl/fragment/MaskFragment.js

@@ -0,0 +1,17 @@
+export const MaskFragment = /* wgsl */ `
+struct FragmentInput {
+    @location(0) bezier: vec2<f32>,
+}
+
+@fragment
+fn main(input: FragmentInput) -> @location(0) vec4<f32> {
+    let px = dpdx(input.bezier);
+    let py = dpdy(input.bezier);
+    let f = (2.0 * input.bezier.x) * vec2<f32>(px.x, py.x) - vec2<f32>(px.y, py.y);
+    let alpha = 0.5 - (input.bezier.x * input.bezier.x - input.bezier.y) / length(f);
+    if (alpha <= 0.0) {
+        discard;
+    }
+    return vec4<f32>(min(alpha, 1.0));
+}
+`;

package/src/Shader/wgsl/fragment/StencilFragment.d.ts

@@ -0,0 +1,2 @@
+export declare const StencilWriteFragment = "\nstruct FragmentInput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) bezier: vec2<f32>,\n}\n\n@fragment\nfn main(input: FragmentInput) -> @location(0) vec4<f32> {\n    let f_val = input.bezier.x * input.bezier.x - input.bezier.y;\n    let dx = dpdx(f_val);\n    let dy = dpdy(f_val);\n    let dist = f_val * inverseSqrt(dx * dx + dy * dy);\n    let alpha = smoothstep(0.5, -0.5, dist);\n\n    if (alpha <= 0.001) {\n        discard;\n    }\n\n    return vec4<f32>(0.0, 0.0, 0.0, min(alpha, 1.0));\n}\n";
+export declare const StencilFillFragment = "\nstruct FragmentInput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) color: vec4<f32>,\n}\n\n@fragment\nfn main(input: FragmentInput) -> @location(0) vec4<f32> {\n    let a = input.color.a;\n    return vec4<f32>(input.color.r * a, input.color.g * a, input.color.b * a, a);\n}\n";

package/src/Shader/wgsl/fragment/StencilFragment.js

@@ -0,0 +1,33 @@
+export const StencilWriteFragment = /* wgsl */ `
+struct FragmentInput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) bezier: vec2<f32>,
+}
+
+@fragment
+fn main(input: FragmentInput) -> @location(0) vec4<f32> {
+    let f_val = input.bezier.x * input.bezier.x - input.bezier.y;
+    let dx = dpdx(f_val);
+    let dy = dpdy(f_val);
+    let dist = f_val * inverseSqrt(dx * dx + dy * dy);
+    let alpha = smoothstep(0.5, -0.5, dist);
+
+    if (alpha <= 0.001) {
+        discard;
+    }
+
+    return vec4<f32>(0.0, 0.0, 0.0, min(alpha, 1.0));
+}
+`;
+export const StencilFillFragment = /* wgsl */ `
+struct FragmentInput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+}
+
+@fragment
+fn main(input: FragmentInput) -> @location(0) vec4<f32> {
+    let a = input.color.a;
+    return vec4<f32>(input.color.r * a, input.color.g * a, input.color.b * a, a);
+}
+`;

package/src/Shader/wgsl/vertex/BasicVertex.d.ts

@@ -0,0 +1 @@
+export declare const BasicVertex = "\noverride yFlipSign: f32 = 1.0;\n\nstruct VertexInput {\n    @location(0) position: vec2<f32>,\n    @location(1) texCoord: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n    @location(1) color: vec4<f32>,\n}\n\nstruct Uniforms {\n    matrix: mat3x3<f32>,\n    color: vec4<f32>,\n    alpha: f32,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: Uniforms;\n\n@vertex\nfn main(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n    let pos = uniforms.matrix * vec3<f32>(input.position, 1.0);\n    let ndc = pos.xy * 2.0 - 1.0;\n    output.position = vec4<f32>(ndc.x, ndc.y * yFlipSign, 0.0, 1.0);\n    output.texCoord = input.texCoord;\n    let premultipliedColor = vec4<f32>(\n        uniforms.color.rgb * uniforms.color.a * uniforms.alpha,\n        uniforms.color.a * uniforms.alpha\n    );\n    output.color = premultipliedColor;\n    return output;\n}\n";

package/src/Shader/wgsl/vertex/BasicVertex.js

@@ -0,0 +1,37 @@
+export const BasicVertex = /* wgsl */ `
+override yFlipSign: f32 = 1.0;
+
+struct VertexInput {
+    @location(0) position: vec2<f32>,
+    @location(1) texCoord: vec2<f32>,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texCoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+
+struct Uniforms {
+    matrix: mat3x3<f32>,
+    color: vec4<f32>,
+    alpha: f32,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+@vertex
+fn main(input: VertexInput) -> VertexOutput {
+    var output: VertexOutput;
+    let pos = uniforms.matrix * vec3<f32>(input.position, 1.0);
+    let ndc = pos.xy * 2.0 - 1.0;
+    output.position = vec4<f32>(ndc.x, ndc.y * yFlipSign, 0.0, 1.0);
+    output.texCoord = input.texCoord;
+    let premultipliedColor = vec4<f32>(
+        uniforms.color.rgb * uniforms.color.a * uniforms.alpha,
+        uniforms.color.a * uniforms.alpha
+    );
+    output.color = premultipliedColor;
+    return output;
+}
+`;

package/src/Shader/wgsl/vertex/BitmapVertex.d.ts

@@ -0,0 +1 @@
+export declare const BitmapFillVertex = "\noverride yFlipSign: f32 = 1.0;\n\nstruct VertexInput {\n    @location(0) position: vec2<f32>,\n    @location(1) bezier: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) bezier: vec2<f32>,\n    @location(1) color: vec4<f32>,\n    @location(2) worldPos: vec2<f32>,\n}\n\nstruct BitmapUniforms {\n    bitmapMatrix: mat3x3<f32>,\n    width: f32,\n    height: f32,\n    repeat: f32,\n    _pad: f32,\n    color: vec4<f32>,\n    contextMatrix0: vec4<f32>,\n    contextMatrix1: vec4<f32>,\n    contextMatrix2: vec4<f32>,\n}\n\n@group(0) @binding(0) var<uniform> bitmap: BitmapUniforms;\n\n@vertex\nfn main(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n    let matrix = mat3x3<f32>(bitmap.contextMatrix0.xyz, bitmap.contextMatrix1.xyz, bitmap.contextMatrix2.xyz);\n    let transformedPos = matrix * vec3<f32>(input.position, 1.0);\n    let clipX = transformedPos.x * 2.0 - 1.0;\n    let clipY = (transformedPos.y * 2.0 - 1.0) * yFlipSign;\n    output.position = vec4<f32>(clipX, clipY, 0.0, 1.0);\n    output.bezier = input.bezier;\n    output.color = bitmap.color;\n    output.worldPos = input.position;\n    return output;\n}\n";

package/src/Shader/wgsl/vertex/BitmapVertex.js

@@ -0,0 +1,43 @@
+export const BitmapFillVertex = /* wgsl */ `
+override yFlipSign: f32 = 1.0;
+
+struct VertexInput {
+    @location(0) position: vec2<f32>,
+    @location(1) bezier: vec2<f32>,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) bezier: vec2<f32>,
+    @location(1) color: vec4<f32>,
+    @location(2) worldPos: vec2<f32>,
+}
+
+struct BitmapUniforms {
+    bitmapMatrix: mat3x3<f32>,
+    width: f32,
+    height: f32,
+    repeat: f32,
+    _pad: f32,
+    color: vec4<f32>,
+    contextMatrix0: vec4<f32>,
+    contextMatrix1: vec4<f32>,
+    contextMatrix2: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> bitmap: BitmapUniforms;
+
+@vertex
+fn main(input: VertexInput) -> VertexOutput {
+    var output: VertexOutput;
+    let matrix = mat3x3<f32>(bitmap.contextMatrix0.xyz, bitmap.contextMatrix1.xyz, bitmap.contextMatrix2.xyz);
+    let transformedPos = matrix * vec3<f32>(input.position, 1.0);
+    let clipX = transformedPos.x * 2.0 - 1.0;
+    let clipY = (transformedPos.y * 2.0 - 1.0) * yFlipSign;
+    output.position = vec4<f32>(clipX, clipY, 0.0, 1.0);
+    output.bezier = input.bezier;
+    output.color = bitmap.color;
+    output.worldPos = input.position;
+    return output;
+}
+`;

package/src/Shader/wgsl/vertex/FillVertex.d.ts

@@ -0,0 +1 @@
+export declare const FillVertex = "\noverride yFlipSign: f32 = 1.0;\n\nstruct VertexInput {\n    @location(0) position: vec2<f32>,\n    @location(1) bezier: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) bezier: vec2<f32>,\n    @location(1) color: vec4<f32>,\n}\n\nstruct FillUniforms {\n    color: vec4<f32>,\n    matrix0: vec4<f32>,\n    matrix1: vec4<f32>,\n    matrix2: vec4<f32>,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: FillUniforms;\n\n@vertex\nfn main(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n    let matrix = mat3x3<f32>(uniforms.matrix0.xyz, uniforms.matrix1.xyz, uniforms.matrix2.xyz);\n    let transformed = matrix * vec3<f32>(input.position, 1.0);\n    let ndc = transformed.xy * 2.0 - 1.0;\n    output.position = vec4<f32>(ndc.x, ndc.y * yFlipSign, 0.0, 1.0);\n    output.bezier = input.bezier;\n    output.color = uniforms.color;\n    return output;\n}\n";

package/src/Shader/wgsl/vertex/FillVertex.js

@@ -0,0 +1,35 @@
+export const FillVertex = /* wgsl */ `
+override yFlipSign: f32 = 1.0;
+
+struct VertexInput {
+    @location(0) position: vec2<f32>,
+    @location(1) bezier: vec2<f32>,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) bezier: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+
+struct FillUniforms {
+    color: vec4<f32>,
+    matrix0: vec4<f32>,
+    matrix1: vec4<f32>,
+    matrix2: vec4<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: FillUniforms;
+
+@vertex
+fn main(input: VertexInput) -> VertexOutput {
+    var output: VertexOutput;
+    let matrix = mat3x3<f32>(uniforms.matrix0.xyz, uniforms.matrix1.xyz, uniforms.matrix2.xyz);
+    let transformed = matrix * vec3<f32>(input.position, 1.0);
+    let ndc = transformed.xy * 2.0 - 1.0;
+    output.position = vec4<f32>(ndc.x, ndc.y * yFlipSign, 0.0, 1.0);
+    output.bezier = input.bezier;
+    output.color = uniforms.color;
+    return output;
+}
+`;

package/src/Shader/wgsl/vertex/FilterVertex.d.ts

@@ -0,0 +1,12 @@
+export declare const BlurFilterVertex: string;
+export declare const ComplexBlendVertex: string;
+export declare const ComplexBlendCopyVertex: string;
+export declare const NodeClearVertex = "\nstruct VertexInput {\n    @location(0) position: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n}\n\n@vertex\nfn main(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n    let ndc = input.position * 2.0 - 1.0;\n    output.position = vec4<f32>(ndc.x, ndc.y, 0.0, 1.0);\n    return output;\n}\n";
+export declare const PositionedTextureVertex = "\nstruct PositionUniforms {\n    offset: vec2<f32>,\n    size: vec2<f32>,\n    viewport: vec2<f32>,\n    padding: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: PositionUniforms;\n\n@vertex\nfn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    const vertices = array<vec2<f32>, 6>(\n        vec2<f32>(0.0, 0.0),\n        vec2<f32>(1.0, 0.0),\n        vec2<f32>(0.0, 1.0),\n        vec2<f32>(0.0, 1.0),\n        vec2<f32>(1.0, 0.0),\n        vec2<f32>(1.0, 1.0)\n    );\n    let vertex = vertices[vertexIndex];\n    output.texCoord = vec2<f32>(vertex.x, 1.0 - vertex.y);\n    var position = vertex * uniforms.size + uniforms.offset;\n    position = position / uniforms.viewport;\n    position = position * 2.0 - 1.0;\n    output.position = vec4<f32>(position.x, -position.y, 0.0, 1.0);\n    return output;\n}\n";
+export declare const BitmapSyncVertex = "\nstruct BitmapSyncUniforms {\n    nodeRect: vec4<f32>,\n    textureSize: vec2<f32>,\n    padding: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n}\n\n@group(0) @binding(0) var<uniform> uniforms: BitmapSyncUniforms;\n\n@vertex\nfn main(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {\n    var output: VertexOutput;\n\n    const vertices = array<vec2<f32>, 6>(\n        vec2<f32>(0.0, 0.0),\n        vec2<f32>(1.0, 0.0),\n        vec2<f32>(0.0, 1.0),\n        vec2<f32>(0.0, 1.0),\n        vec2<f32>(1.0, 0.0),\n        vec2<f32>(1.0, 1.0)\n    );\n    let vertex = vertices[vertexIndex];\n    let pixelPos = vec2<f32>(\n        uniforms.nodeRect.x + vertex.x * uniforms.nodeRect.z,\n        uniforms.nodeRect.y + vertex.y * uniforms.nodeRect.w\n    );\n    let ndc = pixelPos / uniforms.textureSize * 2.0 - 1.0;\n    output.position = vec4<f32>(ndc.x, -ndc.y, 0.0, 1.0);\n    output.texCoord = pixelPos / uniforms.textureSize;\n    return output;\n}\n";
+export declare const BlendModeVertex = "\nstruct VertexInput {\n    @location(0) position: vec2<f32>,\n    @location(1) texCoord: vec2<f32>,\n}\n\nstruct VertexOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) texCoord: vec2<f32>,\n}\n\n@vertex\nfn main(input: VertexInput) -> VertexOutput {\n    var output: VertexOutput;\n    output.position = vec4<f32>(input.position, 0.0, 1.0);\n    output.texCoord = input.texCoord;\n    return output;\n}\n";
+export declare const TextureScaleVertex: string;
+export declare const TextureScaleBlendVertex: string;
+export declare const ComplexBlendScaleVertex: string;
+export declare const ComplexBlendOutputVertex: string;
+export declare const FilterComplexBlendOutputVertex: string;