Background changes color when all entities are despawned

[ViliamVadocz]

Bevy version

Commit hash: 619c30c

Relevant system information

Windows 10, Firefox 102.0.1 (64-bit)

AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0)", vendor: 4318, device: 0, device_type: Other, backend: Gl }

What you did

Snippet to reproduce:

use bevy::{prelude::*, sprite::MaterialMesh2dBundle};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup_system)
        .add_system(bug_system)
        .run();
}

fn setup_system(mut commands: Commands) {
    commands.spawn_bundle(Camera2dBundle::default());
}

#[derive(Component)]
struct Thing;

fn bug_system(
    input: Res<Input<KeyCode>>,
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
    query: Query<Entity, With<Thing>>,
) {
    // Press space to spawn a circle.
    if input.just_pressed(KeyCode::Space) {
        commands
            .spawn_bundle(MaterialMesh2dBundle {
                mesh: meshes.add(shape::Circle::new(50.).into()).into(),
                material: materials.add(ColorMaterial::from(Color::PURPLE)),
                ..default()
            })
            .insert(Thing);
    }
    // Press backspace to remove one of the entities.
    if input.just_pressed(KeyCode::Back) {
        if let Some(entity) = query.into_iter().next() {
            commands.entity(entity).despawn();
        }
    }
}

Compile for web and run it. (You can use wasm-server-runner).
Then press space and backspace. That will spawn and despawn an entity. When there are no entities the background becomes a different color. When you spawn an entity again the background reappears.

What went wrong

The background should not change color when there are no entities. I expected it to stay the same color.

Additional information

The mesh seems important. When I spawn a rectangle with SpriteBundle and remove it, the background does not disappear.

The bug does not happen on Microsoft Edge.
Reportedly does happen on M1 Mac, Chrome.

[rparrett]

I reproduced on the M1 mac with chrome and bisected to #4898

Here's the results of testing with the browsers I have access to. These are all on the same machine.

	OS	Browser	AdapterInfo
Bug	macOS	Chrome 103.0.5060.114	AdapterInfo { name: "ANGLE (Apple, Apple M1 Max, OpenGL 4.1)", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Bug	macOS	Chrome 103.0.5060.134	AdapterInfo { name: "ANGLE (Apple, Apple M1 Max, OpenGL 4.1)", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Ok	macOS	Chrome Canary 105.0.5195.0	AdapterInfo { name: "ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Max, Version 12.2.1 (Build 21D62))", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Ok	macOS	Chrome Canary 105.0.5195.2	AdapterInfo { name: "ANGLE (Apple, ANGLE Metal Renderer: Apple M1 Max, Version 12.2.1 (Build 21D62))", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Ok	macOS	Safari 15.3 (17612.4.9.1.8)	AdapterInfo { name: "Apple GPU", vendor: 0, device: 0, device_type: Other, backend: Gl }
Ok	macOS	Firefox 102.0.1	AdapterInfo { name: "Apple M1", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Ok	macOS	Firefox Nightly 104.0a1	AdapterInfo { name: "Apple M1", vendor: 0, device: 0, device_type: IntegratedGpu, backend: Gl }
Bug	Win10	Firefox 102.0.1 (64-bit)	AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0)", vendor: 4318, device: 0, device_type: Other, backend: Gl }
Bug	Win10	Firefox Nightly 104.0a1 (2022-07-22) (64-bit)	AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0)", vendor: 4318, device: 0, device_type: Other, backend: Gl }
Ok	Win10	Chrome 103.0.5060.134	AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 1660 Direct3D11 vs_5_0 ps_5_0, D3D11)", vendor: 4318, device: 0, device_type: Other, backend: Gl }

[rparrett]

I think it would be more accurate to say that the ClearColor is wrong, not that it disappears. When testing with a very red color, for instance, I see a much darker red color rather than black.

[rparrett]

This seems to affect official bevy examples as well (they are shown with a much darker ClearColor than normal). I also noticed some interesting behavior when switching tabs where the ClearColor will flicker between the normal color and the darker color for a bit.

tabswitch.mp4

[ViliamVadocz]

I think it would be more accurate to say that the ClearColor is wrong, not that it disappears. When testing with a very red color, for instance, I see a much darker red color rather than black.

I don't see that behavior. I always see white after the bug is triggered.

[rparrett]

What version of chrome are you using? I have been testing with Version 103.0.5060.114 but I'm updating now.

[ViliamVadocz]

I reproduced on the M1 mac with chrome and bisected to #4898

Works fine in firefox and safari.

Interesting that it works fine for your Firefox, but not for mine. Is the only difference the OS, or do you have a different version of Firefox as well?

[ViliamVadocz]

What version of chrome are you using? I have been testing with Version 103.0.5060.114 but I'm updating now.

I am using Firefox 102.0.1 (64-bit) on Windows 10, as stated in the issue.

[rparrett]

So this seems specific to ANGLE.

[rparrett]

I am also seeing the wrong ClearColor and flickering in wgpu examples: https://wgpu.rs/examples-gl/?example=mipmap

[ViliamVadocz]

Windows 10, 10.0.19044 Build 19044

Bug 🐛

Firefox 102.0.1 (64-bit)
AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 980 Direct3D11 vs_5_0 ps_5_0)", vendor: 4318, device: 0, device_type: Other, backend: Gl }

No Bug ✔️

Chrome 103.0.5060.134 (Official Build) (64-bit)
AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 1080 Direct3D11 vs_5_0 ps_5_0, D3D11)", vendor: 4318, device: 0, device_type: Other, backend: Gl }

Microsoft Edge 103.0.1264.62 (Official build) (64-bit)
AdapterInfo { name: "ANGLE (NVIDIA, NVIDIA GeForce GTX 1080 Direct3D11 vs_5_0 ps_5_0, D3D11)", vendor: 4318, device: 0, device_type: Other, backend: Gl }

[ViliamVadocz]

Here the issue seems to be that on Firefox the AdapterInfo is wrong, since I have a GeForce GTX 1080, no other GPUs installed.

[ViliamVadocz]

It looks like in your videos you get flickering. I don't get flickering at all.
If the bug happens the color just seems to disappear and I just see the color of the body element of the website.

[rparrett]

I was also able to reproduce your exact experience on my windows machine (gtx 1660). Updated my comment above.

But I don't see the same issues with the wgpu examples. It would probably be helpful if we can find a way to reproduce this reliably in bare wgpu without bevy.

[beoboo]

This produces a similar behavior with just wgpu: you can see the effect on this page at the bottom.

[rparrett]

An easy way to reproduce this now is to click to spawn the first batch of birds in the online bevymark example: https://bevyengine.org/examples/stress-tests/bevymark/

edit: that repro doesn't work for me on windows, but the original repro code in this issue still does.

[jabuwu]

I have a very simple repro of this bug. See here (potential flashing lights warning): https://jabuwu.github.io/bevy_wasm_bug/wasm/index.html

The color becomes a noticeably darker clear color than the usual default clear color, and flashes when there are dropped frames. I can simulate this easily by opening devtools or resizing the window.

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(init)
        .run();
}

fn init(mut commands: Commands) {
    commands.spawn_bundle(Camera2dBundle::default());
    commands.spawn_bundle(SpriteBundle {
        sprite: Sprite {
            custom_size: Vec2::new(16., 16.).into(),
            color: Color::RED,
            ..Default::default()
        },
        ..Default::default()
    });
}

The problem is only on certain platforms (M1 MacOS + Chrome being one of them) and occurs with a non-white clear color and a single entity spawned. An easy workaround is to use a white clear color or cover the clear color with a sprite/skybox/etc.

I bisected the issue back to f487407

[rparrett]

I'm pretty convinced that there are two separate issues being described in this ticket. See my update here: gfx-rs/wgpu#2909 (comment)

[rparrett]

I am honestly concerned that this will trigger a seizure for someone during bevy jam 2.

Anyone experiencing this can work around it by patching in mockersf's wgpu fork:

[patch.crates-io]
wgpu = { git = "https://github.com/mockersf/wgpu/", branch = "unconditional-clear-workaround" }

[rparrett]

With Chrome 107 and Firefox 105 now stable, I am no longer seeing this on my m1 mac. (Also I think an update to macOS 12.6 happened in the meantime)

Would appreciate if someone on Windows could check this out again.

[ViliamVadocz]

I still see this on Windows with Firefox 106.0.2 (64-bit). Using bevy = "0.8".

[rparrett]

@ViliamVadocz are you still able to reproduce this?

I am no longer able to reproduce on the machines I have access to. (testing official deployed web examples for bevy/wgpu as well as the original repro on bevy's main branch).

• Win11 Firefox 127.0.2
• Win11 Chrome 126.0.6478.127
• macOS Firefox 127.0.2
• macOS Chrome 126.0.6478.127

If you are able to reproduce, could you check that the latest wgpu trunk fixes things? See gfx-rs/wgpu#2909 (comment)

Here's an updated version of the original repro for bevy 0.14/current main:

Expand

//! Issue 5426

use bevy::{prelude::*, sprite::MaterialMesh2dBundle};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup_system)
        .add_systems(Update, bug_system)
        .run();
}

fn setup_system(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());
}

#[derive(Component)]
struct Thing;

fn bug_system(
    input: Res<ButtonInput<KeyCode>>,
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<ColorMaterial>>,
    query: Query<Entity, With<Thing>>,
) {
    // Press space to spawn a circle.
    if input.just_pressed(KeyCode::Space) {
        commands
            .spawn(MaterialMesh2dBundle {
                mesh: meshes.add(Circle::new(50.)).into(),
                material: materials.add(ColorMaterial::from(Color::WHITE)),
                ..default()
            })
            .insert(Thing);
    }
    // Press backspace to remove one of the entities.
    if input.just_pressed(KeyCode::Backspace) {
        if let Some(entity) = query.into_iter().next() {
            commands.entity(entity).despawn();
        }
    }
}