vello_hybrid: add native WebGL backend

.github/workflows/ci.yml

@@ -329,9 +329,13 @@ jobs:
         with:
           tool: wasm-pack
 
-      - name: check vello_hybrid is webgl compatible
+      - name: check vello_hybrid is wgpu webgl compatible
         run: wasm-pack test --headless --chrome
-        working-directory: sparse_strips/vello_hybrid/examples/webgl
+        working-directory: sparse_strips/vello_hybrid/examples/wgpu_webgl
+
+      - name: check vello_hybrid is native webgl compatible
+        run: wasm-pack test --headless --chrome
+        working-directory: sparse_strips/vello_hybrid/examples/native_webgl
 
 
   check-stable-android:

Cargo.toml

@@ -17,8 +17,10 @@ members = [
     "sparse_strips/vello_common",
     "sparse_strips/vello_cpu",
     "sparse_strips/vello_hybrid",
+    "sparse_strips/vello_sparse_shaders",
+    "sparse_strips/vello_hybrid/examples/native_webgl",
     "sparse_strips/vello_hybrid/examples/scenes",
-    "sparse_strips/vello_hybrid/examples/webgl",
+    "sparse_strips/vello_hybrid/examples/wgpu_webgl",
     "sparse_strips/vello_hybrid/examples/winit",
     "sparse_strips/vello_toy",
     "sparse_strips/vello_dev_macros",
@@ -113,6 +115,7 @@ vello_api = { path = "sparse_strips/vello_api", default-features = false }
 vello_common = { version = "0.0.1", path = "sparse_strips/vello_common", default-features = false }
 vello_cpu = { path = "sparse_strips/vello_cpu" }
 vello_hybrid = { path = "sparse_strips/vello_hybrid" }
+vello_sparse_shaders = { path = "sparse_strips/vello_sparse_shaders" }
 vello_hybrid_scenes = { path = "sparse_strips/vello_hybrid/examples/scenes" }
 vello_dev_macros = { path = "sparse_strips/vello_dev_macros" }
 

sparse_strips/README.md

@@ -22,6 +22,7 @@ This directory contains the core crates for the Vello rendering. Each crate serv
 - **`vello_common`** – Provides shared data structures and utilities for rendering.
 - **`vello_cpu`** – Implements a CPU-based renderer optimized for multithreading and SIMD.
 - **`vello_hybrid`** – A hybrid CPU/GPU renderer, balancing workload between CPU and GPU.
+- **`vello_sparse_shaders`** – Provide compilation of wgsl to glsl to support the WebGL `vello_hybrid` backend.
 
 ## Development Status
 

sparse_strips/vello_hybrid/Cargo.toml

@@ -18,10 +18,36 @@ workspace = true
 bytemuck = { workspace = true, features = ["derive"] }
 thiserror = { workspace = true }
 vello_common = { workspace = true, features = ["std"] }
-wgpu = { workspace = true }
+wgpu = { workspace = true, optional = true }
+vello_sparse_shaders = { workspace = true, optional = true }
+log = { workspace = true }
+
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+js-sys = { version = "0.3.77", optional = true }
+web-sys = { version = "0.3.77", features = [
+    "HtmlCanvasElement",
+    "WebGl2RenderingContext",
+    "WebGlProgram",
+    "WebGlUniformLocation",
+    "WebGlBuffer",
+    "WebGlShader",
+    "WebGlTexture",
+    "WebGlFramebuffer",
+    "WebGlVertexArrayObject",
+], optional = true }
+
+[[example]]
+name = "render_to_file"
+required-features = ["wgpu"]
 
 [dev-dependencies]
 png = { workspace = true }
 pollster = { workspace = true }
 vello_common = { workspace = true, features = ["pico_svg"] }
 roxmltree = "0.20.0"
+
+[features]
+default = ["wgpu"]
+wgpu = ["dep:wgpu"]
+webgl = ["dep:js-sys", "dep:web-sys", "dep:vello_sparse_shaders"]

sparse_strips/vello_hybrid/examples/native_webgl/Cargo.toml

@@ -0,0 +1,40 @@
+[package]
+name = "native_webgl"
+version.workspace = true
+description = "An example showing Vello Hybrid using the WebGL2 renderer backend."
+edition.workspace = true
+license.workspace = true
+repository.workspace = true
+publish = false
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[lints]
+workspace = true
+
+[dependencies]
+console_error_panic_hook = "0.1.7"
+console_log = "1.0"
+js-sys = "0.3.77"
+log = { workspace = true }
+vello_common = { workspace = true }
+vello_hybrid = { workspace = true, features = ["webgl"] }
+vello_hybrid_scenes = { workspace = true }
+wasm-bindgen = "0.2.100"
+wasm-bindgen-futures = "0.4.50"
+web-sys = { version = "0.3.77", features = [
+    "Window",
+    "Document",
+    "Element",
+    "HtmlElement",
+    "HtmlCanvasElement",
+    "CssStyleDeclaration",
+    "WebGl2RenderingContext",
+    "MouseEvent",
+    "WheelEvent",
+    "KeyboardEvent",
+] }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.50"

sparse_strips/vello_hybrid/examples/native_webgl/README.md

@@ -0,0 +1,21 @@
+## WebGL Demo
+
+Uses Vello Hybrid with a native WebGL2 backend in the browser. This example does not use wgpu.
+
+## Development
+
+Run with `cargo run_wasm -p native_webgl --release`.
+
+## Testing
+
+In order to test this crate, you need to have [`wasm-pack`] installed. Install it using
+the steps found in https://rustwasm.github.io/wasm-pack/installer/.
+
+Thereafter, for interactive test sessions, run:
+
+```
+wasm-pack test --chrome
+# Navigate to printed URL
+```
+
+[`wasm-pack`]: https://rustwasm.github.io/wasm-pack/