commit 84bb94c161edafbac78c6692c5b3cee7c10e6507
author Alex Gemberg <gemberg@canva.com> Wed Sep 17 17:18:38 2025 +1000
committer Alex Gemberg <gemberg@canva.com> Wed Sep 17 17:18:38 2025 +1000
tree 91700a9c93be038d24a4e925f97c4d6340bec333
parent 289f4919b58e349ccbca39fe23e8cd3d0acadc86

fix: blending in webgl impl

sparse_strips/vello_dev_macros/src/test.rs

diff --git a/sparse_strips/vello_dev_macros/src/test.rs b/sparse_strips/vello_dev_macros/src/test.rs
index 4f32374..7f28e7b 100644
--- a/sparse_strips/vello_dev_macros/src/test.rs
+++ b/sparse_strips/vello_dev_macros/src/test.rs
@@ -191,13 +191,6 @@
             || input_fn_name_str.contains("clip_clear")
     };
 
-    // These tests currently don't work with `vello_hybrid` running with the webgl backend in the
-    // browser.
-    // TODO: Enable blend in webgl.
-    let skip_hybrid_webgl = skip_hybrid
-        || input_fn_name_str.contains("compose")
-        || input_fn_name_str.contains("clip_composite_opacity_nested_circles");
-
     let empty_snippet = quote! {};
     let ignore_snippet = if let Some(reason) = ignore_reason {
         quote! {#[ignore = #reason]}
@@ -210,7 +203,7 @@
     } else {
         empty_snippet.clone()
     };
-    let ignore_hybrid_webgl = if skip_hybrid_webgl {
+    let ignore_hybrid_webgl = if skip_hybrid {
         ignore_snippet.clone()
     } else {
         empty_snippet.clone()

sparse_strips/vello_hybrid/src/render/webgl.rs

diff --git a/sparse_strips/vello_hybrid/src/render/webgl.rs b/sparse_strips/vello_hybrid/src/render/webgl.rs
index a91afc4..2a89fd8 100644
--- a/sparse_strips/vello_hybrid/src/render/webgl.rs
+++ b/sparse_strips/vello_hybrid/src/render/webgl.rs
@@ -739,7 +739,7 @@
                 let config = Config {
                     width: new_render_size.width,
                     height: new_render_size.height,
-                    strip_height: Tile::HEIGHT.into(),
+                    strip_height: u32::from(Tile::HEIGHT),
                     alphas_tex_width_bits: max_texture_dimension_2d.trailing_zeros(),
                 };
 
@@ -755,13 +755,13 @@
                 );
             }
 
+            let total_slots = max_texture_dimension_2d / u32::from(Tile::HEIGHT);
             // Update slot config buffer.
             {
                 let slot_config = Config {
                     width: u32::from(WideTile::WIDTH),
-                    height: u32::from(Tile::HEIGHT)
-                        * (max_texture_dimension_2d / u32::from(Tile::HEIGHT)),
-                    strip_height: Tile::HEIGHT.into(),
+                    height: u32::from(Tile::HEIGHT) * total_slots,
+                    strip_height: u32::from(Tile::HEIGHT),
                     alphas_tex_width_bits: max_texture_dimension_2d.trailing_zeros(),
                 };
 
@@ -782,9 +782,8 @@
             {
                 let clear_config = ClearSlotsConfig {
                     slot_width: u32::from(WideTile::WIDTH),
-                    slot_height: u32::from(Tile::HEIGHT)
-                        * (max_texture_dimension_2d / u32::from(Tile::HEIGHT)),
-                    texture_height: Tile::HEIGHT.into(),
+                    slot_height: u32::from(Tile::HEIGHT),
+                    texture_height: u32::from(Tile::HEIGHT) * total_slots,
                     _padding: 0,
                 };
 
@@ -1583,6 +1582,10 @@
             return;
         }
 
+        // No blending needed for clearing: we want to completely overwrite existing slot data
+        // (matches wgpu implementation)
+        self.gl.disable(WebGl2RenderingContext::BLEND);
+
         // Upload slot indices.
         self.gl.bind_buffer(
             WebGl2RenderingContext::ARRAY_BUFFER,
@@ -1629,6 +1632,8 @@
             slot_indices.len() as i32,
         );
 
+        self.gl.enable(WebGl2RenderingContext::BLEND);
+
         // Clean up.
         self.gl.bind_vertex_array(None);
     }