Update status for webgpu in maplibre native roadmap to "released" (#485)

* release webgpu in maplibre native

* note on dawn and wgpu

* link to wgpu / dawn project pages

* update picture for promotion page

* allow 4 side by side graphics backends on lg

Author: birkskyum

src/assets/maplibre-native/webgpu.png

@@ -1,12 +1,15 @@
 ---
 title: WebGPU Renderer
-heroImage: "./webgpu.svg"
+heroImage: "./webgpu-plus.png"
 project: maplibre-native
-status: in-progress
+status: released
+released: October 2025
 ---
 
 We already have dedicated backends for Vulkan, Metal, and OpenGL, but the advantage of adding a WebGPU backend to the list is portability. MapLibre Native can already run in the browser as WebAssembly by compiling the OpenGL backend to WebGL1/2, but that approach is heavy. A WebGPU backend promises significantly better performance, especially for modern browsers on both desktop and mobile.
 
 WebGPU also simplifies cross-platform development stacks such as Compose Multiplatform and Flutter by offering a single rendering backend that can be used across desktop, mobile, and web targets. The goal of this roadmap item is to add a WebGPU backend that can serve as a webgpu web target, which the three existing backends won't be able to cover.
 
 If you are interested in contributing to this effort, please reach out on Slack (`#maplibre-native`) or open a discussion in the MapLibre Native repository.
+
+Our WebGPU backend is released with support for both [wgpu](https://wgpu.rs/) and [Dawn](https://github.com/google/dawn/blob/main/README.md).

src/content/roadmap/maplibre-native/webgpu/index.mdx

@@ -5,6 +5,7 @@ import iosPhone from "../../../public/img/maplibre-native-ios.png";
 import metal from "../../assets/maplibre-native/metal.png";
 import opengl from "../../assets/maplibre-native/opengl.png";
 import vulkan from "../../assets/maplibre-native/vulkan.png";
+import webgpu from "../../assets/maplibre-native/webgpu.png";
 import Layout from "../../layouts/Layout.astro";
 ---
 
@@ -194,9 +195,9 @@ import Layout from "../../layouts/Layout.astro";
 
       <div
         class="row g-4 justify-content-center"
-        style="max-width: 600px; margin: 0 auto;"
+        style="max-width: 800px; margin: 0 auto;"
       >
-        <div class="col-lg-4 col-md-6 col-12">
+        <div class="col-lg-3 col-md-6 col-12">
           <div class="card h-100 shadow-sm">
             <div
               class="card-body d-flex flex-column align-items-center text-center"
@@ -206,7 +207,7 @@ import Layout from "../../layouts/Layout.astro";
             </div>
           </div>
         </div>
-        <div class="col-lg-4 col-md-6 col-12">
+        <div class="col-lg-3 col-md-6 col-12">
           <div class="card h-100 shadow-sm">
             <div
               class="card-body d-flex flex-column align-items-center text-center"
@@ -216,7 +217,7 @@ import Layout from "../../layouts/Layout.astro";
             </div>
           </div>
         </div>
-        <div class="col-lg-4 col-md-6 col-12">
+        <div class="col-lg-3 col-md-6 col-12">
           <div class="card h-100 shadow-sm">
             <div
               class="card-body d-flex flex-column align-items-center text-center"
@@ -226,6 +227,16 @@ import Layout from "../../layouts/Layout.astro";
             </div>
           </div>
         </div>
+        <div class="col-lg-3 col-md-6 col-12">
+          <div class="card h-100 shadow-sm">
+            <div
+              class="card-body d-flex flex-column align-items-center text-center"
+            >
+              <Image src={webgpu} alt="WebGPU API" class="graphics-img mb-3" />
+              <h3 class="card-title h5 text-primary">WebGPU</h3>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>