WIP. Expand DrawingBackend API and Canvas.

ImageSharp.Drawing.sln

@@ -337,6 +337,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "workflows", "workflows", "{
 		.github\workflows\build-and-test.yml = .github\workflows\build-and-test.yml
 	EndProjectSection
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ImageSharp.Drawing.WebGPU", "src\ImageSharp.Drawing.WebGPU\ImageSharp.Drawing.WebGPU.csproj", "{061582C2-658F-40AE-A978-7D74A4EB2C0A}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -359,6 +361,10 @@ Global
 		{5493F024-0A3F-420C-AC2D-05B77A36025B}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{5493F024-0A3F-420C-AC2D-05B77A36025B}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{5493F024-0A3F-420C-AC2D-05B77A36025B}.Release|Any CPU.Build.0 = Release|Any CPU
+		{061582C2-658F-40AE-A978-7D74A4EB2C0A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{061582C2-658F-40AE-A978-7D74A4EB2C0A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{061582C2-658F-40AE-A978-7D74A4EB2C0A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{061582C2-658F-40AE-A978-7D74A4EB2C0A}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -386,6 +392,7 @@ Global
 		{68A8CC40-6AED-4E96-B524-31B1158FDEEA} = {815C0625-CD3D-440F-9F80-2D83856AB7AE}
 		{5493F024-0A3F-420C-AC2D-05B77A36025B} = {528610AC-7C0C-46E8-9A2D-D46FD92FEE29}
 		{23859314-5693-4E6C-BE5C-80A433439D2A} = {1799C43E-5C54-4A8F-8D64-B1475241DB0D}
+		{061582C2-658F-40AE-A978-7D74A4EB2C0A} = {815C0625-CD3D-440F-9F80-2D83856AB7AE}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {5F8B9D1F-CD8B-4CC5-8216-D531E25BD795}

README.md

@@ -15,11 +15,11 @@ SixLabors.ImageSharp.Drawing
 
 </div>
 
-### **ImageSharp.Drawing** provides extensions to ImageSharp containing powerful, cross-platform 2D polygon manipulation and drawing APIs.
+### **ImageSharp.Drawing** provides extensions to ImageSharp containing powerful, Cross-Platform 2D polygon manipulation and drawing APIs.
 
 Designed to democratize image processing, ImageSharp.Drawing brings you an incredibly powerful yet beautifully simple API.
 
-Built against [.NET 6](https://docs.microsoft.com/en-us/dotnet/standard/net-standard), ImageSharp.Drawing can be used in device, cloud, and embedded/IoT scenarios. 
+Built against [.NET 8](https://docs.microsoft.com/en-us/dotnet/standard/net-standard), ImageSharp.Drawing can be used in device, cloud, and embedded/IoT scenarios. 
 
 ## License
 
@@ -61,12 +61,12 @@ If you prefer, you can compile ImageSharp.Drawing yourself (please do and help!)
 
 - Using [Visual Studio 2022](https://visualstudio.microsoft.com/vs/)
   - Make sure you have the latest version installed
-  - Make sure you have [the .NET 7 SDK](https://www.microsoft.com/net/core#windows) installed
+  - Make sure you have [the .NET 8 SDK](https://www.microsoft.com/net/core#windows) installed
 
 Alternatively, you can work from command line and/or with a lightweight editor on **both Linux/Unix and Windows**:
 
 - [Visual Studio Code](https://code.visualstudio.com/) with [C# Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)
-- [the .NET 7 SDK](https://www.microsoft.com/net/core#linuxubuntu)
+- [the .NET 8 SDK](https://www.microsoft.com/net/core#linuxubuntu)
 
 To clone ImageSharp.Drawing locally, click the "Clone in [YOUR_OS]" button above or run the following git commands:
 

samples/DrawShapesWithImageSharp/Program.cs

@@ -21,8 +21,6 @@ public static void Main(string[] args)
     {
         OutputClippedRectangle();
         OutputStars();
-
-        ImageSharpLogo.SaveLogo(300, "ImageSharp.png");
     }
 
     private static void OutputStars()
@@ -239,11 +237,12 @@ public static void SaveImage(this IPathCollection collection, params string[] pa
         int height = (int)(collection.Bounds.Top + collection.Bounds.Bottom);
         using Image<Rgba32> img = new(width, height);
 
-        // Fill the canvas background and draw our shape
-        img.Mutate(i => i.Fill(Color.DarkBlue));
-
-        // Draw our path collection.
-        img.Mutate(i => i.Fill(Color.HotPink, collection));
+        img.Mutate(i => i.ProcessWithCanvas(canvas =>
+        {
+            // Fill the canvas background and draw our shape.
+            canvas.Fill(Brushes.Solid(Color.DarkBlue));
+            canvas.Fill(Brushes.Solid(Color.HotPink), collection);
+        }));
 
         // Ensure directory exists
         string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
@@ -264,11 +263,15 @@ public static void SaveImageWithPath(this IPathCollection collection, IPath shap
 
         using Image<Rgba32> img = new(width, height);
 
-        // Fill the canvas background and draw our shape
-        img.Mutate(i => i.Fill(Color.DarkBlue).Fill(Color.White.WithAlpha(.25F), shape));
+        img.Mutate(i => i.ProcessWithCanvas(canvas =>
+        {
+            // Fill the canvas background and draw our shape.
+            canvas.Fill(Brushes.Solid(Color.DarkBlue));
+            canvas.Fill(shape, Brushes.Solid(Color.White.WithAlpha(.25F)));
 
-        // Draw our path collection.
-        img.Mutate(i => i.Fill(Color.HotPink, collection));
+            // Draw our path collection.
+            canvas.Fill(Brushes.Solid(Color.HotPink), collection);
+        }));
 
         // Ensure directory exists
         string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));
@@ -282,8 +285,11 @@ public static void SaveImage(this IPath shape, int width, int height, params str
     public static void SaveImage(this IPathCollection shape, int width, int height, params string[] path)
     {
         using Image<Rgba32> img = new(width, height);
-        img.Mutate(i => i.Fill(Color.DarkBlue));
-        img.Mutate(i => i.Fill(Color.HotPink, shape));
+        img.Mutate(i => i.ProcessWithCanvas(canvas =>
+        {
+            canvas.Fill(Brushes.Solid(Color.DarkBlue));
+            canvas.Fill(Brushes.Solid(Color.HotPink), shape);
+        }));
 
         // Ensure directory exists
         string fullPath = IOPath.GetFullPath(IOPath.Combine("Output", IOPath.Combine(path)));

src/ImageSharp.Drawing.WebGPU/ImageSharp.Drawing.WebGPU.csproj

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <AssemblyName>SixLabors.ImageSharp.Drawing.WebGPU</AssemblyName>
+    <AssemblyTitle>SixLabors.ImageSharp.Drawing.WebGPU</AssemblyTitle>
+    <RootNamespace>SixLabors.ImageSharp.Drawing.Processing.Backends</RootNamespace>
+    <PackageId>SixLabors.ImageSharp.Drawing.WebGPU</PackageId>
+    <PackageIcon>sixlabors.imagesharp.drawing.128.png</PackageIcon>
+    <PackageLicenseFile>LICENSE</PackageLicenseFile>
+    <RepositoryUrl Condition="'$(RepositoryUrl)' == ''">https://github.com/SixLabors/ImageSharp.Drawing/</RepositoryUrl>
+    <PackageProjectUrl>$(RepositoryUrl)</PackageProjectUrl>
+    <PackageTags>Image Draw Shape Path Font</PackageTags>
+    <Description>An extension to ImageSharp that allows the drawing of images, paths, and text.</Description>
+    <Configurations>Debug;Release</Configurations>
+    <IsTrimmable>true</IsTrimmable>
+    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+
+    <!-- TEMP: To avoid publishing while we experiment. -->
+    <IsPublishable>false</IsPublishable>
+
+    <!--
+      This project is strong-name signed by the shared SixLabors build settings.
+      Silk.NET WebGPU packages are currently unsigned, which triggers CS8002.
+      Keep CS8002 visible as a warning, but do not fail the build for it.
+    -->
+    <WarningsNotAsErrors>$(WarningsNotAsErrors);8002</WarningsNotAsErrors>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <!--Bump to V1 prior to tagged release.-->
+    <MinVerMinimumMajorMinor>1.0</MinVerMinimumMajorMinor>
+  </PropertyGroup>
+
+  <!--  This enables the nullable analysis and treats all nullable warnings as error-->
+  <PropertyGroup>
+    <Nullable>enable</Nullable>
+    <WarningsAsErrors>Nullable</WarningsAsErrors>
+  </PropertyGroup>
+
+  <Choose>
+    <When Condition="$(SIXLABORS_TESTING_PREVIEW) == true">
+      <PropertyGroup>
+        <TargetFrameworks>net8.0;net10.0</TargetFrameworks>
+      </PropertyGroup>
+    </When>
+    <Otherwise>
+      <PropertyGroup>
+        <TargetFrameworks>net8.0</TargetFrameworks>
+      </PropertyGroup>
+    </Otherwise>
+  </Choose>
+
+  <ItemGroup>
+    <None Include="..\..\LICENSE" Pack="true" PackagePath="" />
+    <None Include="..\..\shared-infrastructure\branding\icons\imagesharp.drawing\sixlabors.imagesharp.drawing.128.png" Pack="true" PackagePath="" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <!--
+      Silk compile assets are needed by this project but should not flow transitively to consumers.
+      This keeps downstream projects from seeing Silk reference warnings (for example CS8002)
+      unless they explicitly reference Silk themselves.
+      Runtime/native assets still flow so the backend can execute.
+    -->
+    <PackageReference Include="Silk.NET.WebGPU" Version="2.23.0" PrivateAssets="compile;build;analyzers;contentfiles;buildtransitive" />
+    <PackageReference Include="Silk.NET.WebGPU.Extensions.WGPU" Version="2.23.0" PrivateAssets="compile;build;analyzers;contentfiles;buildtransitive" />
+    <PackageReference Include="Silk.NET.WebGPU.Native.WGPU" Version="2.23.0" PrivateAssets="compile;build;analyzers;contentfiles;buildtransitive" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\ImageSharp.Drawing\ImageSharp.Drawing.csproj" />
+  </ItemGroup>
+</Project>

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

@@ -0,0 +1,118 @@
+// Copyright (c) Six Labors.
+// Licensed under the Six Labors Split License.
+
+namespace SixLabors.ImageSharp.Drawing.Processing.Backends;
+
+/// <summary>
+/// Copies the destination texture into a composition backdrop for read-only sampling.
+/// </summary>
+internal static class BackdropComputeShader
+{
+    /// <summary>
+    /// Gets the null-terminated WGSL source for the backdrop copy pass.
+    /// </summary>
+    private static readonly byte[] CodeBytes =
+    [
+        ..
+        """
+        struct Tile {
+            backdrop: i32,
+            segment_count_or_ix: u32,
+        }
+
+        struct Config {
+            width_in_tiles: u32,
+            height_in_tiles: u32,
+            target_width: u32,
+            target_height: u32,
+            base_color: u32,
+            n_drawobj: u32,
+            n_path: u32,
+            n_clip: u32,
+            bin_data_start: u32,
+            pathtag_base: u32,
+            pathdata_base: u32,
+            drawtag_base: u32,
+            drawdata_base: u32,
+            transform_base: u32,
+            style_base: u32,
+            lines_size: u32,
+            binning_size: u32,
+            tiles_size: u32,
+            seg_counts_size: u32,
+            segments_size: u32,
+            blend_size: u32,
+            ptcl_size: u32,
+        }
+
+        @group(0) @binding(0)
+        var<uniform> config: Config;
+
+        @group(0) @binding(1)
+        var<storage, read_write> tiles: array<Tile>;
+
+        const WG_SIZE = 64u;
+        var<workgroup> sh_backdrop: array<i32, WG_SIZE>;
+        var<workgroup> running_backdrop: i32;
+
+        @compute @workgroup_size(64)
+        fn cs_main(
+            @builtin(local_invocation_id) local_id: vec3<u32>,
+            @builtin(workgroup_id) wg_id: vec3<u32>,
+        ) {
+            let width_in_tiles = config.width_in_tiles;
+            let row_index = wg_id.x;
+            if row_index >= config.height_in_tiles {
+                return;
+            }
+
+            if local_id.x == 0u {
+                running_backdrop = 0;
+            }
+            workgroupBarrier();
+
+            var chunk_start = 0u;
+            loop {
+                if chunk_start >= width_in_tiles {
+                    break;
+                }
+
+                let count = min(WG_SIZE, width_in_tiles - chunk_start);
+                var backdrop = 0;
+                if local_id.x < count {
+                    let ix = row_index * width_in_tiles + chunk_start + local_id.x;
+                    backdrop = tiles[ix].backdrop;
+                }
+
+                sh_backdrop[local_id.x] = backdrop;
+                for (var i = 0u; i < firstTrailingBit(WG_SIZE); i += 1u) {
+                    workgroupBarrier();
+                    if local_id.x >= (1u << i) {
+                        backdrop += sh_backdrop[local_id.x - (1u << i)];
+                    }
+
+                    workgroupBarrier();
+                    sh_backdrop[local_id.x] = backdrop;
+                }
+
+                workgroupBarrier();
+                if local_id.x < count {
+                    let ix = row_index * width_in_tiles + chunk_start + local_id.x;
+                    let accumulated = sh_backdrop[local_id.x] + running_backdrop;
+                    tiles[ix].backdrop = accumulated;
+                    if local_id.x + 1u == count {
+                        running_backdrop = accumulated;
+                    }
+                }
+
+                workgroupBarrier();
+                chunk_start += WG_SIZE;
+            }
+        }
+        """u8,
+        0
+    ];
+
+    /// <summary>Gets the WGSL source for this shader as a null-terminated UTF-8 span.</summary>
+    public static ReadOnlySpan<byte> Code => CodeBytes;
+}