Skip to content

gpui behaves different from simple alpha composite #33050

Open
@AbrasiveBoar902

Description

@AbrasiveBoar902

Summary

Have several questions about color blending in gpui.

Description

  1. Put transparent rectagles together, and the blended color is strange.
impl Render for Test {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        div()
            .h_full()
            .w_full()
            .bg(rgba(0xE0E0E0FF))
            .flex()
            .child(
                div()
                    .bg(gpui::red().alpha(0.5))
                    .h(px(100.0))
                    .w(px(100.0))
                    .flex()
                    .child(
                        div()
                            .bg(gpui::blue().alpha(0.5))
                            .h(px(50.0))
                            .w(px(50.0))
                            .m(px(25.0))
                    )
            )
    }
}
  1. Rgba::blend seems neither an simple alpha blend nor an premultiplied simple alpha blend. I think at least alpha of the both colors will contribute to the composited alpha channel.
    pub fn blend(&self, other: Rgba) -> Self {
    if other.a >= 1.0 {
    other
    } else if other.a <= 0.0 {
    return *self;
    } else {
    return Rgba {
    r: (self.r * (1.0 - other.a)) + (other.r * other.a),
    g: (self.g * (1.0 - other.a)) + (other.g * other.a),
    b: (self.b * (1.0 - other.a)) + (other.b * other.a),
    a: self.a,
    };
    }
    }

Expected Behavior:
Blend in figma, the same as examples from w3c compositing and blending
Image

Actual Behavior:
The color of the red and purple part are both different from the examples
Image

Zed Version and System Specs

gpui latest from git

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions