Fix: Properly handle scene resets to ensure correct alpha rendering (#859)

### Overview
This PR addresses the visual artifacts (dotted/dashed lines) that appear
when rendering the same scene multiple times using the `vello_hybrid`
renderer.

<img width="532" alt="image"
src="https://github.com/user-attachments/assets/da632491-987e-4f6f-a4dc-2ad4fb730282"
/>

### Issue Description
Previously, when resetting the scene and re-rendering repeatedly,
strange visual artifacts would appear at the boundaries between shapes -
specifically dotted or dashed lines along what should be properly alpha
sampled boundaries. These artifacts only appeared when:
- The scene was reset and re-rendered in `RedrawRequested` event handler
- The `prepare` method was called after each re-render

### Root Cause
The root cause was a misalignment between the alpha values stored in the
scene and the GPU alpha texture:
- When `Scene::reset` was called, it correctly cleared the alphas array
in the scene (reset added as a separate commit)
- When `render_svg` was called, it populated the scene with new alpha
values
- However, `Renderer::prepare` method only created a new alpha texture
when the strips buffer size increased
- This led to a situation where new alpha values were being written to a
texture sized for previous frames, or, if alphas weren’t properly reset,
they retained stale data from previous frames, causing textures to grow
larger each frame, meantime alpha data copying size was restricted to
the current texture size.
- The shader was calculating texture coordinates based on strip `col`
values, but these values pointed to positions that might exceed the
texture dimensions
- Due to GPU texture addressing behavior, these out-of-bounds accesses
"wrapped around" silently, causing the shader to sample completely
unrelated alpha values

The critical issue was that we were only checking if the strips buffer
needed to be recreated, but not independently verifying if the alpha
texture needed to be recreated when only the alpha values changed.

### Solution
Fixed the issue by modifying `prepare` method to:
- Separately check if the strips buffer or alpha texture needs to be
recreated
- Create a new alpha texture whenever the required texture size exceeds
the current texture size
- Ensure both resources are properly sized for the current frame's data
before writing to them
- Add assertions to verify the alpha texture is large enough to hold all
the alpha values

This ensures that the alpha texture always matches the current frame's
alpha values, maintaining the correct relationship between strip `col`
indices and texture coordinates, eliminating the visual artifacts.

### Notes
- `Scene::reset` method has been updated to properly (fully) reset the
scene state by clearing all data

Author: grebmeg

sparse_strips/vello_hybrid/examples/simple.rs

@@ -95,19 +95,6 @@ impl ApplicationHandler for SimpleVelloApp<'_> {
         self.renderers[surface.dev_id]
             .get_or_insert_with(|| create_vello_renderer(&self.context, &surface));
 
-        self.scene.reset();
-        draw_simple_scene(&mut self.scene);
-        let device_handle = &self.context.devices[surface.dev_id];
-        self.renderers[surface.dev_id].as_mut().unwrap().prepare(
-            &device_handle.device,
-            &device_handle.queue,
-            &self.scene,
-            &RenderParams {
-                width: surface.config.width,
-                height: surface.config.height,
-            },
-        );
-
         self.state = RenderState::Active {
             surface: Box::new(surface),
             window,
@@ -132,9 +119,20 @@ impl ApplicationHandler for SimpleVelloApp<'_> {
                     .resize_surface(surface, size.width, size.height);
             }
             WindowEvent::RedrawRequested => {
-                let width = surface.config.width;
-                let height = surface.config.height;
+                self.scene.reset();
+
+                draw_simple_scene(&mut self.scene);
                 let device_handle = &self.context.devices[surface.dev_id];
+                let render_params = RenderParams {
+                    width: surface.config.width,
+                    height: surface.config.height,
+                };
+                self.renderers[surface.dev_id].as_mut().unwrap().prepare(
+                    &device_handle.device,
+                    &device_handle.queue,
+                    &self.scene,
+                    &render_params,
+                );
 
                 let surface_texture = surface
                     .surface
@@ -169,7 +167,7 @@ impl ApplicationHandler for SimpleVelloApp<'_> {
                     self.renderers[surface.dev_id].as_mut().unwrap().render(
                         &self.scene,
                         &mut pass,
-                        &RenderParams { width, height },
+                        &render_params,
                     );
                 }
 

sparse_strips/vello_hybrid/examples/svg.rs

@@ -20,8 +20,9 @@ use vello_hybrid::{
 use wgpu::RenderPassDescriptor;
 use winit::{
     application::ApplicationHandler,
-    event::WindowEvent,
+    event::{ElementState, KeyEvent, MouseScrollDelta, WindowEvent},
     event_loop::{ActiveEventLoop, EventLoop},
+    keyboard::{Key, NamedKey},
     window::{Window, WindowId},
 };
 
@@ -33,6 +34,8 @@ fn main() {
         renderers: vec![],
         state: RenderState::Suspended(None),
         scene: Scene::new(1600, 1200),
+        render_scale: 5.0,
+        parsed_svg: None,
     };
 
     let event_loop = EventLoop::new().expect("Couldn't create event loop");
@@ -41,6 +44,11 @@ fn main() {
         .expect("Couldn't run event loop");
 }
 
+// Constants for zoom behavior
+const MIN_SCALE: f64 = 0.1;
+const MAX_SCALE: f64 = 20.0;
+const ZOOM_STEP: f64 = 0.5;
+
 #[derive(Debug)]
 enum RenderState<'s> {
     /// `RenderSurface` and `Window` for active rendering.
@@ -68,6 +76,19 @@ struct SvgVelloApp<'s> {
     // description a scene to be drawn (with paths, fills, images, text, etc)
     // which is then passed to a renderer for rendering
     scene: Scene,
+
+    // The scale factor for the rendered SVG
+    render_scale: f64,
+
+    // The parsed SVG
+    parsed_svg: Option<PicoSvg>,
+}
+
+impl SvgVelloApp<'_> {
+    /// Adjust the render scale by the given delta, clamping to min/max values
+    fn adjust_scale(&mut self, delta: f64) {
+        self.render_scale = (self.render_scale + delta).clamp(MIN_SCALE, MAX_SCALE);
+    }
 }
 
 impl ApplicationHandler for SvgVelloApp<'_> {
@@ -100,23 +121,9 @@ impl ApplicationHandler for SvgVelloApp<'_> {
         self.renderers[surface.dev_id]
             .get_or_insert_with(|| create_vello_renderer(&self.context, &surface));
 
-        self.scene.reset();
-
-        let render_scale = 5.0;
         let svg_filename = std::env::args().nth(1).expect("svg filename is first arg");
         let svg: String = std::fs::read_to_string(svg_filename).expect("error reading file");
-        let parsed_svg = PicoSvg::load(&svg, 1.0).expect("error parsing SVG");
-        render_svg(&mut self.scene, render_scale, &parsed_svg.items);
-        let device_handle = &self.context.devices[surface.dev_id];
-        self.renderers[surface.dev_id].as_mut().unwrap().prepare(
-            &device_handle.device,
-            &device_handle.queue,
-            &self.scene,
-            &RenderParams {
-                width: surface.config.width,
-                height: surface.config.height,
-            },
-        );
+        self.parsed_svg = Some(PicoSvg::load(&svg, 1.0).expect("error parsing SVG"));
 
         self.state = RenderState::Active {
             surface: Box::new(surface),
@@ -154,10 +161,62 @@ impl ApplicationHandler for SvgVelloApp<'_> {
                     .resize_surface(surface, size.width, size.height);
             }
 
+            WindowEvent::MouseWheel {
+                delta: MouseScrollDelta::PixelDelta(pos),
+                ..
+            } => {
+                // Convert pixel delta to a scale adjustment
+                // Divide by a factor to make the zoom less sensitive
+                self.adjust_scale(pos.y * ZOOM_STEP / 50.0);
+            }
+
+            WindowEvent::PinchGesture { delta, .. } => {
+                self.adjust_scale(delta * ZOOM_STEP);
+            }
+
+            WindowEvent::KeyboardInput {
+                event:
+                    KeyEvent {
+                        logical_key,
+                        state: ElementState::Pressed,
+                        ..
+                    },
+                ..
+            } => {
+                match logical_key {
+                    Key::Character(c) => match c.as_str() {
+                        "+" | "=" => self.adjust_scale(ZOOM_STEP),
+                        "-" | "_" => self.adjust_scale(-ZOOM_STEP),
+                        // Reset to original scale
+                        "0" => {
+                            self.render_scale = 5.0;
+                        }
+                        _ => {}
+                    },
+                    Key::Named(NamedKey::Escape) => event_loop.exit(),
+                    _ => {}
+                }
+            }
+
             WindowEvent::RedrawRequested => {
-                let width = surface.config.width;
-                let height = surface.config.height;
+                self.scene.reset();
+
+                if let Some(parsed_svg) = &self.parsed_svg {
+                    render_svg(&mut self.scene, self.render_scale, &parsed_svg.items);
+                }
+
                 let device_handle = &self.context.devices[surface.dev_id];
+                let render_params = RenderParams {
+                    width: surface.config.width,
+                    height: surface.config.height,
+                };
+                self.renderers[surface.dev_id].as_mut().unwrap().prepare(
+                    &device_handle.device,
+                    &device_handle.queue,
+                    &self.scene,
+                    &render_params,
+                );
+
                 let surface_texture = surface
                     .surface
                     .get_current_texture()
@@ -190,7 +249,7 @@ impl ApplicationHandler for SvgVelloApp<'_> {
                     self.renderers[surface.dev_id].as_mut().unwrap().render(
                         &self.scene,
                         &mut pass,
-                        &RenderParams { width, height },
+                        &render_params,
                     );
                 }
                 device_handle.queue.submit([encoder.finish()]);

sparse_strips/vello_hybrid/src/render.rs

@@ -204,80 +204,110 @@ impl Renderer {
         let render_data = scene.prepare_render_data();
         let required_strips_size = size_of::<GpuStrip>() as u64 * render_data.strips.len() as u64;
 
-        // Check if we need to create new resources or resize existing ones
-        let needs_new_resources = match &self.resources {
-            Some(resources) => required_strips_size > resources.strips_buffer.size(),
-            None => true,
-        };
+        let (needs_new_strips_buffer, needs_new_alpha_texture) = match &self.resources {
+            Some(resources) => {
+                let strips_too_small = required_strips_size > resources.strips_buffer.size();
 
-        if needs_new_resources {
-            let strips_buffer = device.create_buffer(&wgpu::BufferDescriptor {
-                label: Some("Strips Buffer"),
-                size: required_strips_size,
-                usage: wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
-                mapped_at_creation: false,
-            });
+                let max_texture_dimension_2d = device.limits().max_texture_dimension_2d;
+                let alpha_len = render_data.alphas.len();
+                // 4 alpha values u32 each per texel
+                let required_alpha_height =
+                    (u32::try_from(alpha_len).unwrap()).div_ceil(max_texture_dimension_2d * 4);
+                let required_alpha_size = max_texture_dimension_2d * required_alpha_height * 4;
 
-            let max_texture_dimension_2d = device.limits().max_texture_dimension_2d;
-            let alpha_len = render_data.alphas.len();
-            // 4 alpha values u32 each per texel
-            let alpha_texture_height =
-                (u32::try_from(alpha_len).unwrap()).div_ceil(max_texture_dimension_2d * 4);
+                let current_alpha_size =
+                    resources.alphas_texture.width() * resources.alphas_texture.height() * 4;
+                let alpha_too_small = required_alpha_size > current_alpha_size;
 
-            // Ensure dimensions don't exceed WebGL2 limits
-            assert!(
-                alpha_texture_height <= max_texture_dimension_2d,
-                "Alpha texture height exceeds WebGL2 limit"
-            );
+                (strips_too_small, alpha_too_small)
+            }
+            None => (true, true),
+        };
 
-            let alphas_texture = device.create_texture(&wgpu::TextureDescriptor {
-                label: Some("Alpha Texture"),
-                size: wgpu::Extent3d {
-                    width: max_texture_dimension_2d,
-                    height: alpha_texture_height,
-                    depth_or_array_layers: 1,
-                },
-                mip_level_count: 1,
-                sample_count: 1,
-                dimension: wgpu::TextureDimension::D2,
-                format: wgpu::TextureFormat::Rgba32Uint,
-                usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
-                view_formats: &[],
-            });
-            let alphas_texture_view =
-                alphas_texture.create_view(&wgpu::TextureViewDescriptor::default());
+        if needs_new_strips_buffer || needs_new_alpha_texture {
+            let strips_buffer = if needs_new_strips_buffer {
+                device.create_buffer(&wgpu::BufferDescriptor {
+                    label: Some("Strips Buffer"),
+                    size: required_strips_size,
+                    usage: wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
+                    mapped_at_creation: false,
+                })
+            } else {
+                // Reuse existing buffer if it's big enough
+                self.resources
+                    .as_ref()
+                    .expect("Strips buffer not found")
+                    .strips_buffer
+                    .clone()
+            };
+            let (alphas_texture, render_bind_group) = if needs_new_alpha_texture {
+                let max_texture_dimension_2d = device.limits().max_texture_dimension_2d;
+                let alpha_len = render_data.alphas.len();
+                // 4 alpha values u32 each per texel
+                let alpha_texture_height =
+                    (u32::try_from(alpha_len).unwrap()).div_ceil(max_texture_dimension_2d * 4);
 
-            let config_buf = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
-                label: Some("Config Buffer"),
-                contents: bytemuck::bytes_of(&Config {
-                    width: render_params.width,
-                    height: render_params.height,
-                    strip_height: Tile::HEIGHT.into(),
-                }),
-                usage: wgpu::BufferUsages::UNIFORM,
-            });
+                // Ensure dimensions don't exceed WebGL2 limits
+                assert!(
+                    alpha_texture_height <= max_texture_dimension_2d,
+                    "Alpha texture height exceeds WebGL2 limit"
+                );
 
-            let render_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
-                label: Some("Render Bind Group"),
-                layout: &self.render_bind_group_layout,
-                entries: &[
-                    wgpu::BindGroupEntry {
-                        binding: 0,
-                        resource: wgpu::BindingResource::TextureView(&alphas_texture_view),
+                let alphas_texture = device.create_texture(&wgpu::TextureDescriptor {
+                    label: Some("Alpha Texture"),
+                    size: wgpu::Extent3d {
+                        width: max_texture_dimension_2d,
+                        height: alpha_texture_height,
+                        depth_or_array_layers: 1,
                     },
-                    wgpu::BindGroupEntry {
-                        binding: 1,
-                        resource: config_buf.as_entire_binding(),
-                    },
-                ],
-            });
+                    mip_level_count: 1,
+                    sample_count: 1,
+                    dimension: wgpu::TextureDimension::D2,
+                    format: wgpu::TextureFormat::Rgba32Uint,
+                    usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::COPY_DST,
+                    view_formats: &[],
+                });
+                let alphas_texture_view =
+                    alphas_texture.create_view(&wgpu::TextureViewDescriptor::default());
+
+                let config_buf = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                    label: Some("Config Buffer"),
+                    contents: bytemuck::bytes_of(&Config {
+                        width: render_params.width,
+                        height: render_params.height,
+                        strip_height: Tile::HEIGHT.into(),
+                    }),
+                    usage: wgpu::BufferUsages::UNIFORM,
+                });
 
+                let render_bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+                    label: Some("Render Bind Group"),
+                    layout: &self.render_bind_group_layout,
+                    entries: &[
+                        wgpu::BindGroupEntry {
+                            binding: 0,
+                            resource: wgpu::BindingResource::TextureView(&alphas_texture_view),
+                        },
+                        wgpu::BindGroupEntry {
+                            binding: 1,
+                            resource: config_buf.as_entire_binding(),
+                        },
+                    ],
+                });
+                (alphas_texture, render_bind_group)
+            } else {
+                let resources = self.resources.as_ref().unwrap();
+                (
+                    resources.alphas_texture.clone(),
+                    resources.render_bind_group.clone(),
+                )
+            };
             self.resources = Some(GpuResources {
                 strips_buffer,
                 alphas_texture,
                 render_bind_group,
             });
-        }
+        };
 
         // Now that we have resources, we can update the data
         if let Some(resources) = &self.resources {
@@ -291,6 +321,10 @@ impl Renderer {
             // Prepare alpha data for the texture with 4 alpha values per texel
             let texture_width = resources.alphas_texture.width();
             let texture_height = resources.alphas_texture.height();
+            assert!(
+                render_data.alphas.len() <= (texture_width * texture_height * 4) as usize,
+                "Alpha texture dimensions are too small to fit the alpha data"
+            );
             let mut alpha_data = vec![0_u32; render_data.alphas.len()];
             alpha_data[..].copy_from_slice(&render_data.alphas);
             alpha_data.resize((texture_width * texture_height * 4) as usize, 0);