Bevy version

Commit hash: 619c30c036ddfceb66030922099961bd17b65e35

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.

I reproduced on the M1 mac with chrome and bisected to https://github.com/bevyengine/bevy/pull/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 }

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.

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.

https://user-images.githubusercontent.com/200550/180574370-4f04a1cd-8e0c-4a91-b767-e106e511b6a0.mp4

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.

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

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?

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.

So this seems specific to ANGLE.

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

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 }

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

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.

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.

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

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.

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 f487407e07c15af878e0d6886f9cd4c146f1f94f

I'm pretty convinced that there are two separate issues being described in this ticket. See my update here: https://github.com/gfx-rs/wgpu/issues/2909#issuecomment-1218392581

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" }

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.

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