Rendering bugs when abusing custom UI material

[tigregalis]

Bevy version

0.12.0

Relevant system information

2023-11-07T12:29:00.521816Z  INFO bevy_render::renderer: AdapterInfo { name: "NVIDIA GeForce RTX 2070 with Max-Q Design", vendor: 4318, device: 8016, device_type: DiscreteGpu, driver: "NVIDIA", driver_info: 
"512.78", backend: Vulkan }
2023-11-07T12:29:00.874123Z  INFO bevy_diagnostic::system_information_diagnostics_plugin::internal: SystemInfo { os: "Windows 10 Home", kernel: "19045", cpu: "Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz", core_count: "6", memory: "15.9 GiB" }

What you did

I started with the UI Material example.

use bevy::{
    prelude::*,
    render::render_resource::{AsBindGroup, ShaderRef},
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(UiMaterialPlugin::<CustomUiMaterial>::default())
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands, mut ui_materials: ResMut<Assets<CustomUiMaterial>>) {
    // Camera so we can see UI
    commands.spawn(Camera2dBundle::default());

    let button = commands
        .spawn((
            ButtonBundle {
                style: Style {
                    width: Val::Px(250.0),
                    height: Val::Px(250.0),
                    ..default()
                },
                ..default()
            },
            ui_materials.add(CustomUiMaterial {
                color: Color::WHITE.into(),
            }),
        ))
        .id();

    let circle = commands
        .spawn(MaterialNodeBundle {
            style: Style {
                width: Val::Px(250.0),
                height: Val::Px(250.0),
                ..default()
            },
            material: ui_materials.add(CustomUiMaterial {
                color: Color::rgb(0.0, 1.0, 0.58).into(),
            }),
            ..default()
        })
        .id();

    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            ..default()
        })
        .add_child(circle)
        .add_child(button);
}

#[derive(AsBindGroup, Asset, TypePath, Debug, Clone)]
struct CustomUiMaterial {
    #[uniform(0)]
    color: Vec4,
}

impl UiMaterial for CustomUiMaterial {
    fn fragment_shader() -> ShaderRef {
        "shaders/circle_shader.wgsl".into()
    }
}

Curious to see if I could attach shaders to existing bevy_ui bundles, and bypass MaterialUiBundle, I attempted to add a Handle<CustomUiMaterial> to a ButtonBundle to see what it would do. I got a white square, and figured I was doing something I shouldn't be anyway, perhaps the other components (background_color / border_color / image) were drawing over it or something. I figured that was somewhat expected behaviour. Then I decided to put them side by side, and encountered some less expected behaviour.

What went wrong

    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            ..default()
        })
        .add_child(circle)
        .add_child(button);

draws:

but swapping the children

    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            ..default()
        })
        .add_child(button)
        .add_child(circle);

draws:

We can see that the circle still takes up space, but isn't rendered.

Using other combinations, e.g.

        .add_child(circle)
        .add_child(circle2)
        .add_child(button)
        .add_child(button2)
        .add_child(circle3)
        .add_child(button3);

Additional information

Is it possible the shader is silently crashing as soon as it encounters the ButtonBundle, so using the shader after that fails?

I don't know if this is a bug to fix or just something to be documented.

[mockersf]

Could you try on latest main? I fixed two bugs on UI Material (#10421 and #10422) and this could look like the second one

In all your examples you kept the button with both a Handle<YourCustomUiMaterial> and a BackgroundColor? Then yup that's kinda expected... your entity matches both extractor, then it gets overwritten