Skip to content

[classic] Support gradient interpolation in unpremultiplied alpha space #1268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[classic] Support gradient interpolation in unpremultiplied alpha space #1268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7edc30
[classic] Support unpremultiplied gradient interpolation in
sagudev Oct 6, 2025
2536e30
huh
sagudev Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,3 +151,6 @@ console_log = "1.0"
proc-macro2 = "1.0.95"
syn = { version = "2.0.101", features = ["full", "extra-traits"] }
quote = "1.0.40"

[patch.crates-io]
peniko = { git = "https://github.com/sagudev/peniko", branch = "interp-eq-hash" }
122 changes: 62 additions & 60 deletions vello_encoding/src/encoding.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,12 +126,14 @@ impl Encoding {
draw_data_offset: offset,
stops,
extend,
interpolation_alpha_space,
} => {
let stops = stops.start + stops_base..stops.end + stops_base;
Patch::Ramp {
draw_data_offset: offset + offsets.draw_data,
stops,
extend: *extend,
interpolation_alpha_space: *interpolation_alpha_space,
}
}
Patch::GlyphRun { index } => Patch::GlyphRun {
Expand Down Expand Up @@ -286,65 +288,60 @@ impl Encoding {
};
self.encode_color(color);
}
BrushRef::Gradient(gradient) => {
if gradient.interpolation_alpha_space != InterpolationAlphaSpace::Premultiplied {
unimplemented!(
"We don't yet support gradient interpolation which isn't premultiplied, found {:?}.",
gradient.interpolation_alpha_space
)
BrushRef::Gradient(gradient) => match gradient.kind {
GradientKind::Linear(LinearGradientPosition { start, end }) => {
self.encode_linear_gradient(
DrawLinearGradient {
index: 0,
p0: point_to_f32(start),
p1: point_to_f32(end),
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
gradient.interpolation_alpha_space,
);
}
match gradient.kind {
GradientKind::Linear(LinearGradientPosition { start, end }) => {
self.encode_linear_gradient(
DrawLinearGradient {
index: 0,
p0: point_to_f32(start),
p1: point_to_f32(end),
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
);
}
GradientKind::Radial(RadialGradientPosition {
start_center,
start_radius,
end_center,
end_radius,
}) => {
self.encode_radial_gradient(
DrawRadialGradient {
index: 0,
p0: point_to_f32(start_center),
p1: point_to_f32(end_center),
r0: start_radius,
r1: end_radius,
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
);
}
GradientKind::Sweep(SweepGradientPosition {
center,
start_angle,
end_angle,
}) => {
use core::f32::consts::TAU;
self.encode_sweep_gradient(
DrawSweepGradient {
index: 0,
p0: point_to_f32(center),
t0: start_angle / TAU,
t1: end_angle / TAU,
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
);
}
GradientKind::Radial(RadialGradientPosition {
start_center,
start_radius,
end_center,
end_radius,
}) => {
self.encode_radial_gradient(
DrawRadialGradient {
index: 0,
p0: point_to_f32(start_center),
p1: point_to_f32(end_center),
r0: start_radius,
r1: end_radius,
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
gradient.interpolation_alpha_space,
);
}
}
GradientKind::Sweep(SweepGradientPosition {
center,
start_angle,
end_angle,
}) => {
use core::f32::consts::TAU;
self.encode_sweep_gradient(
DrawSweepGradient {
index: 0,
p0: point_to_f32(center),
t0: start_angle / TAU,
t1: end_angle / TAU,
},
gradient.stops.iter().copied(),
alpha,
gradient.extend,
gradient.interpolation_alpha_space,
);
}
},
BrushRef::Image(image) => {
self.encode_image(image, alpha);
}
Expand All @@ -366,8 +363,9 @@ impl Encoding {
color_stops: impl Iterator<Item = ColorStop>,
alpha: f32,
extend: Extend,
interpolation_alpha_space: InterpolationAlphaSpace,
) {
match self.add_ramp(color_stops, alpha, extend) {
match self.add_ramp(color_stops, alpha, extend, interpolation_alpha_space) {
RampStops::Empty => self.encode_color(palette::css::TRANSPARENT),
RampStops::One(color) => {
self.encode_color(color);
Expand All @@ -387,14 +385,15 @@ impl Encoding {
color_stops: impl Iterator<Item = ColorStop>,
alpha: f32,
extend: Extend,
interpolation_alpha_space: InterpolationAlphaSpace,
) {
// Match Skia's epsilon for radii comparison
const SKIA_EPSILON: f32 = 1.0 / (1 << 12) as f32;
if gradient.p0 == gradient.p1 && (gradient.r0 - gradient.r1).abs() < SKIA_EPSILON {
self.encode_color(palette::css::TRANSPARENT);
return;
}
match self.add_ramp(color_stops, alpha, extend) {
match self.add_ramp(color_stops, alpha, extend, interpolation_alpha_space) {
RampStops::Empty => self.encode_color(palette::css::TRANSPARENT),
RampStops::One(color) => self.encode_color(color),
RampStops::Many => {
Expand All @@ -412,13 +411,14 @@ impl Encoding {
color_stops: impl Iterator<Item = ColorStop>,
alpha: f32,
extend: Extend,
interpolation_alpha_space: InterpolationAlphaSpace,
) {
const SKIA_DEGENERATE_THRESHOLD: f32 = 1.0 / (1 << 15) as f32;
if (gradient.t0 - gradient.t1).abs() < SKIA_DEGENERATE_THRESHOLD {
self.encode_color(palette::css::TRANSPARENT);
return;
}
match self.add_ramp(color_stops, alpha, extend) {
match self.add_ramp(color_stops, alpha, extend, interpolation_alpha_space) {
RampStops::Empty => self.encode_color(palette::css::TRANSPARENT),
RampStops::One(color) => self.encode_color(color),
RampStops::Many => {
Expand Down Expand Up @@ -521,6 +521,7 @@ impl Encoding {
color_stops: impl Iterator<Item = ColorStop>,
alpha: f32,
extend: Extend,
interpolation_alpha_space: InterpolationAlphaSpace,
) -> RampStops {
let offset = self.draw_data.len();
let stops_start = self.resources.color_stops.len();
Expand All @@ -540,6 +541,7 @@ impl Encoding {
draw_data_offset: offset,
stops: stops_start..stops_end,
extend,
interpolation_alpha_space,
});
RampStops::Many
}
Expand Down
54 changes: 41 additions & 13 deletions vello_encoding/src/ramp_cache.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
use std::collections::HashMap;

use peniko::color::cache_key::CacheKey;
use peniko::color::{HueDirection, Srgb};
use peniko::{ColorStop, ColorStops};
use peniko::color::{AlphaColor, HueDirection, Srgb};
use peniko::{ColorStop, ColorStops, InterpolationAlphaSpace};

const N_SAMPLES: usize = 512;
const RETAINED_COUNT: usize = 64;
Expand All @@ -21,7 +21,7 @@ pub struct Ramps<'a> {
#[derive(Default)]
pub(crate) struct RampCache {
epoch: u64,
map: HashMap<CacheKey<ColorStops>, (u32, u64)>,
map: HashMap<(InterpolationAlphaSpace, CacheKey<ColorStops>), (u32, u64)>,
data: Vec<u32>,
}

Expand All @@ -35,14 +35,25 @@ impl RampCache {
}
}

pub(crate) fn add(&mut self, stops: &[ColorStop]) -> u32 {
if let Some(entry) = self.map.get_mut(&CacheKey(stops.into())) {
pub(crate) fn add(
&mut self,
interpolation_alpha_space: InterpolationAlphaSpace,
stops: &[ColorStop],
) -> u32 {
if let Some(entry) = self
.map
.get_mut(&(interpolation_alpha_space, CacheKey(stops.into())))
{
entry.1 = self.epoch;
entry.0
} else if self.map.len() < RETAINED_COUNT {
let id = (self.data.len() / N_SAMPLES) as u32;
self.data.extend(make_ramp(stops));
self.map.insert(CacheKey(stops.into()), (id, self.epoch));
self.data
.extend(make_ramp(stops, interpolation_alpha_space));
self.map.insert(
(interpolation_alpha_space, CacheKey(stops.into())),
(id, self.epoch),
);
id
} else {
let mut reuse = None;
Expand All @@ -57,16 +68,23 @@ impl RampCache {
let start = id as usize * N_SAMPLES;
for (dst, src) in self.data[start..start + N_SAMPLES]
.iter_mut()
.zip(make_ramp(stops))
.zip(make_ramp(stops, interpolation_alpha_space))
{
*dst = src;
}
self.map.insert(CacheKey(stops.into()), (id, self.epoch));
self.map.insert(
(interpolation_alpha_space, CacheKey(stops.into())),
(id, self.epoch),
);
id
} else {
let id = (self.data.len() / N_SAMPLES) as u32;
self.data.extend(make_ramp(stops));
self.map.insert(CacheKey(stops.into()), (id, self.epoch));
self.data
.extend(make_ramp(stops, interpolation_alpha_space));
self.map.insert(
(interpolation_alpha_space, CacheKey(stops.into())),
(id, self.epoch),
);
id
}
}
Expand All @@ -81,7 +99,10 @@ impl RampCache {
}
}

fn make_ramp(stops: &[ColorStop]) -> impl Iterator<Item = u32> + '_ {
fn make_ramp(
stops: &[ColorStop],
interpolation_alpha_space: InterpolationAlphaSpace,
) -> impl Iterator<Item = u32> + '_ {
let mut last_u = 0.0;
let mut last_c = stops[0].color.to_alpha_color::<Srgb>();
let mut this_u = last_u;
Expand All @@ -104,7 +125,14 @@ fn make_ramp(stops: &[ColorStop]) -> impl Iterator<Item = u32> + '_ {
let c = if du < 1e-9 {
this_c
} else {
last_c.lerp(this_c, (u - last_u) / du, HueDirection::default())
match interpolation_alpha_space {
InterpolationAlphaSpace::Premultiplied => {
last_c.lerp(this_c, (u - last_u) / du, HueDirection::default())
}
InterpolationAlphaSpace::Unpremultiplied => {
last_c + (this_c - last_c) * ((u - last_u) / du)
}
}
};
c.premultiply().to_rgba8().to_u32()
})
Expand Down
10 changes: 8 additions & 2 deletions vello_encoding/src/resolve.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0 OR MIT

use bytemuck::{Pod, Zeroable};
use peniko::{Extend, ImageData};
use peniko::{Extend, ImageData, InterpolationAlphaSpace};
use std::ops::Range;
use std::sync::Arc;

Expand Down Expand Up @@ -401,8 +401,12 @@ impl Resolver {
draw_data_offset,
stops,
extend,
interpolation_alpha_space,
} => {
let ramp_id = self.ramp_cache.add(&resources.color_stops[stops.clone()]);
let ramp_id = self.ramp_cache.add(
*interpolation_alpha_space,
&resources.color_stops[stops.clone()],
);
self.patches.push(ResolvedPatch::Ramp {
draw_data_offset: *draw_data_offset + sizes.draw_data,
ramp_id,
Expand Down Expand Up @@ -524,6 +528,8 @@ pub enum Patch {
stops: Range<usize>,
/// Extend mode for the gradient.
extend: Extend,
/// Interpolation alpha space for the gradient.
interpolation_alpha_space: InterpolationAlphaSpace,
},
/// Glyph run resource.
GlyphRun {
Expand Down
Binary file added vello_tests/snapshots/smoke/gradient_color_alpha_unpremultiplied.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 36 additions & 1 deletion vello_tests/tests/known_issues.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ use scenes::ImageCache;
use vello::{
AaConfig, Scene,
kurbo::{Affine, Rect, Triangle},
peniko::{Color, ColorStop, Extend, Gradient, ImageFormat, ImageQuality, Mix, color::palette},
peniko::{
Color, ColorStop, Extend, Gradient, ImageFormat, ImageQuality, InterpolationAlphaSpace,
Mix, color::palette,
},
};
use vello_tests::{TestParams, smoke_snapshot_test_sync, snapshot_test_sync};

Expand Down Expand Up @@ -191,6 +194,38 @@ fn test_gradient_color_alpha() {
.assert_mean_less_than(0.001);
}

/// <https://github.com/web-platform-tests/wpt/blob/18c64a74b1/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html>
/// See <https://github.com/linebender/vello/issues/1056>.
#[test]
#[cfg_attr(skip_gpu_tests, ignore)]
fn test_gradient_color_alpha_unpremultiplied() {
let mut scene = Scene::new();
let viewport = Rect::new(0., 0., 100., 50.);
scene.fill(
vello::peniko::Fill::NonZero,
Affine::IDENTITY,
&Gradient::new_linear((0., 0.), (100., 0.))
.with_stops([
ColorStop {
offset: 0.,
color: Color::from_rgba8(255, 255, 0, 0).into(),
},
ColorStop {
offset: 1.,
color: Color::from_rgba8(0, 0, 255, 255).into(),
},
])
.with_interpolation_alpha_space(InterpolationAlphaSpace::Unpremultiplied),
None,
&viewport,
);
let mut params = TestParams::new("gradient_color_alpha_unpremultiplied", 100, 50);
params.base_color = Some(palette::css::WHITE);
smoke_snapshot_test_sync(scene, &params)
.unwrap()
.assert_mean_less_than(0.001);
}

/// See <https://github.com/linebender/vello/issues/1198>
#[test]
#[cfg_attr(skip_gpu_tests, ignore)]
Expand Down