Merge pull request #154 from Maldela/atlas

Texture atlas

15 files changed, 947 insertions, 347 deletions

diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index 887c2d21..56839cf0 100644
--- a/wgpu/Cargo.toml
+++ b/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"
diff --git a/wgpu/src/image.rs b/wgpu/src/image.rs
index f7ed67c3..d3603676 100644
--- a/wgpu/src/image.rs
+++ b/wgpu/src/image.rs
@@ -1,15 +1,23 @@
+mod atlas;
+
 #[cfg(feature = "image")]
 mod raster;
+
 #[cfg(feature = "svg")]
 mod vector;
 
 use crate::Transformation;
-use iced_native::{image, svg, Rectangle};
+use atlas::Atlas;
 
+use iced_native::Rectangle;
+use std::cell::RefCell;
 use std::mem;
 
-#[cfg(any(feature = "image", feature = "svg"))]
-use std::cell::RefCell;
+#[cfg(feature = "image")]
+use iced_native::image;
+
+#[cfg(feature = "svg")]
+use iced_native::svg;
 
 #[derive(Debug)]
 pub struct Pipeline {
@@ -24,7 +32,10 @@ pub struct Pipeline {
     indices: wgpu::Buffer,
     instances: wgpu::Buffer,
     constants: wgpu::BindGroup,
+    texture: wgpu::BindGroup,
+    texture_version: usize,
     texture_layout: wgpu::BindGroupLayout,
+    texture_atlas: Atlas,
 }
 
 impl Pipeline {
@@ -174,6 +185,21 @@ 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,
+                            },
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 5,
+                                format: wgpu::VertexFormat::Uint,
+                                offset: 4 * 8,
+                            },
                         ],
                     },
                 ],
@@ -191,13 +217,26 @@ impl Pipeline {
             .fill_from_slice(&QUAD_INDICES);
 
         let instances = device.create_buffer(&wgpu::BufferDescriptor {
-            size: mem::size_of::<Instance>() as u64,
+            size: mem::size_of::<Instance>() as u64 * Instance::MAX as u64,
             usage: wgpu::BufferUsage::VERTEX | wgpu::BufferUsage::COPY_DST,
         });
 
+        let texture_atlas = Atlas::new(device);
+
+        let texture = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            layout: &texture_layout,
+            bindings: &[wgpu::Binding {
+                binding: 0,
+                resource: wgpu::BindingResource::TextureView(
+                    &texture_atlas.view(),
+                ),
+            }],
+        });
+
         Pipeline {
             #[cfg(feature = "image")]
             raster_cache: RefCell::new(raster::Cache::new()),
+
             #[cfg(feature = "svg")]
             vector_cache: RefCell::new(vector::Cache::new()),
 
@@ -207,7 +246,10 @@ impl Pipeline {
             indices,
             instances,
             constants: constant_bind_group,
+            texture,
+            texture_version: texture_atlas.layer_count(),
             texture_layout,
+            texture_atlas,
         }
     }
 
@@ -231,12 +273,72 @@ impl Pipeline {
         &mut self,
         device: &mut wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
-        instances: &[Image],
+        images: &[Image],
         transformation: Transformation,
         bounds: Rectangle<u32>,
         target: &wgpu::TextureView,
         _scale: f32,
     ) {
+        let instances: &mut Vec<Instance> = &mut Vec::new();
+
+        #[cfg(feature = "image")]
+        let mut raster_cache = self.raster_cache.borrow_mut();
+
+        #[cfg(feature = "svg")]
+        let mut vector_cache = self.vector_cache.borrow_mut();
+
+        for image in images {
+            match &image.handle {
+                #[cfg(feature = "image")]
+                Handle::Raster(handle) => {
+                    if let Some(atlas_entry) = raster_cache.upload(
+                        handle,
+                        device,
+                        encoder,
+                        &mut self.texture_atlas,
+                    ) {
+                        add_instances(image, atlas_entry, instances);
+                    }
+                }
+                #[cfg(feature = "svg")]
+                Handle::Vector(handle) => {
+                    if let Some(atlas_entry) = vector_cache.upload(
+                        handle,
+                        image.size,
+                        _scale,
+                        device,
+                        encoder,
+                        &mut self.texture_atlas,
+                    ) {
+                        add_instances(image, atlas_entry, instances);
+                    }
+                }
+            }
+        }
+
+        if instances.is_empty() {
+            return;
+        }
+
+        let texture_version = self.texture_atlas.layer_count();
+
+        if self.texture_version != texture_version {
+            log::info!("Atlas has grown. Recreating bind group...");
+
+            self.texture =
+                device.create_bind_group(&wgpu::BindGroupDescriptor {
+                    layout: &self.texture_layout,
+                    bindings: &[wgpu::Binding {
+                        binding: 0,
+                        resource: wgpu::BindingResource::TextureView(
+                            &self.texture_atlas.view(),
+                        ),
+                    }],
+                });
+
+            self.texture_version = texture_version;
+        }
+
         let uniforms_buffer = device
             .create_buffer_mapped(1, wgpu::BufferUsage::COPY_SRC)
             .fill_from_slice(&[Uniforms {
@@ -251,123 +353,90 @@ impl Pipeline {
             std::mem::size_of::<Uniforms>() as u64,
         );
 
-        // TODO: Batch draw calls using a texture atlas
-        // Guillotière[1] by @nical can help us a lot here.
-        //
-        // [1]: https://github.com/nical/guillotiere
-        for image in instances {
-            let uploaded_texture = match &image.handle {
-                Handle::Raster(_handle) => {
-                    #[cfg(feature = "image")]
-                    {
-                        let mut cache = self.raster_cache.borrow_mut();
-                        let memory = cache.load(&_handle);
-
-                        memory.upload(device, encoder, &self.texture_layout)
-                    }
-
-                    #[cfg(not(feature = "image"))]
-                    None
-                }
-                Handle::Vector(_handle) => {
-                    #[cfg(feature = "svg")]
-                    {
-                        let mut cache = self.vector_cache.borrow_mut();
-
-                        cache.upload(
-                            _handle,
-                            image.scale,
-                            _scale,
-                            device,
-                            encoder,
-                            &self.texture_layout,
-                        )
-                    }
-
-                    #[cfg(not(feature = "svg"))]
-                    None
-                }
-            };
-
-            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,
-                    }]);
-
-                encoder.copy_buffer_to_buffer(
-                    &instance_buffer,
-                    0,
-                    &self.instances,
-                    0,
-                    mem::size_of::<Instance>() as u64,
-                );
-
-                {
-                    let mut render_pass = encoder.begin_render_pass(
-                        &wgpu::RenderPassDescriptor {
-                            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,
+        let instances_buffer = device
+            .create_buffer_mapped(instances.len(), wgpu::BufferUsage::COPY_SRC)
+            .fill_from_slice(&instances);
+
+        let mut i = 0;
+        let total = instances.len();
+
+        while i < total {
+            let end = (i + Instance::MAX).min(total);
+            let amount = end - i;
+
+            encoder.copy_buffer_to_buffer(
+                &instances_buffer,
+                (i * std::mem::size_of::<Instance>()) as u64,
+                &self.instances,
+                0,
+                (amount * std::mem::size_of::<Instance>()) as u64,
+            );
+
+            let mut render_pass =
+                encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                    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,
+                            },
                         },
-                    );
-
-                    render_pass.set_pipeline(&self.pipeline);
-                    render_pass.set_bind_group(0, &self.constants, &[]);
-                    render_pass.set_bind_group(1, &texture, &[]);
-                    render_pass.set_index_buffer(&self.indices, 0);
-                    render_pass.set_vertex_buffers(
-                        0,
-                        &[(&self.vertices, 0), (&self.instances, 0)],
-                    );
-                    render_pass.set_scissor_rect(
-                        bounds.x,
-                        bounds.y,
-                        bounds.width,
-                        bounds.height,
-                    );
-
-                    render_pass.draw_indexed(
-                        0..QUAD_INDICES.len() as u32,
-                        0,
-                        0..1 as u32,
-                    );
-                }
-            }
+                    ],
+                    depth_stencil_attachment: None,
+                });
+
+            render_pass.set_pipeline(&self.pipeline);
+            render_pass.set_bind_group(0, &self.constants, &[]);
+            render_pass.set_bind_group(1, &self.texture, &[]);
+            render_pass.set_index_buffer(&self.indices, 0);
+            render_pass.set_vertex_buffers(
+                0,
+                &[(&self.vertices, 0), (&self.instances, 0)],
+            );
+
+            render_pass.set_scissor_rect(
+                bounds.x,
+                bounds.y,
+                bounds.width,
+                bounds.height,
+            );
+
+            render_pass.draw_indexed(
+                0..QUAD_INDICES.len() as u32,
+                0,
+                0..amount as u32,
+            );
+
+            i += Instance::MAX;
         }
     }
 
     pub fn trim_cache(&mut self) {
         #[cfg(feature = "image")]
-        self.raster_cache.borrow_mut().trim();
+        self.raster_cache.borrow_mut().trim(&mut self.texture_atlas);
 
         #[cfg(feature = "svg")]
-        self.vector_cache.borrow_mut().trim();
+        self.vector_cache.borrow_mut().trim(&mut self.texture_atlas);
     }
 }
 
 pub struct Image {
     pub handle: Handle,
     pub position: [f32; 2],
-    pub scale: [f32; 2],
+    pub size: [f32; 2],
 }
 
 pub enum Handle {
+    #[cfg(feature = "image")]
     Raster(image::Handle),
+
+    #[cfg(feature = "svg")]
     Vector(svg::Handle),
 }
 
@@ -395,10 +464,17 @@ const QUAD_VERTS: [Vertex; 4] = [
 ];
 
 #[repr(C)]
-#[derive(Clone, Copy)]
+#[derive(Debug, Clone, Copy)]
 struct Instance {
     _position: [f32; 2],
-    _scale: [f32; 2],
+    _size: [f32; 2],
+    _position_in_atlas: [f32; 2],
+    _size_in_atlas: [f32; 2],
+    _layer: u32,
+}
+
+impl Instance {
+    pub const MAX: usize = 1_000;
 }
 
 #[repr(C)]
@@ -406,3 +482,67 @@ struct Instance {
 struct Uniforms {
     transform: [f32; 16],
 }
+
+fn add_instances(
+    image: &Image,
+    entry: &atlas::Entry,
+    instances: &mut Vec<Instance>,
+) {
+    match entry {
+        atlas::Entry::Contiguous(allocation) => {
+            add_instance(image.position, image.size, allocation, instances);
+        }
+        atlas::Entry::Fragmented { fragments, size } => {
+            let scaling_x = image.size[0] / size.0 as f32;
+            let scaling_y = image.size[1] / size.1 as f32;
+
+            for fragment in fragments {
+                let allocation = &fragment.allocation;
+
+                let [x, y] = image.position;
+                let (fragment_x, fragment_y) = fragment.position;
+                let (fragment_width, fragment_height) = allocation.size();
+
+                let position = [
+                    x + fragment_x as f32 * scaling_x,
+                    y + fragment_y as f32 * scaling_y,
+                ];
+
+                let size = [
+                    fragment_width as f32 * scaling_x,
+                    fragment_height as f32 * scaling_y,
+                ];
+
+                add_instance(position, size, allocation, instances);
+            }
+        }
+    }
+}
+
+#[inline]
+fn add_instance(
+    position: [f32; 2],
+    size: [f32; 2],
+    allocation: &atlas::Allocation,
+    instances: &mut Vec<Instance>,
+) {
+    let (x, y) = allocation.position();
+    let (width, height) = allocation.size();
+    let layer = allocation.layer();
+
+    let instance = Instance {
+        _position: position,
+        _size: size,
+        _position_in_atlas: [
+            (x as f32 + 0.5) / atlas::SIZE as f32,
+            (y as f32 + 0.5) / atlas::SIZE as f32,
+        ],
+        _size_in_atlas: [
+            (width as f32 - 1.0) / atlas::SIZE as f32,
+            (height as f32 - 1.0) / atlas::SIZE as f32,
+        ],
+        _layer: layer as u32,
+    };
+
+    instances.push(instance);
+}
diff --git a/wgpu/src/image/atlas.rs b/wgpu/src/image/atlas.rs
new file mode 100644
index 00000000..86a5ff49
--- /dev/null
+++ b/wgpu/src/image/atlas.rs
@@ -0,0 +1,361 @@
+pub mod entry;
+
+mod allocation;
+mod allocator;
+mod layer;
+
+pub use allocation::Allocation;
+pub use entry::Entry;
+pub use layer::Layer;
+
+use allocator::Allocator;
+
+pub const SIZE: u32 = 2048;
+
+#[derive(Debug)]
+pub struct Atlas {
+    texture: wgpu::Texture,
+    texture_view: wgpu::TextureView,
+    layers: Vec<Layer>,
+}
+
+impl Atlas {
+    pub fn new(device: &wgpu::Device) -> Self {
+        let extent = wgpu::Extent3d {
+            width: SIZE,
+            height: SIZE,
+            depth: 1,
+        };
+
+        let texture = device.create_texture(&wgpu::TextureDescriptor {
+            size: extent,
+            array_layer_count: 2,
+            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,
+        });
+
+        let texture_view = texture.create_default_view();
+
+        Atlas {
+            texture,
+            texture_view,
+            layers: vec![Layer::Empty, Layer::Empty],
+        }
+    }
+
+    pub fn view(&self) -> &wgpu::TextureView {
+        &self.texture_view
+    }
+
+    pub fn layer_count(&self) -> usize {
+        self.layers.len()
+    }
+
+    pub fn upload<C>(
+        &mut self,
+        width: u32,
+        height: u32,
+        data: &[C],
+        device: &wgpu::Device,
+        encoder: &mut wgpu::CommandEncoder,
+    ) -> Option<Entry>
+    where
+        C: Copy + 'static,
+    {
+        let entry = {
+            let current_size = self.layers.len();
+            let entry = self.allocate(width, height)?;
+
+            // We grow the internal texture after allocating if necessary
+            let new_layers = self.layers.len() - current_size;
+            self.grow(new_layers, device, encoder);
+
+            entry
+        };
+
+        log::info!("Allocated atlas entry: {:?}", entry);
+
+        let buffer = device
+            .create_buffer_mapped(data.len(), wgpu::BufferUsage::COPY_SRC)
+            .fill_from_slice(data);
+
+        match &entry {
+            Entry::Contiguous(allocation) => {
+                self.upload_allocation(
+                    &buffer,
+                    width,
+                    height,
+                    0,
+                    &allocation,
+                    encoder,
+                );
+            }
+            Entry::Fragmented { fragments, .. } => {
+                for fragment in fragments {
+                    let (x, y) = fragment.position;
+                    let offset = (y * width + x) as usize * 4;
+
+                    self.upload_allocation(
+                        &buffer,
+                        width,
+                        height,
+                        offset,
+                        &fragment.allocation,
+                        encoder,
+                    );
+                }
+            }
+        }
+
+        log::info!("Current atlas: {:?}", self);
+
+        Some(entry)
+    }
+
+    pub fn remove(&mut self, entry: &Entry) {
+        log::info!("Removing atlas entry: {:?}", entry);
+
+        match entry {
+            Entry::Contiguous(allocation) => {
+                self.deallocate(allocation);
+            }
+            Entry::Fragmented { fragments, .. } => {
+                for fragment in fragments {
+                    self.deallocate(&fragment.allocation);
+                }
+            }
+        }
+    }
+
+    fn allocate(&mut self, width: u32, height: u32) -> Option<Entry> {
+        // Allocate one layer if texture fits perfectly
+        if width == SIZE && height == SIZE {
+            let mut empty_layers = self
+                .layers
+                .iter_mut()
+                .enumerate()
+                .filter(|(_, layer)| layer.is_empty());
+
+            if let Some((i, layer)) = empty_layers.next() {
+                *layer = Layer::Full;
+
+                return Some(Entry::Contiguous(Allocation::Full { layer: i }));
+            }
+
+            self.layers.push(Layer::Full);
+
+            return Some(Entry::Contiguous(Allocation::Full {
+                layer: self.layers.len() - 1,
+            }));
+        }
+
+        // Split big textures across multiple layers
+        if width > SIZE || height > SIZE {
+            let mut fragments = Vec::new();
+            let mut y = 0;
+
+            while y < height {
+                let height = std::cmp::min(height - y, SIZE);
+                let mut x = 0;
+
+                while x < width {
+                    let width = std::cmp::min(width - x, SIZE);
+
+                    let allocation = self.allocate(width, height)?;
+
+                    if let Entry::Contiguous(allocation) = allocation {
+                        fragments.push(entry::Fragment {
+                            position: (x, y),
+                            allocation,
+                        });
+                    }
+
+                    x += width;
+                }
+
+                y += height;
+            }
+
+            return Some(Entry::Fragmented {
+                size: (width, height),
+                fragments,
+            });
+        }
+
+        // Try allocating on an existing layer
+        for (i, layer) in self.layers.iter_mut().enumerate() {
+            match layer {
+                Layer::Empty => {
+                    let mut allocator = Allocator::new(SIZE);
+
+                    if let Some(region) = allocator.allocate(width, height) {
+                        *layer = Layer::Busy(allocator);
+
+                        return Some(Entry::Contiguous(Allocation::Partial {
+                            region,
+                            layer: i,
+                        }));
+                    }
+                }
+                Layer::Busy(allocator) => {
+                    if let Some(region) = allocator.allocate(width, height) {
+                        return Some(Entry::Contiguous(Allocation::Partial {
+                            region,
+                            layer: i,
+                        }));
+                    }
+                }
+                _ => {}
+            }
+        }
+
+        // Create new layer with atlas allocator
+        let mut allocator = Allocator::new(SIZE);
+
+        if let Some(region) = allocator.allocate(width, height) {
+            self.layers.push(Layer::Busy(allocator));
+
+            return Some(Entry::Contiguous(Allocation::Partial {
+                region,
+                layer: self.layers.len() - 1,
+            }));
+        }
+
+        // We ran out of memory (?)
+        None
+    }
+
+    fn deallocate(&mut self, allocation: &Allocation) {
+        log::info!("Deallocating atlas: {:?}", allocation);
+
+        match allocation {
+            Allocation::Full { layer } => {
+                self.layers[*layer] = Layer::Empty;
+            }
+            Allocation::Partial { layer, region } => {
+                let layer = &mut self.layers[*layer];
+
+                if let Layer::Busy(allocator) = layer {
+                    allocator.deallocate(region);
+
+                    if allocator.is_empty() {
+                        *layer = Layer::Empty;
+                    }
+                }
+            }
+        }
+    }
+
+    fn upload_allocation(
+        &mut self,
+        buffer: &wgpu::Buffer,
+        image_width: u32,
+        image_height: u32,
+        offset: usize,
+        allocation: &Allocation,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        let (x, y) = allocation.position();
+        let (width, height) = allocation.size();
+        let layer = allocation.layer();
+
+        let extent = wgpu::Extent3d {
+            width,
+            height,
+            depth: 1,
+        };
+
+        encoder.copy_buffer_to_texture(
+            wgpu::BufferCopyView {
+                buffer,
+                offset: offset as u64,
+                row_pitch: 4 * image_width,
+                image_height,
+            },
+            wgpu::TextureCopyView {
+                texture: &self.texture,
+                array_layer: layer as u32,
+                mip_level: 0,
+                origin: wgpu::Origin3d {
+                    x: x as f32,
+                    y: y as f32,
+                    z: 0.0,
+                },
+            },
+            extent,
+        );
+    }
+
+    fn grow(
+        &mut self,
+        amount: usize,
+        device: &wgpu::Device,
+        encoder: &mut wgpu::CommandEncoder,
+    ) {
+        if amount == 0 {
+            return;
+        }
+
+        let new_texture = device.create_texture(&wgpu::TextureDescriptor {
+            size: wgpu::Extent3d {
+                width: SIZE,
+                height: SIZE,
+                depth: 1,
+            },
+            array_layer_count: self.layers.len() as u32,
+            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,
+        });
+
+        let amount_to_copy = self.layers.len() - amount;
+
+        for (i, layer) in
+            self.layers.iter_mut().take(amount_to_copy).enumerate()
+        {
+            if layer.is_empty() {
+                continue;
+            }
+
+            encoder.copy_texture_to_texture(
+                wgpu::TextureCopyView {
+                    texture: &self.texture,
+                    array_layer: i as u32,
+                    mip_level: 0,
+                    origin: wgpu::Origin3d {
+                        x: 0.0,
+                        y: 0.0,
+                        z: 0.0,
+                    },
+                },
+                wgpu::TextureCopyView {
+                    texture: &new_texture,
+                    array_layer: i as u32,
+                    mip_level: 0,
+                    origin: wgpu::Origin3d {
+                        x: 0.0,
+                        y: 0.0,
+                        z: 0.0,
+                    },
+                },
+                wgpu::Extent3d {
+                    width: SIZE,
+                    height: SIZE,
+                    depth: 1,
+                },
+            );
+        }
+
+        self.texture = new_texture;
+        self.texture_view = self.texture.create_default_view();
+    }
+}
diff --git a/wgpu/src/image/atlas/allocation.rs b/wgpu/src/image/atlas/allocation.rs
new file mode 100644
index 00000000..59b7239f
--- /dev/null
+++ b/wgpu/src/image/atlas/allocation.rs
@@ -0,0 +1,35 @@
+use crate::image::atlas::{self, allocator};
+
+#[derive(Debug)]
+pub enum Allocation {
+    Partial {
+        layer: usize,
+        region: allocator::Region,
+    },
+    Full {
+        layer: usize,
+    },
+}
+
+impl Allocation {
+    pub fn position(&self) -> (u32, u32) {
+        match self {
+            Allocation::Partial { region, .. } => region.position(),
+            Allocation::Full { .. } => (0, 0),
+        }
+    }
+
+    pub fn size(&self) -> (u32, u32) {
+        match self {
+            Allocation::Partial { region, .. } => region.size(),
+            Allocation::Full { .. } => (atlas::SIZE, atlas::SIZE),
+        }
+    }
+
+    pub fn layer(&self) -> usize {
+        match self {
+            Allocation::Partial { layer, .. } => *layer,
+            Allocation::Full { layer } => *layer,
+        }
+    }
+}
diff --git a/wgpu/src/image/atlas/allocator.rs b/wgpu/src/image/atlas/allocator.rs
new file mode 100644
index 00000000..7a4ff5b1
--- /dev/null
+++ b/wgpu/src/image/atlas/allocator.rs
@@ -0,0 +1,69 @@
+use guillotiere::{AtlasAllocator, Size};
+
+pub struct Allocator {
+    raw: AtlasAllocator,
+    allocations: usize,
+}
+
+impl Allocator {
+    pub fn new(size: u32) -> Allocator {
+        let raw = AtlasAllocator::new(Size::new(size as i32, size as i32));
+
+        Allocator {
+            raw,
+            allocations: 0,
+        }
+    }
+
+    pub fn allocate(&mut self, width: u32, height: u32) -> Option<Region> {
+        let allocation =
+            self.raw.allocate(Size::new(width as i32, height as i32))?;
+
+        self.allocations += 1;
+
+        Some(Region { allocation })
+    }
+
+    pub fn deallocate(&mut self, region: &Region) {
+        self.raw.deallocate(region.allocation.id);
+
+        self.allocations = self.allocations.saturating_sub(1);
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self.allocations == 0
+    }
+}
+
+pub struct Region {
+    allocation: guillotiere::Allocation,
+}
+
+impl Region {
+    pub fn position(&self) -> (u32, u32) {
+        let rectangle = &self.allocation.rectangle;
+
+        (rectangle.min.x as u32, rectangle.min.y as u32)
+    }
+
+    pub fn size(&self) -> (u32, u32) {
+        let size = self.allocation.rectangle.size();
+
+        (size.width as u32, size.height as u32)
+    }
+}
+
+impl std::fmt::Debug for Allocator {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "Allocator")
+    }
+}
+
+impl std::fmt::Debug for Region {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("Region")
+            .field("id", &self.allocation.id)
+            .field("rectangle", &self.allocation.rectangle)
+            .finish()
+    }
+}
diff --git a/wgpu/src/image/atlas/entry.rs b/wgpu/src/image/atlas/entry.rs
new file mode 100644
index 00000000..0310fc54
--- /dev/null
+++ b/wgpu/src/image/atlas/entry.rs
@@ -0,0 +1,26 @@
+use crate::image::atlas;
+
+#[derive(Debug)]
+pub enum Entry {
+    Contiguous(atlas::Allocation),
+    Fragmented {
+        size: (u32, u32),
+        fragments: Vec<Fragment>,
+    },
+}
+
+impl Entry {
+    #[cfg(feature = "image")]
+    pub fn size(&self) -> (u32, u32) {
+        match self {
+            Entry::Contiguous(allocation) => allocation.size(),
+            Entry::Fragmented { size, .. } => *size,
+        }
+    }
+}
+
+#[derive(Debug)]
+pub struct Fragment {
+    pub position: (u32, u32),
+    pub allocation: atlas::Allocation,
+}
diff --git a/wgpu/src/image/atlas/layer.rs b/wgpu/src/image/atlas/layer.rs
new file mode 100644
index 00000000..b1084ed9
--- /dev/null
+++ b/wgpu/src/image/atlas/layer.rs
@@ -0,0 +1,17 @@
+use crate::image::atlas::Allocator;
+
+#[derive(Debug)]
+pub enum Layer {
+    Empty,
+    Busy(Allocator),
+    Full,
+}
+
+impl Layer {
+    pub fn is_empty(&self) -> bool {
+        match self {
+            Layer::Empty => true,
+            _ => false,
+        }
+    }
+}
diff --git a/wgpu/src/image/raster.rs b/wgpu/src/image/raster.rs
index fa107879..3edec57e 100644
--- a/wgpu/src/image/raster.rs
+++ b/wgpu/src/image/raster.rs
@@ -1,17 +1,11 @@
+use crate::image::atlas::{self, Atlas};
 use iced_native::image;
-use std::{
-    collections::{HashMap, HashSet},
-    rc::Rc,
-};
+use std::collections::{HashMap, HashSet};
 
 #[derive(Debug)]
 pub enum Memory {
     Host(::image::ImageBuffer<::image::Bgra<u8>, Vec<u8>>),
-    Device {
-        bind_group: Rc<wgpu::BindGroup>,
-        width: u32,
-        height: u32,
-    },
+    Device(atlas::Entry),
     NotFound,
     Invalid,
 }
@@ -20,97 +14,11 @@ impl Memory {
     pub fn dimensions(&self) -> (u32, u32) {
         match self {
             Memory::Host(image) => image.dimensions(),
-            Memory::Device { width, height, .. } => (*width, *height),
+            Memory::Device(entry) => entry.size(),
             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)]
@@ -153,10 +61,45 @@ impl Cache {
         self.get(handle).unwrap()
     }
 
-    pub fn trim(&mut self) {
+    pub fn upload(
+        &mut self,
+        handle: &image::Handle,
+        device: &wgpu::Device,
+        encoder: &mut wgpu::CommandEncoder,
+        atlas: &mut Atlas,
+    ) -> Option<&atlas::Entry> {
+        let memory = self.load(handle);
+
+        if let Memory::Host(image) = memory {
+            let (width, height) = image.dimensions();
+
+            let entry = atlas.upload(width, height, &image, device, encoder)?;
+
+            *memory = Memory::Device(entry);
+        }
+
+        if let Memory::Device(allocation) = memory {
+            Some(allocation)
+        } else {
+            None
+        }
+    }
+
+    pub fn trim(&mut self, atlas: &mut Atlas) {
         let hits = &self.hits;
 
-        self.map.retain(|k, _| hits.contains(k));
+        self.map.retain(|k, memory| {
+            let retain = hits.contains(k);
+
+            if !retain {
+                if let Memory::Device(entry) = memory {
+                    atlas.remove(entry);
+                }
+            }
+
+            retain
+        });
+
         self.hits.clear();
     }
 
diff --git a/wgpu/src/image/vector.rs b/wgpu/src/image/vector.rs
index 713978f5..bae0f82f 100644
--- a/wgpu/src/image/vector.rs
+++ b/wgpu/src/image/vector.rs
@@ -1,18 +1,16 @@
+use crate::image::atlas::{self, Atlas};
 use iced_native::svg;
-use std::{
-    collections::{HashMap, HashSet},
-    rc::Rc,
-};
+use std::collections::{HashMap, HashSet};
 
 pub enum Svg {
-    Loaded { tree: resvg::usvg::Tree },
+    Loaded(resvg::usvg::Tree),
     NotFound,
 }
 
 impl Svg {
     pub fn viewport_dimensions(&self) -> (u32, u32) {
         match self {
-            Svg::Loaded { tree } => {
+            Svg::Loaded(tree) => {
                 let size = tree.svg_node().size;
 
                 (size.width() as u32, size.height() as u32)
@@ -22,16 +20,10 @@ impl Svg {
     }
 }
 
-impl std::fmt::Debug for Svg {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "Svg")
-    }
-}
-
 #[derive(Debug)]
 pub struct Cache {
     svgs: HashMap<u64, Svg>,
-    rasterized: HashMap<(u64, u32, u32), Rc<wgpu::BindGroup>>,
+    rasterized: HashMap<(u64, u32, u32), atlas::Entry>,
     svg_hits: HashSet<u64>,
     rasterized_hits: HashSet<(u64, u32, u32)>,
 }
@@ -54,7 +46,7 @@ impl Cache {
         let opt = resvg::Options::default();
 
         let svg = match resvg::usvg::Tree::from_file(handle.path(), &opt.usvg) {
-            Ok(tree) => Svg::Loaded { tree },
+            Ok(tree) => Svg::Loaded(tree),
             Err(_) => Svg::NotFound,
         };
 
@@ -69,8 +61,8 @@ impl Cache {
         scale: f32,
         device: &wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
-        texture_layout: &wgpu::BindGroupLayout,
-    ) -> Option<Rc<wgpu::BindGroup>> {
+        texture_atlas: &mut Atlas,
+    ) -> Option<&atlas::Entry> {
         let id = handle.id();
 
         let (width, height) = (
@@ -82,115 +74,78 @@ 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.contains_key(&(id, width, height)) {
             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) {
-            Svg::Loaded { tree } => {
+            Svg::Loaded(tree) => {
                 if width == 0 || height == 0 {
                     return None;
                 }
 
-                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 screen_size =
-                        resvg::ScreenSize::new(width, height).unwrap();
-
-                    let mut canvas = resvg::raqote::DrawTarget::new(
-                        width as i32,
-                        height as i32,
-                    );
-
-                    resvg::backend_raqote::render_to_canvas(
-                        &tree,
-                        &resvg::Options::default(),
-                        screen_size,
-                        &mut canvas,
-                    );
-
-                    let slice = canvas.get_data();
-
-                    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,
+                // 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 screen_size =
+                    resvg::ScreenSize::new(width, height).unwrap();
+
+                let mut canvas =
+                    resvg::raqote::DrawTarget::new(width as i32, height as i32);
+
+                resvg::backend_raqote::render_to_canvas(
+                    tree,
+                    &resvg::Options::default(),
+                    screen_size,
+                    &mut canvas,
                 );
 
-                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 allocation = texture_atlas.upload(
+                    width,
+                    height,
+                    canvas.get_data(),
+                    device,
+                    encoder,
+                )?;
 
                 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,
         }
     }
 
-    pub fn trim(&mut self) {
+    pub fn trim(&mut self, atlas: &mut Atlas) {
         let svg_hits = &self.svg_hits;
         let rasterized_hits = &self.rasterized_hits;
 
         self.svgs.retain(|k, _| svg_hits.contains(k));
-        self.rasterized.retain(|k, _| rasterized_hits.contains(k));
+        self.rasterized.retain(|k, entry| {
+            let retain = rasterized_hits.contains(k);
+
+            if !retain {
+                atlas.remove(entry);
+            }
+
+            retain
+        });
         self.svg_hits.clear();
         self.rasterized_hits.clear();
     }
 }
+
+impl std::fmt::Debug for Svg {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Svg::Loaded(_) => write!(f, "Svg::Loaded"),
+            Svg::NotFound => write!(f, "Svg::NotFound"),
+        }
+    }
+}
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index 4f2b732d..4e0cbc60 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -30,7 +30,6 @@ pub mod triangle;
 pub mod widget;
 pub mod window;
 
-mod image;
 mod primitive;
 mod quad;
 mod renderer;
@@ -51,6 +50,8 @@ pub use viewport::Viewport;
 #[doc(no_inline)]
 pub use widget::*;
 
-pub(crate) use self::image::Image;
 pub(crate) use quad::Quad;
 pub(crate) use transformation::Transformation;
+
+#[cfg(any(feature = "image", feature = "svg"))]
+mod image;
diff --git a/wgpu/src/renderer.rs b/wgpu/src/renderer.rs
index f67dd1eb..1da19b1a 100644
--- a/wgpu/src/renderer.rs
+++ b/wgpu/src/renderer.rs
@@ -1,7 +1,11 @@
 use crate::{
-    image, quad, text, triangle, Defaults, Image, Primitive, Quad, Settings,
-    Target, Transformation,
+    quad, text, triangle, Defaults, Primitive, Quad, Settings, Target,
+    Transformation,
 };
+
+#[cfg(any(feature = "image", feature = "svg"))]
+use crate::image::{self, Image};
+
 use iced_native::{
     layout, Background, Color, Layout, MouseCursor, Point, Rectangle, Vector,
     Widget,
@@ -16,18 +20,22 @@ mod widget;
 #[derive(Debug)]
 pub struct Renderer {
     quad_pipeline: quad::Pipeline,
-    image_pipeline: image::Pipeline,
     text_pipeline: text::Pipeline,
-    triangle_pipeline: crate::triangle::Pipeline,
+    triangle_pipeline: triangle::Pipeline,
+
+    #[cfg(any(feature = "image", feature = "svg"))]
+    image_pipeline: image::Pipeline,
 }
 
 struct Layer<'a> {
     bounds: Rectangle<u32>,
     offset: Vector<u32>,
     quads: Vec<Quad>,
-    images: Vec<Image>,
     meshes: Vec<(Point, Arc<triangle::Mesh2D>)>,
     text: Vec<wgpu_glyph::Section<'a>>,
+
+    #[cfg(any(feature = "image", feature = "svg"))]
+    images: Vec<Image>,
 }
 
 impl<'a> Layer<'a> {
@@ -36,9 +44,11 @@ impl<'a> Layer<'a> {
             bounds,
             offset,
             quads: Vec::new(),
-            images: Vec::new(),
             text: Vec::new(),
             meshes: Vec::new(),
+
+            #[cfg(any(feature = "image", feature = "svg"))]
+            images: Vec::new(),
         }
     }
 }
@@ -51,19 +61,22 @@ impl Renderer {
         let text_pipeline =
             text::Pipeline::new(device, settings.format, settings.default_font);
         let quad_pipeline = quad::Pipeline::new(device, settings.format);
-        let image_pipeline =
-            crate::image::Pipeline::new(device, settings.format);
         let triangle_pipeline = triangle::Pipeline::new(
             device,
             settings.format,
             settings.antialiasing,
         );
 
+        #[cfg(any(feature = "image", feature = "svg"))]
+        let image_pipeline = image::Pipeline::new(device, settings.format);
+
         Self {
             quad_pipeline,
-            image_pipeline,
             text_pipeline,
             triangle_pipeline,
+
+            #[cfg(any(feature = "image", feature = "svg"))]
+            image_pipeline,
         }
     }
 
@@ -116,6 +129,7 @@ impl Renderer {
             );
         }
 
+        #[cfg(any(feature = "image", feature = "svg"))]
         self.image_pipeline.trim_cache();
 
         *mouse_cursor
@@ -223,20 +237,6 @@ impl Renderer {
                     border_color: border_color.into_linear(),
                 });
             }
-            Primitive::Image { handle, bounds } => {
-                layer.images.push(Image {
-                    handle: image::Handle::Raster(handle.clone()),
-                    position: [bounds.x, bounds.y],
-                    scale: [bounds.width, bounds.height],
-                });
-            }
-            Primitive::Svg { handle, bounds } => {
-                layer.images.push(Image {
-                    handle: image::Handle::Vector(handle.clone()),
-                    position: [bounds.x, bounds.y],
-                    scale: [bounds.width, bounds.height],
-                });
-            }
             Primitive::Mesh2D { origin, buffers } => {
                 layer.meshes.push((*origin, buffers.clone()));
             }
@@ -264,6 +264,28 @@ impl Renderer {
                     layers.push(new_layer);
                 }
             }
+
+            #[cfg(feature = "image")]
+            Primitive::Image { handle, bounds } => {
+                layer.images.push(Image {
+                    handle: image::Handle::Raster(handle.clone()),
+                    position: [bounds.x, bounds.y],
+                    size: [bounds.width, bounds.height],
+                });
+            }
+            #[cfg(not(feature = "image"))]
+            Primitive::Image { .. } => {}
+
+            #[cfg(feature = "svg")]
+            Primitive::Svg { handle, bounds } => {
+                layer.images.push(Image {
+                    handle: image::Handle::Vector(handle.clone()),
+                    position: [bounds.x, bounds.y],
+                    size: [bounds.width, bounds.height],
+                });
+            }
+            #[cfg(not(feature = "svg"))]
+            Primitive::Svg { .. } => {}
         }
     }
 
@@ -346,23 +368,26 @@ impl Renderer {
             );
         }
 
-        if layer.images.len() > 0 {
-            let translated_and_scaled = transformation
-                * Transformation::scale(scale_factor, scale_factor)
-                * Transformation::translate(
-                    -(layer.offset.x as f32),
-                    -(layer.offset.y as f32),
+        #[cfg(any(feature = "image", feature = "svg"))]
+        {
+            if layer.images.len() > 0 {
+                let translated_and_scaled = transformation
+                    * Transformation::scale(scale_factor, scale_factor)
+                    * Transformation::translate(
+                        -(layer.offset.x as f32),
+                        -(layer.offset.y as f32),
+                    );
+
+                self.image_pipeline.draw(
+                    device,
+                    encoder,
+                    &layer.images,
+                    translated_and_scaled,
+                    bounds,
+                    target,
+                    scale_factor,
                 );
-
-            self.image_pipeline.draw(
-                device,
-                encoder,
-                &layer.images,
-                translated_and_scaled,
-                bounds,
-                target,
-                scale_factor,
-            );
+            }
         }
 
         if layer.text.len() > 0 {
diff --git a/wgpu/src/shader/image.frag b/wgpu/src/shader/image.frag
index e35e455a..2809e9e6 100644
--- a/wgpu/src/shader/image.frag
+++ b/wgpu/src/shader/image.frag
@@ -1,12 +1,12 @@
 #version 450
 
-layout(location = 0) in vec2 v_Uv;
+layout(location = 0) in vec3 v_Uv;
 
 layout(set = 0, binding = 1) uniform sampler u_Sampler;
-layout(set = 1, binding = 0) uniform texture2D u_Texture;
+layout(set = 1, binding = 0) uniform texture2DArray u_Texture;
 
 layout(location = 0) out vec4 o_Color;
 
 void main() {
-    o_Color = texture(sampler2D(u_Texture, u_Sampler), v_Uv);
+    o_Color = texture(sampler2DArray(u_Texture, u_Sampler), v_Uv);
 }
diff --git a/wgpu/src/shader/image.frag.spv b/wgpu/src/shader/image.frag.spv
index ebee82ac..65b08aa3 100644
--- a/wgpu/src/shader/image.frag.spv
+++ b/wgpu/src/shader/image.frag.spv
diff --git a/wgpu/src/shader/image.vert b/wgpu/src/shader/image.vert
new file mode 100644
index 00000000..dab53cfe
--- /dev/null
+++ b/wgpu/src/shader/image.vert
@@ -0,0 +1,27 @@
+#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(location = 5) in uint i_Layer;
+
+layout (set = 0, binding = 0) uniform Globals {
+    mat4 u_Transform;
+};
+
+layout(location = 0) out vec3 o_Uv;
+
+void main() {
+    o_Uv = vec3(v_Pos * i_Atlas_Scale + i_Atlas_Pos, i_Layer);
+
+    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);
+}
diff --git a/wgpu/src/shader/image.vert.spv b/wgpu/src/shader/image.vert.spv
index 9ba702bc..21f5db2d 100644
--- a/wgpu/src/shader/image.vert.spv
+++ b/wgpu/src/shader/image.vert.spv