Merge pull request #2231 from Koranir/transparency-fix

Fix alpha mode misconfiguration in wgpu renderer

Author: hecrj

CHANGELOG.md

@@ -103,6 +103,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Subscription::map` using unreliable function pointer hash to identify mappers. [#2237](https://github.com/iced-rs/iced/pull/2237)
 - Missing feature flag docs for `time::every`. [#2188](https://github.com/iced-rs/iced/pull/2188)
 - Event loop not being resumed on Windows while resizing. [#2214](https://github.com/iced-rs/iced/pull/2214)
+- Alpha mode misconfiguration in `iced_wgpu`. [#2231](https://github.com/iced-rs/iced/pull/2231)
 
 Many thanks to...
 
@@ -134,6 +135,7 @@ Many thanks to...
 - @jim-ec
 - @joshuamegnauth54
 - @jpttrssn
+- @Koranir
 - @lufte
 - @matze
 - @MichalLebeda

examples/gradient/Cargo.toml

@@ -5,4 +5,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
+iced.features = ["debug"]
+
+tracing-subscriber = "0.3"

examples/gradient/src/main.rs

@@ -1,25 +1,39 @@
-use iced::gradient;
-use iced::widget::{column, container, horizontal_space, row, slider, text};
+use iced::application;
+use iced::theme::{self, Theme};
+use iced::widget::{
+    checkbox, column, container, horizontal_space, row, slider, text,
+};
+use iced::{gradient, window};
 use iced::{
     Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings,
 };
 
 pub fn main() -> iced::Result {
-    Gradient::run(Settings::default())
+    tracing_subscriber::fmt::init();
+
+    Gradient::run(Settings {
+        window: window::Settings {
+            transparent: true,
+            ..Default::default()
+        },
+        ..Default::default()
+    })
 }
 
 #[derive(Debug, Clone, Copy)]
 struct Gradient {
     start: Color,
     end: Color,
     angle: Radians,
+    transparent: bool,
 }
 
 #[derive(Debug, Clone, Copy)]
 enum Message {
     StartChanged(Color),
     EndChanged(Color),
     AngleChanged(Radians),
+    TransparentToggled(bool),
 }
 
 impl Sandbox for Gradient {
@@ -30,6 +44,7 @@ impl Sandbox for Gradient {
             start: Color::WHITE,
             end: Color::new(0.0, 0.0, 1.0, 1.0),
             angle: Radians(0.0),
+            transparent: false,
         }
     }
 
@@ -42,11 +57,19 @@ impl Sandbox for Gradient {
             Message::StartChanged(color) => self.start = color,
             Message::EndChanged(color) => self.end = color,
             Message::AngleChanged(angle) => self.angle = angle,
+            Message::TransparentToggled(transparent) => {
+                self.transparent = transparent;
+            }
         }
     }
 
     fn view(&self) -> Element<Message> {
-        let Self { start, end, angle } = *self;
+        let Self {
+            start,
+            end,
+            angle,
+            transparent,
+        } = *self;
 
         let gradient_box = container(horizontal_space(Length::Fill))
             .width(Length::Fill)
@@ -72,14 +95,34 @@ impl Sandbox for Gradient {
         .padding(8)
         .align_items(Alignment::Center);
 
+        let transparency_toggle = iced::widget::Container::new(
+            checkbox("Transparent window", transparent)
+                .on_toggle(Message::TransparentToggled),
+        )
+        .padding(8);
+
         column![
             color_picker("Start", self.start).map(Message::StartChanged),
             color_picker("End", self.end).map(Message::EndChanged),
             angle_picker,
-            gradient_box
+            transparency_toggle,
+            gradient_box,
         ]
         .into()
     }
+
+    fn style(&self) -> theme::Application {
+        if self.transparent {
+            theme::Application::custom(|theme: &Theme| {
+                application::Appearance {
+                    background_color: Color::TRANSPARENT,
+                    text_color: theme.palette().text,
+                }
+            })
+        } else {
+            theme::Application::Default
+        }
+    }
 }
 
 fn color_picker(label: &str, color: Color) -> Element<'_, Color> {
@@ -91,6 +134,8 @@ fn color_picker(label: &str, color: Color) -> Element<'_, Color> {
             .step(0.01),
         slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } })
             .step(0.01),
+        slider(0.0..=1.0, color.a, move |a| { Color { a, ..color } })
+            .step(0.01),
     ]
     .spacing(8)
     .padding(8)

examples/solar_system/src/main.rs

@@ -88,7 +88,7 @@ impl Application for SolarSystem {
             }
         }
 
-        theme::Application::from(dark_background as fn(&Theme) -> _)
+        theme::Application::custom(dark_background)
     }
 
     fn subscription(&self) -> Subscription<Message> {

style/src/theme.rs

@@ -172,6 +172,15 @@ pub enum Application {
     Custom(Box<dyn application::StyleSheet<Style = Theme>>),
 }
 
+impl Application {
+    /// Creates a custom [`Application`] style.
+    pub fn custom(
+        custom: impl application::StyleSheet<Style = Theme> + 'static,
+    ) -> Self {
+        Self::Custom(Box::new(custom))
+    }
+}
+
 impl application::StyleSheet for Theme {
     type Style = Application;
 
@@ -196,14 +205,6 @@ impl<T: Fn(&Theme) -> application::Appearance> application::StyleSheet for T {
     }
 }
 
-impl<T: Fn(&Theme) -> application::Appearance + 'static> From<T>
-    for Application
-{
-    fn from(f: T) -> Self {
-        Self::Custom(Box::new(f))
-    }
-}
-
 /// The style of a button.
 #[derive(Default)]
 pub enum Button {

wgpu/src/window/compositor.rs

@@ -15,6 +15,7 @@ pub struct Compositor {
     device: wgpu::Device,
     queue: wgpu::Queue,
     format: wgpu::TextureFormat,
+    alpha_mode: wgpu::CompositeAlphaMode,
 }
 
 impl Compositor {
@@ -61,25 +62,48 @@ impl Compositor {
 
         log::info!("Selected: {:#?}", adapter.get_info());
 
-        let format = compatible_surface.as_ref().and_then(|surface| {
-            let capabilities = surface.get_capabilities(&adapter);
+        let (format, alpha_mode) =
+            compatible_surface.as_ref().and_then(|surface| {
+                let capabilities = surface.get_capabilities(&adapter);
 
-            let mut formats = capabilities.formats.iter().copied();
+                let mut formats = capabilities.formats.iter().copied();
 
-            let format = if color::GAMMA_CORRECTION {
-                formats.find(wgpu::TextureFormat::is_srgb)
-            } else {
-                formats.find(|format| !wgpu::TextureFormat::is_srgb(format))
-            };
+                log::info!("Available formats: {formats:#?}");
 
-            format.or_else(|| {
-                log::warn!("No format found!");
+                let format = if color::GAMMA_CORRECTION {
+                    formats.find(wgpu::TextureFormat::is_srgb)
+                } else {
+                    formats.find(|format| !wgpu::TextureFormat::is_srgb(format))
+                };
 
-                capabilities.formats.first().copied()
-            })
-        })?;
+                let format = format.or_else(|| {
+                    log::warn!("No format found!");
+
+                    capabilities.formats.first().copied()
+                });
+
+                let alpha_modes = capabilities.alpha_modes;
+
+                log::info!("Available alpha modes: {alpha_modes:#?}");
 
-        log::info!("Selected format: {format:?}");
+                let preferred_alpha = if alpha_modes
+                    .contains(&wgpu::CompositeAlphaMode::PostMultiplied)
+                {
+                    wgpu::CompositeAlphaMode::PostMultiplied
+                } else if alpha_modes
+                    .contains(&wgpu::CompositeAlphaMode::PreMultiplied)
+                {
+                    wgpu::CompositeAlphaMode::PreMultiplied
+                } else {
+                    wgpu::CompositeAlphaMode::Auto
+                };
+
+                format.zip(Some(preferred_alpha))
+            })?;
+
+        log::info!(
+            "Selected format: {format:?} with alpha mode: {alpha_mode:?}"
+        );
 
         #[cfg(target_arch = "wasm32")]
         let limits = [wgpu::Limits::downlevel_webgl2_defaults()
@@ -120,6 +144,7 @@ impl Compositor {
             device,
             queue,
             format,
+            alpha_mode,
         })
     }
 
@@ -249,7 +274,7 @@ impl graphics::Compositor for Compositor {
                 present_mode: self.settings.present_mode,
                 width,
                 height,
-                alpha_mode: wgpu::CompositeAlphaMode::Auto,
+                alpha_mode: self.alpha_mode,
                 view_formats: vec![],
                 desired_maximum_frame_latency: 2,
             },