Implemented a texture atlas for images and svgs.

native/src/widget/image.rs

@@ -18,7 +18,7 @@ use std::{
 /// ```
 ///
 /// <img src="https://github.com/hecrj/iced/blob/9712b319bb7a32848001b96bd84977430f14b623/examples/resources/ferris.png?raw=true" width="300">
-#[derive(Debug)]
+#[derive(Debug, Hash)]
 pub struct Image {
     handle: Handle,
     width: Length,

wgpu/Cargo.toml

@@ -21,6 +21,7 @@ raw-window-handle = "0.3"
 glam = "0.8"
 font-kit = "0.4"
 log = "0.4"
+guillotiere = "0.4"
 
 [dependencies.image]
 version = "0.22"

wgpu/src/image.rs

@@ -3,13 +3,16 @@ mod raster;
 #[cfg(feature = "svg")]
 mod vector;
 
+#[cfg(feature = "image")]
+use crate::image::raster::Memory;
+
 use crate::Transformation;
 use iced_native::{image, svg, Rectangle};
 
 use std::mem;
 
 #[cfg(any(feature = "image", feature = "svg"))]
-use std::cell::RefCell;
+use std::{cell::RefCell, collections::HashMap};
 
 #[derive(Debug)]
 pub struct Pipeline {
@@ -174,6 +177,16 @@ impl Pipeline {
                                 format: wgpu::VertexFormat::Float2,
                                 offset: 4 * 2,
                             },
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 3,
+                                format: wgpu::VertexFormat::Float2,
+                                offset: 4 * 4,
+                            },
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 4,
+                                format: wgpu::VertexFormat::Float2,
+                                offset: 4 * 6,
+                            },
                         ],
                     },
                 ],
@@ -197,9 +210,10 @@ impl Pipeline {
 
         Pipeline {
             #[cfg(feature = "image")]
-            raster_cache: RefCell::new(raster::Cache::new()),
+            raster_cache: RefCell::new(raster::Cache::new(&device)),
+
             #[cfg(feature = "svg")]
-            vector_cache: RefCell::new(vector::Cache::new()),
+            vector_cache: RefCell::new(vector::Cache::new(&device)),
 
             pipeline,
             uniforms: uniforms_buffer,
@@ -251,50 +265,72 @@ impl Pipeline {
             std::mem::size_of::<Uniforms>() as u64,
         );
 
-        // TODO: Batch draw calls using a texture atlas
+        #[cfg(any(feature = "image", feature = "svg"))]
-        // Guillotière[1] by @nical can help us a lot here.
+        let mut recs = HashMap::new();
-        //
+
-        // [1]: https://github.com/nical/guillotiere
+        for (index, image) in instances.iter().enumerate() {
-        for image in instances {
+            match &image.handle {
-            let uploaded_texture = match &image.handle {
                 Handle::Raster(_handle) => {
                     #[cfg(feature = "image")]
                     {
-                        let mut cache = self.raster_cache.borrow_mut();
+                        let mut raster_cache = self.raster_cache.borrow_mut();
-                        let memory = cache.load(&_handle);
 
-                        memory.upload(device, encoder, &self.texture_layout)
+                        if let Memory::Device(allocation) = raster_cache.upload(
+                            _handle,
+                            device,
+                            encoder)
+                        {
+                            let rec = allocation.rectangle;
+
+                            let _ = recs.insert(index, rec);
+                        }
                     }
-
-                    #[cfg(not(feature = "image"))]
-                    None
                 }
                 Handle::Vector(_handle) => {
                     #[cfg(feature = "svg")]
                     {
-                        let mut cache = self.vector_cache.borrow_mut();
+                        let mut vector_cache = self.vector_cache.borrow_mut();
 
-                        cache.upload(
+                        if let Some(allocation) = vector_cache.upload(
                             _handle,
                             image.scale,
                             _scale,
                             device,
                             encoder,
-                            &self.texture_layout,
+                        ) {
-                        )
+                            let rec = allocation.rectangle;
+
+                            let _ = recs.insert(index, rec);
+                        }
                     }
-
-                    #[cfg(not(feature = "svg"))]
-                    None
                 }
-            };
+            }
+        }
+
+        #[cfg(feature = "image")]
+        let raster_atlas = self.raster_cache.borrow().atlas(device, &self.texture_layout);
+
+        #[cfg(feature = "svg")]
+        let vector_atlas = self.vector_cache.borrow().atlas(device, &self.texture_layout);
+
+        #[cfg(any(feature = "image", feature = "svg"))]
+        for (index, image) in instances.iter().enumerate() {
+            if let Some(rec) = recs.get(&index) {
+                let atlas_size = match image.handle {
+                    #[cfg(feature = "image")]
+                    Handle::Raster(_) => self.raster_cache.borrow().atlas_size(),
+                    #[cfg(feature = "svg")]
+                    Handle::Vector(_) => self.vector_cache.borrow().atlas_size(),
+                    _ => guillotiere::Size::new(0, 0)
+                };
 
-            if let Some(texture) = uploaded_texture {
                 let instance_buffer = device
                     .create_buffer_mapped(1, wgpu::BufferUsage::COPY_SRC)
                     .fill_from_slice(&[Instance {
                         _position: image.position,
                         _scale: image.scale,
+                        _position_in_atlas: [rec.min.x as f32 / atlas_size.width as f32, rec.min.y as f32 / atlas_size.height as f32],
+                        _scale_in_atlas: [rec.size().width as f32 / atlas_size.width as f32, rec.size().height as f32 / atlas_size.height as f32]
                     }]);
 
                 encoder.copy_buffer_to_buffer(
@@ -305,48 +341,57 @@ impl Pipeline {
                     mem::size_of::<Instance>() as u64,
                 );
 
-                {
+                let texture = match &image.handle {
-                    let mut render_pass = encoder.begin_render_pass(
+                    #[cfg(feature = "image")]
-                        &wgpu::RenderPassDescriptor {
+                    Handle::Raster(_) => &raster_atlas,
-                            color_attachments: &[
+                    #[cfg(feature = "svg")]
-                                wgpu::RenderPassColorAttachmentDescriptor {
+                    Handle::Vector(_) => &vector_atlas,
-                                    attachment: target,
+                    #[cfg(feature = "image")]
-                                    resolve_target: None,
+                    _ => &raster_atlas,
-                                    load_op: wgpu::LoadOp::Load,
+                    #[cfg(feature = "svg")]
-                                    store_op: wgpu::StoreOp::Store,
+                    _ => &vector_atlas,
-                                    clear_color: wgpu::Color {
+                };
-                                        r: 0.0,
+
-                                        g: 0.0,
+                let mut render_pass = encoder.begin_render_pass(
-                                        b: 0.0,
+                    &wgpu::RenderPassDescriptor {
-                                        a: 0.0,
+                        color_attachments: &[
-                                    },
+                            wgpu::RenderPassColorAttachmentDescriptor {
+                                attachment: target,
+                                resolve_target: None,
+                                load_op: wgpu::LoadOp::Load,
+                                store_op: wgpu::StoreOp::Store,
+                                clear_color: wgpu::Color {
+                                    r: 0.0,
+                                    g: 0.0,
+                                    b: 0.0,
+                                    a: 0.0,
                                 },
-                            ],
+                            },
-                            depth_stencil_attachment: None,
+                        ],
-                        },
+                        depth_stencil_attachment: None,
-                    );
+                    },
+                );
 
-                    render_pass.set_pipeline(&self.pipeline);
+                render_pass.set_pipeline(&self.pipeline);
-                    render_pass.set_bind_group(0, &self.constants, &[]);
+                render_pass.set_bind_group(0, &self.constants, &[]);
-                    render_pass.set_bind_group(1, &texture, &[]);
+                render_pass.set_bind_group(1, &texture, &[]);
-                    render_pass.set_index_buffer(&self.indices, 0);
+                render_pass.set_index_buffer(&self.indices, 0);
-                    render_pass.set_vertex_buffers(
+                render_pass.set_vertex_buffers(
-                        0,
+                    0,
-                        &[(&self.vertices, 0), (&self.instances, 0)],
+                    &[(&self.vertices, 0), (&self.instances, 0)],
-                    );
+                );
-                    render_pass.set_scissor_rect(
+                render_pass.set_scissor_rect(
-                        bounds.x,
+                    bounds.x,
-                        bounds.y,
+                    bounds.y,
-                        bounds.width,
+                    bounds.width,
-                        bounds.height,
+                    bounds.height,
-                    );
+                );
 
-                    render_pass.draw_indexed(
+                render_pass.draw_indexed(
-                        0..QUAD_INDICES.len() as u32,
+                    0..QUAD_INDICES.len() as u32,
-                        0,
+                    0,
-                        0..1 as u32,
+                    0..1 as u32,
-                    );
+                );
-                }
             }
         }
     }
@@ -399,6 +444,8 @@ const QUAD_VERTS: [Vertex; 4] = [
 struct Instance {
     _position: [f32; 2],
     _scale: [f32; 2],
+    _position_in_atlas: [f32; 2],
+    _scale_in_atlas: [f32; 2],
 }
 
 #[repr(C)]

wgpu/src/image/raster.rs

@@ -1,17 +1,13 @@
 use iced_native::image;
 use std::{
     collections::{HashMap, HashSet},
-    rc::Rc,
+    fmt,
 };
+use guillotiere::{Allocation, AtlasAllocator, Size};
 
-#[derive(Debug)]
 pub enum Memory {
     Host(::image::ImageBuffer<::image::Bgra<u8>, Vec<u8>>),
-    Device {
+    Device(Allocation),
-        bind_group: Rc<wgpu::BindGroup>,
-        width: u32,
-        height: u32,
-    },
     NotFound,
     Invalid,
 }
@@ -20,108 +16,59 @@ impl Memory {
     pub fn dimensions(&self) -> (u32, u32) {
         match self {
             Memory::Host(image) => image.dimensions(),
-            Memory::Device { width, height, .. } => (*width, *height),
+            Memory::Device(allocation) => {
+                let size = &allocation.rectangle.size();
+                (size.width as u32, size.height as u32)
+            },
             Memory::NotFound => (1, 1),
             Memory::Invalid => (1, 1),
         }
     }
-
-    pub fn upload(
-        &mut self,
-        device: &wgpu::Device,
-        encoder: &mut wgpu::CommandEncoder,
-        texture_layout: &wgpu::BindGroupLayout,
-    ) -> Option<Rc<wgpu::BindGroup>> {
-        match self {
-            Memory::Host(image) => {
-                let (width, height) = image.dimensions();
-
-                let extent = wgpu::Extent3d {
-                    width,
-                    height,
-                    depth: 1,
-                };
-
-                let texture = device.create_texture(&wgpu::TextureDescriptor {
-                    size: extent,
-                    array_layer_count: 1,
-                    mip_level_count: 1,
-                    sample_count: 1,
-                    dimension: wgpu::TextureDimension::D2,
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
-                    usage: wgpu::TextureUsage::COPY_DST
-                        | wgpu::TextureUsage::SAMPLED,
-                });
-
-                let temp_buf = {
-                    let flat_samples = image.as_flat_samples();
-                    let slice = flat_samples.as_slice();
-
-                    device
-                        .create_buffer_mapped(
-                            slice.len(),
-                            wgpu::BufferUsage::COPY_SRC,
-                        )
-                        .fill_from_slice(slice)
-                };
-
-                encoder.copy_buffer_to_texture(
-                    wgpu::BufferCopyView {
-                        buffer: &temp_buf,
-                        offset: 0,
-                        row_pitch: 4 * width as u32,
-                        image_height: height as u32,
-                    },
-                    wgpu::TextureCopyView {
-                        texture: &texture,
-                        array_layer: 0,
-                        mip_level: 0,
-                        origin: wgpu::Origin3d {
-                            x: 0.0,
-                            y: 0.0,
-                            z: 0.0,
-                        },
-                    },
-                    extent,
-                );
-
-                let bind_group =
-                    device.create_bind_group(&wgpu::BindGroupDescriptor {
-                        layout: texture_layout,
-                        bindings: &[wgpu::Binding {
-                            binding: 0,
-                            resource: wgpu::BindingResource::TextureView(
-                                &texture.create_default_view(),
-                            ),
-                        }],
-                    });
-
-                let bind_group = Rc::new(bind_group);
-
-                *self = Memory::Device {
-                    bind_group: bind_group.clone(),
-                    width,
-                    height,
-                };
-
-                Some(bind_group)
-            }
-            Memory::Device { bind_group, .. } => Some(bind_group.clone()),
-            Memory::NotFound => None,
-            Memory::Invalid => None,
-        }
-    }
 }
 
-#[derive(Debug)]
 pub struct Cache {
+    allocator: AtlasAllocator,
+    atlas: wgpu::Texture,
     map: HashMap<u64, Memory>,
     hits: HashSet<u64>,
 }
 
+impl fmt::Debug for Cache {
+    fn fmt(&self, fmt: &mut fmt::Formatter<'_>) -> fmt::Result {
+        fmt.debug_struct("Vector Cache")
+            .field("allocator", &String::from("AtlasAllocator"))
+            .field("atlas", &self.atlas)
+            .field("map", &String::from("HashMap<u64, Memory>"))
+            .field("hits", &self.hits)
+            .finish()
+    }
+}
+
 impl Cache {
-    pub fn new() -> Self {
+    pub fn new(device: &wgpu::Device) -> Self {
+        let (width, height) = (1000, 1000);
+
+        let extent = wgpu::Extent3d {
+            width,
+            height,
+            depth: 1,
+        };
+
+        let atlas = device.create_texture(&wgpu::TextureDescriptor {
+            size: extent,
+            array_layer_count: 1,
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            usage: wgpu::TextureUsage::COPY_DST
+                | wgpu::TextureUsage::COPY_SRC
+                | wgpu::TextureUsage::SAMPLED,
+        });
+
         Self {
+            allocator: AtlasAllocator::new(Size::new(width as i32, height as i32)),
+            atlas,
             map: HashMap::new(),
             hits: HashSet::new(),
         }
@@ -153,9 +100,153 @@ impl Cache {
         self.get(handle).unwrap()
     }
 
+    pub fn atlas_size(&self) -> guillotiere::Size {
+        self.allocator.size()
+    }
+
+    pub fn upload(
+        &mut self,
+        handle: &image::Handle,
+        device: &wgpu::Device,
+        encoder: &mut wgpu::CommandEncoder,
+    ) -> &Memory {
+        let _ = self.load(handle);
+
+        let memory = self.map.get_mut(&handle.id()).unwrap();
+
+        if let Memory::Host(image) = memory {
+            let (width, height) = image.dimensions();
+            let size = Size::new(width as i32, height as i32);
+
+            let old_atlas_size = self.allocator.size();
+            let allocation;
+
+            loop {
+                if let Some(a) = self.allocator.allocate(size) {
+                    allocation = a;
+                    break;
+                }
+
+                self.allocator.grow(self.allocator.size() * 2);
+            }
+
+            let new_atlas_size = self.allocator.size();
+
+            if new_atlas_size != old_atlas_size {
+                let new_atlas = device.create_texture(&wgpu::TextureDescriptor {
+                    size: wgpu::Extent3d {
+                        width: new_atlas_size.width as u32,
+                        height: new_atlas_size.height as u32,
+                        depth: 1,
+                    },
+                    array_layer_count: 1,
+                    mip_level_count: 1,
+                    sample_count: 1,
+                    dimension: wgpu::TextureDimension::D2,
+                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    usage: wgpu::TextureUsage::COPY_DST
+                        | wgpu::TextureUsage::COPY_SRC
+                        | wgpu::TextureUsage::SAMPLED,
+                });
+
+                encoder.copy_texture_to_texture(
+                    wgpu::TextureCopyView {
+                        texture: &self.atlas,
+                        array_layer: 0,
+                        mip_level: 0,
+                        origin: wgpu::Origin3d {
+                            x: 0.0,
+                            y: 0.0,
+                            z: 0.0,
+                        },
+                    },
+                    wgpu::TextureCopyView {
+                        texture: &new_atlas,
+                        array_layer: 0,
+                        mip_level: 0,
+                        origin: wgpu::Origin3d {
+                            x: 0.0,
+                            y: 0.0,
+                            z: 0.0,
+                        },
+                    },
+                    wgpu::Extent3d {
+                        width: old_atlas_size.width as u32,
+                        height: old_atlas_size.height as u32,
+                        depth: 1,
+                    }
+                );
+
+                self.atlas = new_atlas;
+            }
+
+            let extent = wgpu::Extent3d {
+                width,
+                height,
+                depth: 1,
+            };
+
+            let temp_buf = {
+                let flat_samples = image.as_flat_samples();
+                let slice = flat_samples.as_slice();
+
+                device
+                    .create_buffer_mapped(
+                        slice.len(),
+                        wgpu::BufferUsage::COPY_SRC,
+                    )
+                    .fill_from_slice(slice)
+            };
+
+            encoder.copy_buffer_to_texture(
+                wgpu::BufferCopyView {
+                    buffer: &temp_buf,
+                    offset: 0,
+                    row_pitch: 4 * width,
+                    image_height: height,
+                },
+                wgpu::TextureCopyView {
+                    texture: &self.atlas,
+                    array_layer: 0,
+                    mip_level: 0,
+                    origin: wgpu::Origin3d {
+                        x: allocation.rectangle.min.x as f32,
+                        y: allocation.rectangle.min.y as f32,
+                        z: 0.0,
+                    },
+                },
+                extent,
+            );
+
+            *memory = Memory::Device(allocation);
+        }
+
+        memory
+    }
+
+    pub fn atlas(&self, device: &wgpu::Device, texture_layout: &wgpu::BindGroupLayout) -> wgpu::BindGroup {
+        device.create_bind_group(&wgpu::BindGroupDescriptor {
+            layout: texture_layout,
+            bindings: &[wgpu::Binding {
+                binding: 0,
+                resource: wgpu::BindingResource::TextureView(
+                    &self.atlas.create_default_view(),
+                ),
+            }],
+        })
+    }
+
     pub fn trim(&mut self) {
         let hits = &self.hits;
 
+        for (id, mem) in &mut self.map {
+            if let Memory::Device(allocation) = mem {
+                if !hits.contains(&id) {
+                    self.allocator.deallocate(allocation.id);
+                }
+            }
+        }
+
         self.map.retain(|k, _| hits.contains(k));
         self.hits.clear();
     }

wgpu/src/image/vector.rs

@@ -1,8 +1,9 @@
 use iced_native::svg;
 use std::{
     collections::{HashMap, HashSet},
-    rc::Rc,
+    fmt,
 };
+use guillotiere::{Allocation, AtlasAllocator, Size};
 
 pub enum Svg {
     Loaded { tree: resvg::usvg::Tree },
@@ -22,27 +23,63 @@ impl Svg {
     }
 }
 
-impl std::fmt::Debug for Svg {
+impl fmt::Debug for Svg {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         write!(f, "Svg")
     }
 }
 
-#[derive(Debug)]
 pub struct Cache {
+    allocator: AtlasAllocator,
+    atlas: wgpu::Texture,
     svgs: HashMap<u64, Svg>,
-    rasterized: HashMap<(u64, u32, u32), Rc<wgpu::BindGroup>>,
+    rasterized: HashMap<(u64, u32, u32), Allocation>,
     svg_hits: HashSet<u64>,
     rasterized_hits: HashSet<(u64, u32, u32)>,
 }
 
+impl fmt::Debug for Cache {
+    fn fmt(&self, fmt: &mut fmt::Formatter<'_>) -> fmt::Result {
+        fmt.debug_struct("Vector Cache")
+            .field("allocator", &String::from("AtlasAllocator"))
+            .field("atlas", &self.atlas)
+            .field("svgs", &self.svgs)
+            .field("rasterized", &String::from("HashMap<(u64, u32, u32), Allocation>"))
+            .field("svg_hits", &self.svg_hits)
+            .field("rasterized_hits", &self.rasterized_hits)
+            .finish()
+    }
+}
+
 impl Cache {
-    pub fn new() -> Self {
+    pub fn new(device: &wgpu::Device) -> Self {
+        let (width, height) = (512, 512);
+
+        let extent = wgpu::Extent3d {
+            width,
+            height,
+            depth: 1,
+        };
+
+        let atlas = device.create_texture(&wgpu::TextureDescriptor {
+            size: extent,
+            array_layer_count: 1,
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            usage: wgpu::TextureUsage::COPY_DST
+                | wgpu::TextureUsage::COPY_SRC
+                | wgpu::TextureUsage::SAMPLED,
+        });
+
         Self {
             svgs: HashMap::new(),
             rasterized: HashMap::new(),
             svg_hits: HashSet::new(),
             rasterized_hits: HashSet::new(),
+            allocator: AtlasAllocator::new(Size::new(width as i32, height as i32)),
+            atlas,
         }
     }
 
@@ -62,6 +99,10 @@ impl Cache {
         self.svgs.get(&handle.id()).unwrap()
     }
 
+    pub fn atlas_size(&self) -> guillotiere::Size {
+        self.allocator.size()
+    }
+
     pub fn upload(
         &mut self,
         handle: &svg::Handle,
@@ -69,8 +110,7 @@ impl Cache {
         scale: f32,
         device: &wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
-        texture_layout: &wgpu::BindGroupLayout,
+    ) -> Option<&Allocation> {
-    ) -> Option<Rc<wgpu::BindGroup>> {
         let id = handle.id();
 
         let (width, height) = (
@@ -82,36 +122,88 @@ impl Cache {
         // We currently rerasterize the SVG when its size changes. This is slow
         // as heck. A GPU rasterizer like `pathfinder` may perform better.
         // It would be cool to be able to smooth resize the `svg` example.
-        if let Some(bind_group) = self.rasterized.get(&(id, width, height)) {
+        if self.rasterized.get(&(id, width, height)).is_some() {
             let _ = self.svg_hits.insert(id);
             let _ = self.rasterized_hits.insert((id, width, height));
 
-            return Some(bind_group.clone());
+            return self.rasterized.get(&(id, width, height));
         }
 
-        match self.load(handle) {
+        let _ = self.load(handle);
+
+        match self.svgs.get(&handle.id()).unwrap() {
             Svg::Loaded { tree } => {
                 if width == 0 || height == 0 {
                     return None;
                 }
 
-                let extent = wgpu::Extent3d {
+                let size = Size::new(width as i32, height as i32);
-                    width,
+                let old_atlas_size = self.allocator.size();
-                    height,
+                let allocation;
-                    depth: 1,
-                };
 
-                let texture = device.create_texture(&wgpu::TextureDescriptor {
+                loop {
-                    size: extent,
+                    if let Some(a) = self.allocator.allocate(size) {
-                    array_layer_count: 1,
+                        allocation = a;
-                    mip_level_count: 1,
+                        break;
-                    sample_count: 1,
+                    }
-                    dimension: wgpu::TextureDimension::D2,
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
-                    usage: wgpu::TextureUsage::COPY_DST
-                        | wgpu::TextureUsage::SAMPLED,
-                });
 
+                    self.allocator.grow(self.allocator.size() * 2);
+                }
+
+                let new_atlas_size = self.allocator.size();
+
+                if new_atlas_size != old_atlas_size {
+                    let new_atlas = device.create_texture(&wgpu::TextureDescriptor {
+                        size: wgpu::Extent3d {
+                            width: new_atlas_size.width as u32,
+                            height: new_atlas_size.height as u32,
+                            depth: 1,
+                        },
+                        array_layer_count: 1,
+                        mip_level_count: 1,
+                        sample_count: 1,
+                        dimension: wgpu::TextureDimension::D2,
+                        format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                        usage: wgpu::TextureUsage::COPY_DST
+                            | wgpu::TextureUsage::COPY_SRC
+                            | wgpu::TextureUsage::SAMPLED,
+                    });
+
+                    encoder.copy_texture_to_texture(
+                        wgpu::TextureCopyView {
+                            texture: &self.atlas,
+                            array_layer: 0,
+                            mip_level: 0,
+                            origin: wgpu::Origin3d {
+                                x: 0.0,
+                                y: 0.0,
+                                z: 0.0,
+                            },
+                        },
+                        wgpu::TextureCopyView {
+                            texture: &new_atlas,
+                            array_layer: 0,
+                            mip_level: 0,
+                            origin: wgpu::Origin3d {
+                                x: 0.0,
+                                y: 0.0,
+                                z: 0.0,
+                            },
+                        },
+                        wgpu::Extent3d {
+                            width: old_atlas_size.width as u32,
+                            height: old_atlas_size.height as u32,
+                            depth: 1,
+                        }
+                    );
+
+                    self.atlas = new_atlas;
+                }
+
+                // TODO: Optimize!
+                // We currently rerasterize the SVG when its size changes. This is slow
+                // as heck. A GPU rasterizer like `pathfinder` may perform better.
+                // It would be cool to be able to smooth resize the `svg` example.
                 let temp_buf = {
                     let screen_size =
                         resvg::ScreenSize::new(width, height).unwrap();
@@ -122,7 +214,7 @@ impl Cache {
                     );
 
                     resvg::backend_raqote::render_to_canvas(
-                        &tree,
+                        tree,
                         &resvg::Options::default(),
                         screen_size,
                         &mut canvas,
@@ -146,48 +238,56 @@ impl Cache {
                         image_height: height as u32,
                     },
                     wgpu::TextureCopyView {
-                        texture: &texture,
+                        texture: &self.atlas,
                         array_layer: 0,
                         mip_level: 0,
                         origin: wgpu::Origin3d {
-                            x: 0.0,
+                            x: allocation.rectangle.min.x as f32,
-                            y: 0.0,
+                            y: allocation.rectangle.min.y as f32,
                             z: 0.0,
                         },
                     },
-                    extent,
+                    wgpu::Extent3d {
+                        width,
+                        height,
+                        depth: 1,
+                    },
                 );
 
-                let bind_group =
-                    device.create_bind_group(&wgpu::BindGroupDescriptor {
-                        layout: texture_layout,
-                        bindings: &[wgpu::Binding {
-                            binding: 0,
-                            resource: wgpu::BindingResource::TextureView(
-                                &texture.create_default_view(),
-                            ),
-                        }],
-                    });
-
-                let bind_group = Rc::new(bind_group);
-
-                let _ = self
-                    .rasterized
-                    .insert((id, width, height), bind_group.clone());
-
                 let _ = self.svg_hits.insert(id);
                 let _ = self.rasterized_hits.insert((id, width, height));
+                let _ = self
+                    .rasterized
+                    .insert((id, width, height), allocation);
 
-                Some(bind_group)
+                self.rasterized.get(&(id, width, height))
             }
-            Svg::NotFound => None,
+            Svg::NotFound => None
         }
     }
 
+    pub fn atlas(&self, device: &wgpu::Device, texture_layout: &wgpu::BindGroupLayout) -> wgpu::BindGroup {
+        device.create_bind_group(&wgpu::BindGroupDescriptor {
+            layout: texture_layout,
+            bindings: &[wgpu::Binding {
+                binding: 0,
+                resource: wgpu::BindingResource::TextureView(
+                    &self.atlas.create_default_view(),
+                ),
+            }],
+        })
+    }
+
     pub fn trim(&mut self) {
         let svg_hits = &self.svg_hits;
         let rasterized_hits = &self.rasterized_hits;
 
+        for (k, alloc) in &mut self.rasterized {
+            if !rasterized_hits.contains(&k) {
+                self.allocator.deallocate(alloc.id);
+            }
+        }
+
         self.svgs.retain(|k, _| svg_hits.contains(k));
         self.rasterized.retain(|k, _| rasterized_hits.contains(k));
         self.svg_hits.clear();

wgpu/src/shader/image.vert

@@ -0,0 +1,26 @@
+#version 450
+
+layout(location = 0) in vec2 v_Pos;
+layout(location = 1) in vec2 i_Pos;
+layout(location = 2) in vec2 i_Scale;
+layout(location = 3) in vec2 i_Atlas_Pos;
+layout(location = 4) in vec2 i_Atlas_Scale;
+
+layout (set = 0, binding = 0) uniform Globals {
+    mat4 u_Transform;
+};
+
+layout(location = 0) out vec2 o_Uv;
+
+void main() {
+    o_Uv = v_Pos * i_Atlas_Scale + i_Atlas_Pos;
+
+    mat4 i_Transform = mat4(
+        vec4(i_Scale.x, 0.0, 0.0, 0.0),
+        vec4(0.0, i_Scale.y, 0.0, 0.0),
+        vec4(0.0, 0.0, 1.0, 0.0),
+        vec4(i_Pos, 0.0, 1.0)
+    );
+
+    gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0);
+}