CentralPanel not display

[pulsexlb]

i'm trying to create an Area by

let area = egui::Area::new(“areaid”)
    .movable(true)
    .kind(UiKind::Window)
    .default_size((200., 100.));
area.show(contexts.ctx_mut(), |ui| {
    // title bar
    egui::TopBottomPanel::top(format!("titlebar", entity)).show_inside(ui, |ui| {
        ui.label("1"); // display normally
    });
    // context
    egui::CentralPanel::default().show_inside(ui, |ui| {
        ui.label("2"); // not displayed
    });
});

but CentralPanel did not displayed

i found that the problem seems to be that CentralPanel has not obtained any space. If I add some content after CentralPanel (such as some empty labels), this part of CentralPanel will be displayed normally (overlapping with these added labels).

[elgar328]

I had the same issue. I modified the render_to_image_widget example code slightly and confirmed that the central panel is working correctly.

use bevy::{
    prelude::*,
    render::{
        camera::RenderTarget,
        render_resource::{
            Extent3d, TextureDescriptor, TextureDimension, TextureFormat, TextureUsages,
        },
        view::RenderLayers,
    },
};
use bevy_egui::{
    egui::{self, Widget},
    EguiContexts, EguiGlobalSettings, EguiPlugin, EguiPrimaryContextPass, EguiUserTextures,
    PrimaryEguiContext,
};

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_plugins(EguiPlugin::default())
        .add_systems(Startup, setup_system)
        .add_systems(
            EguiPrimaryContextPass,
            (rotator_system, render_to_image_example_system),
        )
        .run();
}

// Marks the preview pass cube.
#[derive(Component)]
struct PreviewPassCube;

#[derive(Deref, Resource)]
struct CubePreviewImage(Handle<Image>);

fn setup_system(
    mut egui_user_textures: ResMut<EguiUserTextures>,
    mut commands: Commands,
    mut meshes: ResMut<Assets<Mesh>>,
    mut materials: ResMut<Assets<StandardMaterial>>,
    mut images: ResMut<Assets<Image>>,
    mut egui_global_settings: ResMut<EguiGlobalSettings>,
) {
    // Disable the automatic creation of a primary context to set it up manually for the camera we need.
    egui_global_settings.auto_create_primary_context = false;

    let size = Extent3d {
        width: 512,
        height: 512,
        ..default()
    };

    // This is the texture that will be rendered to.
    let mut image = Image {
        texture_descriptor: TextureDescriptor {
            label: None,
            size,
            dimension: TextureDimension::D2,
            format: TextureFormat::Bgra8UnormSrgb,
            mip_level_count: 1,
            sample_count: 1,
            usage: TextureUsages::TEXTURE_BINDING
                | TextureUsages::COPY_DST
                | TextureUsages::RENDER_ATTACHMENT,
            view_formats: &[],
        },
        ..default()
    };

    // fill image.data with zeroes
    image.resize(size);

    let image_handle = images.add(image);
    egui_user_textures.add_image(image_handle.clone());
    commands.insert_resource(CubePreviewImage(image_handle.clone()));

    let cube_handle = meshes.add(Cuboid::new(4.0, 4.0, 4.0));
    let default_material = StandardMaterial {
        base_color: Color::srgb(0.8, 0.7, 0.6),
        reflectance: 0.02,
        unlit: false,
        ..default()
    };
    let preview_material_handle = materials.add(default_material.clone());

    // This specifies the layer used for the preview pass, which will be attached to the preview pass camera and cube.
    let preview_pass_layer = RenderLayers::layer(1);

    // The cube that will be rendered to the texture.
    commands
        .spawn((
            Mesh3d(cube_handle),
            MeshMaterial3d(preview_material_handle),
            Transform::from_translation(Vec3::new(0.0, 0.0, 1.0)),
        ))
        .insert(PreviewPassCube)
        .insert(preview_pass_layer.clone());

    // The same light is reused for both passes,
    // you can specify different lights for preview and main pass by setting appropriate RenderLayers.
    commands
        .spawn((
            PointLight::default(),
            Transform::from_translation(Vec3::new(0.0, 0.0, 10.0)),
        ))
        .insert(RenderLayers::default().with(1));

    commands
        .spawn((
            Camera3d::default(),
            Camera {
                // render before the "main pass" camera
                order: -1,
                target: RenderTarget::Image(image_handle.into()),
                clear_color: ClearColorConfig::Custom(Color::srgba(1.0, 1.0, 1.0, 0.0)),
                ..default()
            },
            Transform::from_translation(Vec3::new(0.0, 0.0, 15.0))
                .looking_at(Vec3::default(), Vec3::Y),
        ))
        .insert(preview_pass_layer);

    // The main pass camera (only for UI, no 3D rendering).
    commands.spawn((
        PrimaryEguiContext,
        Camera3d::default(),
        Camera {
            clear_color: ClearColorConfig::None, // Don't clear the screen
            ..default()
        },
    ));
}

fn render_to_image_example_system(
    cube_preview_image: Res<CubePreviewImage>,
    preview_cube_query: Query<&MeshMaterial3d<StandardMaterial>, With<PreviewPassCube>>,
    mut materials: ResMut<Assets<StandardMaterial>>,
    mut contexts: EguiContexts,
) -> Result {
    let cube_preview_texture_id = contexts.image_id(&cube_preview_image).unwrap();
    let preview_material_handle = preview_cube_query.single()?;
    let preview_material = materials.get_mut(preview_material_handle).unwrap();

    let ctx = contexts.ctx_mut()?;
    egui::CentralPanel::default().show(ctx, |ui| {
        ui.image(egui::load::SizedTexture::new(
            cube_preview_texture_id,
            egui::vec2(300., 300.),
        ));
        egui::Grid::new("preview").show(ui, |ui| {
            ui.label("Base color:");
            color_picker_widget(ui, &mut preview_material.base_color);
            ui.end_row();

            ui.label("Emissive:");
            let mut emissive_color = Color::from(preview_material.emissive);
            color_picker_widget(ui, &mut emissive_color);
            preview_material.emissive = emissive_color.into();
            ui.end_row();

            ui.label("Perceptual roughness:");
            egui::Slider::new(&mut preview_material.perceptual_roughness, 0.089..=1.0).ui(ui);
            ui.end_row();

            ui.label("Reflectance:");
            egui::Slider::new(&mut preview_material.reflectance, 0.0..=1.0).ui(ui);
            ui.end_row();

            ui.label("Unlit:");
            ui.checkbox(&mut preview_material.unlit, "");
            ui.end_row();
        });
    });

    Ok(())
}

fn color_picker_widget(ui: &mut egui::Ui, color: &mut Color) -> egui::Response {
    let [r, g, b, a] = Srgba::from(*color).to_f32_array();
    let mut egui_color: egui::Rgba = egui::Rgba::from_srgba_unmultiplied(
        (r * 255.0) as u8,
        (g * 255.0) as u8,
        (b * 255.0) as u8,
        (a * 255.0) as u8,
    );
    let res = egui::widgets::color_picker::color_edit_button_rgba(
        ui,
        &mut egui_color,
        egui::color_picker::Alpha::Opaque,
    );
    let [r, g, b, a] = egui_color.to_srgba_unmultiplied();
    *color = Color::srgba(
        r as f32 / 255.0,
        g as f32 / 255.0,
        b as f32 / 255.0,
        a as f32 / 255.0,
    );
    res
}

// Rotates the preview cube.
fn rotator_system(time: Res<Time>, mut query: Query<&mut Transform, With<PreviewPassCube>>) {
    for mut transform in &mut query {
        transform.rotate_x(1.5 * time.delta_secs());
        transform.rotate_z(1.3 * time.delta_secs());
    }
}