me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Introduce web-colors feature flag to enable sRGB linear blending

Browse source 
This is how browsers perform color management. They treat
gamma-corrected sRGB colors as if they were linear RGB.

Correctness aside, this mode is introduced for legacy reasons. Most
UI/UX tooling uses this color management as well, and many have created
an intuition about how color should behave from interacting with a
browser.

This feature flag should facilitate application development with `iced`
in those cases.

More details: https://webcolorisstillbroken.com/
This commit is contained in:
Héctor Ramón Jiménez 2023-05-31 21:31:58 +02:00
parent b5f102c558
commit faa7627ea4
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
16 changed files with 99 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Cargo.toml
View file

@ -37,6 +37,8 @@ smol = ["iced_futures/smol"]
palette = ["iced_core/palette"]
# Enables querying system information
system = ["iced_winit/system"]
# Enables broken "sRGB linear" blending to reproduce color management of the Web
web-colors = ["iced_renderer/web-colors"]
# Enables the advanced module
advanced = []

19
examples/geometry/src/main.rs
View file

@ -3,6 +3,7 @@
mod rainbow {
use iced_graphics::primitive::{ColoredVertex2D, Primitive};
use iced::advanced::graphics::color;
use iced::advanced::layout::{self, Layout};
use iced::advanced::renderer;
use iced::advanced::widget::{self, Widget};
@ -84,39 +85,39 @@ mod rainbow {
vertices: vec![
ColoredVertex2D {
position: posn_center,
color: [1.0, 1.0, 1.0, 1.0],
color: color::pack([1.0, 1.0, 1.0, 1.0]),
},
ColoredVertex2D {
position: posn_tl,
color: color_r,
color: color::pack(color_r),
},
ColoredVertex2D {
position: posn_t,
color: color_o,
color: color::pack(color_o),
},
ColoredVertex2D {
position: posn_tr,
color: color_y,
color: color::pack(color_y),
},
ColoredVertex2D {
position: posn_r,
color: color_g,
color: color::pack(color_g),
},
ColoredVertex2D {
position: posn_br,
color: color_gb,
color: color::pack(color_gb),
},
ColoredVertex2D {
position: posn_b,
color: color_b,
color: color::pack(color_b),
},
ColoredVertex2D {
position: posn_bl,
color: color_i,
color: color::pack(color_i),
},
ColoredVertex2D {
position: posn_l,
color: color_v,
color: color::pack(color_v),
},
],
indices: vec![

1
graphics/Cargo.toml
View file

@ -14,6 +14,7 @@ categories = ["gui"]
geometry = ["lyon_path"]
opengl = []
image = ["dep:image", "kamadak-exif"]
web-colors = []
[dependencies]
glam = "0.24"

46
graphics/src/color.rs Normal file
View file

@ -0,0 +1,46 @@
//! Manage colors for shaders.
use crate::core::Color;
use bytemuck::{Pod, Zeroable};
/// A color packed as 4 floats representing RGBA channels.
#[derive(Debug, Clone, Copy, PartialEq, Zeroable, Pod)]
#[repr(C)]
pub struct Packed([f32; 4]);
impl Packed {
/// Returns the internal components of the [`Packed`] color.
pub fn components(self) -> [f32; 4] {
self.0
}
}
/// A flag that indicates whether the renderer should perform gamma correction.
pub const GAMMA_CORRECTION: bool = internal::GAMMA_CORRECTION;
/// Packs a [`Color`].
pub fn pack(color: impl Into<Color>) -> Packed {
Packed(internal::pack(color.into()))
}
#[cfg(not(feature = "web-colors"))]
mod internal {
use crate::core::Color;
pub const GAMMA_CORRECTION: bool = true;
pub fn pack(color: Color) -> [f32; 4] {
color.into_linear()
}
}
#[cfg(feature = "web-colors")]
mod internal {
use crate::core::Color;
pub const GAMMA_CORRECTION: bool = false;
pub fn pack(color: Color) -> [f32; 4] {
[color.r, color.g, color.b, color.a]
}
}

8
graphics/src/gradient.rs
View file

@ -3,8 +3,10 @@
//! For a gradient that you can use as a background variant for a widget, see [`Gradient`].
//!
//! [`Gradient`]: crate::core::Gradient;
use crate::color;
use crate::core::gradient::ColorStop;
use crate::core::{self, Color, Point, Rectangle};
use std::cmp::Ordering;
#[derive(Debug, Clone, PartialEq)]
@ -101,7 +103,8 @@ impl Linear {
for (index, stop) in self.stops.iter().enumerate() {
let [r, g, b, a] =
stop.map_or(Color::default(), |s| s.color).into_linear();
color::pack(stop.map_or(Color::default(), |s| s.color))
.components();
data[index * 4] = r;
data[(index * 4) + 1] = g;
@ -133,7 +136,8 @@ pub fn pack(gradient: &core::Gradient, bounds: Rectangle) -> Packed {
for (index, stop) in linear.stops.iter().enumerate() {
let [r, g, b, a] =
stop.map_or(Color::default(), |s| s.color).into_linear();
color::pack(stop.map_or(Color::default(), |s| s.color))
.components();
data[index * 4] = r;
data[(index * 4) + 1] = g;

1
graphics/src/lib.rs
View file

@ -27,6 +27,7 @@ mod transformation;
mod viewport;
pub mod backend;
pub mod color;
pub mod compositor;
pub mod damage;
pub mod gradient;

3
graphics/src/primitive.rs
View file

@ -1,4 +1,5 @@
//! Draw using different graphical primitives.
use crate::color;
use crate::core::alignment;
use crate::core::image;
use crate::core::svg;
@ -248,7 +249,7 @@ pub struct ColoredVertex2D {
pub position: [f32; 2],
/// The color of the vertex in __linear__ RGBA.
pub color: [f32; 4],
pub color: color::Packed,
}
/// A vertex which contains 2D position & packed gradient data.

1
renderer/Cargo.toml
View file

@ -9,6 +9,7 @@ image = ["iced_tiny_skia/image", "iced_wgpu?/image"]
svg = ["iced_tiny_skia/svg", "iced_wgpu?/svg"]
geometry = ["iced_graphics/geometry", "iced_tiny_skia/geometry", "iced_wgpu?/geometry"]
tracing = ["iced_wgpu?/tracing"]
web-colors = ["iced_wgpu?/web-colors"]
[dependencies]
raw-window-handle = "0.5"

1
wgpu/Cargo.toml
View file

@ -11,6 +11,7 @@ repository = "https://github.com/iced-rs/iced"
geometry = ["iced_graphics/geometry", "lyon"]
image = ["iced_graphics/image"]
svg = ["resvg"]
web-colors = ["iced_graphics/web-colors"]
[dependencies]
wgpu = "0.16"

3
wgpu/src/backend.rs
View file

@ -1,6 +1,7 @@
use crate::core;
use crate::core::{Color, Font, Point, Size};
use crate::graphics::backend;
use crate::graphics::color;
use crate::graphics::{Primitive, Transformation, Viewport};
use crate::quad;
use crate::text;
@ -239,7 +240,7 @@ impl Backend {
load: match clear_color {
Some(background_color) => wgpu::LoadOp::Clear({
let [r, g, b, a] =
background_color.into_linear();
color::pack(background_color).components();
wgpu::Color {
r: f64::from(r),

7
wgpu/src/geometry.rs
View file

@ -1,5 +1,6 @@
//! Build and draw geometry.
use crate::core::{Point, Rectangle, Size, Vector};
use crate::graphics::color;
use crate::graphics::geometry::fill::{self, Fill};
use crate::graphics::geometry::{
LineCap, LineDash, LineJoin, Path, Stroke, Style, Text,
@ -68,7 +69,7 @@ impl BufferStack {
(Style::Solid(color), Buffer::Solid(buffer)) => {
Box::new(tessellation::BuffersBuilder::new(
buffer,
TriangleVertex2DBuilder(color.into_linear()),
TriangleVertex2DBuilder(color::pack(*color)),
))
}
(Style::Gradient(gradient), Buffer::Gradient(buffer)) => {
@ -91,7 +92,7 @@ impl BufferStack {
(Style::Solid(color), Buffer::Solid(buffer)) => {
Box::new(tessellation::BuffersBuilder::new(
buffer,
TriangleVertex2DBuilder(color.into_linear()),
TriangleVertex2DBuilder(color::pack(*color)),
))
}
(Style::Gradient(gradient), Buffer::Gradient(buffer)) => {
@ -526,7 +527,7 @@ impl tessellation::StrokeVertexConstructor<primitive::GradientVertex2D>
}
}
struct TriangleVertex2DBuilder([f32; 4]);
struct TriangleVertex2DBuilder(color::Packed);
impl tessellation::FillVertexConstructor<primitive::ColoredVertex2D>
for TriangleVertex2DBuilder

3
wgpu/src/layer.rs
View file

@ -11,6 +11,7 @@ pub use text::Text;
use crate::core;
use crate::core::alignment;
use crate::core::{Color, Font, Point, Rectangle, Size, Vector};
use crate::graphics::color;
use crate::graphics::{Primitive, Viewport};
use crate::quad::{self, Quad};
@ -150,7 +151,7 @@ impl<'a> Layer<'a> {
bounds.y + translation.y,
],
size: [bounds.width, bounds.height],
border_color: border_color.into_linear(),
border_color: color::pack(*border_color),
border_radius: *border_radius,
border_width: *border_width,
};

5
wgpu/src/quad.rs
View file

@ -5,6 +5,7 @@ use gradient::Gradient;
use solid::Solid;
use crate::core::{Background, Rectangle};
use crate::graphics::color;
use crate::graphics::{self, Transformation};
use bytemuck::{Pod, Zeroable};
@ -217,7 +218,7 @@ pub struct Quad {
pub size: [f32; 2],
/// The border color of the [`Quad`], in __linear RGB__.
pub border_color: [f32; 4],
pub border_color: color::Packed,
/// The border radii of the [`Quad`].
pub border_radius: [f32; 4],
@ -250,7 +251,7 @@ impl Batch {
let kind = match background {
Background::Color(color) => {
self.solids.push(Solid {
color: color.into_linear(),
color: color::pack(*color),
quad,
});

3
wgpu/src/quad/solid.rs
View file

@ -1,3 +1,4 @@
use crate::graphics::color;
use crate::quad::{self, Quad};
use crate::Buffer;
@ -9,7 +10,7 @@ use std::ops::Range;
#[repr(C)]
pub struct Solid {
/// The background color data of the quad.
pub color: [f32; 4],
pub color: color::Packed,
/// The [`Quad`] data of the [`Solid`].
pub quad: Quad,

4
wgpu/src/text.rs
View file

@ -2,6 +2,7 @@ use crate::core::alignment;
use crate::core::font::{self, Font};
use crate::core::text::{Hit, LineHeight, Shaping};
use crate::core::{Pixels, Point, Rectangle, Size};
use crate::graphics::color;
use crate::layer::Text;
use rustc_hash::{FxHashMap, FxHashSet};
@ -155,7 +156,8 @@ impl Pipeline {
bottom: (clip_bounds.y + clip_bounds.height) as i32,
},
default_color: {
let [r, g, b, a] = section.color.into_linear();
let [r, g, b, a] =
color::pack(section.color).components();
glyphon::Color::rgba(
(r * 255.0) as u8,

22
wgpu/src/window/compositor.rs
View file

@ -1,6 +1,7 @@
//! Connect a window with a renderer.
use crate::core::Color;
use crate::graphics;
use crate::graphics::color;
use crate::graphics::compositor;
use crate::graphics::{Error, Primitive, Viewport};
use crate::{Backend, Renderer, Settings};
@ -69,16 +70,19 @@ impl<Theme> Compositor<Theme> {
let format = compatible_surface.as_ref().and_then(|surface| {
let capabilities = surface.get_capabilities(&adapter);
capabilities
.formats
.iter()
.copied()
.find(wgpu::TextureFormat::is_srgb)
.or_else(|| {
log::warn!("No sRGB format found!");
let mut formats = capabilities.formats.iter().copied();
capabilities.formats.first().copied()
})
let format = if color::GAMMA_CORRECTION {
formats.find(wgpu::TextureFormat::is_srgb)
} else {
formats.find(|format| !wgpu::TextureFormat::is_srgb(format))
};
format.or_else(|| {
log::warn!("No format found!");
capabilities.formats.first().copied()
})
})?;
log::info!("Selected format: {:?}", format);