Skip to content

Semi-transparent pixels of image appear too bright? #5751

@mccolljr

Description

@mccolljr

Describe the bug
Apologies if there is a similar issue open - I searched, but I'm decidedly not a color space expert and I'm not 100% sure what terms apply to this problem.

I have a test .png image with a transparent background and some semi-transparent pixels:

Original Image (wasn't sure how best to attach - you can do right click -> "Save Image As..."):

Image

I load it into my eframe application like so:

let image_data =
    image::load_from_memory(include_bytes!("./test_transparency.png")).unwrap().to_rgba();

let (width, height) = image_data.dimensions();

let tex_manager = egui_ctx.tex_manager();
let mut tex_manager = tex_manager.write();

let image_from_png = tex_manager.alloc(
    "test_transparency.png".to_string(),
    egui::ColorImage::from_rgba_unmultiplied(
        [width as usize, height as usize],
        image_dat.as_flat_samples().as_slice(),
    )
    .into(),
    egui::TextureOptions::default(),
);

I draw it to the screen later like so:

// draw the background color region
painter.image(
    egui::TextureId::default(),
    display_rect,
    egui::Rect::from_min_max(egui::epaint::WHITE_UV, egui::epaint::WHITE_UV),
    egui::Color32::DARK_GRAY, //<-- THE BACKGROUND COLOR
);

// draw the foreground image
painter.image(
    self.image_from_png,
    display_rect,
    egui::Rect::from_min_max(egui::pos2(0., 0.), egui::pos2(1., 1.)),
    egui::Color32::WHITE,
);

Some of the semi-transparent pixels appear a lot brighter than I expect when the image is drawn on top of certain background colors. I was expecting something more similar to how this image appears in an image editor or in the browser. I'm not sure if this is a bug, something I've done wrong in loading the image, or some third unknown option.

For reference, here are screenshots of what it looks like in my egui window:

Result over `Color32::WHITE`

Image

Result over `Color32::LIGHT_GRAY`

Image

Result over `Color32::DARK_GRAY`

Image

Result over `Color32::BLACK`

Image

And here are screenshots of what it looks like if I display this image in a browser over the different background colors:

Rendered in browser with `rgb(255, 255, 255)` background

Image

Rendered in browser with `rgb(220, 220, 220)` background

Image

Rendered in browser with `rgb(96, 96, 96)` background

Image

Rendered in browser with `rgb(0, 0, 0)` background

Image

I'm on a M2 Macbook Pro running OSX 15.3.1 (this also was happening on 14).
I'm using eframe with winit and the wgpu backend.

Metadata

Metadata

Assignees

Labels

bugSomething is brokenvisualsRenderings / graphics releated

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions