Group all solid triangles independently of color

23 files changed, 1335 insertions, 1076 deletions

diff --git a/glow/src/shader/common/triangle.vert b/glow/src/shader/common/gradient.vert
index fe505997..fe505997 100644
--- a/glow/src/shader/common/triangle.vert
+++ b/glow/src/shader/common/gradient.vert
diff --git a/glow/src/shader/common/triangle.frag b/glow/src/shader/common/solid.frag
index 8260f6a6..174ffdd3 100644
--- a/glow/src/shader/common/triangle.frag
+++ b/glow/src/shader/common/solid.frag
@@ -11,8 +11,8 @@ out vec4 fragColor;
 #define gl_FragColor fragColor
 #endif
 
-uniform vec4 color;
+in vec4 v_Color;
 
 void main() {
-    gl_FragColor = color;
+    gl_FragColor = v_Color;
 }
diff --git a/glow/src/shader/common/solid.vert b/glow/src/shader/common/solid.vert
new file mode 100644
index 00000000..59ed88e5
--- /dev/null
+++ b/glow/src/shader/common/solid.vert
@@ -0,0 +1,11 @@
+uniform mat4 u_Transform;
+
+in vec2 i_Position;
+in vec4 i_Color;
+
+out vec4 v_Color;
+
+void main() {
+    gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0);
+    v_Color = i_Color;
+}
diff --git a/glow/src/triangle.rs b/glow/src/triangle.rs
index cb7ab055..849a7272 100644
--- a/glow/src/triangle.rs
+++ b/glow/src/triangle.rs
@@ -1,74 +1,49 @@
 //! Draw meshes of triangles.
-mod gradient;
-mod solid;
-
 use crate::program;
 use crate::Transformation;
 
+use iced_graphics::gradient::Gradient;
 use iced_graphics::layer::mesh::{self, Mesh};
-use iced_graphics::triangle::{self, Vertex2D};
+use iced_graphics::triangle::{ColoredVertex2D, Vertex2D};
 
 use glow::HasContext;
 use std::marker::PhantomData;
 
 #[derive(Debug)]
 pub(crate) struct Pipeline {
-    vertex_array: <glow::Context as HasContext>::VertexArray,
-    vertices: Buffer<Vertex2D>,
     indices: Buffer<u32>,
-    programs: ProgramList,
-}
-
-#[derive(Debug)]
-struct ProgramList {
     solid: solid::Program,
     gradient: gradient::Program,
 }
 
 impl Pipeline {
     pub fn new(gl: &glow::Context, shader_version: &program::Version) -> Self {
-        let vertex_array =
-            unsafe { gl.create_vertex_array().expect("Create vertex array") };
-
-        unsafe {
-            gl.bind_vertex_array(Some(vertex_array));
-        }
-
-        let vertices = unsafe {
-            Buffer::new(
-                gl,
-                glow::ARRAY_BUFFER,
-                glow::DYNAMIC_DRAW,
-                std::mem::size_of::<Vertex2D>() as usize,
-            )
-        };
-
-        let indices = unsafe {
+        let mut indices = unsafe {
             Buffer::new(
                 gl,
                 glow::ELEMENT_ARRAY_BUFFER,
                 glow::DYNAMIC_DRAW,
-                std::mem::size_of::<u32>() as usize,
+                1000,
             )
         };
 
+        let solid = solid::Program::new(gl, shader_version);
+        let gradient = gradient::Program::new(gl, shader_version);
+
         unsafe {
-            let stride = std::mem::size_of::<Vertex2D>() as i32;
+            gl.bind_vertex_array(Some(solid.vertex_array));
+            indices.bind(gl, 0);
 
-            gl.enable_vertex_attrib_array(0);
-            gl.vertex_attrib_pointer_f32(0, 2, glow::FLOAT, false, stride, 0);
+            gl.bind_vertex_array(Some(gradient.vertex_array));
+            indices.bind(gl, 0);
 
             gl.bind_vertex_array(None);
-        };
+        }
 
         Self {
-            vertex_array,
-            vertices,
             indices,
-            programs: ProgramList {
-                solid: solid::Program::new(gl, shader_version),
-                gradient: gradient::Program::new(gl, shader_version),
-            },
+            solid,
+            gradient,
         }
     }
 
@@ -83,50 +58,83 @@ impl Pipeline {
         unsafe {
             gl.enable(glow::MULTISAMPLE);
             gl.enable(glow::SCISSOR_TEST);
-            gl.bind_vertex_array(Some(self.vertex_array))
         }
 
-        //count the total amount of vertices & indices we need to handle
-        let (total_vertices, total_indices) = mesh::attribute_count_of(meshes);
+        // Count the total amount of vertices & indices we need to handle
+        let count = mesh::attribute_count_of(meshes);
 
         // Then we ensure the current attribute buffers are big enough, resizing if necessary
         unsafe {
-            self.vertices.bind(gl, total_vertices);
-            self.indices.bind(gl, total_indices);
+            self.indices.bind(gl, count.indices);
         }
 
         // We upload all the vertices and indices upfront
-        let mut vertex_offset = 0;
+        let mut solid_vertex_offset = 0;
+        let mut gradient_vertex_offset = 0;
         let mut index_offset = 0;
 
         for mesh in meshes {
-            unsafe {
-                gl.buffer_sub_data_u8_slice(
-                    glow::ARRAY_BUFFER,
-                    (vertex_offset * std::mem::size_of::<Vertex2D>()) as i32,
-                    bytemuck::cast_slice(&mesh.buffers.vertices),
-                );
+            let indices = mesh.indices();
 
+            unsafe {
                 gl.buffer_sub_data_u8_slice(
                     glow::ELEMENT_ARRAY_BUFFER,
                     (index_offset * std::mem::size_of::<u32>()) as i32,
-                    bytemuck::cast_slice(&mesh.buffers.indices),
+                    bytemuck::cast_slice(indices),
                 );
 
-                vertex_offset += mesh.buffers.vertices.len();
-                index_offset += mesh.buffers.indices.len();
+                index_offset += indices.len();
+            }
+
+            match mesh {
+                Mesh::Solid { buffers, .. } => {
+                    unsafe {
+                        self.solid.vertices.bind(gl, count.solid_vertices);
+
+                        gl.buffer_sub_data_u8_slice(
+                            glow::ARRAY_BUFFER,
+                            (solid_vertex_offset
+                                * std::mem::size_of::<ColoredVertex2D>())
+                                as i32,
+                            bytemuck::cast_slice(&buffers.vertices),
+                        );
+                    }
+
+                    solid_vertex_offset += buffers.vertices.len();
+                }
+                Mesh::Gradient { buffers, .. } => {
+                    unsafe {
+                        self.gradient
+                            .vertices
+                            .bind(gl, count.gradient_vertices);
+
+                        gl.buffer_sub_data_u8_slice(
+                            glow::ARRAY_BUFFER,
+                            (gradient_vertex_offset
+                                * std::mem::size_of::<Vertex2D>())
+                                as i32,
+                            bytemuck::cast_slice(&buffers.vertices),
+                        );
+                    }
+
+                    gradient_vertex_offset += buffers.vertices.len();
+                }
             }
         }
 
         // Then we draw each mesh using offsets
-        let mut last_vertex = 0;
+        let mut last_solid_vertex = 0;
+        let mut last_gradient_vertex = 0;
         let mut last_index = 0;
 
         for mesh in meshes {
-            let transform = transformation
-                * Transformation::translate(mesh.origin.x, mesh.origin.y);
+            let indices = mesh.indices();
+            let origin = mesh.origin();
 
-            let clip_bounds = (mesh.clip_bounds * scale_factor).snap();
+            let transform =
+                transformation * Transformation::translate(origin.x, origin.y);
+
+            let clip_bounds = (mesh.clip_bounds() * scale_factor).snap();
 
             unsafe {
                 gl.scissor(
@@ -136,30 +144,126 @@ impl Pipeline {
                     clip_bounds.width as i32,
                     clip_bounds.height as i32,
                 );
+            }
+
+            match mesh {
+                Mesh::Solid { buffers, .. } => unsafe {
+                    gl.use_program(Some(self.solid.program));
+                    gl.bind_vertex_array(Some(self.solid.vertex_array));
+
+                    if transform != self.solid.uniforms.transform {
+                        gl.uniform_matrix_4_f32_slice(
+                            Some(&self.solid.uniforms.transform_location),
+                            false,
+                            transform.as_ref(),
+                        );
 
-                match mesh.style {
-                    triangle::Style::Solid(color) => {
-                        self.programs.solid.use_program(gl, color, &transform);
+                        self.solid.uniforms.transform = transform;
                     }
-                    #[cfg(not(target_arch = "wasm32"))]
-                    triangle::Style::Gradient(gradient) => {
-                        self.programs
-                            .gradient
-                            .use_program(gl, gradient, &transform);
+
+                    gl.draw_elements_base_vertex(
+                        glow::TRIANGLES,
+                        indices.len() as i32,
+                        glow::UNSIGNED_INT,
+                        (last_index * std::mem::size_of::<u32>()) as i32,
+                        last_solid_vertex as i32,
+                    );
+
+                    last_solid_vertex += buffers.vertices.len();
+                },
+                Mesh::Gradient {
+                    buffers, gradient, ..
+                } => unsafe {
+                    gl.use_program(Some(self.gradient.program));
+                    gl.bind_vertex_array(Some(self.gradient.vertex_array));
+
+                    if transform != self.gradient.uniforms.transform {
+                        gl.uniform_matrix_4_f32_slice(
+                            Some(&self.gradient.uniforms.locations.transform),
+                            false,
+                            transform.as_ref(),
+                        );
+
+                        self.gradient.uniforms.transform = transform;
                     }
-                }
 
-                gl.draw_elements_base_vertex(
-                    glow::TRIANGLES,
-                    mesh.buffers.indices.len() as i32,
-                    glow::UNSIGNED_INT,
-                    (last_index * std::mem::size_of::<u32>()) as i32,
-                    last_vertex as i32,
-                );
+                    if &self.gradient.uniforms.gradient != *gradient {
+                        match gradient {
+                            Gradient::Linear(linear) => {
+                                gl.uniform_4_f32(
+                                    Some(
+                                        &self
+                                            .gradient
+                                            .uniforms
+                                            .locations
+                                            .gradient_direction,
+                                    ),
+                                    linear.start.x,
+                                    linear.start.y,
+                                    linear.end.x,
+                                    linear.end.y,
+                                );
+
+                                gl.uniform_1_i32(
+                                    Some(
+                                        &self
+                                            .gradient
+                                            .uniforms
+                                            .locations
+                                            .color_stops_size,
+                                    ),
+                                    (linear.color_stops.len() * 2) as i32,
+                                );
+
+                                let mut stops = [0.0; 128];
+
+                                for (index, stop) in linear
+                                    .color_stops
+                                    .iter()
+                                    .enumerate()
+                                    .take(16)
+                                {
+                                    let [r, g, b, a] = stop.color.into_linear();
+
+                                    stops[index * 8] = r;
+                                    stops[(index * 8) + 1] = g;
+                                    stops[(index * 8) + 2] = b;
+                                    stops[(index * 8) + 3] = a;
+                                    stops[(index * 8) + 4] = stop.offset;
+                                    stops[(index * 8) + 5] = 0.;
+                                    stops[(index * 8) + 6] = 0.;
+                                    stops[(index * 8) + 7] = 0.;
+                                }
+
+                                gl.uniform_4_f32_slice(
+                                    Some(
+                                        &self
+                                            .gradient
+                                            .uniforms
+                                            .locations
+                                            .color_stops,
+                                    ),
+                                    &stops,
+                                );
+                            }
+                        }
+
+                        self.gradient.uniforms.gradient = (*gradient).clone();
+                    }
 
-                last_vertex += mesh.buffers.vertices.len();
-                last_index += mesh.buffers.indices.len();
+                    gl.draw_elements_base_vertex(
+                        glow::TRIANGLES,
+                        indices.len() as i32,
+                        glow::UNSIGNED_INT,
+                        (last_index * std::mem::size_of::<u32>()) as i32,
+                        last_gradient_vertex as i32,
+                    );
+
+                    last_gradient_vertex += buffers.vertices.len();
+                },
             }
+
+            last_index += indices.len();
         }
 
         unsafe {
@@ -170,47 +274,8 @@ impl Pipeline {
     }
 }
 
-/// A simple shader program. Uses [`triangle.vert`] for its vertex shader and only binds position
-/// attribute location.
-pub(super) fn program(
-    gl: &glow::Context,
-    shader_version: &program::Version,
-    fragment_shader: &'static str,
-) -> <glow::Context as HasContext>::Program {
-    unsafe {
-        let vertex_shader = program::Shader::vertex(
-            gl,
-            shader_version,
-            include_str!("shader/common/triangle.vert"),
-        );
-
-        let fragment_shader =
-            program::Shader::fragment(gl, shader_version, fragment_shader);
-
-        program::create(
-            gl,
-            &[vertex_shader, fragment_shader],
-            &[(0, "i_Position")],
-        )
-    }
-}
-
-pub fn set_transform(
-    gl: &glow::Context,
-    location: <glow::Context as HasContext>::UniformLocation,
-    transform: Transformation,
-) {
-    unsafe {
-        gl.uniform_matrix_4_f32_slice(
-            Some(&location),
-            false,
-            transform.as_ref(),
-        );
-    }
-}
-
 #[derive(Debug)]
-struct Buffer<T> {
+pub struct Buffer<T> {
     raw: <glow::Context as HasContext>::Buffer,
     target: u32,
     usage: u32,
@@ -254,3 +319,268 @@ impl<T> Buffer<T> {
         }
     }
 }
+
+mod solid {
+    use crate::program;
+    use crate::triangle;
+    use glow::{Context, HasContext, NativeProgram};
+    use iced_graphics::triangle::ColoredVertex2D;
+    use iced_graphics::Transformation;
+
+    #[derive(Debug)]
+    pub struct Program {
+        pub program: <Context as HasContext>::Program,
+        pub vertex_array: <glow::Context as HasContext>::VertexArray,
+        pub vertices: triangle::Buffer<ColoredVertex2D>,
+        pub uniforms: Uniforms,
+    }
+
+    impl Program {
+        pub fn new(gl: &Context, shader_version: &program::Version) -> Self {
+            let program = unsafe {
+                let vertex_shader = program::Shader::vertex(
+                    gl,
+                    shader_version,
+                    include_str!("shader/common/solid.vert"),
+                );
+
+                let fragment_shader = program::Shader::fragment(
+                    gl,
+                    shader_version,
+                    include_str!("shader/common/solid.frag"),
+                );
+
+                program::create(
+                    gl,
+                    &[vertex_shader, fragment_shader],
+                    &[(0, "i_Position"), (1, "i_Color")],
+                )
+            };
+
+            let vertex_array = unsafe {
+                gl.create_vertex_array().expect("Create vertex array")
+            };
+
+            let vertices = unsafe {
+                triangle::Buffer::new(
+                    gl,
+                    glow::ARRAY_BUFFER,
+                    glow::DYNAMIC_DRAW,
+                    1000,
+                )
+            };
+
+            unsafe {
+                gl.bind_vertex_array(Some(vertex_array));
+
+                let stride = std::mem::size_of::<ColoredVertex2D>() as i32;
+
+                gl.enable_vertex_attrib_array(0);
+                gl.vertex_attrib_pointer_f32(
+                    0,
+                    2,
+                    glow::FLOAT,
+                    false,
+                    stride,
+                    0,
+                );
+
+                gl.enable_vertex_attrib_array(1);
+                gl.vertex_attrib_pointer_f32(
+                    1,
+                    4,
+                    glow::FLOAT,
+                    false,
+                    stride,
+                    4 * 2,
+                );
+
+                gl.bind_vertex_array(None);
+            };
+
+            Self {
+                program,
+                vertex_array,
+                vertices,
+                uniforms: Uniforms::new(gl, program),
+            }
+        }
+    }
+
+    #[derive(Debug)]
+    pub struct Uniforms {
+        pub transform: Transformation,
+        pub transform_location: <Context as HasContext>::UniformLocation,
+    }
+
+    impl Uniforms {
+        fn new(gl: &Context, program: NativeProgram) -> Self {
+            let transform = Transformation::identity();
+            let transform_location =
+                unsafe { gl.get_uniform_location(program, "u_Transform") }
+                    .expect("Solid - Get u_Transform.");
+
+            unsafe {
+                gl.use_program(Some(program));
+
+                gl.uniform_matrix_4_f32_slice(
+                    Some(&transform_location),
+                    false,
+                    transform.as_ref(),
+                );
+
+                gl.use_program(None);
+            }
+
+            Self {
+                transform,
+                transform_location,
+            }
+        }
+    }
+}
+
+mod gradient {
+    use crate::program;
+    use crate::triangle;
+    use glow::{Context, HasContext, NativeProgram};
+    use iced_graphics::gradient::{self, Gradient};
+    use iced_graphics::triangle::Vertex2D;
+    use iced_graphics::Transformation;
+
+    #[derive(Debug)]
+    pub struct Program {
+        pub program: <Context as HasContext>::Program,
+        pub vertex_array: <glow::Context as HasContext>::VertexArray,
+        pub vertices: triangle::Buffer<Vertex2D>,
+        pub uniforms: Uniforms,
+    }
+
+    impl Program {
+        pub fn new(gl: &Context, shader_version: &program::Version) -> Self {
+            let program = unsafe {
+                let vertex_shader = program::Shader::vertex(
+                    gl,
+                    shader_version,
+                    include_str!("shader/common/gradient.vert"),
+                );
+
+                let fragment_shader = program::Shader::fragment(
+                    gl,
+                    shader_version,
+                    include_str!("shader/common/gradient.frag"),
+                );
+
+                program::create(
+                    gl,
+                    &[vertex_shader, fragment_shader],
+                    &[(0, "i_Position")],
+                )
+            };
+
+            let vertex_array = unsafe {
+                gl.create_vertex_array().expect("Create vertex array")
+            };
+
+            let vertices = unsafe {
+                triangle::Buffer::new(
+                    gl,
+                    glow::ARRAY_BUFFER,
+                    glow::DYNAMIC_DRAW,
+                    1000,
+                )
+            };
+
+            unsafe {
+                gl.bind_vertex_array(Some(vertex_array));
+
+                let stride = std::mem::size_of::<Vertex2D>() as i32;
+
+                gl.enable_vertex_attrib_array(0);
+                gl.vertex_attrib_pointer_f32(
+                    0,
+                    2,
+                    glow::FLOAT,
+                    false,
+                    stride,
+                    0,
+                );
+
+                gl.bind_vertex_array(None);
+            };
+
+            Self {
+                program,
+                vertex_array,
+                vertices,
+                uniforms: Uniforms::new(gl, program),
+            }
+        }
+    }
+
+    #[derive(Debug)]
+    pub struct Uniforms {
+        pub gradient: Gradient,
+        pub transform: Transformation,
+        pub locations: Locations,
+    }
+
+    #[derive(Debug)]
+    pub struct Locations {
+        pub gradient_direction: <Context as HasContext>::UniformLocation,
+        pub color_stops_size: <Context as HasContext>::UniformLocation,
+        //currently the maximum number of stops is 16 due to lack of SSBO in GL2.1
+        pub color_stops: <Context as HasContext>::UniformLocation,
+        pub transform: <Context as HasContext>::UniformLocation,
+    }
+
+    impl Uniforms {
+        fn new(gl: &Context, program: NativeProgram) -> Self {
+            let gradient_direction = unsafe {
+                gl.get_uniform_location(program, "gradient_direction")
+            }
+            .expect("Gradient - Get gradient_direction.");
+
+            let color_stops_size =
+                unsafe { gl.get_uniform_location(program, "color_stops_size") }
+                    .expect("Gradient - Get color_stops_size.");
+
+            let color_stops = unsafe {
+                gl.get_uniform_location(program, "color_stops")
+                    .expect("Gradient - Get color_stops.")
+            };
+
+            let transform = Transformation::identity();
+            let transform_location =
+                unsafe { gl.get_uniform_location(program, "u_Transform") }
+                    .expect("Solid - Get u_Transform.");
+
+            unsafe {
+                gl.use_program(Some(program));
+
+                gl.uniform_matrix_4_f32_slice(
+                    Some(&transform_location),
+                    false,
+                    transform.as_ref(),
+                );
+
+                gl.use_program(None);
+            }
+
+            Self {
+                gradient: Gradient::Linear(gradient::Linear {
+                    start: Default::default(),
+                    end: Default::default(),
+                    color_stops: vec![],
+                }),
+                transform: Transformation::identity(),
+                locations: Locations {
+                    gradient_direction,
+                    color_stops_size,
+                    color_stops,
+                    transform: transform_location,
+                },
+            }
+        }
+    }
+}
diff --git a/glow/src/triangle/gradient.rs b/glow/src/triangle/gradient.rs
deleted file mode 100644
index d5f26877..00000000
--- a/glow/src/triangle/gradient.rs
+++ /dev/null
@@ -1,162 +0,0 @@
-use crate::program::Version;
-use crate::triangle;
-use glow::{Context, HasContext, NativeProgram};
-use iced_graphics::gradient::Gradient;
-use iced_graphics::gradient::Linear;
-use iced_graphics::Transformation;
-
-#[derive(Debug)]
-pub struct Program {
-    pub program: <Context as HasContext>::Program,
-    pub uniform_data: UniformData,
-}
-
-#[derive(Debug)]
-pub struct UniformData {
-    gradient: Gradient,
-    transform: Transformation,
-    uniform_locations: UniformLocations,
-}
-
-#[derive(Debug)]
-struct UniformLocations {
-    gradient_direction_location: <Context as HasContext>::UniformLocation,
-    color_stops_size_location: <Context as HasContext>::UniformLocation,
-    //currently the maximum number of stops is 16 due to lack of SSBO in GL2.1
-    color_stops_location: <Context as HasContext>::UniformLocation,
-    transform_location: <Context as HasContext>::UniformLocation,
-}
-
-impl Program {
-    pub fn new(gl: &Context, shader_version: &Version) -> Self {
-        let program = triangle::program(
-            gl,
-            shader_version,
-            include_str!("../shader/common/gradient.frag"),
-        );
-
-        Self {
-            program,
-            uniform_data: UniformData::new(gl, program),
-        }
-    }
-
-    pub fn write_uniforms(
-        &mut self,
-        gl: &Context,
-        gradient: &Gradient,
-        transform: &Transformation,
-    ) {
-        if transform != &self.uniform_data.transform {
-            triangle::set_transform(
-                gl,
-                self.uniform_data.uniform_locations.transform_location,
-                *transform,
-            );
-        }
-
-        if &self.uniform_data.gradient != gradient {
-            match gradient {
-                Gradient::Linear(linear) => unsafe {
-                    gl.uniform_4_f32(
-                        Some(
-                            &self
-                                .uniform_data
-                                .uniform_locations
-                                .gradient_direction_location,
-                        ),
-                        linear.start.x,
-                        linear.start.y,
-                        linear.end.x,
-                        linear.end.y,
-                    );
-
-                    gl.uniform_1_i32(
-                        Some(
-                            &self
-                                .uniform_data
-                                .uniform_locations
-                                .color_stops_size_location,
-                        ),
-                        (linear.color_stops.len() * 2) as i32,
-                    );
-
-                    let mut stops = [0.0; 128];
-
-                    for (index, stop) in
-                        linear.color_stops.iter().enumerate().take(16)
-                    {
-                        let [r, g, b, a] = stop.color.into_linear();
-
-                        stops[index * 8] = r;
-                        stops[(index * 8) + 1] = g;
-                        stops[(index * 8) + 2] = b;
-                        stops[(index * 8) + 3] = a;
-                        stops[(index * 8) + 4] = stop.offset;
-                        stops[(index * 8) + 5] = 0.;
-                        stops[(index * 8) + 6] = 0.;
-                        stops[(index * 8) + 7] = 0.;
-                    }
-
-                    gl.uniform_4_f32_slice(
-                        Some(
-                            &self
-                                .uniform_data
-                                .uniform_locations
-                                .color_stops_location,
-                        ),
-                        &stops,
-                    );
-                },
-            }
-
-            self.uniform_data.gradient = gradient.clone();
-        }
-    }
-
-    pub fn use_program(
-        &mut self,
-        gl: &Context,
-        gradient: &Gradient,
-        transform: &Transformation,
-    ) {
-        unsafe { gl.use_program(Some(self.program)) }
-        self.write_uniforms(gl, gradient, transform);
-    }
-}
-
-impl UniformData {
-    fn new(gl: &Context, program: NativeProgram) -> Self {
-        let gradient_direction_location =
-            unsafe { gl.get_uniform_location(program, "gradient_direction") }
-                .expect("Gradient - Get gradient_direction.");
-
-        let color_stops_size_location =
-            unsafe { gl.get_uniform_location(program, "color_stops_size") }
-                .expect("Gradient - Get color_stops_size.");
-
-        let color_stops_location = unsafe {
-            gl.get_uniform_location(program, "color_stops")
-                .expect("Gradient - Get color_stops.")
-        };
-
-        let transform_location =
-            unsafe { gl.get_uniform_location(program, "u_Transform") }
-                .expect("Gradient - Get u_Transform.");
-
-        Self {
-            gradient: Gradient::Linear(Linear {
-                start: Default::default(),
-                end: Default::default(),
-                color_stops: vec![],
-            }),
-            transform: Transformation::identity(),
-            uniform_locations: UniformLocations {
-                gradient_direction_location,
-                color_stops_size_location,
-                color_stops_location,
-                transform_location,
-            },
-        }
-    }
-}
diff --git a/glow/src/triangle/solid.rs b/glow/src/triangle/solid.rs
deleted file mode 100644
index fb3d40c3..00000000
--- a/glow/src/triangle/solid.rs
+++ /dev/null
@@ -1,91 +0,0 @@
-use crate::program::Version;
-use crate::{triangle, Color};
-use glow::{Context, HasContext, NativeProgram};
-use iced_graphics::Transformation;
-
-#[derive(Debug)]
-pub struct Program {
-    program: <Context as HasContext>::Program,
-    uniform_data: UniformData,
-}
-
-#[derive(Debug)]
-struct UniformData {
-    pub color: Color,
-    pub color_location: <Context as HasContext>::UniformLocation,
-    pub transform: Transformation,
-    pub transform_location: <Context as HasContext>::UniformLocation,
-}
-
-impl UniformData {
-    fn new(gl: &Context, program: NativeProgram) -> Self {
-        Self {
-            color: Color::TRANSPARENT,
-            color_location: unsafe {
-                gl.get_uniform_location(program, "color")
-            }
-            .expect("Solid - Get color."),
-            transform: Transformation::identity(),
-            transform_location: unsafe {
-                gl.get_uniform_location(program, "u_Transform")
-            }
-            .expect("Solid - Get u_Transform."),
-        }
-    }
-}
-
-impl Program {
-    pub fn new(gl: &Context, shader_version: &Version) -> Self {
-        let program = triangle::program(
-            gl,
-            shader_version,
-            include_str!("../shader/common/triangle.frag"),
-        );
-
-        Self {
-            program,
-            uniform_data: UniformData::new(gl, program),
-        }
-    }
-
-    pub fn write_uniforms(
-        &mut self,
-        gl: &Context,
-        color: &Color,
-        transform: &Transformation,
-    ) {
-        if transform != &self.uniform_data.transform {
-            triangle::set_transform(
-                gl,
-                self.uniform_data.transform_location,
-                *transform,
-            )
-        }
-
-        if color != &self.uniform_data.color {
-            let [r, g, b, a] = color.into_linear();
-
-            unsafe {
-                gl.uniform_4_f32(
-                    Some(&self.uniform_data.color_location),
-                    r,
-                    g,
-                    b,
-                    a,
-                );
-            }
-
-            self.uniform_data.color = *color;
-        }
-    }
-
-    pub fn use_program(
-        &mut self,
-        gl: &Context,
-        color: &Color,
-        transform: &Transformation,
-    ) {
-        unsafe { gl.use_program(Some(self.program)) }
-        self.write_uniforms(gl, color, transform)
-    }
-}
diff --git a/graphics/src/layer.rs b/graphics/src/layer.rs
index e95934b0..fd670f48 100644
--- a/graphics/src/layer.rs
+++ b/graphics/src/layer.rs
@@ -166,10 +166,27 @@ impl<'a> Layer<'a> {
                     border_color: border_color.into_linear(),
                 });
             }
-            Primitive::Mesh2D {
+            Primitive::SolidMesh { buffers, size } => {
+                let layer = &mut layers[current_layer];
+
+                let bounds = Rectangle::new(
+                    Point::new(translation.x, translation.y),
+                    *size,
+                );
+
+                // Only draw visible content
+                if let Some(clip_bounds) = layer.bounds.intersection(&bounds) {
+                    layer.meshes.push(Mesh::Solid {
+                        origin: Point::new(translation.x, translation.y),
+                        buffers,
+                        clip_bounds,
+                    });
+                }
+            }
+            Primitive::GradientMesh {
                 buffers,
                 size,
-                style,
+                gradient,
             } => {
                 let layer = &mut layers[current_layer];
 
@@ -180,11 +197,11 @@ impl<'a> Layer<'a> {
 
                 // Only draw visible content
                 if let Some(clip_bounds) = layer.bounds.intersection(&bounds) {
-                    layer.meshes.push(Mesh {
+                    layer.meshes.push(Mesh::Gradient {
                         origin: Point::new(translation.x, translation.y),
                         buffers,
                         clip_bounds,
-                        style,
+                        gradient,
                     });
                 }
             }
diff --git a/graphics/src/layer/mesh.rs b/graphics/src/layer/mesh.rs
index 979081f1..7661c5c9 100644
--- a/graphics/src/layer/mesh.rs
+++ b/graphics/src/layer/mesh.rs
@@ -1,31 +1,93 @@
 //! A collection of triangle primitives.
 use crate::triangle;
-use crate::{Point, Rectangle};
+use crate::{Gradient, Point, Rectangle};
 
 /// A mesh of triangles.
 #[derive(Debug, Clone, Copy)]
-pub struct Mesh<'a> {
-    /// The origin of the vertices of the [`Mesh`].
-    pub origin: Point,
+pub enum Mesh<'a> {
+    /// A mesh of triangles with a solid color.
+    Solid {
+        /// The origin of the vertices of the [`Mesh`].
+        origin: Point,
 
-    /// The vertex and index buffers of the [`Mesh`].
-    pub buffers: &'a triangle::Mesh2D,
+        /// The vertex and index buffers of the [`Mesh`].
+        buffers: &'a triangle::Mesh2D<triangle::ColoredVertex2D>,
 
-    /// The clipping bounds of the [`Mesh`].
-    pub clip_bounds: Rectangle<f32>,
+        /// The clipping bounds of the [`Mesh`].
+        clip_bounds: Rectangle<f32>,
+    },
+    /// A mesh of triangles with a gradient color.
+    Gradient {
+        /// The origin of the vertices of the [`Mesh`].
+        origin: Point,
 
-    /// The shader of the [`Mesh`].
-    pub style: &'a triangle::Style,
+        /// The vertex and index buffers of the [`Mesh`].
+        buffers: &'a triangle::Mesh2D<triangle::Vertex2D>,
+
+        /// The clipping bounds of the [`Mesh`].
+        clip_bounds: Rectangle<f32>,
+
+        /// The gradient to apply to the [`Mesh`].
+        gradient: &'a Gradient,
+    },
+}
+
+impl Mesh<'_> {
+    /// Returns the origin of the [`Mesh`].
+    pub fn origin(&self) -> Point {
+        match self {
+            Self::Solid { origin, .. } | Self::Gradient { origin, .. } => {
+                *origin
+            }
+        }
+    }
+
+    /// Returns the indices of the [`Mesh`].
+    pub fn indices(&self) -> &[u32] {
+        match self {
+            Self::Solid { buffers, .. } => &buffers.indices,
+            Self::Gradient { buffers, .. } => &buffers.indices,
+        }
+    }
+
+    /// Returns the clip bounds of the [`Mesh`].
+    pub fn clip_bounds(&self) -> Rectangle<f32> {
+        match self {
+            Self::Solid { clip_bounds, .. }
+            | Self::Gradient { clip_bounds, .. } => *clip_bounds,
+        }
+    }
+}
+
+/// The result of counting the attributes of a set of meshes.
+#[derive(Debug, Clone, Copy, Default)]
+pub struct AttributeCount {
+    /// The total amount of solid vertices.
+    pub solid_vertices: usize,
+
+    /// The total amount of gradient vertices.
+    pub gradient_vertices: usize,
+
+    /// The total amount of indices.
+    pub indices: usize,
 }
 
 /// Returns the number of total vertices & total indices of all [`Mesh`]es.
-pub fn attribute_count_of<'a>(meshes: &'a [Mesh<'a>]) -> (usize, usize) {
+pub fn attribute_count_of<'a>(meshes: &'a [Mesh<'a>]) -> AttributeCount {
     meshes
         .iter()
-        .map(|Mesh { buffers, .. }| {
-            (buffers.vertices.len(), buffers.indices.len())
-        })
-        .fold((0, 0), |(total_v, total_i), (v, i)| {
-            (total_v + v, total_i + i)
+        .fold(AttributeCount::default(), |mut count, mesh| {
+            match mesh {
+                Mesh::Solid { buffers, .. } => {
+                    count.solid_vertices += buffers.vertices.len();
+                    count.indices += buffers.indices.len();
+                }
+                Mesh::Gradient { buffers, .. } => {
+                    count.gradient_vertices += buffers.vertices.len();
+                    count.indices += buffers.indices.len();
+                }
+            }
+
+            count
         })
 }
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
index b481ac0b..9759d97a 100644
--- a/graphics/src/primitive.rs
+++ b/graphics/src/primitive.rs
@@ -3,6 +3,7 @@ use iced_native::svg;
 use iced_native::{Background, Color, Font, Rectangle, Size, Vector};
 
 use crate::alignment;
+use crate::gradient::Gradient;
 use crate::triangle;
 
 use std::sync::Arc;
@@ -77,20 +78,32 @@ pub enum Primitive {
         /// The primitive to translate
         content: Box<Primitive>,
     },
-    /// A low-level primitive to render a mesh of triangles.
+    /// A low-level primitive to render a mesh of triangles with a solid color.
     ///
     /// It can be used to render many kinds of geometry freely.
-    Mesh2D {
-        /// The vertex and index buffers of the mesh
-        buffers: triangle::Mesh2D,
+    SolidMesh {
+        /// The vertices and indices of the mesh.
+        buffers: triangle::Mesh2D<triangle::ColoredVertex2D>,
+
+        /// The size of the drawable region of the mesh.
+        ///
+        /// Any geometry that falls out of this region will be clipped.
+        size: Size,
+    },
+    /// A low-level primitive to render a mesh of triangles with a gradient.
+    ///
+    /// It can be used to render many kinds of geometry freely.
+    GradientMesh {
+        /// The vertices and indices of the mesh.
+        buffers: triangle::Mesh2D<triangle::Vertex2D>,
 
         /// The size of the drawable region of the mesh.
         ///
         /// Any geometry that falls out of this region will be clipped.
         size: Size,
 
-        /// The shader of the mesh
-        style: triangle::Style,
+        /// The [`Gradient`] to apply to the mesh.
+        gradient: Gradient,
     },
     /// A cached primitive.
     ///
diff --git a/graphics/src/triangle.rs b/graphics/src/triangle.rs
index 8b41bfc4..f52b2339 100644
--- a/graphics/src/triangle.rs
+++ b/graphics/src/triangle.rs
@@ -1,15 +1,12 @@
 //! Draw geometry using meshes of triangles.
-use crate::Color;
-#[cfg(not(target_arch = "wasm32"))]
-use crate::Gradient;
-
 use bytemuck::{Pod, Zeroable};
 
 /// A set of [`Vertex2D`] and indices representing a list of triangles.
 #[derive(Clone, Debug)]
-pub struct Mesh2D {
+pub struct Mesh2D<T> {
     /// The vertices of the mesh
-    pub vertices: Vec<Vertex2D>,
+    pub vertices: Vec<T>,
+
     /// 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 3.
@@ -24,25 +21,13 @@ pub struct Vertex2D {
     pub position: [f32; 2],
 }
 
-#[derive(Debug, Clone, PartialEq)]
-/// Supported shaders for triangle primitives.
-pub enum Style {
-    /// Fill a primitive with a solid color.
-    Solid(Color),
-    #[cfg(not(target_arch = "wasm32"))]
-    /// Fill a primitive with an interpolated color.
-    Gradient(Gradient),
-}
-
-impl From<Color> for Style {
-    fn from(color: Color) -> Self {
-        Self::Solid(color)
-    }
-}
+/// A two-dimensional vertex with a color.
+#[derive(Copy, Clone, Debug, Zeroable, Pod)]
+#[repr(C)]
+pub struct ColoredVertex2D {
+    /// The vertex position in 2D space.
+    pub position: [f32; 2],
 
-#[cfg(not(target_arch = "wasm32"))]
-impl From<Gradient> for Style {
-    fn from(gradient: Gradient) -> Self {
-        Self::Gradient(gradient)
-    }
+    /// The color of the vertex in __linear__ RGBA.
+    pub color: [f32; 4],
 }
diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs
index a14940d9..b070d0a6 100644
--- a/graphics/src/widget/canvas.rs
+++ b/graphics/src/widget/canvas.rs
@@ -13,6 +13,7 @@ mod cursor;
 mod frame;
 mod geometry;
 mod program;
+mod style;
 mod text;
 
 pub use crate::gradient::{self, Gradient};
@@ -25,6 +26,7 @@ pub use geometry::Geometry;
 pub use path::Path;
 pub use program::Program;
 pub use stroke::{LineCap, LineDash, LineJoin, Stroke};
+pub use style::Style;
 pub use text::Text;
 
 use crate::{Backend, Primitive, Renderer};
diff --git a/graphics/src/widget/canvas/fill.rs b/graphics/src/widget/canvas/fill.rs
index e2fc1cfe..e954ebb5 100644
--- a/graphics/src/widget/canvas/fill.rs
+++ b/graphics/src/widget/canvas/fill.rs
@@ -1,7 +1,7 @@
 //! Fill [crate::widget::canvas::Geometry] with a certain style.
 use crate::{Color, Gradient};
 
-pub use crate::triangle::Style;
+pub use crate::widget::canvas::Style;
 
 /// The style used to fill geometry.
 #[derive(Debug, Clone)]
diff --git a/graphics/src/widget/canvas/frame.rs b/graphics/src/widget/canvas/frame.rs
index a7b88502..d68548ae 100644
--- a/graphics/src/widget/canvas/frame.rs
+++ b/graphics/src/widget/canvas/frame.rs
@@ -1,7 +1,6 @@
 use crate::gradient::Gradient;
 use crate::triangle;
-use crate::triangle::Vertex2D;
-use crate::widget::canvas::{path, Fill, Geometry, Path, Stroke, Text};
+use crate::widget::canvas::{path, Fill, Geometry, Path, Stroke, Style, Text};
 use crate::Primitive;
 
 use iced_native::{Point, Rectangle, Size, Vector};
@@ -23,8 +22,16 @@ pub struct Frame {
     stroke_tessellator: tessellation::StrokeTessellator,
 }
 
+enum Buffer {
+    Solid(tessellation::VertexBuffers<triangle::ColoredVertex2D, u32>),
+    Gradient(
+        tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+        Gradient,
+    ),
+}
+
 struct BufferStack {
-    stack: Vec<(tessellation::VertexBuffers<Vertex2D, u32>, triangle::Style)>,
+    stack: Vec<Buffer>,
 }
 
 impl BufferStack {
@@ -32,22 +39,64 @@ impl BufferStack {
         Self { stack: Vec::new() }
     }
 
-    fn get(
-        &mut self,
-        mesh_style: triangle::Style,
-    ) -> tessellation::BuffersBuilder<'_, Vertex2D, u32, Vertex2DBuilder> {
-        match self.stack.last_mut() {
-            Some((_, current_style)) if current_style == &mesh_style => {}
-            _ => {
-                self.stack
-                    .push((tessellation::VertexBuffers::new(), mesh_style));
+    fn get_mut(&mut self, style: &Style) -> &mut Buffer {
+        match style {
+            Style::Solid(_) => match self.stack.last() {
+                Some(Buffer::Solid(_)) => {}
+                _ => {
+                    self.stack.push(Buffer::Solid(
+                        tessellation::VertexBuffers::new(),
+                    ));
+                }
+            },
+            Style::Gradient(gradient) => match self.stack.last() {
+                Some(Buffer::Gradient(_, last)) if gradient == last => {}
+                _ => {
+                    self.stack.push(Buffer::Gradient(
+                        tessellation::VertexBuffers::new(),
+                        gradient.clone(),
+                    ));
+                }
+            },
+        }
+
+        self.stack.last_mut().unwrap()
+    }
+
+    fn get_fill<'a>(
+        &'a mut self,
+        style: &Style,
+    ) -> Box<dyn tessellation::FillGeometryBuilder + 'a> {
+        match (style, self.get_mut(style)) {
+            (Style::Solid(color), Buffer::Solid(buffer)) => {
+                Box::new(tessellation::BuffersBuilder::new(
+                    buffer,
+                    TriangleVertex2DBuilder(color.into_linear()),
+                ))
             }
-        };
+            (Style::Gradient(_), Buffer::Gradient(buffer, _)) => Box::new(
+                tessellation::BuffersBuilder::new(buffer, Vertex2DBuilder),
+            ),
+            _ => unreachable!(),
+        }
+    }
 
-        tessellation::BuffersBuilder::new(
-            &mut self.stack.last_mut().unwrap().0,
-            Vertex2DBuilder,
-        )
+    fn get_stroke<'a>(
+        &'a mut self,
+        style: &Style,
+    ) -> Box<dyn tessellation::StrokeGeometryBuilder + 'a> {
+        match (style, self.get_mut(style)) {
+            (Style::Solid(color), Buffer::Solid(buffer)) => {
+                Box::new(tessellation::BuffersBuilder::new(
+                    buffer,
+                    TriangleVertex2DBuilder(color.into_linear()),
+                ))
+            }
+            (Style::Gradient(_), Buffer::Gradient(buffer, _)) => Box::new(
+                tessellation::BuffersBuilder::new(buffer, Vertex2DBuilder),
+            ),
+            _ => unreachable!(),
+        }
     }
 }
 
@@ -73,12 +122,11 @@ impl Transform {
         point.y = transformed.y;
     }
 
-    fn transform_style(&self, style: triangle::Style) -> triangle::Style {
+    fn transform_style(&self, style: Style) -> Style {
         match style {
-            triangle::Style::Solid(color) => triangle::Style::Solid(color),
-            #[cfg(not(target_arch = "wasm32"))]
-            triangle::Style::Gradient(gradient) => {
-                triangle::Style::Gradient(self.transform_gradient(gradient))
+            Style::Solid(color) => Style::Solid(color),
+            Style::Gradient(gradient) => {
+                Style::Gradient(self.transform_gradient(gradient))
             }
         }
     }
@@ -146,7 +194,7 @@ impl Frame {
 
         let mut buffer = self
             .buffers
-            .get(self.transforms.current.transform_style(style));
+            .get_fill(&self.transforms.current.transform_style(style));
 
         let options =
             tessellation::FillOptions::default().with_fill_rule(rule.into());
@@ -155,7 +203,7 @@ impl Frame {
             self.fill_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffer,
+                buffer.as_mut(),
             )
         } else {
             let path = path.transformed(&self.transforms.current.raw);
@@ -163,7 +211,7 @@ impl Frame {
             self.fill_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffer,
+                buffer.as_mut(),
             )
         }
         .expect("Tessellate path.");
@@ -181,7 +229,7 @@ impl Frame {
 
         let mut buffer = self
             .buffers
-            .get(self.transforms.current.transform_style(style));
+            .get_fill(&self.transforms.current.transform_style(style));
 
         let top_left =
             self.transforms.current.raw.transform_point(
@@ -200,7 +248,7 @@ impl Frame {
             .tessellate_rectangle(
                 &lyon::math::Box2D::new(top_left, top_left + size),
                 &options,
-                &mut buffer,
+                buffer.as_mut(),
             )
             .expect("Fill rectangle");
     }
@@ -212,7 +260,7 @@ impl Frame {
 
         let mut buffer = self
             .buffers
-            .get(self.transforms.current.transform_style(stroke.style));
+            .get_stroke(&self.transforms.current.transform_style(stroke.style));
 
         let mut options = tessellation::StrokeOptions::default();
         options.line_width = stroke.width;
@@ -230,7 +278,7 @@ impl Frame {
             self.stroke_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffer,
+                buffer.as_mut(),
             )
         } else {
             let path = path.transformed(&self.transforms.current.raw);
@@ -238,7 +286,7 @@ impl Frame {
             self.stroke_tessellator.tessellate_path(
                 path.raw(),
                 &options,
-                &mut buffer,
+                buffer.as_mut(),
             )
         }
         .expect("Stroke path");
@@ -383,16 +431,31 @@ impl Frame {
     }
 
     fn into_primitives(mut self) -> Vec<Primitive> {
-        for (buffer, style) in self.buffers.stack {
-            if !buffer.indices.is_empty() {
-                self.primitives.push(Primitive::Mesh2D {
-                    buffers: triangle::Mesh2D {
-                        vertices: buffer.vertices,
-                        indices: buffer.indices,
-                    },
-                    size: self.size,
-                    style,
-                })
+        for buffer in self.buffers.stack {
+            match buffer {
+                Buffer::Solid(buffer) => {
+                    if !buffer.indices.is_empty() {
+                        self.primitives.push(Primitive::SolidMesh {
+                            buffers: triangle::Mesh2D {
+                                vertices: buffer.vertices,
+                                indices: buffer.indices,
+                            },
+                            size: self.size,
+                        })
+                    }
+                }
+                Buffer::Gradient(buffer, gradient) => {
+                    if !buffer.indices.is_empty() {
+                        self.primitives.push(Primitive::GradientMesh {
+                            buffers: triangle::Mesh2D {
+                                vertices: buffer.vertices,
+                                indices: buffer.indices,
+                            },
+                            size: self.size,
+                            gradient,
+                        })
+                    }
+                }
             }
         }
 
@@ -402,25 +465,66 @@ impl Frame {
 
 struct Vertex2DBuilder;
 
-impl tessellation::FillVertexConstructor<Vertex2D> for Vertex2DBuilder {
-    fn new_vertex(&mut self, vertex: tessellation::FillVertex<'_>) -> Vertex2D {
+impl tessellation::FillVertexConstructor<triangle::Vertex2D>
+    for Vertex2DBuilder
+{
+    fn new_vertex(
+        &mut self,
+        vertex: tessellation::FillVertex<'_>,
+    ) -> triangle::Vertex2D {
+        let position = vertex.position();
+
+        triangle::Vertex2D {
+            position: [position.x, position.y],
+        }
+    }
+}
+
+impl tessellation::StrokeVertexConstructor<triangle::Vertex2D>
+    for Vertex2DBuilder
+{
+    fn new_vertex(
+        &mut self,
+        vertex: tessellation::StrokeVertex<'_, '_>,
+    ) -> triangle::Vertex2D {
+        let position = vertex.position();
+
+        triangle::Vertex2D {
+            position: [position.x, position.y],
+        }
+    }
+}
+
+struct TriangleVertex2DBuilder([f32; 4]);
+
+impl tessellation::FillVertexConstructor<triangle::ColoredVertex2D>
+    for TriangleVertex2DBuilder
+{
+    fn new_vertex(
+        &mut self,
+        vertex: tessellation::FillVertex<'_>,
+    ) -> triangle::ColoredVertex2D {
         let position = vertex.position();
 
-        Vertex2D {
+        triangle::ColoredVertex2D {
             position: [position.x, position.y],
+            color: self.0,
         }
     }
 }
 
-impl tessellation::StrokeVertexConstructor<Vertex2D> for Vertex2DBuilder {
+impl tessellation::StrokeVertexConstructor<triangle::ColoredVertex2D>
+    for TriangleVertex2DBuilder
+{
     fn new_vertex(
         &mut self,
         vertex: tessellation::StrokeVertex<'_, '_>,
-    ) -> Vertex2D {
+    ) -> triangle::ColoredVertex2D {
         let position = vertex.position();
 
-        Vertex2D {
+        triangle::ColoredVertex2D {
             position: [position.x, position.y],
+            color: self.0,
         }
     }
 }
diff --git a/graphics/src/widget/canvas/stroke.rs b/graphics/src/widget/canvas/stroke.rs
index a882531a..4c19251d 100644
--- a/graphics/src/widget/canvas/stroke.rs
+++ b/graphics/src/widget/canvas/stroke.rs
@@ -1,5 +1,5 @@
 //! Create lines from a [crate::widget::canvas::Path] and assigns them various attributes/styles.
-pub use crate::triangle::Style;
+pub use crate::widget::canvas::Style;
 
 use iced_native::Color;
 
diff --git a/graphics/src/widget/canvas/style.rs b/graphics/src/widget/canvas/style.rs
new file mode 100644
index 00000000..794109bd
--- /dev/null
+++ b/graphics/src/widget/canvas/style.rs
@@ -0,0 +1,11 @@
+use crate::{Color, Gradient};
+
+/// The coloring style of some drawing.
+#[derive(Debug, Clone, PartialEq)]
+pub enum Style {
+    /// A solid [`Color`].
+    Solid(Color),
+
+    /// A [`Gradient`] color.
+    Gradient(Gradient),
+}
diff --git a/wgpu/src/buffer/dynamic.rs b/wgpu/src/buffer/dynamic.rs
index 2a675d81..18be03dd 100644
--- a/wgpu/src/buffer/dynamic.rs
+++ b/wgpu/src/buffer/dynamic.rs
@@ -1,10 +1,13 @@
 //! Utilities for uniform buffer operations.
 use encase::private::WriteInto;
 use encase::ShaderType;
+
+use std::fmt;
 use std::marker::PhantomData;
 
 /// A dynamic buffer is any type of buffer which does not have a static offset.
-pub(crate) struct Buffer<T: ShaderType> {
+#[derive(Debug)]
+pub struct Buffer<T: ShaderType> {
     offsets: Vec<wgpu::DynamicOffset>,
     cpu: Internal,
     gpu: wgpu::Buffer,
@@ -204,3 +207,13 @@ impl Internal {
         }
     }
 }
+
+impl fmt::Debug for Internal {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Self::Uniform(_) => write!(f, "Internal::Uniform(_)"),
+            #[cfg(not(target_arch = "wasm32"))]
+            Self::Storage(_) => write!(f, "Internal::Storage(_)"),
+        }
+    }
+}
diff --git a/wgpu/src/buffer/static.rs b/wgpu/src/buffer/static.rs
index cf06790c..ef87422f 100644
--- a/wgpu/src/buffer/static.rs
+++ b/wgpu/src/buffer/static.rs
@@ -8,7 +8,7 @@ const DEFAULT_STATIC_BUFFER_COUNT: wgpu::BufferAddress = 128;
 /// A generic buffer struct useful for items which have no alignment requirements
 /// (e.g. Vertex, Index buffers) & no dynamic offsets.
 #[derive(Debug)]
-pub(crate) struct Buffer<T> {
+pub struct Buffer<T> {
     //stored sequentially per mesh iteration; refers to the offset index in the GPU buffer
     offsets: Vec<wgpu::BufferAddress>,
     label: &'static str,
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index f4436e9d..74152945 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -39,13 +39,13 @@
 #![cfg_attr(docsrs, feature(doc_cfg))]
 
 pub mod settings;
-pub mod triangle;
 pub mod window;
 
 mod backend;
 mod buffer;
 mod quad;
 mod text;
+mod triangle;
 
 pub use iced_graphics::{Antialiasing, Color, Error, Primitive, Viewport};
 pub use iced_native::Theme;
diff --git a/wgpu/src/shader/solid.wgsl b/wgpu/src/shader/solid.wgsl
index 68a8fea3..b24402f8 100644
--- a/wgpu/src/shader/solid.wgsl
+++ b/wgpu/src/shader/solid.wgsl
@@ -1,17 +1,30 @@
-struct Uniforms {
+struct Globals {
     transform: mat4x4<f32>,
-    color: vec4<f32>
 }
 
-@group(0) @binding(0)
-var<uniform> uniforms: Uniforms;
+@group(0) @binding(0) var<uniform> globals: Globals;
+
+struct VertexInput {
+    @location(0) position: vec2<f32>,
+    @location(1) color: vec4<f32>,
+}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+}
 
 @vertex
-fn vs_main(@location(0) input: vec2<f32>) -> @builtin(position) vec4<f32> {
-    return uniforms.transform * vec4<f32>(input.xy, 0.0, 1.0);
+fn vs_main(input: VertexInput) -> VertexOutput {
+    var out: VertexOutput;
+
+    out.color = input.color;
+    out.position = globals.transform * vec4<f32>(input.position, 0.0, 1.0);
+
+    return out;
 }
 
 @fragment
-fn fs_main() -> @location(0) vec4<f32> {
-    return uniforms.color;
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+    return input.color;
 }
diff --git a/wgpu/src/shader/triangle.wgsl b/wgpu/src/shader/triangle.wgsl
deleted file mode 100644
index b24402f8..00000000
--- a/wgpu/src/shader/triangle.wgsl
+++ /dev/null
@@ -1,30 +0,0 @@
-struct Globals {
-    transform: mat4x4<f32>,
-}
-
-@group(0) @binding(0) var<uniform> globals: Globals;
-
-struct VertexInput {
-    @location(0) position: vec2<f32>,
-    @location(1) color: vec4<f32>,
-}
-
-struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) color: vec4<f32>,
-}
-
-@vertex
-fn vs_main(input: VertexInput) -> VertexOutput {
-    var out: VertexOutput;
-
-    out.color = input.color;
-    out.position = globals.transform * vec4<f32>(input.position, 0.0, 1.0);
-
-    return out;
-}
-
-@fragment
-fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
-    return input.color;
-}
diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs
index c51b5339..b33b488a 100644
--- a/wgpu/src/triangle.rs
+++ b/wgpu/src/triangle.rs
@@ -1,71 +1,27 @@
 //! Draw meshes of triangles.
-#[cfg(not(target_arch = "wasm32"))]
-mod gradient;
 mod msaa;
-mod solid;
 
 use crate::buffer::r#static::Buffer;
 use crate::settings;
 use crate::Transformation;
 
 use iced_graphics::layer::mesh::{self, Mesh};
-use iced_graphics::triangle::{self, Vertex2D};
+use iced_graphics::triangle::ColoredVertex2D;
 use iced_graphics::Size;
 
-use core::fmt;
-use std::fmt::Formatter;
-
-/// Triangle pipeline for all mesh layers in a [`iced_graphics::Canvas`] widget.
 #[derive(Debug)]
-pub(crate) struct Pipeline {
+pub struct Pipeline {
     blit: Option<msaa::Blit>,
-    vertex_buffer: Buffer<Vertex2D>,
     index_buffer: Buffer<u32>,
     index_strides: Vec<u32>,
-    pipelines: PipelineList,
-}
-
-/// Supported triangle pipelines for different fills.
-pub(crate) struct PipelineList {
     solid: solid::Pipeline,
+
     /// Gradients are currently not supported on WASM targets due to their need of storage buffers.
     #[cfg(not(target_arch = "wasm32"))]
     gradient: gradient::Pipeline,
 }
 
-impl fmt::Debug for PipelineList {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        f.debug_struct("TrianglePipelines").finish()
-    }
-}
-
-impl PipelineList {
-    /// Resets each pipeline's buffers.
-    fn clear(&mut self) {
-        self.solid.buffer.clear();
-        #[cfg(not(target_arch = "wasm32"))]
-        {
-            self.gradient.uniform_buffer.clear();
-            self.gradient.storage_buffer.clear();
-        }
-    }
-
-    /// Writes the contents of each pipeline's CPU buffer to the GPU, resizing the GPU buffer
-    /// beforehand if necessary.
-    fn write(
-        &mut self,
-        device: &wgpu::Device,
-        staging_belt: &mut wgpu::util::StagingBelt,
-        encoder: &mut wgpu::CommandEncoder,
-    ) {
-        self.solid.write(device, staging_belt, encoder);
-        #[cfg(not(target_arch = "wasm32"))]
-        self.gradient.write(device, staging_belt, encoder);
-    }
-}
-
 impl Pipeline {
-    /// Creates supported pipelines, listed in [TrianglePipelines].
     pub fn new(
         device: &wgpu::Device,
         format: wgpu::TextureFormat,
@@ -73,26 +29,19 @@ impl Pipeline {
     ) -> Pipeline {
         Pipeline {
             blit: antialiasing.map(|a| msaa::Blit::new(device, format, a)),
-            vertex_buffer: Buffer::new(
-                device,
-                "iced_wgpu::triangle vertex buffer",
-                wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
-            ),
             index_buffer: Buffer::new(
                 device,
                 "iced_wgpu::triangle vertex buffer",
                 wgpu::BufferUsages::INDEX | wgpu::BufferUsages::COPY_DST,
             ),
             index_strides: Vec::new(),
-            pipelines: PipelineList {
-                solid: solid::Pipeline::new(device, format, antialiasing),
-                #[cfg(not(target_arch = "wasm32"))]
-                gradient: gradient::Pipeline::new(device, format, antialiasing),
-            },
+            solid: solid::Pipeline::new(device, format, antialiasing),
+
+            #[cfg(not(target_arch = "wasm32"))]
+            gradient: gradient::Pipeline::new(device, format, antialiasing),
         }
     }
 
-    /// Draws the contents of the current layer's meshes to the [target].
     pub fn draw(
         &mut self,
         device: &wgpu::Device,
@@ -104,68 +53,185 @@ impl Pipeline {
         scale_factor: f32,
         meshes: &[Mesh<'_>],
     ) {
-        //count the total amount of vertices & indices we need to handle
-        let (total_vertices, total_indices) = mesh::attribute_count_of(meshes);
+        // Count the total amount of vertices & indices we need to handle
+        let count = mesh::attribute_count_of(meshes);
 
         // Then we ensure the current attribute buffers are big enough, resizing if necessary.
+        // We are not currently using the return value of these functions as we have no system in
+        // place to calculate mesh diff, or to know whether or not that would be more performant for
+        // the majority of use cases. Therefore we will write GPU data every frame (for now).
+        let _ = self.index_buffer.resize(device, count.indices);
+        let _ = self.solid.vertices.resize(device, count.solid_vertices);
 
-        //We are not currently using the return value of these functions as we have no system in
-        //place to calculate mesh diff, or to know whether or not that would be more performant for
-        //the majority of use cases. Therefore we will write GPU data every frame (for now).
-        let _ = self.vertex_buffer.resize(device, total_vertices);
-        let _ = self.index_buffer.resize(device, total_indices);
+        #[cfg(not(target_arch = "wasm32"))]
+        let _ = self
+            .gradient
+            .vertices
+            .resize(device, count.gradient_vertices);
 
-        //prepare dynamic buffers & data store for writing
+        // Prepare dynamic buffers & data store for writing
         self.index_strides.clear();
-        self.pipelines.clear();
+        self.solid.vertices.clear();
+        self.solid.uniforms.clear();
+
+        #[cfg(not(target_arch = "wasm32"))]
+        {
+            self.gradient.uniforms.clear();
+            self.gradient.vertices.clear();
+            self.gradient.storage.clear();
+        }
 
-        let mut vertex_offset = 0;
+        let mut solid_vertex_offset = 0;
         let mut index_offset = 0;
 
+        #[cfg(not(target_arch = "wasm32"))]
+        let mut gradient_vertex_offset = 0;
+
         for mesh in meshes {
-            let transform = transformation
-                * Transformation::translate(mesh.origin.x, mesh.origin.y);
+            let origin = mesh.origin();
+            let indices = mesh.indices();
 
-            //write to both buffers
-            let new_vertex_offset = self.vertex_buffer.write(
-                device,
-                staging_belt,
-                encoder,
-                vertex_offset,
-                &mesh.buffers.vertices,
-            );
+            let transform =
+                transformation * Transformation::translate(origin.x, origin.y);
 
             let new_index_offset = self.index_buffer.write(
                 device,
                 staging_belt,
                 encoder,
                 index_offset,
-                &mesh.buffers.indices,
+                indices,
             );
 
-            vertex_offset += new_vertex_offset;
             index_offset += new_index_offset;
-
-            self.index_strides.push(mesh.buffers.indices.len() as u32);
+            self.index_strides.push(indices.len() as u32);
 
             //push uniform data to CPU buffers
-            match mesh.style {
-                triangle::Style::Solid(color) => {
-                    self.pipelines.solid.push(transform, color);
+            match mesh {
+                Mesh::Solid { buffers, .. } => {
+                    self.solid.uniforms.push(&solid::Uniforms::new(transform));
+
+                    let written_bytes = self.solid.vertices.write(
+                        device,
+                        staging_belt,
+                        encoder,
+                        solid_vertex_offset,
+                        &buffers.vertices,
+                    );
+
+                    solid_vertex_offset += written_bytes;
                 }
                 #[cfg(not(target_arch = "wasm32"))]
-                triangle::Style::Gradient(gradient) => {
-                    self.pipelines.gradient.push(transform, gradient);
+                Mesh::Gradient {
+                    buffers, gradient, ..
+                } => {
+                    let written_bytes = self.gradient.vertices.write(
+                        device,
+                        staging_belt,
+                        encoder,
+                        gradient_vertex_offset,
+                        &buffers.vertices,
+                    );
+
+                    gradient_vertex_offset += written_bytes;
+
+                    match gradient {
+                        iced_graphics::Gradient::Linear(linear) => {
+                            use glam::{IVec4, Vec4};
+
+                            let start_offset = self.gradient.color_stop_offset;
+                            let end_offset = (linear.color_stops.len() as i32)
+                                + start_offset
+                                - 1;
+
+                            self.gradient.uniforms.push(&gradient::Uniforms {
+                                transform: transform.into(),
+                                direction: Vec4::new(
+                                    linear.start.x,
+                                    linear.start.y,
+                                    linear.end.x,
+                                    linear.end.y,
+                                ),
+                                stop_range: IVec4::new(
+                                    start_offset,
+                                    end_offset,
+                                    0,
+                                    0,
+                                ),
+                            });
+
+                            self.gradient.color_stop_offset = end_offset + 1;
+
+                            let stops: Vec<gradient::ColorStop> = linear
+                                .color_stops
+                                .iter()
+                                .map(|stop| {
+                                    let [r, g, b, a] = stop.color.into_linear();
+
+                                    gradient::ColorStop {
+                                        offset: stop.offset,
+                                        color: Vec4::new(r, g, b, a),
+                                    }
+                                })
+                                .collect();
+
+                            self.gradient
+                                .color_stops_pending_write
+                                .color_stops
+                                .extend(stops);
+                        }
+                    }
                 }
+                #[cfg(target_arch = "wasm32")]
+                Mesh::Gradient { .. } => {}
+            }
+        }
+
+        // Write uniform data to GPU
+        if count.solid_vertices > 0 {
+            let uniforms_resized = self.solid.uniforms.resize(device);
+
+            if uniforms_resized {
+                self.solid.bind_group = solid::Pipeline::bind_group(
+                    device,
+                    self.solid.uniforms.raw(),
+                    &self.solid.bind_group_layout,
+                )
             }
+
+            self.solid.uniforms.write(device, staging_belt, encoder);
         }
 
-        //write uniform data to GPU
-        self.pipelines.write(device, staging_belt, encoder);
+        #[cfg(not(target_arch = "wasm32"))]
+        if count.gradient_vertices > 0 {
+            // First write the pending color stops to the CPU buffer
+            self.gradient
+                .storage
+                .push(&self.gradient.color_stops_pending_write);
+
+            // Resize buffers if needed
+            let uniforms_resized = self.gradient.uniforms.resize(device);
+            let storage_resized = self.gradient.storage.resize(device);
+
+            if uniforms_resized || storage_resized {
+                self.gradient.bind_group = gradient::Pipeline::bind_group(
+                    device,
+                    self.gradient.uniforms.raw(),
+                    self.gradient.storage.raw(),
+                    &self.gradient.bind_group_layout,
+                );
+            }
+
+            // Write to GPU
+            self.gradient.uniforms.write(device, staging_belt, encoder);
+            self.gradient.storage.write(device, staging_belt, encoder);
 
-        //configure the render pass now that the data is uploaded to the GPU
+            // Cleanup
+            self.gradient.color_stop_offset = 0;
+            self.gradient.color_stops_pending_write.color_stops.clear();
+        }
+
+        // Configure render pass
         {
-            //configure antialiasing pass
             let (attachment, resolve_target, load) = if let Some(blit) =
                 &mut self.blit
             {
@@ -200,7 +266,7 @@ impl Pipeline {
             let mut last_is_solid = None;
 
             for (index, mesh) in meshes.iter().enumerate() {
-                let clip_bounds = (mesh.clip_bounds * scale_factor).snap();
+                let clip_bounds = (mesh.clip_bounds() * scale_factor).snap();
 
                 render_pass.set_scissor_rect(
                     clip_bounds.x,
@@ -209,47 +275,57 @@ impl Pipeline {
                     clip_bounds.height,
                 );
 
-                match mesh.style {
-                    triangle::Style::Solid(_) => {
+                match mesh {
+                    Mesh::Solid { .. } => {
                         if !last_is_solid.unwrap_or(false) {
-                            self.pipelines
-                                .solid
-                                .set_render_pass_pipeline(&mut render_pass);
+                            render_pass.set_pipeline(&self.solid.pipeline);
 
                             last_is_solid = Some(true);
                         }
 
-                        self.pipelines.solid.configure_render_pass(
-                            &mut render_pass,
-                            num_solids,
+                        render_pass.set_bind_group(
+                            0,
+                            &self.solid.bind_group,
+                            &[self.solid.uniforms.offset_at_index(num_solids)],
+                        );
+
+                        render_pass.set_vertex_buffer(
+                            0,
+                            self.solid.vertices.slice_from_index(num_solids),
                         );
 
                         num_solids += 1;
                     }
                     #[cfg(not(target_arch = "wasm32"))]
-                    triangle::Style::Gradient(_) => {
+                    Mesh::Gradient { .. } => {
                         if last_is_solid.unwrap_or(true) {
-                            self.pipelines
-                                .gradient
-                                .set_render_pass_pipeline(&mut render_pass);
+                            render_pass.set_pipeline(&self.gradient.pipeline);
 
                             last_is_solid = Some(false);
                         }
 
-                        self.pipelines.gradient.configure_render_pass(
-                            &mut render_pass,
-                            num_gradients,
+                        render_pass.set_bind_group(
+                            0,
+                            &self.gradient.bind_group,
+                            &[self
+                                .gradient
+                                .uniforms
+                                .offset_at_index(num_gradients)],
+                        );
+
+                        render_pass.set_vertex_buffer(
+                            0,
+                            self.gradient
+                                .vertices
+                                .slice_from_index(num_gradients),
                         );
 
                         num_gradients += 1;
                     }
+                    #[cfg(target_arch = "wasm32")]
+                    Mesh::Gradient { .. } => {}
                 };
 
-                render_pass.set_vertex_buffer(
-                    0,
-                    self.vertex_buffer.slice_from_index(index),
-                );
-
                 render_pass.set_index_buffer(
                     self.index_buffer.slice_from_index(index),
                     wgpu::IndexFormat::Uint32,
@@ -263,7 +339,6 @@ impl Pipeline {
             }
         }
 
-        self.vertex_buffer.clear();
         self.index_buffer.clear();
 
         if let Some(blit) = &mut self.blit {
@@ -272,19 +347,6 @@ impl Pipeline {
     }
 }
 
-//utility functions for individual pipelines with shared functionality
-fn vertex_buffer_layout<'a>() -> wgpu::VertexBufferLayout<'a> {
-    wgpu::VertexBufferLayout {
-        array_stride: std::mem::size_of::<Vertex2D>() as u64,
-        step_mode: wgpu::VertexStepMode::Vertex,
-        attributes: &[wgpu::VertexAttribute {
-            format: wgpu::VertexFormat::Float32x2,
-            offset: 0,
-            shader_location: 0,
-        }],
-    }
-}
-
 fn fragment_target(
     texture_format: wgpu::TextureFormat,
 ) -> Option<wgpu::ColorTargetState> {
@@ -312,3 +374,360 @@ fn multisample_state(
         alpha_to_coverage_enabled: false,
     }
 }
+
+mod solid {
+    use crate::buffer::dynamic;
+    use crate::buffer::r#static::Buffer;
+    use crate::settings;
+    use crate::triangle;
+    use encase::ShaderType;
+    use iced_graphics::Transformation;
+
+    #[derive(Debug)]
+    pub struct Pipeline {
+        pub pipeline: wgpu::RenderPipeline,
+        pub vertices: Buffer<triangle::ColoredVertex2D>,
+        pub uniforms: dynamic::Buffer<Uniforms>,
+        pub bind_group_layout: wgpu::BindGroupLayout,
+        pub bind_group: wgpu::BindGroup,
+    }
+
+    #[derive(Debug, Clone, Copy, ShaderType)]
+    pub struct Uniforms {
+        transform: glam::Mat4,
+    }
+
+    impl Uniforms {
+        pub fn new(transform: Transformation) -> Self {
+            Self {
+                transform: transform.into(),
+            }
+        }
+    }
+
+    impl Pipeline {
+        /// Creates a new [SolidPipeline] using `solid.wgsl` shader.
+        pub fn new(
+            device: &wgpu::Device,
+            format: wgpu::TextureFormat,
+            antialiasing: Option<settings::Antialiasing>,
+        ) -> Self {
+            let vertices = Buffer::new(
+                device,
+                "iced_wgpu::triangle::solid vertex buffer",
+                wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
+            );
+
+            let uniforms = dynamic::Buffer::uniform(
+                device,
+                "iced_wgpu::triangle::solid uniforms",
+            );
+
+            let bind_group_layout = device.create_bind_group_layout(
+                &wgpu::BindGroupLayoutDescriptor {
+                    label: Some("iced_wgpu::triangle::solid bind group layout"),
+                    entries: &[wgpu::BindGroupLayoutEntry {
+                        binding: 0,
+                        visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                        ty: wgpu::BindingType::Buffer {
+                            ty: wgpu::BufferBindingType::Uniform,
+                            has_dynamic_offset: true,
+                            min_binding_size: Some(Uniforms::min_size()),
+                        },
+                        count: None,
+                    }],
+                },
+            );
+
+            let bind_group =
+                Self::bind_group(device, uniforms.raw(), &bind_group_layout);
+
+            let layout = device.create_pipeline_layout(
+                &wgpu::PipelineLayoutDescriptor {
+                    label: Some("iced_wgpu::triangle::solid pipeline layout"),
+                    bind_group_layouts: &[&bind_group_layout],
+                    push_constant_ranges: &[],
+                },
+            );
+
+            let shader =
+                device.create_shader_module(wgpu::ShaderModuleDescriptor {
+                    label: Some(
+                        "iced_wgpu::triangle::solid create shader module",
+                    ),
+                    source: wgpu::ShaderSource::Wgsl(
+                        std::borrow::Cow::Borrowed(include_str!(
+                            "shader/solid.wgsl"
+                        )),
+                    ),
+                });
+
+            let pipeline = device.create_render_pipeline(
+                &wgpu::RenderPipelineDescriptor {
+                    label: Some("iced_wgpu::triangle::solid pipeline"),
+                    layout: Some(&layout),
+                    vertex: wgpu::VertexState {
+                        module: &shader,
+                        entry_point: "vs_main",
+                        buffers: &[wgpu::VertexBufferLayout {
+                            array_stride: std::mem::size_of::<
+                                triangle::ColoredVertex2D,
+                            >()
+                                as u64,
+                            step_mode: wgpu::VertexStepMode::Vertex,
+                            attributes: &wgpu::vertex_attr_array!(
+                                // Position
+                                0 => Float32x2,
+                                // Color
+                                1 => Float32x4,
+                            ),
+                        }],
+                    },
+                    fragment: Some(wgpu::FragmentState {
+                        module: &shader,
+                        entry_point: "fs_main",
+                        targets: &[triangle::fragment_target(format)],
+                    }),
+                    primitive: triangle::primitive_state(),
+                    depth_stencil: None,
+                    multisample: triangle::multisample_state(antialiasing),
+                    multiview: None,
+                },
+            );
+
+            Self {
+                pipeline,
+                vertices,
+                uniforms,
+                bind_group_layout,
+                bind_group,
+            }
+        }
+
+        pub fn bind_group(
+            device: &wgpu::Device,
+            buffer: &wgpu::Buffer,
+            layout: &wgpu::BindGroupLayout,
+        ) -> wgpu::BindGroup {
+            device.create_bind_group(&wgpu::BindGroupDescriptor {
+                label: Some("iced_wgpu::triangle::solid bind group"),
+                layout,
+                entries: &[wgpu::BindGroupEntry {
+                    binding: 0,
+                    resource: wgpu::BindingResource::Buffer(
+                        wgpu::BufferBinding {
+                            buffer,
+                            offset: 0,
+                            size: Some(Uniforms::min_size()),
+                        },
+                    ),
+                }],
+            })
+        }
+    }
+}
+
+#[cfg(not(target_arch = "wasm32"))]
+mod gradient {
+    use crate::buffer::dynamic;
+    use crate::buffer::r#static::Buffer;
+    use crate::settings;
+    use crate::triangle;
+
+    use encase::ShaderType;
+    use glam::{IVec4, Vec4};
+    use iced_graphics::triangle::Vertex2D;
+
+    #[derive(Debug)]
+    pub struct Pipeline {
+        pub pipeline: wgpu::RenderPipeline,
+        pub vertices: Buffer<Vertex2D>,
+        pub uniforms: dynamic::Buffer<Uniforms>,
+        pub storage: dynamic::Buffer<Storage>,
+        pub color_stop_offset: i32,
+        //Need to store these and then write them all at once
+        //or else they will be padded to 256 and cause gaps in the storage buffer
+        pub color_stops_pending_write: Storage,
+        pub bind_group_layout: wgpu::BindGroupLayout,
+        pub bind_group: wgpu::BindGroup,
+    }
+
+    #[derive(Debug, ShaderType)]
+    pub struct Uniforms {
+        pub transform: glam::Mat4,
+        //xy = start, zw = end
+        pub direction: Vec4,
+        //x = start stop, y = end stop, zw = padding
+        pub stop_range: IVec4,
+    }
+
+    #[derive(Debug, ShaderType)]
+    pub struct ColorStop {
+        pub color: Vec4,
+        pub offset: f32,
+    }
+
+    #[derive(Debug, ShaderType)]
+    pub struct Storage {
+        #[size(runtime)]
+        pub color_stops: Vec<ColorStop>,
+    }
+
+    impl Pipeline {
+        /// Creates a new [GradientPipeline] using `gradient.wgsl` shader.
+        pub(super) fn new(
+            device: &wgpu::Device,
+            format: wgpu::TextureFormat,
+            antialiasing: Option<settings::Antialiasing>,
+        ) -> Self {
+            let vertices = Buffer::new(
+                device,
+                "iced_wgpu::triangle::gradient vertex buffer",
+                wgpu::BufferUsages::VERTEX | wgpu::BufferUsages::COPY_DST,
+            );
+
+            let uniforms = dynamic::Buffer::uniform(
+                device,
+                "iced_wgpu::triangle::gradient uniforms",
+            );
+
+            //Note: with a WASM target storage buffers are not supported. Will need to use UBOs & static
+            // sized array (eg like the 32-sized array on OpenGL side right now) to make gradients work
+            let storage = dynamic::Buffer::storage(
+                device,
+                "iced_wgpu::triangle::gradient storage",
+            );
+
+            let bind_group_layout = device.create_bind_group_layout(
+                &wgpu::BindGroupLayoutDescriptor {
+                    label: Some(
+                        "iced_wgpu::triangle::gradient bind group layout",
+                    ),
+                    entries: &[
+                        wgpu::BindGroupLayoutEntry {
+                            binding: 0,
+                            visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
+                            ty: wgpu::BindingType::Buffer {
+                                ty: wgpu::BufferBindingType::Uniform,
+                                has_dynamic_offset: true,
+                                min_binding_size: Some(Uniforms::min_size()),
+                            },
+                            count: None,
+                        },
+                        wgpu::BindGroupLayoutEntry {
+                            binding: 1,
+                            visibility: wgpu::ShaderStages::FRAGMENT,
+                            ty: wgpu::BindingType::Buffer {
+                                ty: wgpu::BufferBindingType::Storage {
+                                    read_only: true,
+                                },
+                                has_dynamic_offset: false,
+                                min_binding_size: Some(Storage::min_size()),
+                            },
+                            count: None,
+                        },
+                    ],
+                },
+            );
+
+            let bind_group = Pipeline::bind_group(
+                device,
+                uniforms.raw(),
+                storage.raw(),
+                &bind_group_layout,
+            );
+
+            let layout = device.create_pipeline_layout(
+                &wgpu::PipelineLayoutDescriptor {
+                    label: Some(
+                        "iced_wgpu::triangle::gradient pipeline layout",
+                    ),
+                    bind_group_layouts: &[&bind_group_layout],
+                    push_constant_ranges: &[],
+                },
+            );
+
+            let shader =
+                device.create_shader_module(wgpu::ShaderModuleDescriptor {
+                    label: Some(
+                        "iced_wgpu::triangle::gradient create shader module",
+                    ),
+                    source: wgpu::ShaderSource::Wgsl(
+                        std::borrow::Cow::Borrowed(include_str!(
+                            "shader/gradient.wgsl"
+                        )),
+                    ),
+                });
+
+            let pipeline = device.create_render_pipeline(
+                &wgpu::RenderPipelineDescriptor {
+                    label: Some("iced_wgpu::triangle::gradient pipeline"),
+                    layout: Some(&layout),
+                    vertex: wgpu::VertexState {
+                        module: &shader,
+                        entry_point: "vs_main",
+                        buffers: &[wgpu::VertexBufferLayout {
+                            array_stride: std::mem::size_of::<Vertex2D>()
+                                as u64,
+                            step_mode: wgpu::VertexStepMode::Vertex,
+                            attributes: &wgpu::vertex_attr_array!(
+                                // Position
+                                0 => Float32x2,
+                            ),
+                        }],
+                    },
+                    fragment: Some(wgpu::FragmentState {
+                        module: &shader,
+                        entry_point: "fs_main",
+                        targets: &[triangle::fragment_target(format)],
+                    }),
+                    primitive: triangle::primitive_state(),
+                    depth_stencil: None,
+                    multisample: triangle::multisample_state(antialiasing),
+                    multiview: None,
+                },
+            );
+
+            Self {
+                pipeline,
+                vertices,
+                uniforms,
+                storage,
+                color_stop_offset: 0,
+                color_stops_pending_write: Storage {
+                    color_stops: vec![],
+                },
+                bind_group_layout,
+                bind_group,
+            }
+        }
+
+        pub fn bind_group(
+            device: &wgpu::Device,
+            uniform_buffer: &wgpu::Buffer,
+            storage_buffer: &wgpu::Buffer,
+            layout: &wgpu::BindGroupLayout,
+        ) -> wgpu::BindGroup {
+            device.create_bind_group(&wgpu::BindGroupDescriptor {
+                label: Some("iced_wgpu::triangle::gradient bind group"),
+                layout,
+                entries: &[
+                    wgpu::BindGroupEntry {
+                        binding: 0,
+                        resource: wgpu::BindingResource::Buffer(
+                            wgpu::BufferBinding {
+                                buffer: uniform_buffer,
+                                offset: 0,
+                                size: Some(Uniforms::min_size()),
+                            },
+                        ),
+                    },
+                    wgpu::BindGroupEntry {
+                        binding: 1,
+                        resource: storage_buffer.as_entire_binding(),
+                    },
+                ],
+            })
+        }
+    }
+}
diff --git a/wgpu/src/triangle/gradient.rs b/wgpu/src/triangle/gradient.rs
deleted file mode 100644
index b06cbac6..00000000
--- a/wgpu/src/triangle/gradient.rs
+++ /dev/null
@@ -1,268 +0,0 @@
-use crate::buffer::dynamic;
-use crate::settings;
-use crate::triangle;
-use encase::ShaderType;
-use glam::{IVec4, Vec4};
-use iced_graphics::gradient::Gradient;
-use iced_graphics::Transformation;
-
-pub struct Pipeline {
-    pipeline: wgpu::RenderPipeline,
-    pub(super) uniform_buffer: dynamic::Buffer<Uniforms>,
-    pub(super) storage_buffer: dynamic::Buffer<Storage>,
-    color_stop_offset: i32,
-    //Need to store these and then write them all at once
-    //or else they will be padded to 256 and cause gaps in the storage buffer
-    color_stops_pending_write: Storage,
-    bind_group_layout: wgpu::BindGroupLayout,
-    bind_group: wgpu::BindGroup,
-}
-
-#[derive(Debug, ShaderType)]
-pub(super) struct Uniforms {
-    transform: glam::Mat4,
-    //xy = start, zw = end
-    direction: Vec4,
-    //x = start stop, y = end stop, zw = padding
-    stop_range: IVec4,
-}
-
-#[derive(Debug, ShaderType)]
-pub(super) struct ColorStop {
-    color: Vec4,
-    offset: f32,
-}
-
-#[derive(ShaderType)]
-pub(super) struct Storage {
-    #[size(runtime)]
-    pub color_stops: Vec<ColorStop>,
-}
-
-impl Pipeline {
-    /// Creates a new [GradientPipeline] using `gradient.wgsl` shader.
-    pub(super) fn new(
-        device: &wgpu::Device,
-        format: wgpu::TextureFormat,
-        antialiasing: Option<settings::Antialiasing>,
-    ) -> Self {
-        let uniform_buffer = dynamic::Buffer::uniform(
-            device,
-            "iced_wgpu::triangle::gradient uniforms",
-        );
-
-        //Note: with a WASM target storage buffers are not supported. Will need to use UBOs & static
-        // sized array (eg like the 32-sized array on OpenGL side right now) to make gradients work
-        let storage_buffer = dynamic::Buffer::storage(
-            device,
-            "iced_wgpu::triangle::gradient storage",
-        );
-
-        let bind_group_layout =
-            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
-                label: Some("iced_wgpu::triangle::gradient bind group layout"),
-                entries: &[
-                    wgpu::BindGroupLayoutEntry {
-                        binding: 0,
-                        visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
-                        ty: wgpu::BindingType::Buffer {
-                            ty: wgpu::BufferBindingType::Uniform,
-                            has_dynamic_offset: true,
-                            min_binding_size: Some(Uniforms::min_size()),
-                        },
-                        count: None,
-                    },
-                    wgpu::BindGroupLayoutEntry {
-                        binding: 1,
-                        visibility: wgpu::ShaderStages::FRAGMENT,
-                        ty: wgpu::BindingType::Buffer {
-                            ty: wgpu::BufferBindingType::Storage {
-                                read_only: true,
-                            },
-                            has_dynamic_offset: false,
-                            min_binding_size: Some(Storage::min_size()),
-                        },
-                        count: None,
-                    },
-                ],
-            });
-
-        let bind_group = Pipeline::bind_group(
-            device,
-            uniform_buffer.raw(),
-            storage_buffer.raw(),
-            &bind_group_layout,
-        );
-
-        let layout =
-            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
-                label: Some("iced_wgpu::triangle::gradient pipeline layout"),
-                bind_group_layouts: &[&bind_group_layout],
-                push_constant_ranges: &[],
-            });
-
-        let shader =
-            device.create_shader_module(wgpu::ShaderModuleDescriptor {
-                label: Some(
-                    "iced_wgpu::triangle::gradient create shader module",
-                ),
-                source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
-                    include_str!("../shader/gradient.wgsl"),
-                )),
-            });
-
-        let pipeline =
-            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
-                label: Some("iced_wgpu::triangle::gradient pipeline"),
-                layout: Some(&layout),
-                vertex: wgpu::VertexState {
-                    module: &shader,
-                    entry_point: "vs_main",
-                    buffers: &[triangle::vertex_buffer_layout()],
-                },
-                fragment: Some(wgpu::FragmentState {
-                    module: &shader,
-                    entry_point: "fs_main",
-                    targets: &[triangle::fragment_target(format)],
-                }),
-                primitive: triangle::primitive_state(),
-                depth_stencil: None,
-                multisample: triangle::multisample_state(antialiasing),
-                multiview: None,
-            });
-
-        Self {
-            pipeline,
-            uniform_buffer,
-            storage_buffer,
-            color_stop_offset: 0,
-            color_stops_pending_write: Storage {
-                color_stops: vec![],
-            },
-            bind_group_layout,
-            bind_group,
-        }
-    }
-
-    /// Pushes a new gradient uniform to the CPU buffer.
-    pub fn push(&mut self, transform: Transformation, gradient: &Gradient) {
-        match gradient {
-            Gradient::Linear(linear) => {
-                let start_offset = self.color_stop_offset;
-                let end_offset =
-                    (linear.color_stops.len() as i32) + start_offset - 1;
-
-                self.uniform_buffer.push(&Uniforms {
-                    transform: transform.into(),
-                    direction: Vec4::new(
-                        linear.start.x,
-                        linear.start.y,
-                        linear.end.x,
-                        linear.end.y,
-                    ),
-                    stop_range: IVec4::new(start_offset, end_offset, 0, 0),
-                });
-
-                self.color_stop_offset = end_offset + 1;
-
-                let stops: Vec<ColorStop> = linear
-                    .color_stops
-                    .iter()
-                    .map(|stop| {
-                        let [r, g, b, a] = stop.color.into_linear();
-
-                        ColorStop {
-                            offset: stop.offset,
-                            color: Vec4::new(r, g, b, a),
-                        }
-                    })
-                    .collect();
-
-                self.color_stops_pending_write.color_stops.extend(stops);
-            }
-        }
-    }
-
-    fn bind_group(
-        device: &wgpu::Device,
-        uniform_buffer: &wgpu::Buffer,
-        storage_buffer: &wgpu::Buffer,
-        layout: &wgpu::BindGroupLayout,
-    ) -> wgpu::BindGroup {
-        device.create_bind_group(&wgpu::BindGroupDescriptor {
-            label: Some("iced_wgpu::triangle::gradient bind group"),
-            layout,
-            entries: &[
-                wgpu::BindGroupEntry {
-                    binding: 0,
-                    resource: wgpu::BindingResource::Buffer(
-                        wgpu::BufferBinding {
-                            buffer: uniform_buffer,
-                            offset: 0,
-                            size: Some(Uniforms::min_size()),
-                        },
-                    ),
-                },
-                wgpu::BindGroupEntry {
-                    binding: 1,
-                    resource: storage_buffer.as_entire_binding(),
-                },
-            ],
-        })
-    }
-
-    /// Writes the contents of the gradient CPU buffer to the GPU buffer, resizing the GPU buffer
-    /// beforehand if necessary.
-    pub fn write(
-        &mut self,
-        device: &wgpu::Device,
-        staging_belt: &mut wgpu::util::StagingBelt,
-        encoder: &mut wgpu::CommandEncoder,
-    ) {
-        //first write the pending color stops to the CPU buffer
-        self.storage_buffer.push(&self.color_stops_pending_write);
-
-        //resize buffers if needed
-        let uniforms_resized = self.uniform_buffer.resize(device);
-        let storage_resized = self.storage_buffer.resize(device);
-
-        if uniforms_resized || storage_resized {
-            //recreate bind groups if any buffers were resized
-            self.bind_group = Pipeline::bind_group(
-                device,
-                self.uniform_buffer.raw(),
-                self.storage_buffer.raw(),
-                &self.bind_group_layout,
-            );
-        }
-
-        //write to GPU
-        self.uniform_buffer.write(device, staging_belt, encoder);
-        self.storage_buffer.write(device, staging_belt, encoder);
-
-        //cleanup
-        self.color_stop_offset = 0;
-        self.color_stops_pending_write.color_stops.clear();
-    }
-
-    pub fn set_render_pass_pipeline<'a>(
-        &'a self,
-        render_pass: &mut wgpu::RenderPass<'a>,
-    ) {
-        render_pass.set_pipeline(&self.pipeline);
-    }
-
-    /// Configures the current render pass to draw the gradient at its offset stored in the
-    /// [DynamicBuffer] at [index].
-    pub fn configure_render_pass<'a>(
-        &'a self,
-        render_pass: &mut wgpu::RenderPass<'a>,
-        count: usize,
-    ) {
-        render_pass.set_bind_group(
-            0,
-            &self.bind_group,
-            &[self.uniform_buffer.offset_at_index(count)],
-        )
-    }
-}
diff --git a/wgpu/src/triangle/solid.rs b/wgpu/src/triangle/solid.rs
deleted file mode 100644
index 2e1052f2..00000000
--- a/wgpu/src/triangle/solid.rs
+++ /dev/null
@@ -1,170 +0,0 @@
-use crate::buffer::dynamic;
-use crate::triangle;
-use crate::{settings, Color};
-use encase::ShaderType;
-use glam::Vec4;
-use iced_graphics::Transformation;
-
-pub struct Pipeline {
-    pipeline: wgpu::RenderPipeline,
-    pub(super) buffer: dynamic::Buffer<Uniforms>,
-    bind_group_layout: wgpu::BindGroupLayout,
-    bind_group: wgpu::BindGroup,
-}
-
-#[derive(Debug, Clone, Copy, ShaderType)]
-pub(super) struct Uniforms {
-    transform: glam::Mat4,
-    color: Vec4,
-}
-
-impl Uniforms {
-    pub fn new(transform: Transformation, color: Color) -> Self {
-        let [r, g, b, a] = color.into_linear();
-
-        Self {
-            transform: transform.into(),
-            color: Vec4::new(r, g, b, a),
-        }
-    }
-}
-
-impl Pipeline {
-    /// Creates a new [SolidPipeline] using `solid.wgsl` shader.
-    pub fn new(
-        device: &wgpu::Device,
-        format: wgpu::TextureFormat,
-        antialiasing: Option<settings::Antialiasing>,
-    ) -> Self {
-        let buffer = dynamic::Buffer::uniform(
-            device,
-            "iced_wgpu::triangle::solid uniforms",
-        );
-
-        let bind_group_layout =
-            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
-                label: Some("iced_wgpu::triangle::solid bind group layout"),
-                entries: &[wgpu::BindGroupLayoutEntry {
-                    binding: 0,
-                    visibility: wgpu::ShaderStages::VERTEX_FRAGMENT,
-                    ty: wgpu::BindingType::Buffer {
-                        ty: wgpu::BufferBindingType::Uniform,
-                        has_dynamic_offset: true,
-                        min_binding_size: Some(Uniforms::min_size()),
-                    },
-                    count: None,
-                }],
-            });
-
-        let bind_group =
-            Pipeline::bind_group(device, buffer.raw(), &bind_group_layout);
-
-        let layout =
-            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
-                label: Some("iced_wgpu::triangle::solid pipeline layout"),
-                bind_group_layouts: &[&bind_group_layout],
-                push_constant_ranges: &[],
-            });
-
-        let shader =
-            device.create_shader_module(wgpu::ShaderModuleDescriptor {
-                label: Some("iced_wgpu::triangle::solid create shader module"),
-                source: wgpu::ShaderSource::Wgsl(std::borrow::Cow::Borrowed(
-                    include_str!("../shader/solid.wgsl"),
-                )),
-            });
-
-        let pipeline =
-            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
-                label: Some("iced_wgpu::triangle::solid pipeline"),
-                layout: Some(&layout),
-                vertex: wgpu::VertexState {
-                    module: &shader,
-                    entry_point: "vs_main",
-                    buffers: &[triangle::vertex_buffer_layout()],
-                },
-                fragment: Some(wgpu::FragmentState {
-                    module: &shader,
-                    entry_point: "fs_main",
-                    targets: &[triangle::fragment_target(format)],
-                }),
-                primitive: triangle::primitive_state(),
-                depth_stencil: None,
-                multisample: triangle::multisample_state(antialiasing),
-                multiview: None,
-            });
-
-        Self {
-            pipeline,
-            buffer,
-            bind_group_layout,
-            bind_group,
-        }
-    }
-
-    fn bind_group(
-        device: &wgpu::Device,
-        buffer: &wgpu::Buffer,
-        layout: &wgpu::BindGroupLayout,
-    ) -> wgpu::BindGroup {
-        device.create_bind_group(&wgpu::BindGroupDescriptor {
-            label: Some("iced_wgpu::triangle::solid bind group"),
-            layout,
-            entries: &[wgpu::BindGroupEntry {
-                binding: 0,
-                resource: wgpu::BindingResource::Buffer(wgpu::BufferBinding {
-                    buffer,
-                    offset: 0,
-                    size: Some(Uniforms::min_size()),
-                }),
-            }],
-        })
-    }
-
-    /// Pushes a new solid uniform to the CPU buffer.
-    pub fn push(&mut self, transform: Transformation, color: &Color) {
-        self.buffer.push(&Uniforms::new(transform, *color));
-    }
-
-    /// Writes the contents of the solid CPU buffer to the GPU buffer, resizing the GPU buffer
-    /// beforehand if necessary.
-    pub fn write(
-        &mut self,
-        device: &wgpu::Device,
-        staging_belt: &mut wgpu::util::StagingBelt,
-        encoder: &mut wgpu::CommandEncoder,
-    ) {
-        let uniforms_resized = self.buffer.resize(device);
-
-        if uniforms_resized {
-            self.bind_group = Pipeline::bind_group(
-                device,
-                self.buffer.raw(),
-                &self.bind_group_layout,
-            )
-        }
-
-        self.buffer.write(device, staging_belt, encoder);
-    }
-
-    pub fn set_render_pass_pipeline<'a>(
-        &'a self,
-        render_pass: &mut wgpu::RenderPass<'a>,
-    ) {
-        render_pass.set_pipeline(&self.pipeline);
-    }
-
-    /// Configures the current render pass to draw the solid at its offset stored in the
-    /// [DynamicBuffer] at [index].
-    pub fn configure_render_pass<'a>(
-        &'a self,
-        render_pass: &mut wgpu::RenderPass<'a>,
-        count: usize,
-    ) {
-        render_pass.set_bind_group(
-            0,
-            &self.bind_group,
-            &[self.buffer.offset_at_index(count)],
-        )
-    }
-}