Reimplement all GPU brushes

Author: JimBobSquarePants

src/ImageSharp.Drawing.WebGPU/Shaders/FineAreaComputeShader.cs

@@ -62,7 +62,7 @@ public static unsafe bool TryCreateBindGroupLayout(
         out BindGroupLayout* layout,
         out string? error)
     {
-        BindGroupLayoutEntry* entries = stackalloc BindGroupLayoutEntry[8];
+        BindGroupLayoutEntry* entries = stackalloc BindGroupLayoutEntry[9];
         entries[0] = CreateUniformEntry(0, (nuint)sizeof(GpuSceneConfig));
         entries[1] = CreateStorageEntry(1, BufferBindingType.ReadOnlyStorage, 0);
         entries[2] = CreateStorageEntry(2, BufferBindingType.ReadOnlyStorage, 0);
@@ -71,10 +71,11 @@ public static unsafe bool TryCreateBindGroupLayout(
         entries[5] = CreateOutputTextureEntry(5, outputTextureFormat);
         entries[6] = CreateSampledTextureEntry(6);
         entries[7] = CreateSampledTextureEntry(7);
+        entries[8] = CreateSampledTextureEntry(8);
 
         BindGroupLayoutDescriptor descriptor = new()
         {
-            EntryCount = 8,
+            EntryCount = 9,
             Entries = entries
         };
 

src/ImageSharp.Drawing.WebGPU/Shaders/Shared/drawtag.wgsl

@@ -18,10 +18,12 @@ struct DrawMonoid {
 // version of the draw monoid.
 const DRAWTAG_NOP = 0u;
 const DRAWTAG_FILL_COLOR = 0x44u;
+const DRAWTAG_FILL_RECOLOR = 0x4cu;
 const DRAWTAG_FILL_LIN_GRADIENT = 0x114u;
 const DRAWTAG_FILL_RAD_GRADIENT = 0x29cu;
+const DRAWTAG_FILL_ELLIPTIC_GRADIENT = 0x1d8u;
 const DRAWTAG_FILL_SWEEP_GRADIENT = 0x254u;
-const DRAWTAG_FILL_IMAGE = 0x28Cu;
+const DRAWTAG_FILL_IMAGE = 0x294u;
 const DRAWTAG_BLURRED_ROUNDED_RECT = 0x2d4u;
 const DRAWTAG_BEGIN_CLIP = 0x49u;
 const DRAWTAG_END_CLIP = 0x21u;

src/ImageSharp.Drawing.WebGPU/Shaders/Shared/ptcl.wgsl

@@ -15,8 +15,10 @@ const CMD_FILL = 1u;
 const CMD_STROKE = 2u;
 const CMD_SOLID = 3u;
 const CMD_COLOR = 5u;
+const CMD_RECOLOR = 14u;
 const CMD_LIN_GRAD = 6u;
 const CMD_RAD_GRAD = 7u;
+const CMD_ELLIPTIC_GRAD = 15u;
 const CMD_SWEEP_GRAD = 8u;
 const CMD_IMAGE = 9u;
 const CMD_BEGIN_CLIP = 10u;
@@ -46,6 +48,12 @@ struct CmdColor {
     rgba_color: u32,
 }
 
+struct CmdRecolor {
+    source_color: u32,
+    target_color: u32,
+    threshold: f32,
+}
+
 struct CmdBlurRect {
     // Solid fill color.
     rgba_color: u32,
@@ -83,6 +91,13 @@ struct CmdRadGrad {
     flags: u32,
 }
 
+struct CmdEllipticGrad {
+    index: u32,
+    extend_mode: u32,
+    matrx: vec4<f32>,
+    xlat: vec2<f32>,
+}
+
 struct CmdSweepGrad {
     index: u32,
     extend_mode: u32,

src/ImageSharp.Drawing.WebGPU/Shaders/coarse.wgsl

@@ -116,6 +116,15 @@ fn write_color(color: CmdColor) {
     cmd_offset += 2u;
 }
 
+fn write_recolor(source_color: u32, target_color: u32, threshold: u32) {
+    alloc_cmd(4u);
+    ptcl[cmd_offset] = CMD_RECOLOR;
+    ptcl[cmd_offset + 1u] = source_color;
+    ptcl[cmd_offset + 2u] = target_color;
+    ptcl[cmd_offset + 3u] = threshold;
+    cmd_offset += 4u;
+}
+
 fn write_grad(ty: u32, index: u32, info_offset: u32) {
     alloc_cmd(3u);
     ptcl[cmd_offset] = ty;
@@ -381,6 +390,10 @@ fn main(
                         let rgba_color = scene[dd];
                         write_color(CmdColor(rgba_color));
                     }
+                    case DRAWTAG_FILL_RECOLOR: {
+                        write_path(tile, tile_ix, draw_flags);
+                        write_recolor(scene[dd], scene[dd + 1u], scene[dd + 2u]);
+                    }
                     case DRAWTAG_BLURRED_ROUNDED_RECT: {
                         write_path(tile, tile_ix, draw_flags);
                         let rgba_color = scene[dd];
@@ -399,6 +412,12 @@ fn main(
                         let info_offset = di + 1u;
                         write_grad(CMD_RAD_GRAD, index, info_offset);
                     }
+                    case DRAWTAG_FILL_ELLIPTIC_GRADIENT: {
+                        write_path(tile, tile_ix, draw_flags);
+                        let index = scene[dd];
+                        let info_offset = di + 1u;
+                        write_grad(CMD_ELLIPTIC_GRAD, index, info_offset);
+                    }
                     case DRAWTAG_FILL_SWEEP_GRADIENT: {
                         write_path(tile, tile_ix, draw_flags);
                         let index = scene[dd];

src/ImageSharp.Drawing.WebGPU/Shaders/draw_leaf.wgsl

@@ -108,8 +108,8 @@ fn main(
         }
         let dd = config.drawdata_base + m.scene_offset;
         let di = m.info_offset;
-        if tag_word == DRAWTAG_FILL_COLOR || tag_word == DRAWTAG_FILL_LIN_GRADIENT ||
-            tag_word == DRAWTAG_FILL_RAD_GRADIENT || tag_word == DRAWTAG_FILL_SWEEP_GRADIENT ||
+        if tag_word == DRAWTAG_FILL_COLOR || tag_word == DRAWTAG_FILL_RECOLOR || tag_word == DRAWTAG_FILL_LIN_GRADIENT ||
+            tag_word == DRAWTAG_FILL_RAD_GRADIENT || tag_word == DRAWTAG_FILL_ELLIPTIC_GRADIENT || tag_word == DRAWTAG_FILL_SWEEP_GRADIENT ||
             tag_word == DRAWTAG_FILL_IMAGE || tag_word == DRAWTAG_BEGIN_CLIP || tag_word == DRAWTAG_BLURRED_ROUNDED_RECT
         {
             let bbox = path_bbox[m.path_ix];
@@ -122,6 +122,7 @@ fn main(
             var transform = Transform();
             let draw_flags = bbox.draw_flags;
             if tag_word == DRAWTAG_FILL_LIN_GRADIENT || tag_word == DRAWTAG_FILL_RAD_GRADIENT ||
+                tag_word == DRAWTAG_FILL_ELLIPTIC_GRADIENT ||
                 tag_word == DRAWTAG_FILL_SWEEP_GRADIENT || tag_word == DRAWTAG_FILL_IMAGE || 
                 tag_word == DRAWTAG_BLURRED_ROUNDED_RECT
             {
@@ -131,6 +132,9 @@ fn main(
                 case DRAWTAG_FILL_COLOR: {
                     info[di] = draw_flags;
                 }
+                case DRAWTAG_FILL_RECOLOR: {
+                    info[di] = draw_flags;
+                }
                 case DRAWTAG_BEGIN_CLIP: {
                     info[di] = draw_flags;
                 }
@@ -231,6 +235,33 @@ fn main(
                     info[di + 8u] = bitcast<u32>(radius);
                     info[di + 9u] = bitcast<u32>((flags << 3u) | kind);
                 }
+                case DRAWTAG_FILL_ELLIPTIC_GRADIENT: {
+                    info[di] = draw_flags;
+                    var center = bitcast<vec2<f32>>(vec2(scene[dd + 1u], scene[dd + 2u]));
+                    var axis_end = bitcast<vec2<f32>>(vec2(scene[dd + 3u], scene[dd + 4u]));
+                    let axis_ratio = bitcast<f32>(scene[dd + 5u]);
+                    center = transform_apply(transform, center);
+                    axis_end = transform_apply(transform, axis_end);
+                    let dxy = axis_end - center;
+                    let axis = length(dxy);
+                    let inv_axis = 1.0 / axis;
+                    let inv_second_axis = inv_axis / axis_ratio;
+                    let cos_theta = dxy.x * inv_axis;
+                    let sin_theta = dxy.y * inv_axis;
+                    // Map the ellipse to the unit circle so the fill parameter is length(local_xy).
+                    let m0 = cos_theta * inv_axis;
+                    let m1 = sin_theta * inv_second_axis;
+                    let m2 = -sin_theta * inv_axis;
+                    let m3 = cos_theta * inv_second_axis;
+                    let xlat_x = -(m0 * center.x + m2 * center.y);
+                    let xlat_y = -(m1 * center.x + m3 * center.y);
+                    info[di + 1u] = bitcast<u32>(m0);
+                    info[di + 2u] = bitcast<u32>(m1);
+                    info[di + 3u] = bitcast<u32>(m2);
+                    info[di + 4u] = bitcast<u32>(m3);
+                    info[di + 5u] = bitcast<u32>(xlat_x);
+                    info[di + 6u] = bitcast<u32>(xlat_y);
+                }
                 case DRAWTAG_FILL_SWEEP_GRADIENT: {
                     info[di] = draw_flags;
                     let p0 = bitcast<vec2<f32>>(vec2(scene[dd + 1u], scene[dd + 2u]));
@@ -247,13 +278,12 @@ fn main(
                 }
                 case DRAWTAG_FILL_IMAGE: {
                     info[di] = draw_flags;
-                    let inv = transform_inverse(transform);
-                    info[di + 1u] = bitcast<u32>(inv.matrx.x);
-                    info[di + 2u] = bitcast<u32>(inv.matrx.y);
-                    info[di + 3u] = bitcast<u32>(inv.matrx.z);
-                    info[di + 4u] = bitcast<u32>(inv.matrx.w);
-                    info[di + 5u] = bitcast<u32>(inv.translate.x);
-                    info[di + 6u] = bitcast<u32>(inv.translate.y);
+                    info[di + 1u] = bitcast<u32>(1.0);
+                    info[di + 2u] = bitcast<u32>(0.0);
+                    info[di + 3u] = bitcast<u32>(0.0);
+                    info[di + 4u] = bitcast<u32>(1.0);
+                    info[di + 5u] = bitcast<u32>(-bitcast<f32>(scene[dd + 3u]));
+                    info[di + 6u] = bitcast<u32>(-bitcast<f32>(scene[dd + 4u]));
                     info[di + 7u] = scene[dd];
                     info[di + 8u] = scene[dd + 1u];
                     info[di + 9u] = scene[dd + 2u];