Merge branch 'master' into feature/text-selection

33 files changed, 1371 insertions, 474 deletions

diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index 887c2d21..6c75af7b 100644
--- a/wgpu/Cargo.toml
+++ b/wgpu/Cargo.toml
@@ -15,12 +15,13 @@ canvas = ["lyon"]
 iced_native = { version = "0.1.0", path = "../native" }
 iced_style = { version = "0.1.0-alpha", path = "../style" }
 wgpu = "0.4"
+wgpu_glyph = "0.7"
 glyph_brush = "0.6"
-wgpu_glyph = { version = "0.7", git = "https://github.com/hecrj/wgpu_glyph", branch = "fix/font-load-panic" }
 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 ccc956a9..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,11 +32,14 @@ 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 {
-    pub fn new(device: &wgpu::Device) -> Self {
+    pub fn new(device: &wgpu::Device, format: wgpu::TextureFormat) -> Self {
         let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
             address_mode_u: wgpu::AddressMode::ClampToEdge,
             address_mode_v: wgpu::AddressMode::ClampToEdge,
@@ -135,7 +146,7 @@ impl Pipeline {
                 }),
                 primitive_topology: wgpu::PrimitiveTopology::TriangleList,
                 color_states: &[wgpu::ColorStateDescriptor {
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    format,
                     color_blend: wgpu::BlendDescriptor {
                         src_factor: wgpu::BlendFactor::SrcAlpha,
                         dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
@@ -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..4f69df8c 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)]
@@ -147,16 +55,66 @@ impl Cache {
                     Memory::Invalid
                 }
             }
+            image::Data::Pixels {
+                width,
+                height,
+                pixels,
+            } => {
+                if let Some(image) = ::image::ImageBuffer::from_vec(
+                    *width,
+                    *height,
+                    pixels.to_vec(),
+                ) {
+                    Memory::Host(image)
+                } else {
+                    Memory::Invalid
+                }
+            }
         };
 
         self.insert(handle, memory);
         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/primitive.rs b/wgpu/src/primitive.rs
index 823b4b72..46d9e624 100644
--- a/wgpu/src/primitive.rs
+++ b/wgpu/src/primitive.rs
@@ -78,7 +78,18 @@ pub enum Primitive {
         origin: Point,
 
         /// The vertex and index buffers of the mesh
-        buffers: Arc<triangle::Mesh2D>,
+        buffers: triangle::Mesh2D,
+    },
+    /// A cached primitive.
+    ///
+    /// This can be useful if you are implementing a widget where primitive
+    /// generation is expensive.
+    Cached {
+        /// The origin of the coordinate system of the cached primitives
+        origin: Point,
+
+        /// The cached primitive
+        cache: Arc<Primitive>,
     },
 }
 
diff --git a/wgpu/src/quad.rs b/wgpu/src/quad.rs
index fe3276a3..9047080d 100644
--- a/wgpu/src/quad.rs
+++ b/wgpu/src/quad.rs
@@ -14,7 +14,10 @@ pub struct Pipeline {
 }
 
 impl Pipeline {
-    pub fn new(device: &mut wgpu::Device) -> Pipeline {
+    pub fn new(
+        device: &mut wgpu::Device,
+        format: wgpu::TextureFormat,
+    ) -> Pipeline {
         let constant_layout =
             device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
                 bindings: &[wgpu::BindGroupLayoutBinding {
@@ -79,7 +82,7 @@ impl Pipeline {
                 }),
                 primitive_topology: wgpu::PrimitiveTopology::TriangleList,
                 color_states: &[wgpu::ColorStateDescriptor {
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    format,
                     color_blend: wgpu::BlendDescriptor {
                         src_factor: wgpu::BlendFactor::SrcAlpha,
                         dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
diff --git a/wgpu/src/renderer.rs b/wgpu/src/renderer.rs
index 29adcfb6..c06af339 100644
--- a/wgpu/src/renderer.rs
+++ b/wgpu/src/renderer.rs
@@ -1,12 +1,15 @@
 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,
 };
-use std::sync::Arc;
 
 mod widget;
 
@@ -16,29 +19,33 @@ 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>)>,
+    meshes: Vec<(Point, &'a triangle::Mesh2D)>,
     text: Vec<wgpu_glyph::Section<'a>>,
+
+    #[cfg(any(feature = "image", feature = "svg"))]
+    images: Vec<Image>,
 }
 
 impl<'a> Layer<'a> {
-    pub fn new(bounds: Rectangle<u32>, offset: Vector<u32>) -> Self {
+    pub fn new(bounds: Rectangle<u32>) -> Self {
         Self {
             bounds,
-            offset,
             quads: Vec::new(),
-            images: Vec::new(),
             text: Vec::new(),
             meshes: Vec::new(),
+
+            #[cfg(any(feature = "image", feature = "svg"))]
+            images: Vec::new(),
         }
     }
 }
@@ -48,17 +55,25 @@ impl Renderer {
     ///
     /// [`Renderer`]: struct.Renderer.html
     pub fn new(device: &mut wgpu::Device, settings: Settings) -> Self {
-        let text_pipeline = text::Pipeline::new(device, settings.default_font);
-        let quad_pipeline = quad::Pipeline::new(device);
-        let image_pipeline = crate::image::Pipeline::new(device);
-        let triangle_pipeline =
-            triangle::Pipeline::new(device, settings.antialiasing);
+        let text_pipeline =
+            text::Pipeline::new(device, settings.format, settings.default_font);
+        let quad_pipeline = quad::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,
         }
     }
 
@@ -85,17 +100,14 @@ impl Renderer {
 
         let mut layers = Vec::new();
 
-        layers.push(Layer::new(
-            Rectangle {
-                x: 0,
-                y: 0,
-                width: u32::from(width),
-                height: u32::from(height),
-            },
-            Vector::new(0, 0),
-        ));
-
-        self.draw_primitive(primitive, &mut layers);
+        layers.push(Layer::new(Rectangle {
+            x: 0,
+            y: 0,
+            width: u32::from(width),
+            height: u32::from(height),
+        }));
+
+        self.draw_primitive(Vector::new(0.0, 0.0), primitive, &mut layers);
         self.draw_overlay(overlay, &mut layers);
 
         for layer in layers {
@@ -111,6 +123,7 @@ impl Renderer {
             );
         }
 
+        #[cfg(any(feature = "image", feature = "svg"))]
         self.image_pipeline.trim_cache();
 
         *mouse_cursor
@@ -118,17 +131,16 @@ impl Renderer {
 
     fn draw_primitive<'a>(
         &mut self,
+        translation: Vector,
         primitive: &'a Primitive,
         layers: &mut Vec<Layer<'a>>,
     ) {
-        let layer = layers.last_mut().unwrap();
-
         match primitive {
             Primitive::None => {}
             Primitive::Group { primitives } => {
                 // TODO: Inspect a bit and regroup (?)
                 for primitive in primitives {
-                    self.draw_primitive(primitive, layers)
+                    self.draw_primitive(translation, primitive, layers)
                 }
             }
             Primitive::Text {
@@ -160,12 +172,11 @@ impl Renderer {
                     }
                 };
 
+                let layer = layers.last_mut().unwrap();
+
                 layer.text.push(wgpu_glyph::Section {
                     text: &content,
-                    screen_position: (
-                        x - layer.offset.x as f32,
-                        y - layer.offset.y as f32,
-                    ),
+                    screen_position: (x + translation.x, y + translation.y),
                     bounds: (bounds.width, bounds.height),
                     scale: wgpu_glyph::Scale { x: *size, y: *size },
                     color: color.into_linear(),
@@ -203,11 +214,13 @@ impl Renderer {
                 border_width,
                 border_color,
             } => {
-                // TODO: Move some of this computations to the GPU (?)
+                let layer = layers.last_mut().unwrap();
+
+                // TODO: Move some of these computations to the GPU (?)
                 layer.quads.push(Quad {
                     position: [
-                        bounds.x - layer.offset.x as f32,
-                        bounds.y - layer.offset.y as f32,
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
                     ],
                     scale: [bounds.width, bounds.height],
                     color: match background {
@@ -218,54 +231,81 @@ 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()));
+                let layer = layers.last_mut().unwrap();
+
+                layer.meshes.push((*origin + translation, buffers));
             }
             Primitive::Clip {
                 bounds,
                 offset,
                 content,
             } => {
-                let x = bounds.x - layer.offset.x as f32;
-                let y = bounds.y - layer.offset.y as f32;
-                let width = (bounds.width + x).min(bounds.width);
-                let height = (bounds.height + y).min(bounds.height);
-
-                // Only draw visible content on-screen
-                // TODO: Also, check for parent layer bounds to avoid further
-                // drawing in some circumstances.
-                if width > 0.0 && height > 0.0 {
-                    let clip_layer = Layer::new(
-                        Rectangle {
-                            x: x.max(0.0).floor() as u32,
-                            y: y.max(0.0).floor() as u32,
-                            width: width.ceil() as u32,
-                            height: height.ceil() as u32,
-                        },
-                        layer.offset + *offset,
-                    );
+                let layer = layers.last_mut().unwrap();
 
-                    let new_layer = Layer::new(layer.bounds, layer.offset);
+                let layer_bounds: Rectangle<f32> = layer.bounds.into();
+
+                let clip = Rectangle {
+                    x: bounds.x + translation.x,
+                    y: bounds.y + translation.y,
+                    ..*bounds
+                };
+
+                // Only draw visible content
+                if let Some(clip_bounds) = layer_bounds.intersection(&clip) {
+                    let clip_layer = Layer::new(clip_bounds.into());
+                    let new_layer = Layer::new(layer.bounds);
 
                     layers.push(clip_layer);
-                    self.draw_primitive(content, layers);
+                    self.draw_primitive(
+                        translation
+                            - Vector::new(offset.x as f32, offset.y as f32),
+                        content,
+                        layers,
+                    );
                     layers.push(new_layer);
                 }
             }
+
+            Primitive::Cached { origin, cache } => {
+                self.draw_primitive(
+                    translation + Vector::new(origin.x, origin.y),
+                    &cache,
+                    layers,
+                );
+            }
+
+            #[cfg(feature = "image")]
+            Primitive::Image { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image {
+                    handle: image::Handle::Raster(handle.clone()),
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
+                    size: [bounds.width, bounds.height],
+                });
+            }
+            #[cfg(not(feature = "image"))]
+            Primitive::Image { .. } => {}
+
+            #[cfg(feature = "svg")]
+            Primitive::Svg { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image {
+                    handle: image::Handle::Vector(handle.clone()),
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
+                    size: [bounds.width, bounds.height],
+                });
+            }
+            #[cfg(not(feature = "svg"))]
+            Primitive::Svg { .. } => {}
         }
     }
 
@@ -275,7 +315,7 @@ impl Renderer {
         layers: &mut Vec<Layer<'a>>,
     ) {
         let first = layers.first().unwrap();
-        let mut overlay = Layer::new(first.bounds, Vector::new(0, 0));
+        let mut overlay = Layer::new(first.bounds);
 
         let font_id = self.text_pipeline.overlay_font();
         let scale = wgpu_glyph::Scale { x: 20.0, y: 20.0 };
@@ -317,12 +357,8 @@ impl Renderer {
         let bounds = layer.bounds * scale_factor;
 
         if layer.meshes.len() > 0 {
-            let translated = transformation
-                * Transformation::scale(scale_factor, scale_factor)
-                * Transformation::translate(
-                    -(layer.offset.x as f32),
-                    -(layer.offset.y as f32),
-                );
+            let scaled = transformation
+                * Transformation::scale(scale_factor, scale_factor);
 
             self.triangle_pipeline.draw(
                 device,
@@ -330,7 +366,7 @@ impl Renderer {
                 target,
                 target_width,
                 target_height,
-                translated,
+                scaled,
                 &layer.meshes,
                 bounds,
             );
@@ -348,23 +384,22 @@ 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 scaled = transformation
+                    * Transformation::scale(scale_factor, scale_factor);
+
+                self.image_pipeline.draw(
+                    device,
+                    encoder,
+                    &layer.images,
+                    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/renderer/widget.rs b/wgpu/src/renderer/widget.rs
index 84f908e7..37421fbe 100644
--- a/wgpu/src/renderer/widget.rs
+++ b/wgpu/src/renderer/widget.rs
@@ -2,6 +2,7 @@ mod button;
 mod checkbox;
 mod column;
 mod container;
+mod pane_grid;
 mod progress_bar;
 mod radio;
 mod row;
diff --git a/wgpu/src/renderer/widget/pane_grid.rs b/wgpu/src/renderer/widget/pane_grid.rs
new file mode 100644
index 00000000..2d201fec
--- /dev/null
+++ b/wgpu/src/renderer/widget/pane_grid.rs
@@ -0,0 +1,92 @@
+use crate::{Primitive, Renderer};
+use iced_native::{
+    pane_grid::{self, Axis, Pane},
+    Element, Layout, MouseCursor, Point, Rectangle, Vector,
+};
+
+impl pane_grid::Renderer for Renderer {
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[(Pane, Element<'_, Message, Self>)],
+        dragging: Option<Pane>,
+        resizing: Option<Axis>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let pane_cursor_position = if dragging.is_some() {
+            // TODO: Remove once cursor availability is encoded in the type
+            // system
+            Point::new(-1.0, -1.0)
+        } else {
+            cursor_position
+        };
+
+        let mut mouse_cursor = MouseCursor::OutOfBounds;
+        let mut dragged_pane = None;
+
+        let mut panes: Vec<_> = content
+            .iter()
+            .zip(layout.children())
+            .enumerate()
+            .map(|(i, ((id, pane), layout))| {
+                let (primitive, new_mouse_cursor) =
+                    pane.draw(self, defaults, layout, pane_cursor_position);
+
+                if new_mouse_cursor > mouse_cursor {
+                    mouse_cursor = new_mouse_cursor;
+                }
+
+                if Some(*id) == dragging {
+                    dragged_pane = Some((i, layout));
+                }
+
+                primitive
+            })
+            .collect();
+
+        let primitives = if let Some((index, layout)) = dragged_pane {
+            let pane = panes.remove(index);
+            let bounds = layout.bounds();
+
+            // TODO: Fix once proper layering is implemented.
+            // This is a pretty hacky way to achieve layering.
+            let clip = Primitive::Clip {
+                bounds: Rectangle {
+                    x: cursor_position.x - bounds.width / 2.0,
+                    y: cursor_position.y - bounds.height / 2.0,
+                    width: bounds.width + 0.5,
+                    height: bounds.height + 0.5,
+                },
+                offset: Vector::new(0, 0),
+                content: Box::new(Primitive::Cached {
+                    origin: Point::new(
+                        cursor_position.x - bounds.x - bounds.width / 2.0,
+                        cursor_position.y - bounds.y - bounds.height / 2.0,
+                    ),
+                    cache: std::sync::Arc::new(pane),
+                }),
+            };
+
+            panes.push(clip);
+
+            panes
+        } else {
+            panes
+        };
+
+        (
+            Primitive::Group { primitives },
+            if dragging.is_some() {
+                MouseCursor::Grabbing
+            } else if let Some(axis) = resizing {
+                match axis {
+                    Axis::Horizontal => MouseCursor::ResizingVertically,
+                    Axis::Vertical => MouseCursor::ResizingHorizontally,
+                }
+            } else {
+                mouse_cursor
+            },
+        )
+    }
+}
diff --git a/wgpu/src/renderer/widget/scrollable.rs b/wgpu/src/renderer/widget/scrollable.rs
index bfee7411..732523e3 100644
--- a/wgpu/src/renderer/widget/scrollable.rs
+++ b/wgpu/src/renderer/widget/scrollable.rs
@@ -58,14 +58,14 @@ impl scrollable::Renderer for Renderer {
         style_sheet: &Self::Style,
         (content, mouse_cursor): Self::Output,
     ) -> Self::Output {
-        let clip = Primitive::Clip {
-            bounds,
-            offset: Vector::new(0, offset),
-            content: Box::new(content),
-        };
-
         (
             if let Some(scrollbar) = scrollbar {
+                let clip = Primitive::Clip {
+                    bounds,
+                    offset: Vector::new(0, offset),
+                    content: Box::new(content),
+                };
+
                 let style = if state.is_scroller_grabbed() {
                     style_sheet.dragging()
                 } else if is_mouse_over_scrollbar {
@@ -115,7 +115,7 @@ impl scrollable::Renderer for Renderer {
                     primitives: vec![clip, scrollbar, scroller],
                 }
             } else {
-                clip
+                content
             },
             if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
                 MouseCursor::Idle
diff --git a/wgpu/src/settings.rs b/wgpu/src/settings.rs
index 65853ce2..f946ce0d 100644
--- a/wgpu/src/settings.rs
+++ b/wgpu/src/settings.rs
@@ -5,8 +5,13 @@
 /// The settings of a [`Renderer`].
 ///
 /// [`Renderer`]: ../struct.Renderer.html
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub struct Settings {
+    /// The output format of the [`Renderer`].
+    ///
+    /// [`Renderer`]: ../struct.Renderer.html
+    pub format: wgpu::TextureFormat,
+
     /// The bytes of the font that will be used by default.
     ///
     /// If `None` is provided, a default system font will be chosen.
@@ -16,6 +21,16 @@ pub struct Settings {
     pub antialiasing: Option<Antialiasing>,
 }
 
+impl Default for Settings {
+    fn default() -> Settings {
+        Settings {
+            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            default_font: None,
+            antialiasing: None,
+        }
+    }
+}
+
 /// An antialiasing strategy.
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Antialiasing {
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
diff --git a/wgpu/src/text.rs b/wgpu/src/text.rs
index ab9a2f71..c5670102 100644
--- a/wgpu/src/text.rs
+++ b/wgpu/src/text.rs
@@ -22,7 +22,11 @@ pub struct Pipeline {
 }
 
 impl Pipeline {
-    pub fn new(device: &mut wgpu::Device, default_font: Option<&[u8]>) -> Self {
+    pub fn new(
+        device: &mut wgpu::Device,
+        format: wgpu::TextureFormat,
+        default_font: Option<&[u8]>,
+    ) -> Self {
         // TODO: Font customization
         let font_source = font::Source::new();
 
@@ -54,7 +58,7 @@ impl Pipeline {
 
         let draw_brush = brush_builder
             .initial_cache_size((2048, 2048))
-            .build(device, wgpu::TextureFormat::Bgra8UnormSrgb);
+            .build(device, format);
 
         Pipeline {
             draw_brush: RefCell::new(draw_brush),
diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs
index d149eebc..51a6f954 100644
--- a/wgpu/src/triangle.rs
+++ b/wgpu/src/triangle.rs
@@ -1,7 +1,7 @@
 //! Draw meshes of triangles.
 use crate::{settings, Transformation};
 use iced_native::{Point, Rectangle};
-use std::{mem, sync::Arc};
+use std::mem;
 
 mod msaa;
 
@@ -61,6 +61,7 @@ impl<T> Buffer<T> {
 impl Pipeline {
     pub fn new(
         device: &mut wgpu::Device,
+        format: wgpu::TextureFormat,
         antialiasing: Option<settings::Antialiasing>,
     ) -> Pipeline {
         let constant_layout =
@@ -127,7 +128,7 @@ impl Pipeline {
                 }),
                 primitive_topology: wgpu::PrimitiveTopology::TriangleList,
                 color_states: &[wgpu::ColorStateDescriptor {
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    format,
                     color_blend: wgpu::BlendDescriptor {
                         src_factor: wgpu::BlendFactor::SrcAlpha,
                         dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
@@ -169,7 +170,7 @@ impl Pipeline {
 
         Pipeline {
             pipeline,
-            blit: antialiasing.map(|a| msaa::Blit::new(device, a)),
+            blit: antialiasing.map(|a| msaa::Blit::new(device, format, a)),
             constants: constant_bind_group,
             uniforms_buffer: constants_buffer,
             vertex_buffer: Buffer::new(
@@ -193,7 +194,7 @@ impl Pipeline {
         target_width: u32,
         target_height: u32,
         transformation: Transformation,
-        meshes: &Vec<(Point, Arc<Mesh2D>)>,
+        meshes: &[(Point, &Mesh2D)],
         bounds: Rectangle<u32>,
     ) {
         // This looks a bit crazy, but we are just counting how many vertices
@@ -247,7 +248,7 @@ impl Pipeline {
                 &vertex_buffer,
                 0,
                 &self.vertex_buffer.raw,
-                last_vertex as u64,
+                (std::mem::size_of::<Vertex2D>() * last_vertex) as u64,
                 (std::mem::size_of::<Vertex2D>() * mesh.vertices.len()) as u64,
             );
 
@@ -255,7 +256,7 @@ impl Pipeline {
                 &index_buffer,
                 0,
                 &self.index_buffer.raw,
-                last_index as u64,
+                (std::mem::size_of::<u32>() * last_index) as u64,
                 (std::mem::size_of::<u32>() * mesh.indices.len()) as u64,
             );
 
@@ -312,26 +313,34 @@ impl Pipeline {
                     depth_stencil_attachment: None,
                 });
 
+            render_pass.set_pipeline(&self.pipeline);
+            render_pass.set_scissor_rect(
+                bounds.x,
+                bounds.y,
+                bounds.width,
+                bounds.height,
+            );
+
             for (i, (vertex_offset, index_offset, indices)) in
-                offsets.drain(..).enumerate()
+                offsets.into_iter().enumerate()
             {
-                render_pass.set_pipeline(&self.pipeline);
                 render_pass.set_bind_group(
                     0,
                     &self.constants,
                     &[(std::mem::size_of::<Uniforms>() * i) as u64],
                 );
-                render_pass
-                    .set_index_buffer(&self.index_buffer.raw, index_offset);
+
+                render_pass.set_index_buffer(
+                    &self.index_buffer.raw,
+                    index_offset * std::mem::size_of::<u32>() as u64,
+                );
+
                 render_pass.set_vertex_buffers(
                     0,
-                    &[(&self.vertex_buffer.raw, vertex_offset)],
-                );
-                render_pass.set_scissor_rect(
-                    bounds.x,
-                    bounds.y,
-                    bounds.width,
-                    bounds.height,
+                    &[(
+                        &self.vertex_buffer.raw,
+                        vertex_offset * std::mem::size_of::<Vertex2D>() as u64,
+                    )],
                 );
 
                 render_pass.draw_indexed(0..indices as u32, 0, 0..1);
diff --git a/wgpu/src/triangle/msaa.rs b/wgpu/src/triangle/msaa.rs
index 0def5352..7ccfb062 100644
--- a/wgpu/src/triangle/msaa.rs
+++ b/wgpu/src/triangle/msaa.rs
@@ -2,6 +2,7 @@ use crate::settings;
 
 #[derive(Debug)]
 pub struct Blit {
+    format: wgpu::TextureFormat,
     pipeline: wgpu::RenderPipeline,
     constants: wgpu::BindGroup,
     texture_layout: wgpu::BindGroupLayout,
@@ -12,6 +13,7 @@ pub struct Blit {
 impl Blit {
     pub fn new(
         device: &wgpu::Device,
+        format: wgpu::TextureFormat,
         antialiasing: settings::Antialiasing,
     ) -> Blit {
         let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
@@ -93,7 +95,7 @@ impl Blit {
                 }),
                 primitive_topology: wgpu::PrimitiveTopology::TriangleList,
                 color_states: &[wgpu::ColorStateDescriptor {
-                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    format,
                     color_blend: wgpu::BlendDescriptor {
                         src_factor: wgpu::BlendFactor::SrcAlpha,
                         dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
@@ -115,6 +117,7 @@ impl Blit {
             });
 
         Blit {
+            format,
             pipeline,
             constants: constant_bind_group,
             texture_layout: texture_layout,
@@ -133,6 +136,7 @@ impl Blit {
             None => {
                 self.targets = Some(Targets::new(
                     &device,
+                    self.format,
                     &self.texture_layout,
                     self.sample_count,
                     width,
@@ -143,6 +147,7 @@ impl Blit {
                 if targets.width != width || targets.height != height {
                     self.targets = Some(Targets::new(
                         &device,
+                        self.format,
                         &self.texture_layout,
                         self.sample_count,
                         width,
@@ -204,6 +209,7 @@ struct Targets {
 impl Targets {
     pub fn new(
         device: &wgpu::Device,
+        format: wgpu::TextureFormat,
         texture_layout: &wgpu::BindGroupLayout,
         sample_count: u32,
         width: u32,
@@ -221,7 +227,7 @@ impl Targets {
             mip_level_count: 1,
             sample_count,
             dimension: wgpu::TextureDimension::D2,
-            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            format,
             usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT,
         });
 
@@ -231,7 +237,7 @@ impl Targets {
             mip_level_count: 1,
             sample_count: 1,
             dimension: wgpu::TextureDimension::D2,
-            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            format,
             usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT
                 | wgpu::TextureUsage::SAMPLED,
         });
diff --git a/wgpu/src/widget.rs b/wgpu/src/widget.rs
index 73cce7e2..b39f2d91 100644
--- a/wgpu/src/widget.rs
+++ b/wgpu/src/widget.rs
@@ -10,6 +10,7 @@
 pub mod button;
 pub mod checkbox;
 pub mod container;
+pub mod pane_grid;
 pub mod progress_bar;
 pub mod radio;
 pub mod scrollable;
@@ -23,6 +24,8 @@ pub use checkbox::Checkbox;
 #[doc(no_inline)]
 pub use container::Container;
 #[doc(no_inline)]
+pub use pane_grid::PaneGrid;
+#[doc(no_inline)]
 pub use progress_bar::ProgressBar;
 #[doc(no_inline)]
 pub use radio::Radio;
diff --git a/wgpu/src/widget/canvas.rs b/wgpu/src/widget/canvas.rs
index 38c1ce62..3a9605c9 100644
--- a/wgpu/src/widget/canvas.rs
+++ b/wgpu/src/widget/canvas.rs
@@ -20,6 +20,7 @@ mod drawable;
 mod fill;
 mod frame;
 mod stroke;
+mod text;
 
 pub use drawable::Drawable;
 pub use fill::Fill;
@@ -27,6 +28,7 @@ pub use frame::Frame;
 pub use layer::Layer;
 pub use path::Path;
 pub use stroke::{LineCap, LineJoin, Stroke};
+pub use text::Text;
 
 /// A widget capable of drawing 2D graphics.
 ///
@@ -121,9 +123,9 @@ impl<'a, Message> Widget<Message, Renderer> for Canvas<'a> {
                 primitives: self
                     .layers
                     .iter()
-                    .map(|layer| Primitive::Mesh2D {
+                    .map(|layer| Primitive::Cached {
                         origin,
-                        buffers: layer.draw(size),
+                        cache: layer.draw(size),
                     })
                     .collect(),
             },
diff --git a/wgpu/src/widget/canvas/frame.rs b/wgpu/src/widget/canvas/frame.rs
index fa6d8c0a..7d7ce06a 100644
--- a/wgpu/src/widget/canvas/frame.rs
+++ b/wgpu/src/widget/canvas/frame.rs
@@ -1,8 +1,8 @@
-use iced_native::{Point, Size, Vector};
+use iced_native::{Point, Rectangle, Size, Vector};
 
 use crate::{
-    canvas::{Fill, Path, Stroke},
-    triangle,
+    canvas::{Fill, Path, Stroke, Text},
+    triangle, Primitive,
 };
 
 /// The frame of a [`Canvas`].
@@ -13,6 +13,7 @@ pub struct Frame {
     width: f32,
     height: f32,
     buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+    primitives: Vec<Primitive>,
     transforms: Transforms,
 }
 
@@ -40,6 +41,7 @@ impl Frame {
             width,
             height,
             buffers: lyon::tessellation::VertexBuffers::new(),
+            primitives: Vec::new(),
             transforms: Transforms {
                 previous: Vec::new(),
                 current: Transform {
@@ -154,6 +156,52 @@ impl Frame {
         let _ = result.expect("Stroke path");
     }
 
+    /// Draws the characters of the given [`Text`] on the [`Frame`], filling
+    /// them with the given color.
+    ///
+    /// __Warning:__ Text currently does not work well with rotations and scale
+    /// transforms! The position will be correctly transformed, but the
+    /// resulting glyphs will not be rotated or scaled properly.
+    ///
+    /// Additionally, all text will be rendered on top of all the layers of
+    /// a [`Canvas`]. Therefore, it is currently only meant to be used for
+    /// overlays, which is the most common use case.
+    ///
+    /// Support for vectorial text is planned, and should address all these
+    /// limitations.
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`Frame`]: struct.Frame.html
+    pub fn fill_text(&mut self, text: Text) {
+        use std::f32;
+
+        let position = if self.transforms.current.is_identity {
+            text.position
+        } else {
+            let transformed = self.transforms.current.raw.transform_point(
+                lyon::math::Point::new(text.position.x, text.position.y),
+            );
+
+            Point::new(transformed.x, transformed.y)
+        };
+
+        // TODO: Use vectorial text instead of primitive
+        self.primitives.push(Primitive::Text {
+            content: text.content,
+            bounds: Rectangle {
+                x: position.x,
+                y: position.y,
+                width: f32::INFINITY,
+                height: f32::INFINITY,
+            },
+            color: text.color,
+            size: text.size,
+            font: text.font,
+            horizontal_alignment: text.horizontal_alignment,
+            vertical_alignment: text.vertical_alignment,
+        });
+    }
+
     /// Stores the current transform of the [`Frame`] and executes the given
     /// drawing operations, restoring the transform afterwards.
     ///
@@ -209,13 +257,20 @@ impl Frame {
         self.transforms.current.is_identity = false;
     }
 
-    /// Produces the geometry that has been drawn on the [`Frame`].
+    /// Produces the primitive representing everything drawn on the [`Frame`].
     ///
     /// [`Frame`]: struct.Frame.html
-    pub fn into_mesh(self) -> triangle::Mesh2D {
-        triangle::Mesh2D {
-            vertices: self.buffers.vertices,
-            indices: self.buffers.indices,
+    pub fn into_primitive(mut self) -> Primitive {
+        self.primitives.push(Primitive::Mesh2D {
+            origin: Point::ORIGIN,
+            buffers: triangle::Mesh2D {
+                vertices: self.buffers.vertices,
+                indices: self.buffers.indices,
+            },
+        });
+
+        Primitive::Group {
+            primitives: self.primitives,
         }
     }
 }
diff --git a/wgpu/src/widget/canvas/layer.rs b/wgpu/src/widget/canvas/layer.rs
index 82d647bb..a46b7fb1 100644
--- a/wgpu/src/widget/canvas/layer.rs
+++ b/wgpu/src/widget/canvas/layer.rs
@@ -3,23 +3,23 @@ mod cache;
 
 pub use cache::Cache;
 
-use crate::triangle;
-
+use crate::Primitive;
 use iced_native::Size;
+
 use std::sync::Arc;
 
 /// A layer that can be presented at a [`Canvas`].
 ///
 /// [`Canvas`]: ../struct.Canvas.html
 pub trait Layer: std::fmt::Debug {
-    /// Draws the [`Layer`] in the given bounds and produces [`Mesh2D`] as a
-    /// result.
+    /// Draws the [`Layer`] in the given bounds and produces a [`Primitive`] as
+    /// a result.
     ///
-    /// The [`Layer`] may choose to store the produced [`Mesh2D`] locally and
+    /// The [`Layer`] may choose to store the produced [`Primitive`] locally and
     /// only recompute it when the bounds change, its contents change, or is
     /// otherwise explicitly cleared by other means.
     ///
     /// [`Layer`]: trait.Layer.html
-    /// [`Mesh2D`]: ../../../triangle/struct.Mesh2D.html
-    fn draw(&self, bounds: Size) -> Arc<triangle::Mesh2D>;
+    /// [`Primitive`]: ../../../enum.Primitive.html
+    fn draw(&self, bounds: Size) -> Arc<Primitive>;
 }
diff --git a/wgpu/src/widget/canvas/layer/cache.rs b/wgpu/src/widget/canvas/layer/cache.rs
index 3071cce0..f7002459 100644
--- a/wgpu/src/widget/canvas/layer/cache.rs
+++ b/wgpu/src/widget/canvas/layer/cache.rs
@@ -1,12 +1,10 @@
 use crate::{
     canvas::{Drawable, Frame, Layer},
-    triangle,
+    Primitive,
 };
 
 use iced_native::Size;
-use std::cell::RefCell;
-use std::marker::PhantomData;
-use std::sync::Arc;
+use std::{cell::RefCell, marker::PhantomData, sync::Arc};
 
 /// A simple cache that stores generated geometry to avoid recomputation.
 ///
@@ -21,12 +19,11 @@ pub struct Cache<T: Drawable> {
     state: RefCell<State>,
 }
 
-#[derive(Debug)]
 enum State {
     Empty,
     Filled {
-        mesh: Arc<triangle::Mesh2D>,
         bounds: Size,
+        primitive: Arc<Primitive>,
     },
 }
 
@@ -75,27 +72,40 @@ impl<'a, T> Layer for Bind<'a, T>
 where
     T: Drawable + std::fmt::Debug,
 {
-    fn draw(&self, current_bounds: Size) -> Arc<triangle::Mesh2D> {
+    fn draw(&self, current_bounds: Size) -> Arc<Primitive> {
         use std::ops::Deref;
 
-        if let State::Filled { mesh, bounds } =
+        if let State::Filled { bounds, primitive } =
             self.cache.state.borrow().deref()
         {
             if *bounds == current_bounds {
-                return mesh.clone();
+                return primitive.clone();
             }
         }
 
         let mut frame = Frame::new(current_bounds.width, current_bounds.height);
         self.input.draw(&mut frame);
 
-        let mesh = Arc::new(frame.into_mesh());
+        let primitive = Arc::new(frame.into_primitive());
 
         *self.cache.state.borrow_mut() = State::Filled {
-            mesh: mesh.clone(),
             bounds: current_bounds,
+            primitive: primitive.clone(),
         };
 
-        mesh
+        primitive
+    }
+}
+
+impl std::fmt::Debug for State {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            State::Empty => write!(f, "Empty"),
+            State::Filled { primitive, bounds } => f
+                .debug_struct("Filled")
+                .field("primitive", primitive)
+                .field("bounds", bounds)
+                .finish(),
+        }
     }
 }
diff --git a/wgpu/src/widget/canvas/text.rs b/wgpu/src/widget/canvas/text.rs
new file mode 100644
index 00000000..d1cf1a0f
--- /dev/null
+++ b/wgpu/src/widget/canvas/text.rs
@@ -0,0 +1,34 @@
+use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment};
+
+/// A bunch of text that can be drawn to a canvas
+#[derive(Debug, Clone)]
+pub struct Text {
+    /// The contents of the text
+    pub content: String,
+    /// The position where to begin drawing the text (top-left corner coordinates)
+    pub position: Point,
+    /// The color of the text
+    pub color: Color,
+    /// The size of the text
+    pub size: f32,
+    /// The font of the text
+    pub font: Font,
+    /// The horizontal alignment of the text
+    pub horizontal_alignment: HorizontalAlignment,
+    /// The vertical alignment of the text
+    pub vertical_alignment: VerticalAlignment,
+}
+
+impl Default for Text {
+    fn default() -> Text {
+        Text {
+            content: String::new(),
+            position: Point::ORIGIN,
+            color: Color::BLACK,
+            size: 16.0,
+            font: Font::Default,
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Top,
+        }
+    }
+}
diff --git a/wgpu/src/widget/pane_grid.rs b/wgpu/src/widget/pane_grid.rs
new file mode 100644
index 00000000..7bc2f7c5
--- /dev/null
+++ b/wgpu/src/widget/pane_grid.rs
@@ -0,0 +1,17 @@
+//! Let your users split regions of your application and organize layout dynamically.
+//!
+//! [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+use crate::Renderer;
+
+pub use iced_native::pane_grid::{
+    Axis, Direction, DragEvent, Focus, KeyPressEvent, Pane, ResizeEvent, Split,
+    State,
+};
+
+/// A collection of panes distributed using either vertical or horizontal splits
+/// to completely fill the space available.
+///
+/// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+///
+/// This is an alias of an `iced_native` pane grid with an `iced_wgpu::Renderer`.
+pub type PaneGrid<'a, Message> = iced_native::PaneGrid<'a, Message, Renderer>;
diff --git a/wgpu/src/window/backend.rs b/wgpu/src/window/backend.rs
index 4c9f289b..5b269f36 100644
--- a/wgpu/src/window/backend.rs
+++ b/wgpu/src/window/backend.rs
@@ -8,6 +8,7 @@ use raw_window_handle::HasRawWindowHandle;
 pub struct Backend {
     device: wgpu::Device,
     queue: wgpu::Queue,
+    format: wgpu::TextureFormat,
 }
 
 impl iced_native::window::Backend for Backend {
@@ -37,7 +38,14 @@ impl iced_native::window::Backend for Backend {
 
         let renderer = Renderer::new(&mut device, settings);
 
-        (Backend { device, queue }, renderer)
+        (
+            Backend {
+                device,
+                queue,
+                format: settings.format,
+            },
+            renderer,
+        )
     }
 
     fn create_surface<W: HasRawWindowHandle>(
@@ -53,7 +61,7 @@ impl iced_native::window::Backend for Backend {
         width: u32,
         height: u32,
     ) -> SwapChain {
-        SwapChain::new(&self.device, surface, width, height)
+        SwapChain::new(&self.device, surface, self.format, width, height)
     }
 
     fn draw<T: AsRef<str>>(
diff --git a/wgpu/src/window/swap_chain.rs b/wgpu/src/window/swap_chain.rs
index 6f545fce..4ca2901b 100644
--- a/wgpu/src/window/swap_chain.rs
+++ b/wgpu/src/window/swap_chain.rs
@@ -18,11 +18,12 @@ impl SwapChain {
     pub fn new(
         device: &wgpu::Device,
         surface: &wgpu::Surface,
+        format: wgpu::TextureFormat,
         width: u32,
         height: u32,
     ) -> SwapChain {
         SwapChain {
-            raw: new_swap_chain(surface, width, height, device),
+            raw: new_swap_chain(surface, format, width, height, device),
             viewport: Viewport::new(width, height),
         }
     }
@@ -38,6 +39,7 @@ impl SwapChain {
 
 fn new_swap_chain(
     surface: &wgpu::Surface,
+    format: wgpu::TextureFormat,
     width: u32,
     height: u32,
     device: &wgpu::Device,
@@ -46,7 +48,7 @@ fn new_swap_chain(
         &surface,
         &wgpu::SwapChainDescriptor {
             usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT,
-            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            format,
             width,
             height,
             present_mode: wgpu::PresentMode::Vsync,