Bevy Transparent Window not working

[Maufeat]

Bevy version

0.12.1

What you did

Running the "transparent_window" example.

What went wrong

Window is not transparent.

Additional information

[alice-i-cecile]

What OS are you on? Can you reproduce this on main following the winit 0.29 update?

[Maufeat]

What OS are you on? Can you reproduce this on main following the winit 0.29 update?

Thanks for the reply. I am on Windows 11 Home. I have quickly downloaded the recent Bevy main-branch, but the same result here.

[Maufeat]

Looks like this is the issue from winit: https://github.com/rust-windowing/winit/issues/2960

[tim-blackbird]

https://github.com/rust-windowing/winit/issues/2960 shouldn't affect us. It only affects winit's own examples

Can confirm transparency is broken on main with Windows 10. I remember it working at some point.

[tim-blackbird]

Appears to be an issue with wgpu not correctly detecting surface capabilities. SurfaceCapabilities::alpha_modes only contains Opaque on my machine, Windows 10, nvidia gpu.

[mockersf]

transparent windows work on main on macos

[tim-blackbird]

Broken on Wayland as well, but working on X11 natively and via XWayland.

[TeamDman]

This discussion https://github.com/bevyengine/bevy/discussions/9696#discussioncomment-6920260 points to this PR https://github.com/rust-windowing/winit/pull/2895 and searching that repo for open PRs on transparency leads to this open PR https://github.com/rust-windowing/winit/pull/2503 which attempts to fix the winit transparency example but it just makes everything transparent not just the background

There's also this issue https://github.com/gfx-rs/wgpu/issues/3486 which may be relevant

[torsteingrindvik]

I had this problem on XFCE and I was debugging it within winit since their example didn't work for me either.

Turns out my problem was very simple... I had disabled my compositor. So in my case I just had to run the OS's Window Manager Tweaks program and enable display compositing.

[rydb]

I'm facing a similar issue running this example and getting window transparency on linux as well.

I've tried x11, wayland, and I tried switching from gnome to KDE, and I still can't get transparency to work.

minimizing transparency to just:

        app
        .add_plugins(DefaultPlugins
        .set(
            WindowPlugin {
                primary_window: Some(
                    Window {
                        transparent: true,
                        composite_alpha_mode: bevy::window::CompositeAlphaMode::PostMultiplied,
                        ..default()
                    }
                ),
                ..default()
            }
        )

causes an error:

thread 'main' panicked at ~/.cargo/registry/src/index.crates.io-6f17d22bba15001f/wgpu-0.19.3/src/backend/wgpu_core.rs:724:18:
Error in Surface::configure: Validation Error

Caused by:
    Requested alpha mode PostMultiplied is not in the list of supported alpha modes: [Opaque]

I've also tried setting the backend target to vulkan, and the issue still persists.

[bas-ie]

@rydb Purely by trial and error, I discovered that (on Wayland at least) setting mode to PreMultiplied is the secret sauce, otherwise I could only get X11 working.

[rydb]

@rydb Purely by trial and error, I discovered that (on Wayland at least) setting mode to PreMultiplied is the secret sauce, otherwise I could only get X11 working.

the problem I have is that is not selectable either. its Opaque only on my end.

[Lightnet]

I got the same bug for windows 10 64bit. Use the same file from https://github.com/bevyengine/bevy/blob/main/examples/window/transparent_window.rs as well with the https://github.com/bevyengine/bevy/blob/main/examples/window/multiple_windows.rs

The first window fail to do transparent. Second window works. Just trying see what wrong. I did look at the youtube video example that was months ago. https://www.youtube.com/watch?v=Sljhkwu3WDo

0.13.2

use bevy::{prelude::*, render::camera::RenderTarget, window::{CompositeAlphaMode, WindowRef}};
#[cfg(target_os = "macos")]
use bevy::window::CompositeAlphaMode;

fn main() {
    App::new()
        .insert_resource(ClearColor(Color::NONE))
        //.insert_resource(ClearColor(Color::Rgba {red: 0.0, green:0.0, blue: 100.0, alpha: 255.0 }))
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                // Setting `transparent` allows the `ClearColor`'s alpha value to take effect
                transparent: true,
                // Disabling window decorations to make it feel more like a widget than a window
                //decorations: false,
                window_level: bevy::window::WindowLevel::AlwaysOnTop,
                composite_alpha_mode: CompositeAlphaMode::Auto,
                #[cfg(target_os = "macos")]
                composite_alpha_mode: CompositeAlphaMode::PostMultiplied,
                ..default()
            }),
            ..default()
        }))
        // ClearColor must have 0 alpha, otherwise some color will bleed through

        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    //commands.spawn(Camera2dBundle::default());
    let first_window_camera = commands.spawn(Camera2dBundle {
      // camera:Camera {
      //   //clear_color: Color::Rgba {red: 0.0, green:0.0, blue: 0.0, alpha: 255.0 },
      //   //clear_color: ClearColorConfig::None,
      //   //clear_color: ClearColorConfig::Custom(Color::rgba(0.0, 0.0, 0.0, 255.0)),
      //   ..Default::default()
      // },
      ..Default::default()
    }).id();

    commands.spawn(SpriteBundle {
        texture: asset_server.load("branding/icon.png"),
        ..default()
    });

    // Spawn a second window
    let second_window = commands
        .spawn(Window {
            title: "Second window".to_owned(),
            transparent: true,
            composite_alpha_mode: CompositeAlphaMode::Auto,
            ..default()
        })
        .id();

    let second_window_camera = commands
    .spawn(Camera3dBundle {
        transform: Transform::from_xyz(6.0, 0.0, 0.0).looking_at(Vec3::ZERO, Vec3::Y),
        camera: Camera {
            target: RenderTarget::Window(WindowRef::Entity(second_window)),
            ..default()
        },
        ..default()
    })
    .id();

   // Since we are using multiple cameras, we need to specify which camera UI should be rendered to
   commands
   .spawn((NodeBundle::default(), TargetCamera(first_window_camera)))
   .with_children(|parent| {
       parent.spawn(TextBundle::from_section(
           "First window",
           TextStyle::default(),
       ));
   });

    commands
    .spawn((NodeBundle::default(), TargetCamera(second_window_camera)))
    .with_children(|parent| {
        parent.spawn(TextBundle::from_section(
            "Second window",
            TextStyle::default(),
        ));
    });

}

I wonder how DefaultPlugins and entity commands.spawn window any different setup?

[khassar00]

The following text was generated by automatic translation. My computer is nvdia gpu and windows, the following code succeeds. Amd gpu may also succeed.

    let mut wgpu_settings = WgpuSettings::default();
    wgpu_settings.backends = Some(Backends::VULKAN);
    App::new()
        // ClearColor must have 0 alpha, otherwise some color will bleed through
        .insert_resource(ClearColor(Color::NONE))
        .add_systems(Startup, setup)
        .add_plugins(
            DefaultPlugins
                .set(WindowPlugin {
                    primary_window: Some(Window {
                        // Setting `transparent` allows the `ClearColor`'s alpha value to take effect
                        transparent: true,
                        // Disabling window decorations to make it feel more like a widget than a window
                        decorations: false,
                        present_mode: PresentMode::Mailbox,
                        #[cfg(target_os = "macos")]
                        composite_alpha_mode: CompositeAlphaMode::PostMultiplied,
                        ..default()
                    }),
                    ..default()
                })
                .set(RenderPlugin {
                    render_creation: RenderCreation::Automatic(wgpu_settings),
                    synchronous_pipeline_compilation: false,
                }),
        )
        .run();

unfortunately, my computer other backend cannot succeed, because only support CompositeAlphaMode: : Opaque mode. vulkan backend can succeed because vulkan ignored CompositeAlphaMode: : Opaque. If using PresentMode::Fifo causes DXGI Swapchain to be enabled, even vulkan backend, transparency will not take effect.

[khassar00]

Previously windows platform transparent window worked, probably because the driver did not support DXGI Swapchain by default.

[TeamDman]

Still not working for me

OS Name:                   Microsoft Windows 10 Pro
OS Version:                10.0.19045 N/A Build 19045
OS Manufacturer:           Microsoft Corporation

[bas-ie]

Hrm, I'll check on Wayland again with 0.15.0-dev in case there's a regression, I know it's working on Linux in 0.14.2 so may be "a Windows thing"...

[bas-ie]

Still working on XWayland with an AMD card. NVIDIA kind of dies a horrible death, but I don't think that's terribly unexpected:

2024-10-06T21:20:26.210887Z  INFO bevy_diagnostic::system_information_diagnostics_plugin::internal: SystemInfo { os: "Linux  Arch Linux", kernel: "6.11.1-arch1-1", cpu: "12th Gen Intel(R) Core(TM) i7-12700H", core_count: "14", memory: "31.1 GiB" }
2024-10-06T21:20:26.218416Z  WARN winit::platform_impl::linux::x11::xdisplay: error setting XSETTINGS; Xft options won't reload automatically
2024-10-06T21:20:26.323972Z ERROR wgpu_hal::gles::egl: EGL 'eglCreateSyncKHR' code 0x3004: EGL_BAD_ATTRIBUTE error: In eglCreateSyncKHR: EGL_SYNC_NATIVE_FENCE_FD_ANDROID specified valid fd butEGL_SYNC_STATUS is also being set

2024-10-06T21:20:26.417886Z  INFO bevy_render::renderer: AdapterInfo { name: "NVIDIA RTX A1000 Laptop GPU", vendor: 4318, device: 9657, device_type: DiscreteGpu, driver: "NVIDIA", driver_info: "560.35.03", backend: Vulkan }
2024-10-06T21:20:27.215170Z  INFO bevy_winit::system: Creating new window "App" (0v1#4294967296)
2024-10-06T21:20:27.215312Z  INFO winit::platform_impl::linux::x11::window: Guessed window scale factor: 1.9166666666666667
thread 'Compute Task Pool (5)' panicked at /home/basie/.local/share/cargo/registry/src/index.crates.io-6f17d22bba15001f/wgpu-22.1.0/src/backend/wgpu_core.rs:786:18:
Error in Surface::configure: Validation Error

Caused by:
  Requested alpha mode PreMultiplied is not in the list of supported alpha modes: [Opaque]

note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
Encountered a panic in system `bevy_render::view::window::create_surfaces`!
2024-10-06T21:20:27.476471Z ERROR wgpu_hal::vulkan::instance: VALIDATION [VUID-VkShaderModuleCreateInfo-pCode-08739 (0x605314fa)]
    Validation Error: [ VUID-VkShaderModuleCreateInfo-pCode-08739 ] | MessageID = 0x605314fa | vkCreateShaderModule():  SPIR-V has Capability (Shader) declared, but this is not supported by Vulkan. The Vulkan spec states: If pCode is a pointer to SPIR-V code, pCode must not declare any capability that is not supported by the API, as described by the Capabilities section of the SPIR-V Environment appendix (https://www.khronos.org/registry/vulkan/specs/1.3-extensions/html/vkspec.html#VUID-VkShaderModuleCreateInfo-pCode-08739)    
corrupted double-linked list
[1]    28581 IOT instruction (core dumped)  cargo run --example transparent_window

I'll look into Windows behaviour, I still have a Windows laptop floating around. Will open a PR if I can see an obvious remedy.

[TeamDman]

Potentially helpful reference is glutin whose window example successfully does transparency on Windows

[khassar00]

Potentially helpful reference is glutin whose window example successfully does transparency on Windows

You should look at CompositeAlphaMode