Render colored quads

Cargo.toml

@@ -30,3 +30,6 @@ iced_wgpu = { version = "0.1.0-alpha", path = "wgpu" }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 iced_web = { version = "0.1.0-alpha", path = "web" }
+
+[dev-dependencies]
+env_logger = "0.7"

core/src/color.rs

@@ -16,4 +16,23 @@ impl Color {
         b: 0.0,
         a: 1.0,
     };
+
+    pub fn into_linear(self) -> [f32; 4] {
+        // As described in:
+        // https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
+        fn linear_component(u: f32) -> f32 {
+            if u < 0.04045 {
+                u / 12.92
+            } else {
+                ((u + 0.055) / 1.055).powf(2.4)
+            }
+        }
+
+        [
+            linear_component(self.r),
+            linear_component(self.g),
+            linear_component(self.b),
+            self.a,
+        ]
+    }
 }

examples/tour.rs

@@ -5,6 +5,8 @@ use iced::{
 };
 
 pub fn main() {
+    env_logger::init();
+
     let tour = Tour::new();
 
     tour.run();

wgpu/src/lib.rs

@@ -1,6 +1,11 @@
 mod mouse_cursor;
 mod primitive;
+mod quad;
 mod renderer;
+mod transformation;
+
+pub(crate) use quad::Quad;
+pub(crate) use transformation::Transformation;
 
 pub use mouse_cursor::MouseCursor;
 pub use primitive::{Background, Primitive};

wgpu/src/primitive.rs

@@ -20,4 +20,5 @@ pub enum Primitive {
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Background {
     Color(Color),
+    // TODO: Add gradient and image variants
 }

wgpu/src/quad.rs

@@ -0,0 +1,269 @@
+use crate::Transformation;
+
+use std::mem;
+
+pub struct Pipeline {
+    pipeline: wgpu::RenderPipeline,
+    constants: wgpu::BindGroup,
+    transform: wgpu::Buffer,
+    vertices: wgpu::Buffer,
+    indices: wgpu::Buffer,
+    instances: wgpu::Buffer,
+}
+
+impl Pipeline {
+    pub fn new(device: &mut wgpu::Device) -> Pipeline {
+        let constant_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                bindings: &[wgpu::BindGroupLayoutBinding {
+                    binding: 0,
+                    visibility: wgpu::ShaderStage::VERTEX,
+                    ty: wgpu::BindingType::UniformBuffer { dynamic: false },
+                }],
+            });
+
+        let matrix: [f32; 16] = Transformation::identity().into();
+
+        let transform = device
+            .create_buffer_mapped(
+                16,
+                wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
+            )
+            .fill_from_slice(&matrix[..]);
+
+        let constants = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            layout: &constant_layout,
+            bindings: &[wgpu::Binding {
+                binding: 0,
+                resource: wgpu::BindingResource::Buffer {
+                    buffer: &transform,
+                    range: 0..64,
+                },
+            }],
+        });
+
+        let layout =
+            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                bind_group_layouts: &[&constant_layout],
+            });
+
+        let vs = include_bytes!("shader/quad.vert.spv");
+        let vs_module = device.create_shader_module(
+            &wgpu::read_spirv(std::io::Cursor::new(&vs[..]))
+                .expect("Read quad vertex shader as SPIR-V"),
+        );
+
+        let fs = include_bytes!("shader/quad.frag.spv");
+        let fs_module = device.create_shader_module(
+            &wgpu::read_spirv(std::io::Cursor::new(&fs[..]))
+                .expect("Read quad fragment shader as SPIR-V"),
+        );
+
+        let pipeline =
+            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+                layout: &layout,
+                vertex_stage: wgpu::ProgrammableStageDescriptor {
+                    module: &vs_module,
+                    entry_point: "main",
+                },
+                fragment_stage: Some(wgpu::ProgrammableStageDescriptor {
+                    module: &fs_module,
+                    entry_point: "main",
+                }),
+                rasterization_state: Some(wgpu::RasterizationStateDescriptor {
+                    front_face: wgpu::FrontFace::Cw,
+                    cull_mode: wgpu::CullMode::None,
+                    depth_bias: 0,
+                    depth_bias_slope_scale: 0.0,
+                    depth_bias_clamp: 0.0,
+                }),
+                primitive_topology: wgpu::PrimitiveTopology::TriangleList,
+                color_states: &[wgpu::ColorStateDescriptor {
+                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    color_blend: wgpu::BlendDescriptor {
+                        src_factor: wgpu::BlendFactor::SrcAlpha,
+                        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                        operation: wgpu::BlendOperation::Add,
+                    },
+                    alpha_blend: wgpu::BlendDescriptor {
+                        src_factor: wgpu::BlendFactor::One,
+                        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                        operation: wgpu::BlendOperation::Add,
+                    },
+                    write_mask: wgpu::ColorWrite::ALL,
+                }],
+                depth_stencil_state: None,
+                index_format: wgpu::IndexFormat::Uint16,
+                vertex_buffers: &[
+                    wgpu::VertexBufferDescriptor {
+                        stride: mem::size_of::<Vertex>() as u64,
+                        step_mode: wgpu::InputStepMode::Vertex,
+                        attributes: &[wgpu::VertexAttributeDescriptor {
+                            shader_location: 0,
+                            format: wgpu::VertexFormat::Float2,
+                            offset: 0,
+                        }],
+                    },
+                    wgpu::VertexBufferDescriptor {
+                        stride: mem::size_of::<Quad>() as u64,
+                        step_mode: wgpu::InputStepMode::Instance,
+                        attributes: &[
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 1,
+                                format: wgpu::VertexFormat::Float2,
+                                offset: 0,
+                            },
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 2,
+                                format: wgpu::VertexFormat::Float2,
+                                offset: 4 * 2,
+                            },
+                            wgpu::VertexAttributeDescriptor {
+                                shader_location: 3,
+                                format: wgpu::VertexFormat::Float4,
+                                offset: 4 * (2 + 2),
+                            },
+                        ],
+                    },
+                ],
+                sample_count: 1,
+                sample_mask: !0,
+                alpha_to_coverage_enabled: false,
+            });
+
+        let vertices = device
+            .create_buffer_mapped(QUAD_VERTS.len(), wgpu::BufferUsage::VERTEX)
+            .fill_from_slice(&QUAD_VERTS);
+
+        let indices = device
+            .create_buffer_mapped(QUAD_INDICES.len(), wgpu::BufferUsage::INDEX)
+            .fill_from_slice(&QUAD_INDICES);
+
+        let instances = device.create_buffer(&wgpu::BufferDescriptor {
+            size: mem::size_of::<Quad>() as u64 * Quad::MAX as u64,
+            usage: wgpu::BufferUsage::VERTEX | wgpu::BufferUsage::COPY_DST,
+        });
+
+        Pipeline {
+            pipeline,
+            constants,
+            transform,
+            vertices,
+            indices,
+            instances,
+        }
+    }
+
+    pub fn draw(
+        &mut self,
+        device: &mut wgpu::Device,
+        encoder: &mut wgpu::CommandEncoder,
+        instances: &[Quad],
+        transformation: Transformation,
+        target: &wgpu::TextureView,
+    ) {
+        let matrix: [f32; 16] = transformation.into();
+
+        let transform_buffer = device
+            .create_buffer_mapped(16, wgpu::BufferUsage::COPY_SRC)
+            .fill_from_slice(&matrix[..]);
+
+        encoder.copy_buffer_to_buffer(
+            &transform_buffer,
+            0,
+            &self.transform,
+            0,
+            16 * 4,
+        );
+
+        let mut i = 0;
+        let total = instances.len();
+
+        while i < total {
+            let end = (i + Quad::MAX).min(total);
+            let amount = end - i;
+
+            let instance_buffer = device
+                .create_buffer_mapped(amount, wgpu::BufferUsage::COPY_SRC)
+                .fill_from_slice(&instances[i..end]);
+
+            encoder.copy_buffer_to_buffer(
+                &instance_buffer,
+                0,
+                &self.instances,
+                0,
+                (mem::size_of::<Quad>() * amount) as u64,
+            );
+
+            {
+                let mut render_pass =
+                    encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                        color_attachments: &[
+                            wgpu::RenderPassColorAttachmentDescriptor {
+                                attachment: target,
+                                resolve_target: None,
+                                load_op: wgpu::LoadOp::Load,
+                                store_op: wgpu::StoreOp::Store,
+                                clear_color: wgpu::Color {
+                                    r: 0.0,
+                                    g: 0.0,
+                                    b: 0.0,
+                                    a: 0.0,
+                                },
+                            },
+                        ],
+                        depth_stencil_attachment: None,
+                    });
+
+                render_pass.set_pipeline(&self.pipeline);
+                render_pass.set_bind_group(0, &self.constants, &[]);
+                render_pass.set_index_buffer(&self.indices, 0);
+                render_pass.set_vertex_buffers(
+                    0,
+                    &[(&self.vertices, 0), (&self.instances, 0)],
+                );
+
+                render_pass.draw_indexed(
+                    0..QUAD_INDICES.len() as u32,
+                    0,
+                    0..amount as u32,
+                );
+            }
+
+            i += Quad::MAX;
+        }
+    }
+}
+
+#[derive(Clone, Copy)]
+pub struct Vertex {
+    _position: [f32; 2],
+}
+
+const QUAD_INDICES: [u16; 6] = [0, 1, 2, 0, 2, 3];
+
+const QUAD_VERTS: [Vertex; 4] = [
+    Vertex {
+        _position: [0.0, 0.0],
+    },
+    Vertex {
+        _position: [1.0, 0.0],
+    },
+    Vertex {
+        _position: [1.0, 1.0],
+    },
+    Vertex {
+        _position: [0.0, 1.0],
+    },
+];
+
+#[derive(Debug, Clone, Copy)]
+pub struct Quad {
+    pub position: [f32; 2],
+    pub scale: [f32; 2],
+    pub color: [f32; 4],
+}
+
+impl Quad {
+    const MAX: usize = 100_000;
+}

wgpu/src/renderer.rs

@@ -1,4 +1,4 @@
-use crate::Primitive;
+use crate::{quad, Background, Primitive, Quad, Transformation};
 use iced_native::{renderer::Debugger, Color, Layout, Point, Widget};
 
 use raw_window_handle::HasRawWindowHandle;
@@ -25,12 +25,16 @@ pub struct Renderer {
     surface: Surface,
     adapter: Adapter,
     device: Device,
+    quad_pipeline: quad::Pipeline,
+
+    quads: Vec<Quad>,
     glyph_brush: Rc<RefCell<GlyphBrush<'static, ()>>>,
 }
 
 pub struct Target {
     width: u16,
     height: u16,
+    transformation: Transformation,
     swap_chain: SwapChain,
 }
 
@@ -59,11 +63,16 @@ impl Renderer {
         let glyph_brush = GlyphBrushBuilder::using_font_bytes(font)
             .build(&mut device, TextureFormat::Bgra8UnormSrgb);
 
+        let quad_pipeline = quad::Pipeline::new(&mut device);
+
         Self {
             instance,
             surface,
             adapter,
             device,
+            quad_pipeline,
+
+            quads: Vec::new(),
             glyph_brush: Rc::new(RefCell::new(glyph_brush)),
         }
     }
@@ -72,6 +81,7 @@ impl Renderer {
         Target {
             width,
             height,
+            transformation: Transformation::orthographic(width, height),
             swap_chain: self.device.create_swap_chain(
                 &self.surface,
                 &SwapChainDescriptor {
@@ -110,6 +120,16 @@ impl Renderer {
 
         self.draw_primitive(primitive);
 
+        self.quad_pipeline.draw(
+            &mut self.device,
+            &mut encoder,
+            &self.quads,
+            target.transformation,
+            &frame.view,
+        );
+
+        self.quads.clear();
+
         self.glyph_brush
             .borrow_mut()
             .draw_queued(
@@ -145,7 +165,13 @@ impl Renderer {
                 ..Default::default()
             }),
             Primitive::Quad { bounds, background } => {
-                // TODO: Batch quads and draw them all at once
+                self.quads.push(Quad {
+                    position: [bounds.x, bounds.y],
+                    scale: [bounds.width, bounds.height],
+                    color: match background {
+                        Background::Color(color) => color.into_linear(),
+                    },
+                });
             }
         }
     }

wgpu/src/renderer/button.rs

@@ -18,14 +18,16 @@ impl button::Renderer for Renderer {
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> Self::Primitive {
+        let bounds = layout.bounds();
+
         Primitive::Group {
             primitives: vec![
                 Primitive::Quad {
-                    bounds: layout.bounds(),
+                    bounds,
                     background: Background::Color(Color {
-                        r: 0.0,
+                        r: 0.8,
-                        b: 1.0,
+                        b: 0.8,
-                        g: 0.0,
+                        g: 0.8,
                         a: 1.0,
                     }),
                 },

wgpu/src/shader/quad.frag

@@ -0,0 +1,9 @@
+#version 450
+
+layout(location = 0) in vec4 v_Color;
+
+layout(location = 0) out vec4 o_Color;
+
+void main() {
+    o_Color = v_Color;
+}

wgpu/src/shader/quad.vert

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

wgpu/src/transformation.rs

@@ -0,0 +1,30 @@
+#[derive(Debug, Clone, Copy)]
+pub struct Transformation([f32; 16]);
+
+impl Transformation {
+    #[rustfmt::skip]
+    pub fn identity() -> Self {
+        Transformation([
+            1.0, 0.0, 0.0, 0.0,
+            0.0, 1.0, 0.0, 0.0,
+            0.0, 0.0, 1.0, 0.0,
+            0.0, 0.0, 0.0, 1.0,
+        ])
+    }
+
+    #[rustfmt::skip]
+    pub fn orthographic(width: u16, height: u16) -> Self {
+        Transformation([
+            2.0 / width as f32, 0.0, 0.0, 0.0,
+            0.0, 2.0 / height as f32, 0.0, 0.0,
+            0.0, 0.0, 1.0, 0.0,
+            -1.0, -1.0, 0.0, 1.0,
+        ])
+    }
+}
+
+impl From<Transformation> for [f32; 16] {
+    fn from(transformation: Transformation) -> [f32; 16] {
+        transformation.0
+    }
+}