Move `Layer` to `iced_graphics`

18 files changed, 433 insertions, 616 deletions

diff --git a/glow/src/backend.rs b/glow/src/backend.rs
index 94683e56..fb6782e6 100644
--- a/glow/src/backend.rs
+++ b/glow/src/backend.rs
@@ -1,12 +1,13 @@
 use crate::quad;
 use crate::text;
 use crate::triangle;
-use crate::{Quad, Settings, Transformation, Viewport};
+use crate::{Settings, Transformation, Viewport};
 use iced_graphics::backend;
 use iced_graphics::font;
+use iced_graphics::Layer;
 use iced_graphics::Primitive;
 use iced_native::mouse;
-use iced_native::{Background, Font, Point, Rectangle, Size, Vector};
+use iced_native::{Font, HorizontalAlignment, Size, VerticalAlignment};
 
 /// A [`glow`] renderer.
 ///
@@ -18,30 +19,6 @@ pub struct Backend {
     triangle_pipeline: triangle::Pipeline,
 }
 
-struct Layer<'a> {
-    bounds: Rectangle<u32>,
-    quads: Vec<Quad>,
-    text: Vec<glow_glyph::Section<'a>>,
-    meshes: Vec<(Vector, Rectangle<u32>, &'a triangle::Mesh2D)>,
-}
-
-impl<'a> Layer<'a> {
-    pub fn new(bounds: Rectangle<u32>) -> Self {
-        Self {
-            bounds,
-            quads: Vec::new(),
-            text: Vec::new(),
-            meshes: Vec::new(),
-        }
-    }
-
-    pub fn intersection(&self, rectangle: Rectangle) -> Option<Rectangle<u32>> {
-        let layer_bounds: Rectangle<f32> = self.bounds.into();
-
-        layer_bounds.intersection(&rectangle).map(Into::into)
-    }
-}
-
 impl Backend {
     /// Creates a new [`Renderer`].
     ///
@@ -71,23 +48,14 @@ impl Backend {
         viewport: &Viewport,
         (primitive, mouse_interaction): &(Primitive, mouse::Interaction),
         scale_factor: f64,
-        overlay: &[T],
+        overlay_text: &[T],
     ) -> mouse::Interaction {
         let (width, height) = viewport.dimensions();
         let scale_factor = scale_factor as f32;
         let transformation = viewport.transformation();
 
-        let mut layers = Vec::new();
-
-        layers.push(Layer::new(Rectangle {
-            x: 0,
-            y: 0,
-            width: (width as f32 / scale_factor).round() as u32,
-            height: (height as f32 / scale_factor).round() as u32,
-        }));
-
-        self.draw_primitive(Vector::new(0.0, 0.0), primitive, &mut layers);
-        self.draw_overlay(overlay, &mut layers);
+        let mut layers = Layer::generate(primitive, viewport);
+        layers.push(Layer::overlay(overlay_text, viewport));
 
         for layer in layers {
             self.flush(
@@ -104,213 +72,6 @@ impl Backend {
         *mouse_interaction
     }
 
-    fn draw_primitive<'a>(
-        &mut self,
-        translation: Vector,
-        primitive: &'a Primitive,
-        layers: &mut Vec<Layer<'a>>,
-    ) {
-        match primitive {
-            Primitive::None => {}
-            Primitive::Group { primitives } => {
-                // TODO: Inspect a bit and regroup (?)
-                for primitive in primitives {
-                    self.draw_primitive(translation, primitive, layers)
-                }
-            }
-            Primitive::Text {
-                content,
-                bounds,
-                size,
-                color,
-                font,
-                horizontal_alignment,
-                vertical_alignment,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                layer.text.push(glow_glyph::Section {
-                    text: &content,
-                    screen_position: (
-                        bounds.x + translation.x,
-                        bounds.y + translation.y,
-                    ),
-                    bounds: (bounds.width, bounds.height),
-                    scale: glow_glyph::Scale { x: *size, y: *size },
-                    color: color.into_linear(),
-                    font_id: self.text_pipeline.find_font(*font),
-                    layout: glow_glyph::Layout::default()
-                        .h_align(match horizontal_alignment {
-                            iced_native::HorizontalAlignment::Left => {
-                                glow_glyph::HorizontalAlign::Left
-                            }
-                            iced_native::HorizontalAlignment::Center => {
-                                glow_glyph::HorizontalAlign::Center
-                            }
-                            iced_native::HorizontalAlignment::Right => {
-                                glow_glyph::HorizontalAlign::Right
-                            }
-                        })
-                        .v_align(match vertical_alignment {
-                            iced_native::VerticalAlignment::Top => {
-                                glow_glyph::VerticalAlign::Top
-                            }
-                            iced_native::VerticalAlignment::Center => {
-                                glow_glyph::VerticalAlign::Center
-                            }
-                            iced_native::VerticalAlignment::Bottom => {
-                                glow_glyph::VerticalAlign::Bottom
-                            }
-                        }),
-                    ..Default::default()
-                })
-            }
-            Primitive::Quad {
-                bounds,
-                background,
-                border_radius,
-                border_width,
-                border_color,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                // TODO: Move some of these computations to the GPU (?)
-                layer.quads.push(Quad {
-                    position: [
-                        bounds.x + translation.x,
-                        bounds.y + translation.y,
-                    ],
-                    scale: [bounds.width, bounds.height],
-                    color: match background {
-                        Background::Color(color) => color.into_linear(),
-                    },
-                    border_radius: *border_radius as f32,
-                    border_width: *border_width as f32,
-                    border_color: border_color.into_linear(),
-                });
-            }
-            Primitive::Mesh2D { size, buffers } => {
-                let layer = layers.last_mut().unwrap();
-
-                // Only draw visible content
-                if let Some(clip_bounds) = layer.intersection(Rectangle::new(
-                    Point::new(translation.x, translation.y),
-                    *size,
-                )) {
-                    layer.meshes.push((
-                        translation,
-                        clip_bounds.into(),
-                        buffers,
-                    ));
-                }
-            }
-            Primitive::Clip {
-                bounds,
-                offset,
-                content,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                // Only draw visible content
-                if let Some(clip_bounds) =
-                    layer.intersection(*bounds + translation)
-                {
-                    let clip_layer = Layer::new(clip_bounds.into());
-                    let new_layer = Layer::new(layer.bounds);
-
-                    layers.push(clip_layer);
-                    self.draw_primitive(
-                        translation
-                            - Vector::new(offset.x as f32, offset.y as f32),
-                        content,
-                        layers,
-                    );
-                    layers.push(new_layer);
-                }
-            }
-            Primitive::Translate {
-                translation: new_translation,
-                content,
-            } => {
-                self.draw_primitive(
-                    translation + *new_translation,
-                    &content,
-                    layers,
-                );
-            }
-
-            Primitive::Cached { cache } => {
-                self.draw_primitive(translation, &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 { .. } => {}
-        }
-    }
-
-    fn draw_overlay<'a, T: AsRef<str>>(
-        &mut self,
-        lines: &'a [T],
-        layers: &mut Vec<Layer<'a>>,
-    ) {
-        let first = layers.first().unwrap();
-        let mut overlay = Layer::new(first.bounds);
-
-        let font_id = self.text_pipeline.overlay_font();
-        let scale = glow_glyph::Scale { x: 20.0, y: 20.0 };
-
-        for (i, line) in lines.iter().enumerate() {
-            overlay.text.push(glow_glyph::Section {
-                text: line.as_ref(),
-                screen_position: (11.0, 11.0 + 25.0 * i as f32),
-                color: [0.9, 0.9, 0.9, 1.0],
-                scale,
-                font_id,
-                ..glow_glyph::Section::default()
-            });
-
-            overlay.text.push(glow_glyph::Section {
-                text: line.as_ref(),
-                screen_position: (10.0, 10.0 + 25.0 * i as f32),
-                color: [0.0, 0.0, 0.0, 1.0],
-                scale,
-                font_id,
-                ..glow_glyph::Section::default()
-            });
-        }
-
-        layers.push(overlay);
-    }
-
     fn flush(
         &mut self,
         gl: &glow::Context,
@@ -352,13 +113,14 @@ impl Backend {
             for text in layer.text.iter() {
                 // Target physical coordinates directly to avoid blurry text
                 let text = glow_glyph::Section {
+                    text: text.content,
                     // TODO: We `round` here to avoid rerasterizing text when
                     // its position changes slightly. This can make text feel a
                     // bit "jumpy". We may be able to do better once we improve
                     // our text rendering/caching pipeline.
                     screen_position: (
-                        (text.screen_position.0 * scale_factor).round(),
-                        (text.screen_position.1 * scale_factor).round(),
+                        (text.bounds.x * scale_factor).round(),
+                        (text.bounds.y * scale_factor).round(),
                     ),
                     // TODO: Fix precision issues with some scale factors.
                     //
@@ -370,14 +132,39 @@ impl Backend {
                     // scaling when rendering. This would ensure that both
                     // measuring and rendering follow the same layout rules.
                     bounds: (
-                        (text.bounds.0 * scale_factor).ceil(),
-                        (text.bounds.1 * scale_factor).ceil(),
+                        (text.bounds.width * scale_factor).ceil(),
+                        (text.bounds.height * scale_factor).ceil(),
                     ),
                     scale: glow_glyph::Scale {
-                        x: text.scale.x * scale_factor,
-                        y: text.scale.y * scale_factor,
+                        x: text.size * scale_factor,
+                        y: text.size * scale_factor,
                     },
-                    ..*text
+                    color: text.color,
+                    font_id: self.text_pipeline.find_font(text.font),
+                    layout: glow_glyph::Layout::default()
+                        .h_align(match text.horizontal_alignment {
+                            HorizontalAlignment::Left => {
+                                glow_glyph::HorizontalAlign::Left
+                            }
+                            HorizontalAlignment::Center => {
+                                glow_glyph::HorizontalAlign::Center
+                            }
+                            HorizontalAlignment::Right => {
+                                glow_glyph::HorizontalAlign::Right
+                            }
+                        })
+                        .v_align(match text.vertical_alignment {
+                            VerticalAlignment::Top => {
+                                glow_glyph::VerticalAlign::Top
+                            }
+                            VerticalAlignment::Center => {
+                                glow_glyph::VerticalAlign::Center
+                            }
+                            VerticalAlignment::Bottom => {
+                                glow_glyph::VerticalAlign::Bottom
+                            }
+                        }),
+                    ..Default::default()
                 };
 
                 self.text_pipeline.queue(text);
diff --git a/glow/src/lib.rs b/glow/src/lib.rs
index 724065bd..d40ed0ae 100644
--- a/glow/src/lib.rs
+++ b/glow/src/lib.rs
@@ -17,7 +17,6 @@ pub use settings::Settings;
 
 pub(crate) use backend::Backend;
 pub(crate) use iced_graphics::Transformation;
-pub(crate) use quad::Quad;
 
 pub type Renderer = iced_graphics::Renderer<Backend>;
 
diff --git a/glow/src/quad.rs b/glow/src/quad.rs
index 744597d2..26424b39 100644
--- a/glow/src/quad.rs
+++ b/glow/src/quad.rs
@@ -1,7 +1,10 @@
 use crate::{Transformation, Viewport};
 use glow::HasContext;
+use iced_graphics::layer;
 use iced_native::Rectangle;
 
+const MAX_INSTANCES: usize = 100_000;
+
 #[derive(Debug)]
 pub struct Pipeline {
     program: <glow::Context as HasContext>::Program,
@@ -37,7 +40,7 @@ impl Pipeline {
         }
 
         let (vertex_array, instances) =
-            unsafe { create_instance_buffer(gl, Quad::MAX) };
+            unsafe { create_instance_buffer(gl, MAX_INSTANCES) };
 
         Pipeline {
             program,
@@ -52,7 +55,7 @@ impl Pipeline {
         &mut self,
         gl: &glow::Context,
         viewport: &Viewport,
-        instances: &[Quad],
+        instances: &[layer::Quad],
         transformation: Transformation,
         scale: f32,
         bounds: Rectangle<u32>,
@@ -97,7 +100,7 @@ impl Pipeline {
         let total = instances.len();
 
         while i < total {
-            let end = (i + Quad::MAX).min(total);
+            let end = (i + MAX_INSTANCES).min(total);
             let amount = end - i;
 
             unsafe {
@@ -115,7 +118,7 @@ impl Pipeline {
                 );
             }
 
-            i += Quad::MAX;
+            i += MAX_INSTANCES;
         }
 
         unsafe {
@@ -126,24 +129,6 @@ impl Pipeline {
     }
 }
 
-#[derive(Debug, Clone, Copy)]
-#[repr(C)]
-pub struct Quad {
-    pub position: [f32; 2],
-    pub scale: [f32; 2],
-    pub color: [f32; 4],
-    pub border_color: [f32; 4],
-    pub border_radius: f32,
-    pub border_width: f32,
-}
-
-unsafe impl bytemuck::Zeroable for Quad {}
-unsafe impl bytemuck::Pod for Quad {}
-
-impl Quad {
-    const MAX: usize = 100_000;
-}
-
 unsafe fn create_program(
     gl: &glow::Context,
     shader_sources: &[(u32, &str)],
@@ -196,11 +181,11 @@ unsafe fn create_instance_buffer(
     gl.bind_buffer(glow::ARRAY_BUFFER, Some(buffer));
     gl.buffer_data_size(
         glow::ARRAY_BUFFER,
-        (size * std::mem::size_of::<Quad>()) as i32,
+        (size * std::mem::size_of::<layer::Quad>()) as i32,
         glow::DYNAMIC_DRAW,
     );
 
-    let stride = std::mem::size_of::<Quad>() as i32;
+    let stride = std::mem::size_of::<layer::Quad>() as i32;
 
     gl.enable_vertex_attrib_array(0);
     gl.vertex_attrib_pointer_f32(0, 2, glow::FLOAT, false, stride, 0);
diff --git a/glow/src/triangle.rs b/glow/src/triangle.rs
index 8b21c0a8..5836f0cf 100644
--- a/glow/src/triangle.rs
+++ b/glow/src/triangle.rs
@@ -1,7 +1,6 @@
 //! Draw meshes of triangles.
 use crate::{settings, Transformation};
-use iced_native::{Rectangle, Vector};
-use std::mem;
+use iced_graphics::layer;
 
 pub use iced_graphics::triangle::Mesh2D;
 
@@ -27,7 +26,7 @@ impl Pipeline {
         target_height: u32,
         transformation: Transformation,
         scale_factor: f32,
-        meshes: &[(Vector, Rectangle<u32>, &Mesh2D)],
+        meshes: &[layer::Mesh<'_>],
     ) {
     }
 }
diff --git a/graphics/src/layer.rs b/graphics/src/layer.rs
new file mode 100644
index 00000000..ae9c6ce0
--- /dev/null
+++ b/graphics/src/layer.rs
@@ -0,0 +1,266 @@
+use crate::image;
+use crate::svg;
+use crate::triangle;
+use crate::{
+    Background, Font, HorizontalAlignment, Point, Primitive, Rectangle, Size,
+    Vector, VerticalAlignment, Viewport,
+};
+
+pub struct Layer<'a> {
+    pub bounds: Rectangle<u32>,
+    pub quads: Vec<Quad>,
+    pub meshes: Vec<Mesh<'a>>,
+    pub text: Vec<Text<'a>>,
+    pub images: Vec<Image>,
+}
+
+impl<'a> Layer<'a> {
+    pub fn new(bounds: Rectangle<u32>) -> Self {
+        Self {
+            bounds,
+            quads: Vec::new(),
+            meshes: Vec::new(),
+            text: Vec::new(),
+            images: Vec::new(),
+        }
+    }
+
+    pub fn overlay(lines: &'a [impl AsRef<str>], viewport: &Viewport) -> Self {
+        let (width, height) = viewport.dimensions();
+
+        let mut overlay = Layer::new(Rectangle {
+            x: 0,
+            y: 0,
+            width,
+            height,
+        });
+
+        for (i, line) in lines.iter().enumerate() {
+            let text = Text {
+                content: line.as_ref(),
+                bounds: Rectangle::new(
+                    Point::new(11.0, 11.0 + 25.0 * i as f32),
+                    Size::INFINITY,
+                ),
+                color: [0.9, 0.9, 0.9, 1.0],
+                size: 20.0,
+                font: Font::Default,
+                horizontal_alignment: HorizontalAlignment::Left,
+                vertical_alignment: VerticalAlignment::Top,
+            };
+
+            overlay.text.push(text);
+
+            overlay.text.push(Text {
+                bounds: text.bounds + Vector::new(-1.0, -1.0),
+                color: [0.0, 0.0, 0.0, 1.0],
+                ..text
+            });
+        }
+
+        overlay
+    }
+
+    pub(crate) fn intersection(
+        &self,
+        rectangle: Rectangle,
+    ) -> Option<Rectangle<u32>> {
+        let layer_bounds: Rectangle<f32> = self.bounds.into();
+
+        layer_bounds.intersection(&rectangle).map(Into::into)
+    }
+
+    pub fn generate(
+        primitive: &'a Primitive,
+        viewport: &Viewport,
+    ) -> Vec<Self> {
+        let mut layers = Vec::new();
+        let (width, height) = viewport.dimensions();
+
+        layers.push(Layer::new(Rectangle {
+            x: 0,
+            y: 0,
+            width,
+            height,
+        }));
+
+        Self::process_primitive(&mut layers, Vector::new(0.0, 0.0), primitive);
+
+        layers
+    }
+
+    fn process_primitive(
+        layers: &mut Vec<Self>,
+        translation: Vector,
+        primitive: &'a Primitive,
+    ) {
+        match primitive {
+            Primitive::None => {}
+            Primitive::Group { primitives } => {
+                // TODO: Inspect a bit and regroup (?)
+                for primitive in primitives {
+                    Self::process_primitive(layers, translation, primitive)
+                }
+            }
+            Primitive::Text {
+                content,
+                bounds,
+                size,
+                color,
+                font,
+                horizontal_alignment,
+                vertical_alignment,
+            } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.text.push(Text {
+                    content,
+                    bounds: *bounds + translation,
+                    size: *size,
+                    color: color.into_linear(),
+                    font: *font,
+                    horizontal_alignment: *horizontal_alignment,
+                    vertical_alignment: *vertical_alignment,
+                });
+            }
+            Primitive::Quad {
+                bounds,
+                background,
+                border_radius,
+                border_width,
+                border_color,
+            } => {
+                let layer = layers.last_mut().unwrap();
+
+                // TODO: Move some of these computations to the GPU (?)
+                layer.quads.push(Quad {
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
+                    scale: [bounds.width, bounds.height],
+                    color: match background {
+                        Background::Color(color) => color.into_linear(),
+                    },
+                    border_radius: *border_radius as f32,
+                    border_width: *border_width as f32,
+                    border_color: border_color.into_linear(),
+                });
+            }
+            Primitive::Mesh2D { buffers, size } => {
+                let layer = layers.last_mut().unwrap();
+
+                let bounds = Rectangle::new(
+                    Point::new(translation.x, translation.y),
+                    *size,
+                );
+
+                // Only draw visible content
+                if let Some(clip_bounds) = layer.intersection(bounds) {
+                    layer.meshes.push(Mesh {
+                        origin: Point::new(translation.x, translation.y),
+                        buffers,
+                        clip_bounds: clip_bounds.into(),
+                    });
+                }
+            }
+            Primitive::Clip {
+                bounds,
+                offset,
+                content,
+            } => {
+                let layer = layers.last_mut().unwrap();
+
+                // Only draw visible content
+                if let Some(clip_bounds) =
+                    layer.intersection(*bounds + translation)
+                {
+                    let clip_layer = Layer::new(clip_bounds.into());
+                    let new_layer = Layer::new(layer.bounds);
+
+                    layers.push(clip_layer);
+                    Self::process_primitive(
+                        layers,
+                        translation
+                            - Vector::new(offset.x as f32, offset.y as f32),
+                        content,
+                    );
+                    layers.push(new_layer);
+                }
+            }
+            Primitive::Translate {
+                translation: new_translation,
+                content,
+            } => {
+                Self::process_primitive(
+                    layers,
+                    translation + *new_translation,
+                    &content,
+                );
+            }
+            Primitive::Cached { cache } => {
+                Self::process_primitive(layers, translation, &cache);
+            }
+            Primitive::Image { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image::Raster {
+                    handle: handle.clone(),
+                    bounds: *bounds + translation,
+                });
+            }
+            Primitive::Svg { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image::Vector {
+                    handle: handle.clone(),
+                    bounds: *bounds + translation,
+                });
+            }
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+#[repr(C)]
+pub struct Quad {
+    pub position: [f32; 2],
+    pub scale: [f32; 2],
+    pub color: [f32; 4],
+    pub border_color: [f32; 4],
+    pub border_radius: f32,
+    pub border_width: f32,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub struct Mesh<'a> {
+    pub origin: Point,
+    pub buffers: &'a triangle::Mesh2D,
+    pub clip_bounds: Rectangle<u32>,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub struct Text<'a> {
+    pub content: &'a str,
+    pub bounds: Rectangle,
+    pub color: [f32; 4],
+    pub size: f32,
+    pub font: Font,
+    pub horizontal_alignment: HorizontalAlignment,
+    pub vertical_alignment: VerticalAlignment,
+}
+
+#[derive(Debug, Clone)]
+pub enum Image {
+    Raster {
+        handle: image::Handle,
+        bounds: Rectangle,
+    },
+    Vector {
+        handle: svg::Handle,
+        bounds: Rectangle,
+    },
+}
+
+unsafe impl bytemuck::Zeroable for Quad {}
+unsafe impl bytemuck::Pod for Quad {}
diff --git a/graphics/src/lib.rs b/graphics/src/lib.rs
index 5dc4040f..5ab333c7 100644
--- a/graphics/src/lib.rs
+++ b/graphics/src/lib.rs
@@ -8,6 +8,7 @@ mod widget;
 
 pub mod backend;
 pub mod font;
+pub mod layer;
 pub mod triangle;
 
 #[doc(no_inline)]
@@ -16,7 +17,13 @@ pub use widget::*;
 pub use antialiasing::Antialiasing;
 pub use backend::Backend;
 pub use defaults::Defaults;
+pub use layer::Layer;
 pub use primitive::Primitive;
 pub use renderer::Renderer;
 pub use transformation::Transformation;
 pub use viewport::Viewport;
+
+pub use iced_native::{
+    Background, Font, HorizontalAlignment, Point, Rectangle, Size, Vector,
+    VerticalAlignment,
+};
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
index e73227ef..95dbf7dd 100644
--- a/graphics/src/primitive.rs
+++ b/graphics/src/primitive.rs
@@ -82,13 +82,13 @@ pub enum Primitive {
     ///
     /// It can be used to render many kinds of geometry freely.
     Mesh2D {
+        /// The vertex and index buffers of the mesh
+        buffers: triangle::Mesh2D,
+
         /// The size of the drawable region of the mesh.
         ///
         /// Any geometry that falls out of this region will be clipped.
         size: Size,
-
-        /// The vertex and index buffers of the mesh
-        buffers: triangle::Mesh2D,
     },
     /// A cached primitive.
     ///
diff --git a/graphics/src/triangle.rs b/graphics/src/triangle.rs
index 2b157e3a..474f69b8 100644
--- a/graphics/src/triangle.rs
+++ b/graphics/src/triangle.rs
@@ -5,6 +5,7 @@
 pub struct Mesh2D {
     /// The vertices of the mesh
     pub vertices: Vec<Vertex2D>,
+
     /// The list of vertex indices that defines the triangles of the mesh.
     ///
     /// Therefore, this list should always have a length that is a multiple of
diff --git a/graphics/src/widget.rs b/graphics/src/widget.rs
index d9c91d77..1f6d6559 100644
--- a/graphics/src/widget.rs
+++ b/graphics/src/widget.rs
@@ -10,18 +10,18 @@
 pub mod button;
 pub mod checkbox;
 pub mod container;
+pub mod image;
 pub mod pane_grid;
 pub mod progress_bar;
 pub mod radio;
 pub mod scrollable;
 pub mod slider;
+pub mod svg;
 pub mod text_input;
 
 mod column;
-mod image;
 mod row;
 mod space;
-mod svg;
 mod text;
 
 #[doc(no_inline)]
diff --git a/graphics/src/widget/canvas/frame.rs b/graphics/src/widget/canvas/frame.rs
index 5262ab4e..48d28d95 100644
--- a/graphics/src/widget/canvas/frame.rs
+++ b/graphics/src/widget/canvas/frame.rs
@@ -304,11 +304,11 @@ impl Frame {
     pub fn into_geometry(mut self) -> Geometry {
         if !self.buffers.indices.is_empty() {
             self.primitives.push(Primitive::Mesh2D {
-                size: self.size,
                 buffers: triangle::Mesh2D {
                     vertices: self.buffers.vertices,
                     indices: self.buffers.indices,
                 },
+                size: self.size,
             });
         }
 
diff --git a/graphics/src/widget/image.rs b/graphics/src/widget/image.rs
index 79d82cb1..ea49febe 100644
--- a/graphics/src/widget/image.rs
+++ b/graphics/src/widget/image.rs
@@ -4,7 +4,7 @@ use iced_native::image;
 use iced_native::mouse;
 use iced_native::Layout;
 
-pub use iced_native::Image;
+pub use iced_native::image::{Handle, Image};
 
 impl<B> image::Renderer for Renderer<B>
 where
diff --git a/graphics/src/widget/svg.rs b/graphics/src/widget/svg.rs
index b1aa7cea..8c681478 100644
--- a/graphics/src/widget/svg.rs
+++ b/graphics/src/widget/svg.rs
@@ -2,7 +2,7 @@ use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{mouse, svg, Layout};
 
-pub use iced_native::Svg;
+pub use iced_native::svg::{Handle, Svg};
 
 impl<B> svg::Renderer for Renderer<B>
 where
diff --git a/wgpu/src/backend.rs b/wgpu/src/backend.rs
index 073a79e2..82e4c4b2 100644
--- a/wgpu/src/backend.rs
+++ b/wgpu/src/backend.rs
@@ -1,15 +1,16 @@
 use crate::quad;
 use crate::text;
 use crate::triangle;
-use crate::{Quad, Settings, Target, Transformation};
+use crate::{Settings, Target, Transformation};
 use iced_graphics::backend;
 use iced_graphics::font;
+use iced_graphics::layer::Layer;
 use iced_graphics::Primitive;
 use iced_native::mouse;
-use iced_native::{Background, Font, Point, Rectangle, Size, Vector};
+use iced_native::{Font, HorizontalAlignment, Size, VerticalAlignment};
 
 #[cfg(any(feature = "image", feature = "svg"))]
-use crate::image::{self, Image};
+use crate::image;
 
 /// A [`wgpu`] renderer.
 ///
@@ -24,36 +25,6 @@ pub struct Backend {
     image_pipeline: image::Pipeline,
 }
 
-struct Layer<'a> {
-    bounds: Rectangle<u32>,
-    quads: Vec<Quad>,
-    meshes: Vec<(Vector, Rectangle<u32>, &'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>) -> Self {
-        Self {
-            bounds,
-            quads: Vec::new(),
-            text: Vec::new(),
-            meshes: Vec::new(),
-
-            #[cfg(any(feature = "image", feature = "svg"))]
-            images: Vec::new(),
-        }
-    }
-
-    pub fn intersection(&self, rectangle: Rectangle) -> Option<Rectangle<u32>> {
-        let layer_bounds: Rectangle<f32> = self.bounds.into();
-
-        layer_bounds.intersection(&rectangle).map(Into::into)
-    }
-}
-
 impl Backend {
     /// Creates a new [`Renderer`].
     ///
@@ -94,7 +65,7 @@ impl Backend {
         target: Target<'_>,
         (primitive, mouse_interaction): &(Primitive, mouse::Interaction),
         scale_factor: f64,
-        overlay: &[T],
+        overlay_text: &[T],
     ) -> mouse::Interaction {
         log::debug!("Drawing");
 
@@ -102,17 +73,8 @@ impl Backend {
         let scale_factor = scale_factor as f32;
         let transformation = target.viewport.transformation();
 
-        let mut layers = Vec::new();
-
-        layers.push(Layer::new(Rectangle {
-            x: 0,
-            y: 0,
-            width,
-            height,
-        }));
-
-        self.draw_primitive(Vector::new(0.0, 0.0), primitive, &mut layers);
-        self.draw_overlay(overlay, &mut layers);
+        let mut layers = Layer::generate(primitive, &target.viewport);
+        layers.push(Layer::overlay(overlay_text, &target.viewport));
 
         for layer in layers {
             self.flush(
@@ -133,213 +95,6 @@ impl Backend {
         *mouse_interaction
     }
 
-    fn draw_primitive<'a>(
-        &mut self,
-        translation: Vector,
-        primitive: &'a Primitive,
-        layers: &mut Vec<Layer<'a>>,
-    ) {
-        match primitive {
-            Primitive::None => {}
-            Primitive::Group { primitives } => {
-                // TODO: Inspect a bit and regroup (?)
-                for primitive in primitives {
-                    self.draw_primitive(translation, primitive, layers)
-                }
-            }
-            Primitive::Text {
-                content,
-                bounds,
-                size,
-                color,
-                font,
-                horizontal_alignment,
-                vertical_alignment,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                layer.text.push(wgpu_glyph::Section {
-                    text: &content,
-                    screen_position: (
-                        bounds.x + translation.x,
-                        bounds.y + translation.y,
-                    ),
-                    bounds: (bounds.width, bounds.height),
-                    scale: wgpu_glyph::Scale { x: *size, y: *size },
-                    color: color.into_linear(),
-                    font_id: self.text_pipeline.find_font(*font),
-                    layout: wgpu_glyph::Layout::default()
-                        .h_align(match horizontal_alignment {
-                            iced_native::HorizontalAlignment::Left => {
-                                wgpu_glyph::HorizontalAlign::Left
-                            }
-                            iced_native::HorizontalAlignment::Center => {
-                                wgpu_glyph::HorizontalAlign::Center
-                            }
-                            iced_native::HorizontalAlignment::Right => {
-                                wgpu_glyph::HorizontalAlign::Right
-                            }
-                        })
-                        .v_align(match vertical_alignment {
-                            iced_native::VerticalAlignment::Top => {
-                                wgpu_glyph::VerticalAlign::Top
-                            }
-                            iced_native::VerticalAlignment::Center => {
-                                wgpu_glyph::VerticalAlign::Center
-                            }
-                            iced_native::VerticalAlignment::Bottom => {
-                                wgpu_glyph::VerticalAlign::Bottom
-                            }
-                        }),
-                    ..Default::default()
-                })
-            }
-            Primitive::Quad {
-                bounds,
-                background,
-                border_radius,
-                border_width,
-                border_color,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                // TODO: Move some of these computations to the GPU (?)
-                layer.quads.push(Quad {
-                    position: [
-                        bounds.x + translation.x,
-                        bounds.y + translation.y,
-                    ],
-                    scale: [bounds.width, bounds.height],
-                    color: match background {
-                        Background::Color(color) => color.into_linear(),
-                    },
-                    border_radius: *border_radius as f32,
-                    border_width: *border_width as f32,
-                    border_color: border_color.into_linear(),
-                });
-            }
-            Primitive::Mesh2D { size, buffers } => {
-                let layer = layers.last_mut().unwrap();
-
-                // Only draw visible content
-                if let Some(clip_bounds) = layer.intersection(Rectangle::new(
-                    Point::new(translation.x, translation.y),
-                    *size,
-                )) {
-                    layer.meshes.push((
-                        translation,
-                        clip_bounds.into(),
-                        buffers,
-                    ));
-                }
-            }
-            Primitive::Clip {
-                bounds,
-                offset,
-                content,
-            } => {
-                let layer = layers.last_mut().unwrap();
-
-                // Only draw visible content
-                if let Some(clip_bounds) =
-                    layer.intersection(*bounds + translation)
-                {
-                    let clip_layer = Layer::new(clip_bounds.into());
-                    let new_layer = Layer::new(layer.bounds);
-
-                    layers.push(clip_layer);
-                    self.draw_primitive(
-                        translation
-                            - Vector::new(offset.x as f32, offset.y as f32),
-                        content,
-                        layers,
-                    );
-                    layers.push(new_layer);
-                }
-            }
-            Primitive::Translate {
-                translation: new_translation,
-                content,
-            } => {
-                self.draw_primitive(
-                    translation + *new_translation,
-                    &content,
-                    layers,
-                );
-            }
-
-            Primitive::Cached { cache } => {
-                self.draw_primitive(translation, &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 { .. } => {}
-        }
-    }
-
-    fn draw_overlay<'a, T: AsRef<str>>(
-        &mut self,
-        lines: &'a [T],
-        layers: &mut Vec<Layer<'a>>,
-    ) {
-        let first = layers.first().unwrap();
-        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 };
-
-        for (i, line) in lines.iter().enumerate() {
-            overlay.text.push(wgpu_glyph::Section {
-                text: line.as_ref(),
-                screen_position: (11.0, 11.0 + 25.0 * i as f32),
-                color: [0.9, 0.9, 0.9, 1.0],
-                scale,
-                font_id,
-                ..wgpu_glyph::Section::default()
-            });
-
-            overlay.text.push(wgpu_glyph::Section {
-                text: line.as_ref(),
-                screen_position: (10.0, 10.0 + 25.0 * i as f32),
-                color: [0.0, 0.0, 0.0, 1.0],
-                scale,
-                font_id,
-                ..wgpu_glyph::Section::default()
-            });
-        }
-
-        layers.push(overlay);
-    }
-
     fn flush(
         &mut self,
         device: &wgpu::Device,
@@ -403,13 +158,14 @@ impl Backend {
             for text in layer.text.iter() {
                 // Target physical coordinates directly to avoid blurry text
                 let text = wgpu_glyph::Section {
+                    text: text.content,
                     // TODO: We `round` here to avoid rerasterizing text when
                     // its position changes slightly. This can make text feel a
                     // bit "jumpy". We may be able to do better once we improve
                     // our text rendering/caching pipeline.
                     screen_position: (
-                        (text.screen_position.0 * scale_factor).round(),
-                        (text.screen_position.1 * scale_factor).round(),
+                        (text.bounds.x * scale_factor).round(),
+                        (text.bounds.y * scale_factor).round(),
                     ),
                     // TODO: Fix precision issues with some scale factors.
                     //
@@ -421,14 +177,39 @@ impl Backend {
                     // scaling when rendering. This would ensure that both
                     // measuring and rendering follow the same layout rules.
                     bounds: (
-                        (text.bounds.0 * scale_factor).ceil(),
-                        (text.bounds.1 * scale_factor).ceil(),
+                        (text.bounds.width * scale_factor).ceil(),
+                        (text.bounds.height * scale_factor).ceil(),
                     ),
                     scale: wgpu_glyph::Scale {
-                        x: text.scale.x * scale_factor,
-                        y: text.scale.y * scale_factor,
+                        x: text.size * scale_factor,
+                        y: text.size * scale_factor,
                     },
-                    ..*text
+                    color: text.color,
+                    font_id: self.text_pipeline.find_font(text.font),
+                    layout: wgpu_glyph::Layout::default()
+                        .h_align(match text.horizontal_alignment {
+                            HorizontalAlignment::Left => {
+                                wgpu_glyph::HorizontalAlign::Left
+                            }
+                            HorizontalAlignment::Center => {
+                                wgpu_glyph::HorizontalAlign::Center
+                            }
+                            HorizontalAlignment::Right => {
+                                wgpu_glyph::HorizontalAlign::Right
+                            }
+                        })
+                        .v_align(match text.vertical_alignment {
+                            VerticalAlignment::Top => {
+                                wgpu_glyph::VerticalAlign::Top
+                            }
+                            VerticalAlignment::Center => {
+                                wgpu_glyph::VerticalAlign::Center
+                            }
+                            VerticalAlignment::Bottom => {
+                                wgpu_glyph::VerticalAlign::Bottom
+                            }
+                        }),
+                    ..Default::default()
                 };
 
                 self.text_pipeline.queue(text);
diff --git a/wgpu/src/image.rs b/wgpu/src/image.rs
index ea5dc09d..49f1d29c 100644
--- a/wgpu/src/image.rs
+++ b/wgpu/src/image.rs
@@ -9,6 +9,7 @@ mod vector;
 use crate::Transformation;
 use atlas::Atlas;
 
+use iced_graphics::layer;
 use iced_native::Rectangle;
 use std::cell::RefCell;
 use std::mem;
@@ -282,7 +283,7 @@ impl Pipeline {
         &mut self,
         device: &wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
-        images: &[Image],
+        images: &[layer::Image],
         transformation: Transformation,
         bounds: Rectangle<u32>,
         target: &wgpu::TextureView,
@@ -297,31 +298,48 @@ impl Pipeline {
         let mut vector_cache = self.vector_cache.borrow_mut();
 
         for image in images {
-            match &image.handle {
+            match &image {
                 #[cfg(feature = "image")]
-                Handle::Raster(handle) => {
+                layer::Image::Raster { handle, bounds } => {
                     if let Some(atlas_entry) = raster_cache.upload(
                         handle,
                         device,
                         encoder,
                         &mut self.texture_atlas,
                     ) {
-                        add_instances(image, atlas_entry, instances);
+                        add_instances(
+                            [bounds.x, bounds.y],
+                            [bounds.width, bounds.height],
+                            atlas_entry,
+                            instances,
+                        );
                     }
                 }
+                #[cfg(not(feature = "image"))]
+                layer::Image::Raster { .. } => {}
+
                 #[cfg(feature = "svg")]
-                Handle::Vector(handle) => {
+                layer::Image::Vector { handle, bounds } => {
+                    let size = [bounds.width, bounds.height];
+
                     if let Some(atlas_entry) = vector_cache.upload(
                         handle,
-                        image.size,
+                        size,
                         _scale,
                         device,
                         encoder,
                         &mut self.texture_atlas,
                     ) {
-                        add_instances(image, atlas_entry, instances);
+                        add_instances(
+                            [bounds.x, bounds.y],
+                            size,
+                            atlas_entry,
+                            instances,
+                        );
                     }
                 }
+                #[cfg(not(feature = "svg"))]
+                layer::Image::Vector { .. } => {}
             }
         }
 
@@ -437,20 +455,6 @@ impl Pipeline {
     }
 }
 
-pub struct Image {
-    pub handle: Handle,
-    pub position: [f32; 2],
-    pub size: [f32; 2],
-}
-
-pub enum Handle {
-    #[cfg(feature = "image")]
-    Raster(image::Handle),
-
-    #[cfg(feature = "svg")]
-    Vector(svg::Handle),
-}
-
 #[repr(C)]
 #[derive(Clone, Copy, AsBytes)]
 pub struct Vertex {
@@ -495,22 +499,23 @@ struct Uniforms {
 }
 
 fn add_instances(
-    image: &Image,
+    image_position: [f32; 2],
+    image_size: [f32; 2],
     entry: &atlas::Entry,
     instances: &mut Vec<Instance>,
 ) {
     match entry {
         atlas::Entry::Contiguous(allocation) => {
-            add_instance(image.position, image.size, allocation, instances);
+            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;
+            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 [x, y] = image_position;
                 let (fragment_x, fragment_y) = fragment.position;
                 let (fragment_width, fragment_height) = allocation.size();
 
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index 99897e60..74007eae 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -48,7 +48,6 @@ pub use target::Target;
 pub use widget::*;
 
 pub(crate) use iced_graphics::Transformation;
-pub(crate) use quad::Quad;
 
 pub type Renderer = iced_graphics::Renderer<Backend>;
 
diff --git a/wgpu/src/quad.rs b/wgpu/src/quad.rs
index 0c2d2244..0b62f44f 100644
--- a/wgpu/src/quad.rs
+++ b/wgpu/src/quad.rs
@@ -1,4 +1,5 @@
 use crate::Transformation;
+use iced_graphics::layer;
 use iced_native::Rectangle;
 
 use std::mem;
@@ -107,7 +108,7 @@ impl Pipeline {
                             }],
                         },
                         wgpu::VertexBufferDescriptor {
-                            stride: mem::size_of::<Quad>() as u64,
+                            stride: mem::size_of::<layer::Quad>() as u64,
                             step_mode: wgpu::InputStepMode::Instance,
                             attributes: &[
                                 wgpu::VertexAttributeDescriptor {
@@ -161,7 +162,7 @@ impl Pipeline {
 
         let instances = device.create_buffer(&wgpu::BufferDescriptor {
             label: None,
-            size: mem::size_of::<Quad>() as u64 * Quad::MAX as u64,
+            size: mem::size_of::<layer::Quad>() as u64 * MAX_INSTANCES as u64,
             usage: wgpu::BufferUsage::VERTEX | wgpu::BufferUsage::COPY_DST,
         });
 
@@ -179,7 +180,7 @@ impl Pipeline {
         &mut self,
         device: &wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
-        instances: &[Quad],
+        instances: &[layer::Quad],
         transformation: Transformation,
         scale: f32,
         bounds: Rectangle<u32>,
@@ -204,11 +205,11 @@ impl Pipeline {
         let total = instances.len();
 
         while i < total {
-            let end = (i + Quad::MAX).min(total);
+            let end = (i + MAX_INSTANCES).min(total);
             let amount = end - i;
 
             let instance_buffer = device.create_buffer_with_data(
-                &instances[i..end].as_bytes(),
+                bytemuck::cast_slice(&instances[i..end]),
                 wgpu::BufferUsage::COPY_SRC,
             );
 
@@ -217,7 +218,7 @@ impl Pipeline {
                 0,
                 &self.instances,
                 0,
-                (mem::size_of::<Quad>() * amount) as u64,
+                (mem::size_of::<layer::Quad>() * amount) as u64,
             );
 
             {
@@ -260,7 +261,7 @@ impl Pipeline {
                 );
             }
 
-            i += Quad::MAX;
+            i += MAX_INSTANCES;
         }
     }
 }
@@ -288,20 +289,7 @@ const QUAD_VERTS: [Vertex; 4] = [
     },
 ];
 
-#[repr(C)]
-#[derive(Debug, Clone, Copy, AsBytes)]
-pub struct Quad {
-    pub position: [f32; 2],
-    pub scale: [f32; 2],
-    pub color: [f32; 4],
-    pub border_color: [f32; 4],
-    pub border_radius: f32,
-    pub border_width: f32,
-}
-
-impl Quad {
-    const MAX: usize = 100_000;
-}
+const MAX_INSTANCES: usize = 100_000;
 
 #[repr(C)]
 #[derive(Debug, Clone, Copy, AsBytes)]
diff --git a/wgpu/src/text.rs b/wgpu/src/text.rs
index c1782fe5..17d3f6dd 100644
--- a/wgpu/src/text.rs
+++ b/wgpu/src/text.rs
@@ -57,10 +57,6 @@ impl Pipeline {
         }
     }
 
-    pub fn overlay_font(&self) -> wgpu_glyph::FontId {
-        wgpu_glyph::FontId(0)
-    }
-
     pub fn queue(&mut self, section: wgpu_glyph::Section<'_>) {
         self.draw_brush.borrow_mut().queue(section);
     }
diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs
index a71bcedc..31975005 100644
--- a/wgpu/src/triangle.rs
+++ b/wgpu/src/triangle.rs
@@ -1,6 +1,6 @@
 //! Draw meshes of triangles.
 use crate::{settings, Transformation};
-use iced_native::{Rectangle, Vector};
+use iced_graphics::layer;
 use std::mem;
 use zerocopy::AsBytes;
 
@@ -204,14 +204,16 @@ impl Pipeline {
         target_height: u32,
         transformation: Transformation,
         scale_factor: f32,
-        meshes: &[(Vector, Rectangle<u32>, &Mesh2D)],
+        meshes: &[layer::Mesh<'_>],
     ) {
         // This looks a bit crazy, but we are just counting how many vertices
         // and indices we will need to handle.
         // TODO: Improve readability
         let (total_vertices, total_indices) = meshes
             .iter()
-            .map(|(_, _, mesh)| (mesh.vertices.len(), mesh.indices.len()))
+            .map(|layer::Mesh { buffers, .. }| {
+                (buffers.vertices.len(), buffers.indices.len())
+            })
             .fold((0, 0), |(total_v, total_i), (v, i)| {
                 (total_v + v, total_i + i)
             });
@@ -232,18 +234,18 @@ impl Pipeline {
         let mut last_index = 0;
 
         // We upload everything upfront
-        for (origin, _, mesh) in meshes {
+        for mesh in meshes {
             let transform = (transformation
-                * Transformation::translate(origin.x, origin.y))
+                * Transformation::translate(mesh.origin.x, mesh.origin.y))
             .into();
 
             let vertex_buffer = device.create_buffer_with_data(
-                bytemuck::cast_slice(&mesh.vertices),
+                bytemuck::cast_slice(&mesh.buffers.vertices),
                 wgpu::BufferUsage::COPY_SRC,
             );
 
             let index_buffer = device.create_buffer_with_data(
-                mesh.indices.as_bytes(),
+                mesh.buffers.indices.as_bytes(),
                 wgpu::BufferUsage::COPY_SRC,
             );
 
@@ -252,7 +254,8 @@ impl Pipeline {
                 0,
                 &self.vertex_buffer.raw,
                 (std::mem::size_of::<Vertex2D>() * last_vertex) as u64,
-                (std::mem::size_of::<Vertex2D>() * mesh.vertices.len()) as u64,
+                (std::mem::size_of::<Vertex2D>() * mesh.buffers.vertices.len())
+                    as u64,
             );
 
             encoder.copy_buffer_to_buffer(
@@ -260,18 +263,19 @@ impl Pipeline {
                 0,
                 &self.index_buffer.raw,
                 (std::mem::size_of::<u32>() * last_index) as u64,
-                (std::mem::size_of::<u32>() * mesh.indices.len()) as u64,
+                (std::mem::size_of::<u32>() * mesh.buffers.indices.len())
+                    as u64,
             );
 
             uniforms.push(transform);
             offsets.push((
                 last_vertex as u64,
                 last_index as u64,
-                mesh.indices.len(),
+                mesh.buffers.indices.len(),
             ));
 
-            last_vertex += mesh.vertices.len();
-            last_index += mesh.indices.len();
+            last_vertex += mesh.buffers.vertices.len();
+            last_index += mesh.buffers.indices.len();
         }
 
         let uniforms_buffer = device.create_buffer_with_data(
@@ -322,13 +326,13 @@ impl Pipeline {
             for (i, (vertex_offset, index_offset, indices)) in
                 offsets.into_iter().enumerate()
             {
-                let bounds = meshes[i].1 * scale_factor;
+                let clip_bounds = meshes[i].clip_bounds * scale_factor;
 
                 render_pass.set_scissor_rect(
-                    bounds.x,
-                    bounds.y,
-                    bounds.width,
-                    bounds.height,
+                    clip_bounds.x,
+                    clip_bounds.y,
+                    clip_bounds.width,
+                    clip_bounds.height,
                 );
 
                 render_pass.set_bind_group(