Merge a745b7a5c0 into 6147a31b48

niri-config/src/lib.rs

@@ -413,6 +413,8 @@ pub struct Gradient {
     pub angle: i16,
     #[knuffel(property, default)]
     pub relative_to: GradientRelativeTo,
+    #[knuffel(property, default)]
+    pub gradient_type: GradientType,
 }
 
 #[derive(knuffel::DecodeScalar, Debug, Default, Clone, Copy, PartialEq, Eq)]
@@ -422,6 +424,15 @@ pub enum GradientRelativeTo {
     WorkspaceView,
 }
 
+#[derive(knuffel::DecodeScalar, Debug, Default, Clone, Copy, PartialEq, Eq)]
+pub enum GradientType {
+    #[default]
+    CssLinear,
+    Linear,
+    Oklab,
+    Lch,
+}
+
 #[derive(knuffel::Decode, Debug, Clone, Copy, PartialEq)]
 pub struct Border {
     #[knuffel(child)]

resources/default-config.kdl

@@ -152,6 +152,7 @@ layout {
         // The angle is the same as in linear-gradient, and is optional,
         // defaulting to 180 (top-to-bottom gradient).
         // You can use any CSS linear-gradient tool on the web to set these up.
+        // for gradient types visit the wiki
         //
         // active-gradient from="#80c8ff" to="#bbddff" angle=45
 

src/layout/focus_ring.rs

@@ -1,7 +1,7 @@
 use std::iter::zip;
 
 use arrayvec::ArrayVec;
-use niri_config::{CornerRadius, Gradient, GradientRelativeTo};
+use niri_config::{CornerRadius, Gradient, GradientRelativeTo, GradientType};
 use smithay::backend::renderer::element::Kind;
 use smithay::utils::{Logical, Point, Rectangle, Size};
 
@@ -91,6 +91,7 @@ impl FocusRing {
             to: color,
             angle: 0,
             relative_to: GradientRelativeTo::Window,
+            gradient_type: GradientType::CssLinear,
         });
 
         let full_rect = Rectangle::from_loc_and_size((-width, -width), self.full_size);
@@ -99,6 +100,13 @@ impl FocusRing {
             GradientRelativeTo::WorkspaceView => view_rect,
         };
 
+        let gradient_format = match gradient.gradient_type {
+            GradientType::CssLinear => 0.,
+            GradientType::Linear => 1.,
+            GradientType::Oklab => 2.,
+            GradientType::Lch => 3.,
+        };
+
         let rounded_corner_border_width = if self.is_border {
             // HACK: increase the border width used for the inner rounded corners a tiny bit to
             // reduce background bleed.
@@ -178,6 +186,7 @@ impl FocusRing {
                 border.update(
                     size,
                     Rectangle::from_loc_and_size(gradient_area.loc - loc, gradient_area.size),
+                    gradient_format,
                     gradient.from.into(),
                     gradient.to.into(),
                     ((gradient.angle as f32) - 90.).to_radians(),
@@ -198,6 +207,7 @@ impl FocusRing {
                     gradient_area.loc - self.locations[0],
                     gradient_area.size,
                 ),
+                gradient_format,
                 gradient.from.into(),
                 gradient.to.into(),
                 ((gradient.angle as f32) - 90.).to_radians(),

src/layout/tile.rs

@@ -757,6 +757,7 @@ impl<W: LayoutElement> Tile<W> {
                         return BorderRenderElement::new(
                             geo.size,
                             Rectangle::from_loc_and_size((0., 0.), geo.size),
+                            0.,
                             elem.color(),
                             elem.color(),
                             0.,

src/render_helpers/border.rs

@@ -28,6 +28,7 @@ pub struct BorderRenderElement {
 struct Parameters {
     size: Size<f64, Logical>,
     gradient_area: Rectangle<f64, Logical>,
+    gradient_format: f32,
     color_from: [f32; 4],
     color_to: [f32; 4],
     angle: f32,
@@ -43,6 +44,7 @@ impl BorderRenderElement {
     pub fn new(
         size: Size<f64, Logical>,
         gradient_area: Rectangle<f64, Logical>,
+        gradient_format: f32,
         color_from: [f32; 4],
         color_to: [f32; 4],
         angle: f32,
@@ -57,6 +59,7 @@ impl BorderRenderElement {
             params: Parameters {
                 size,
                 gradient_area,
+                gradient_format,
                 color_from,
                 color_to,
                 angle,
@@ -77,6 +80,7 @@ impl BorderRenderElement {
             params: Parameters {
                 size: Default::default(),
                 gradient_area: Default::default(),
+                gradient_format: 0.,
                 color_from: Default::default(),
                 color_to: Default::default(),
                 angle: 0.,
@@ -97,6 +101,7 @@ impl BorderRenderElement {
         &mut self,
         size: Size<f64, Logical>,
         gradient_area: Rectangle<f64, Logical>,
+        gradient_format: f32,
         color_from: [f32; 4],
         color_to: [f32; 4],
         angle: f32,
@@ -108,6 +113,7 @@ impl BorderRenderElement {
         let params = Parameters {
             size,
             gradient_area,
+            gradient_format,
             color_from,
             color_to,
             angle,
@@ -128,6 +134,7 @@ impl BorderRenderElement {
         let Parameters {
             size,
             gradient_area,
+            gradient_format,
             color_from,
             color_to,
             angle,
@@ -167,6 +174,7 @@ impl BorderRenderElement {
             None,
             scale,
             vec![
+                Uniform::new("grad_format", gradient_format),
                 Uniform::new("color_from", color_from),
                 Uniform::new("color_to", color_to),
                 Uniform::new("grad_offset", grad_offset.to_array()),

src/render_helpers/shaders/border.frag

@@ -1,26 +1,3 @@
-precision mediump float;
-
-#if defined(DEBUG_FLAGS)
-uniform float niri_tint;
-#endif
-
-uniform float niri_alpha;
-uniform float niri_scale;
-
-uniform vec2 niri_size;
-varying vec2 niri_v_coords;
-
-uniform vec4 color_from;
-uniform vec4 color_to;
-uniform vec2 grad_offset;
-uniform float grad_width;
-uniform vec2 grad_vec;
-
-uniform mat3 input_to_geo;
-uniform vec2 geo_size;
-uniform vec4 outer_radius;
-uniform float border_width;
-
 vec4 gradient_color(vec2 coords) {
     coords = coords + grad_offset;
 
@@ -33,7 +10,7 @@ vec4 gradient_color(vec2 coords) {
         frac += 1.0;
 
     frac = clamp(frac, 0.0, 1.0);
-    return mix(color_from, color_to, frac);
+    return color_mix(color_from, color_to, frac);
 }
 
 float rounding_alpha(vec2 coords, vec2 size, vec4 corner_radius) {

src/render_helpers/shaders/border_head.frag

@@ -0,0 +1,30 @@
+precision mediump float;
+
+#if defined(DEBUG_FLAGS)
+uniform float niri_tint;
+#endif
+
+uniform float niri_alpha;
+uniform float niri_scale;
+
+uniform vec2 niri_size;
+varying vec2 niri_v_coords;
+
+uniform float grad_format;
+uniform vec4 color_from;
+uniform vec4 color_to;
+uniform vec2 grad_offset;
+uniform float grad_width;
+uniform vec2 grad_vec;
+
+uniform mat3 input_to_geo;
+uniform vec2 geo_size;
+uniform vec4 outer_radius;
+uniform float border_width;
+
+
+// FIXME this is a terrible solution however,
+// I need to insert a different file with 
+// functions after this part as adding them ahead will cause errors at runtime
+// and havent found a clean way to do this
+// this is prob super simple and im just too stupid

src/render_helpers/shaders/color_interpol.frag

@@ -0,0 +1,42 @@
+
+vec4 color_linear(vec4 color) {
+  return vec4(
+    pow(color.r, 2.0),
+    pow(color.g, 2.0),
+    pow(color.b, 2.0),
+    color.a
+  );
+}
+
+vec4 color_root(vec4 color) {
+  return vec4(
+    sqrt(color.r),
+    sqrt(color.g),
+    sqrt(color.b),
+    color.a
+  );
+}
+
+vec4 color_mix(vec4 color1, vec4 color2, float color_ratio) {
+
+  if(grad_format == 0.0) { //   CssLinear
+    return mix(color1, color2, color_ratio);
+  }
+  
+  vec4 color_out;
+
+  color1 = color_linear(color1);
+  color2 = color_linear(color2);
+
+  if (grad_format == 1.0) { // rgb linear
+    color_out = mix(
+      color1,
+      color2,
+      color_ratio
+    );
+  }else{
+    color_out = vec4(255.0,0.0,0.0,1.0);
+  }
+
+  return color_root(color_out);
+}

src/render_helpers/shaders/mod.rs

@@ -32,8 +32,13 @@ impl Shaders {
 
         let border = ShaderProgram::compile(
             renderer,
-            include_str!("border.frag"),
+            concat!(
+                include_str!("border_head.frag"),
+                include_str!("color_interpol.frag"),
+                include_str!("border.frag")
+            ),
             &[
+                UniformName::new("grad_format", UniformType::_1f),
                 UniformName::new("color_from", UniformType::_4f),
                 UniformName::new("color_to", UniformType::_4f),
                 UniformName::new("grad_offset", UniformType::_2f),
@@ -66,7 +71,13 @@ impl Shaders {
             })
             .ok();
 
-        let resize = compile_resize_program(renderer, include_str!("resize.frag"))
+        let resize = compile_resize_program(
+                renderer,
+                concat!(
+                    include_str!("color_interpol.frag"),
+                    include_str!("resize.frag")
+                )
+            )
             .map_err(|err| {
                 warn!("error compiling resize shader: {err:?}");
             })
@@ -150,6 +161,7 @@ fn compile_resize_program(
         renderer,
         &program,
         &[
+            UniformName::new("grad_format", UniformType::_1f),
             UniformName::new("niri_input_to_curr_geo", UniformType::Matrix3x3),
             UniformName::new("niri_curr_geo_to_prev_geo", UniformType::Matrix3x3),
             UniformName::new("niri_curr_geo_to_next_geo", UniformType::Matrix3x3),

src/render_helpers/shaders/resize.frag

@@ -5,6 +5,6 @@ vec4 resize_color(vec3 coords_curr_geo, vec3 size_curr_geo) {
     vec3 coords_tex_next = niri_geo_to_tex_next * coords_curr_geo;
     vec4 color_next = texture2D(niri_tex_next, coords_tex_next.st);
 
-    vec4 color = mix(color_prev, color_next, niri_clamped_progress);
+    vec4 color = color_mix(color_prev, color_next, niri_clamped_progress);
     return color;
 }

src/render_helpers/shaders/resize_prelude.frag

@@ -7,6 +7,7 @@ uniform float niri_tint;
 varying vec2 niri_v_coords;
 uniform vec2 niri_size;
 
+uniform float grad_format;
 uniform mat3 niri_input_to_curr_geo;
 uniform mat3 niri_curr_geo_to_prev_geo;
 uniform mat3 niri_curr_geo_to_next_geo;

src/window/mapped.rs

@@ -289,6 +289,7 @@ impl Mapped {
                     return BorderRenderElement::new(
                         geo.size,
                         Rectangle::from_loc_and_size((0., 0.), geo.size),
+                        0.,
                         elem.color(),
                         elem.color(),
                         0.,

wiki/Configuration:-Layout.md

@@ -32,7 +32,7 @@ layout {
         active-color "#ffc87f"
         inactive-color "#505050"
         // active-gradient from="#ffbb66" to="#ffc880" angle=45 relative-to="workspace-view"
-        // inactive-gradient from="#505050" to="#808080" angle=45 relative-to="workspace-view"
+        // inactive-gradient from="#505050" to="#808080" angle=45 relative-to="workspace-view" gradient-type="linear"
     }
 
     struts {
@@ -169,7 +169,7 @@ layout {
         inactive-color "#505050"
 
         // active-gradient from="#ffbb66" to="#ffc880" angle=45 relative-to="workspace-view"
-        // inactive-gradient from="#505050" to="#808080" angle=45 relative-to="workspace-view"
+        // inactive-gradient from="#505050" to="#808080" angle=45 relative-to="workspace-view" gradient-type="linear"
     }
 }
 ```
@@ -209,7 +209,7 @@ There's also a *deprecated* syntax for setting colors with four numbers represen
 
 Similarly to colors, you can set `active-gradient` and `inactive-gradient`, which will take precedence.
 
-Gradients are rendered the same as CSS [`linear-gradient(angle, from, to)`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).
+Gradients can be rendered the same as CSS [`linear-gradient(angle, from, to)`](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).
 The angle works the same as in `linear-gradient`, and is optional, defaulting to `180` (top-to-bottom gradient).
 You can use any CSS linear-gradient tool on the web to set these up, like [this one](https://www.css-gradient.com/).
 
@@ -221,6 +221,18 @@ layout {
 }
 ```
 
+Gradients can be rendered with different kinds of color interpolation, this doesen't mean that the arguments the gradient takes
+are any different. Except for an optional `gradient-type` argument which can currently be:
+
+`gradient-type="css-linear"`(Default),
+
+`gradient-type="linear"`,
+
+`gradient-type="Oklab"`(Unimplemented),
+
+`gradient-type="Lch"`
+
+
 Gradients can be colored relative to windows individually (the default), or to the whole view of the workspace.
 To do that, set `relative-to="workspace-view"`.
 Here's a visual example: