Switched to packing using f16s to maintain acceptable precision.

core/src/color.rs

@@ -120,37 +120,6 @@ impl Color {
         ]
     }
 
-    /// Converts the [`Color`] into a `u32` value containing its RGBA8 components.
-    pub fn into_u32(self) -> u32 {
-        let [r, g, b, a] = self.into_rgba8();
-
-        let r = (r as u32) << 24;
-        let g = (g as u32) << 16;
-        let b = (b as u32) << 8;
-        let a = a as u32;
-
-        r | g | b | a
-    }
-
-    /// Converts the [`Color`] into a `u32` value containing its linear RGBA8 components.
-    pub fn into_linear_u32(self) -> u32 {
-        let [r, g, b, a] = self.into_linear();
-
-        let [r, g, b, a] = [
-            (r * 255.0).round() as u8,
-            (g * 255.0).round() as u8,
-            (b * 255.0).round() as u8,
-            (a * 255.0).round() as u8,
-        ];
-
-        let r = (r as u32) << 24;
-        let g = (g as u32) << 16;
-        let b = (b as u32) << 8;
-        let a = a as u32;
-
-        r | g | b | a
-    }
-
     /// Inverts the [`Color`] in-place.
     pub fn invert(&mut self) {
         self.r = 1.0f32 - self.r;

graphics/Cargo.toml

@@ -18,6 +18,7 @@ web-colors = []
 
 [dependencies]
 glam = "0.24"
+half = "2.2.1"
 log = "0.4"
 raw-window-handle = "0.5"
 thiserror = "1.0"

graphics/src/gradient.rs

@@ -7,6 +7,7 @@ use crate::color;
 use crate::core::gradient::ColorStop;
 use crate::core::{self, Color, Point, Rectangle};
 
+use half::f16;
 use std::cmp::Ordering;
 
 #[derive(Debug, Clone, PartialEq)]
@@ -99,24 +100,30 @@ impl Linear {
 
     /// Packs the [`Gradient`] for use in shader code.
     pub fn pack(&self) -> Packed {
-        let mut colors = [0u32; 8];
-        let mut offsets = [0.0f32; 8];
+        let mut colors = [[0u32; 2]; 8];
+        let mut offsets = [f16::from(0u8); 8];
 
         for (index, stop) in self.stops.iter().enumerate() {
-            let (color, offset) =
-                stop.map_or((Color::default(), 2.0), |s| (s.color, s.offset));
-
-            if color::GAMMA_CORRECTION {
-                //correct colors, convert to linear before uploading to GPU
-                colors[index] = color.into_linear_u32();
-            } else {
-                //web colors, don't convert to linear before uploading to GPU
-                colors[index] = color.into_u32();
-            }
+            let [r, g, b, a] =
+                color::pack(stop.map_or(Color::default(), |s| s.color))
+                    .components();
+
+            colors[index] = [
+                pack_f16s([f16::from_f32(r), f16::from_f32(g)]),
+                pack_f16s([f16::from_f32(b), f16::from_f32(a)]),
+            ];
 
-            offsets[index] = offset;
+            offsets[index] = stop
+                .map_or(f16::from_f32(2.0), |s| f16::from_f32(s.offset));
         }
 
+        let offsets = [
+            pack_f16s([offsets[0], offsets[1]]),
+            pack_f16s([offsets[2], offsets[3]]),
+            pack_f16s([offsets[4], offsets[5]]),
+            pack_f16s([offsets[6], offsets[7]]),
+        ];
+
         let direction = [self.start.x, self.start.y, self.end.x, self.end.y];
 
         Packed {
@@ -131,34 +138,41 @@ impl Linear {
 #[derive(Debug, Copy, Clone, PartialEq)]
 #[repr(C)]
 pub struct Packed {
-    // 8 colors, each packed into a u32
-    colors: [u32; 8],
-    offsets: [f32; 8],
+    // 8 colors, each channel = 16 bit float, 2 colors packed into 1 u32
+    colors: [[u32; 2]; 8],
+    // 8 offsets, 8x 16 bit floats packed into 4 u32s
+    offsets: [u32; 4],
     direction: [f32; 4],
 }
 
 /// Creates a new [`Packed`] gradient for use in shader code.
 pub fn pack(gradient: &core::Gradient, bounds: Rectangle) -> Packed {
     match gradient {
         core::Gradient::Linear(linear) => {
-            let mut colors = [0u32; 8];
-            let mut offsets = [0.0f32; 8];
+            let mut colors = [[0u32; 2]; 8];
+            let mut offsets = [f16::from(0u8); 8];
 
             for (index, stop) in linear.stops.iter().enumerate() {
-                let (color, offset) = stop
-                    .map_or((Color::default(), 2.0), |s| (s.color, s.offset));
-
-                if color::GAMMA_CORRECTION {
-                    //correct colors, convert to linear before uploading to GPU
-                    colors[index] = color.into_linear_u32();
-                } else {
-                    //web colors, don't convert to linear before uploading to GPU
-                    colors[index] = color.into_u32();
-                }
-
-                offsets[index] = offset;
+                let [r, g, b, a] =
+                    color::pack(stop.map_or(Color::default(), |s| s.color))
+                        .components();
+
+                colors[index] = [
+                    pack_f16s([f16::from_f32(r), f16::from_f32(g)]),
+                    pack_f16s([f16::from_f32(b), f16::from_f32(a)]),
+                ];
+
+                offsets[index] = stop
+                    .map_or(f16::from_f32(2.0), |s| f16::from_f32(s.offset));
             }
 
+            let offsets = [
+                pack_f16s([offsets[0], offsets[1]]),
+                pack_f16s([offsets[2], offsets[3]]),
+                pack_f16s([offsets[4], offsets[5]]),
+                pack_f16s([offsets[6], offsets[7]]),
+            ];
+
             let (start, end) = linear.angle.to_distance(&bounds);
 
             let direction = [start.x, start.y, end.x, end.y];
@@ -171,3 +185,11 @@ pub fn pack(gradient: &core::Gradient, bounds: Rectangle) -> Packed {
         }
     }
 }
+
+/// Packs two f16s into one u32.
+fn pack_f16s(f: [f16; 2]) -> u32 {
+    let one = (f[0].to_bits() as u32) << 16;
+    let two = f[1].to_bits() as u32;
+
+    one | two
+}

wgpu/src/quad/gradient.rs

@@ -96,24 +96,26 @@ impl Pipeline {
                                 as u64,
                             step_mode: wgpu::VertexStepMode::Instance,
                             attributes: &wgpu::vertex_attr_array!(
-                                // Colors 1-4
+                                // Colors 1-2
                                 1 => Uint32x4,
-                                // Colors 5-8
+                                // Colors 3-4
                                 2 => Uint32x4,
-                                // Offsets 1-4
-                                3 => Float32x4,
-                                // Offsets 5-8
-                                4 => Float32x4,
+                                // Colors 5-6
+                                3 => Uint32x4,
+                                // Colors 7-8
+                                4 => Uint32x4,
+                                // Offsets 1-8
+                                5 => Uint32x4,
                                 // Direction
-                                5 => Float32x4,
-                                // Position & Scale
                                 6 => Float32x4,
-                                // Border color
+                                // Position & Scale
                                 7 => Float32x4,
-                                // Border radius
+                                // Border color
                                 8 => Float32x4,
+                                // Border radius
+                                9 => Float32x4,
                                 // Border width
-                                9 => Float32
+                                10 => Float32
                             ),
                         },
                     ],

wgpu/src/shader/quad.wgsl

@@ -38,10 +38,11 @@ fn select_border_radius(radi: vec4<f32>, position: vec2<f32>, center: vec2<f32>)
     return rx;
 }
 
-fn unpack_u32(color: u32) -> vec4<f32> {
-    let u = unpack4x8unorm(color);
+fn unpack_u32(color: vec2<u32>) -> vec4<f32> {
+    let rg: vec2<f32> = unpack2x16float(color.x);
+    let ba: vec2<f32> = unpack2x16float(color.y);
 
-    return vec4<f32>(u.w, u.z, u.y, u.x);
+    return vec4<f32>(rg.y, rg.x, ba.y, ba.x);
 }
 
 struct SolidVertexInput {
@@ -148,26 +149,28 @@ struct GradientVertexInput {
     @location(0) v_pos: vec2<f32>,
     @location(1) colors_1: vec4<u32>,
     @location(2) colors_2: vec4<u32>,
-    @location(3) offsets_1: vec4<f32>,
-    @location(4) offsets_2: vec4<f32>,
-    @location(5) direction: vec4<f32>,
-    @location(6) position_and_scale: vec4<f32>,
-    @location(7) border_color: vec4<f32>,
-    @location(8) border_radius: vec4<f32>,
-    @location(9) border_width: f32,
+    @location(3) colors_3: vec4<u32>,
+    @location(4) colors_4: vec4<u32>,
+    @location(5) offsets: vec4<u32>,
+    @location(6) direction: vec4<f32>,
+    @location(7) position_and_scale: vec4<f32>,
+    @location(8) border_color: vec4<f32>,
+    @location(9) border_radius: vec4<f32>,
+    @location(10) border_width: f32,
 }
 
 struct GradientVertexOutput {
     @builtin(position) position: vec4<f32>,
     @location(1) colors_1: vec4<u32>,
     @location(2) colors_2: vec4<u32>,
-    @location(3) offsets_1: vec4<f32>,
-    @location(4) offsets_2: vec4<f32>,
-    @location(5) direction: vec4<f32>,
-    @location(6) position_and_scale: vec4<f32>,
-    @location(7) border_color: vec4<f32>,
-    @location(8) border_radius: vec4<f32>,
-    @location(9) border_width: f32,
+    @location(3) colors_3: vec4<u32>,
+    @location(4) colors_4: vec4<u32>,
+    @location(5) offsets: vec4<u32>,
+    @location(6) direction: vec4<f32>,
+    @location(7) position_and_scale: vec4<f32>,
+    @location(8) border_color: vec4<f32>,
+    @location(9) border_radius: vec4<f32>,
+    @location(10) border_width: f32,
 }
 
 @vertex
@@ -195,8 +198,9 @@ fn gradient_vs_main(input: GradientVertexInput) -> GradientVertexOutput {
     out.position = globals.transform * transform * vec4<f32>(input.v_pos, 0.0, 1.0);
     out.colors_1 = input.colors_1;
     out.colors_2 = input.colors_2;
-    out.offsets_1 = input.offsets_1;
-    out.offsets_2 = input.offsets_2;
+    out.colors_3 = input.colors_3;
+    out.colors_4 = input.colors_4;
+    out.offsets = input.offsets;
     out.direction = input.direction * globals.scale;
     out.position_and_scale = vec4<f32>(pos, scale);
     out.border_color = input.border_color;
@@ -262,25 +266,28 @@ fn gradient(
 @fragment
 fn gradient_fs_main(input: GradientVertexOutput) -> @location(0) vec4<f32> {
     let colors = array<vec4<f32>, 8>(
-        unpack_u32(input.colors_1.x),
-        unpack_u32(input.colors_1.y),
-        unpack_u32(input.colors_1.z),
-        unpack_u32(input.colors_1.w),
-        unpack_u32(input.colors_2.x),
-        unpack_u32(input.colors_2.y),
-        unpack_u32(input.colors_2.z),
-        unpack_u32(input.colors_2.w),
+        unpack_u32(input.colors_1.xy),
+        unpack_u32(input.colors_1.zw),
+        unpack_u32(input.colors_2.xy),
+        unpack_u32(input.colors_2.zw),
+        unpack_u32(input.colors_3.xy),
+        unpack_u32(input.colors_3.zw),
+        unpack_u32(input.colors_4.xy),
+        unpack_u32(input.colors_4.zw),
     );
 
+    let offsets_1: vec4<f32> = unpack_u32(input.offsets.xy);
+    let offsets_2: vec4<f32> = unpack_u32(input.offsets.zw);
+
     var offsets = array<f32, 8>(
-        input.offsets_1.x,
-        input.offsets_1.y,
-        input.offsets_1.z,
-        input.offsets_1.w,
-        input.offsets_2.x,
-        input.offsets_2.y,
-        input.offsets_2.z,
-        input.offsets_2.w,
+        offsets_1.x,
+        offsets_1.y,
+        offsets_1.z,
+        offsets_1.w,
+        offsets_2.x,
+        offsets_2.y,
+        offsets_2.z,
+        offsets_2.w,
     );
 
     //TODO could just pass this in to the shader but is probably more performant to just check it here