[vello_hybrid]: add example for image destruction

Author: grebmeg

sparse_strips/vello_hybrid/examples/native_webgl/src/lib.rs

@@ -11,8 +11,11 @@
 
 use std::cell::RefCell;
 use std::rc::Rc;
-use vello_common::kurbo::{Affine, Vec2};
-use vello_hybrid_scenes::AnyScene;
+use vello_common::{
+    kurbo::{Affine, Vec2},
+    paint::ImageId,
+};
+use vello_hybrid_scenes::{AnyScene, SceneResources};
 use wasm_bindgen::prelude::*;
 use web_sys::{Event, HtmlCanvasElement, KeyboardEvent, MouseEvent, WheelEvent};
 
@@ -41,6 +44,8 @@ struct AppState {
     renderer_wrapper: RendererWrapper,
     need_render: bool,
     canvas: HtmlCanvasElement,
+    scene_resources: SceneResources,
+    uploaded_images: Vec<ImageId>,
 }
 
 impl AppState {
@@ -62,6 +67,8 @@ impl AppState {
             renderer_wrapper,
             need_render: true,
             canvas,
+            scene_resources: SceneResources::new(),
+            uploaded_images: Vec::new(),
         };
 
         app_state.upload_images_to_atlas();
@@ -77,7 +84,11 @@ impl AppState {
         self.scene.reset();
 
         // Render the current scene with transform
-        self.scenes[self.current_scene].render(&mut self.scene, self.transform);
+        self.scenes[self.current_scene].render(
+            &mut self.scene,
+            self.transform,
+            &self.scene_resources,
+        );
 
         let render_size = vello_hybrid::RenderSize {
             width: self.width,
@@ -118,8 +129,9 @@ impl AppState {
         self.need_render = true;
     }
 
-    fn reset_transform(&mut self) {
+    fn reset_scene(&mut self) {
         self.transform = Affine::IDENTITY;
+        self.upload_images_to_atlas();
         self.need_render = true;
     }
 
@@ -180,14 +192,27 @@ impl AppState {
     fn upload_images_to_atlas(&mut self) {
         use vello_hybrid_scenes::image::ImageScene;
 
+        self.scene_resources.images.clear();
+        self.uploaded_images.clear();
+
         // 1st example — uploading pixmap directly to WebGL atlas
         let pixmap1 = ImageScene::read_flower_image();
-        self.renderer_wrapper.renderer.upload_image(&pixmap1);
+        let image_id1 = self.renderer_wrapper.renderer.upload_image(&pixmap1);
 
         // 2nd example — uploading from a WebGL texture
         let pixmap2 = ImageScene::read_cowboy_image();
         let texture2 = self.pixmap_to_webgl_texture(&pixmap2);
-        self.renderer_wrapper.renderer.upload_image(&texture2);
+        let image_id2 = self.renderer_wrapper.renderer.upload_image(&texture2);
+
+        self.scene_resources.images = vec![image_id1, image_id2];
+        self.uploaded_images = vec![image_id2, image_id1];
+    }
+
+    fn handle_destroy_image(&mut self) {
+        if let Some(image_id) = self.uploaded_images.pop() {
+            self.renderer_wrapper.renderer.destroy_image(image_id);
+        }
+        self.need_render = true;
     }
 
     /// Convert a pixmap to WebGL texture
@@ -382,7 +407,8 @@ pub async fn run_interactive(canvas_width: u16, canvas_height: u16) {
                 Box::new(move |event: KeyboardEvent| match event.key().as_str() {
                     "ArrowRight" => app_state.borrow_mut().next_scene(),
                     "ArrowLeft" => app_state.borrow_mut().prev_scene(),
-                    " " => app_state.borrow_mut().reset_transform(),
+                    "d" => app_state.borrow_mut().handle_destroy_image(),
+                    " " => app_state.borrow_mut().reset_scene(),
                     _ => {}
                 }) as Box<dyn FnMut(_)>,
             );
@@ -396,7 +422,7 @@ pub async fn run_interactive(canvas_width: u16, canvas_height: u16) {
     let document = web_sys::window().unwrap().document().unwrap();
     let instructions = document.create_element("div").unwrap();
     instructions.set_inner_html(
-        "Left/Right Arrow: Change scene | Space: Reset view | Mouse Drag: Pan | Mouse Wheel: Zoom",
+        "Left/Right Arrow: Change scene | Space: Reset scene | D: Destroy image | Mouse Drag: Pan | Mouse Wheel: Zoom",
     );
     let style = instructions
         .dyn_ref::<web_sys::HtmlElement>()

sparse_strips/vello_hybrid/examples/scenes/src/clip.rs

@@ -22,7 +22,7 @@ use vello_hybrid::Scene;
 pub struct ClipScene {}
 
 impl ExampleScene for ClipScene {
-    fn render(&mut self, ctx: &mut Scene, root_transform: Affine) {
+    fn render(&mut self, ctx: &mut Scene, root_transform: Affine, _resources: &crate::SceneResources) {
         render(ctx, root_transform);
     }
 }

sparse_strips/vello_hybrid/examples/scenes/src/image.rs

@@ -10,21 +10,28 @@ use vello_common::peniko::ImageFormat;
 use vello_common::pixmap::Pixmap;
 use vello_common::{
     kurbo::{Affine, Rect},
-    paint::{Image, ImageId, ImageSource},
+    paint::{Image, ImageSource},
     peniko::{Extend, ImageQuality},
 };
 use vello_hybrid::Scene;
 
-use crate::ExampleScene;
+use crate::{ExampleScene, SceneResources};
 
-/// Image scene state
-#[derive(Debug)]
-pub struct ImageScene {}
+/// Image scene shows how to use images in the scene.
+#[derive(Debug, Default)]
+pub struct ImageScene;
+
+impl ImageScene {
+    /// Create a new image scene
+    pub fn new() -> Self {
+        Self
+    }
+}
 
 impl ExampleScene for ImageScene {
-    fn render(&mut self, scene: &mut Scene, root_transform: Affine) {
-        let splash_flower_id = ImageId::new(0);
-        let cowboy_id = ImageId::new(1);
+    fn render(&mut self, scene: &mut Scene, root_transform: Affine, resources: &SceneResources) {
+        let splash_flower_id = resources.images.first().copied().unwrap();
+        let cowboy_id = resources.images.get(1).copied().unwrap();
 
         scene.set_transform(
             root_transform
@@ -73,7 +80,7 @@ impl ExampleScene for ImageScene {
         );
         scene.set_paint_transform(Affine::scale(0.25));
         scene.set_paint(Image {
-            source: ImageSource::OpaqueId(ImageId::new(0)),
+            source: ImageSource::OpaqueId(splash_flower_id),
             x_extend: Extend::Repeat,
             y_extend: Extend::Repeat,
             quality: ImageQuality::Low,

sparse_strips/vello_hybrid/examples/scenes/src/lib.rs

@@ -10,12 +10,30 @@ pub mod svg;
 pub mod text;
 
 use vello_common::kurbo::Affine;
+use vello_common::paint::ImageId;
 use vello_hybrid::Scene;
 
-/// Example scene that can maintain state between renders
+/// Resources that scenes may need each frame.
+#[derive(Debug, Clone, Default)]
+pub struct SceneResources {
+    /// Image ids that have been uploaded to the GPU.
+    pub images: Vec<ImageId>,
+}
+
+impl SceneResources {
+    /// Create a new instance
+    pub fn new() -> Self {
+        Self { images: Vec::new() }
+    }
+}
+
+/// Example scene that can maintain state between renders.
+///
+/// The `resources` parameter contains data such a uploaded image ids.
+/// Scenes that do not require external resources can ignore this parameter.
 pub trait ExampleScene {
-    /// Render the scene using the current state
-    fn render(&mut self, scene: &mut Scene, root_transform: Affine);
+    /// Render the scene using the current state.
+    fn render(&mut self, scene: &mut Scene, root_transform: Affine, resources: &SceneResources);
 }
 
 /// A type-erased example scene
@@ -25,7 +43,7 @@ pub struct AnyScene {
 }
 
 /// A type-erased render function
-type RenderFn = Box<dyn FnMut(&mut Scene, Affine)>;
+type RenderFn = Box<dyn FnMut(&mut Scene, Affine, &SceneResources)>;
 
 impl std::fmt::Debug for AnyScene {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
@@ -37,13 +55,18 @@ impl AnyScene {
     /// Create a new `AnyScene` from any type that implements `ExampleScene`
     pub fn new<T: ExampleScene + 'static>(mut scene: T) -> Self {
         Self {
-            render_fn: Box::new(move |s, transform| scene.render(s, transform)),
+            render_fn: Box::new(move |s, transform, res| scene.render(s, transform, res)),
         }
     }
 
     /// Render the scene
-    pub fn render(&mut self, scene: &mut Scene, root_transform: Affine) {
-        (self.render_fn)(scene, root_transform);
+    pub fn render(
+        &mut self,
+        scene: &mut Scene,
+        root_transform: Affine,
+        resources: &SceneResources,
+    ) {
+        (self.render_fn)(scene, root_transform, resources);
     }
 }
 
@@ -67,7 +90,7 @@ pub fn get_example_scenes(svg_paths: Option<Vec<&str>>) -> Box<[AnyScene]> {
     scenes.push(AnyScene::new(text::TextScene::new("Hello, Vello!")));
     scenes.push(AnyScene::new(simple::SimpleScene::new()));
     scenes.push(AnyScene::new(clip::ClipScene::new()));
-    scenes.push(AnyScene::new(image::ImageScene {}));
+    scenes.push(AnyScene::new(image::ImageScene::new()));
 
     scenes.into_boxed_slice()
 }
@@ -80,7 +103,7 @@ pub fn get_example_scenes() -> Box<[AnyScene]> {
         AnyScene::new(text::TextScene::new("Hello, Vello!")),
         AnyScene::new(simple::SimpleScene::new()),
         AnyScene::new(clip::ClipScene::new()),
-        AnyScene::new(image::ImageScene {}),
+        AnyScene::new(image::ImageScene::new()),
     ]
     .into_boxed_slice()
 }

sparse_strips/vello_hybrid/examples/scenes/src/simple.rs

@@ -14,7 +14,7 @@ use crate::ExampleScene;
 pub struct SimpleScene {}
 
 impl ExampleScene for SimpleScene {
-    fn render(&mut self, ctx: &mut Scene, root_transform: Affine) {
+    fn render(&mut self, ctx: &mut Scene, root_transform: Affine, _resources: &crate::SceneResources) {
         render(ctx, root_transform);
     }
 }

sparse_strips/vello_hybrid/examples/scenes/src/svg.rs

@@ -26,7 +26,7 @@ impl fmt::Debug for SvgScene {
 }
 
 impl ExampleScene for SvgScene {
-    fn render(&mut self, scene: &mut Scene, root_transform: Affine) {
+    fn render(&mut self, scene: &mut Scene, root_transform: Affine, _resources: &crate::SceneResources) {
         render_svg(scene, &self.svg.items, root_transform * self.transform);
     }
 }

sparse_strips/vello_hybrid/examples/scenes/src/text.rs

@@ -45,7 +45,7 @@ impl fmt::Debug for TextScene {
 }
 
 impl ExampleScene for TextScene {
-    fn render(&mut self, scene: &mut Scene, root_transform: Affine) {
+    fn render(&mut self, scene: &mut Scene, root_transform: Affine, _resources: &crate::SceneResources) {
         scene.set_transform(root_transform);
         render_text(self, scene);
     }