Egui in Ui Node (bevy 0.17)

[nuzzles]

Bevy 0.17 introduced a ViewportNode which is very interesting because it means I could render the viewport on a Ui node's render target, and create another Ui node for Egui.

For example, a responsive left sidebar, which affects the viewport size.

Is there any guidance on how I can setup a camera and egui on a Ui node's render target, similar to the new ViewportNode in bevy 0.17?

@vladbat00

[vladbat00]

Hi! I'm not sure if it'll be possible to render egui to a viewport widget out of the box, but I can see that it requires a camera to render to an image. Good news, it's already possible to render egui to an image, as in the following example: https://github.com/vladbat00/bevy_egui/blob/v0.36.0/examples/render_egui_to_image.rs (live: https://vladbat00.github.io/bevy_egui/render_egui_to_image/)

Will it just work if you just pass that egui camera into ViewportNode::new? I'm not sure.. Maybe it'll render, but the inputs won't be passed to that egui context without some additional work (see https://docs.rs/bevy_egui/0.36.0/bevy_egui/input/struct.HoveredNonWindowEguiContext.html and https://docs.rs/bevy_egui/0.36.0/bevy_egui/input/struct.FocusedNonWindowEguiContext.html).

[nuzzles]

Hi! I'm not sure if it'll be possible to render egui to a viewport widget

Just to be clear, I'm not asking to render egui on a viewport widget, I want to render egui to a UI node.

The goal is something like this this:

+-----+--------------------------------------+
|     |                                      |
|     |                                      |
|Egui |                                      |
|Node |           Viewport Node              |
|     |                                      |
|     |                                      |
+-----+--------------------------------------+

• The sidebar is a ui node rendering egui, and has its own camera.
• The viewport ui node is doing the same thing, just rendering the bevy scene, and has its own camera.

@vladbat00

[nuzzles]

I think what I would ultimately like is something like an EguiUiNode, similar to the ViewportNode.

Then, register it with a plugin, e.g.

#[derive(ScheduleLabel)]
pub struct MyEguiContextPass;

let ui_node = UiNode::new(...);
let egui_ui_node = EguiUiNode::from(ui_node);

app.add_egui_node::<MyEguiContextPass>(egui_ui_node);

[vladbat00]

Oh, so you basically need a egui side panel, right?
It's already possible then:
https://vladbat00.github.io/bevy_egui/side_panel/
https://github.com/vladbat00/bevy_egui/blob/v0.36.0/examples/side_panel.rs

Or do you want it to be built on Bevy UI nodes specifically?

[nuzzles]

Oh, so you basically need a egui side panel, right? It's already possible then: https://vladbat00.github.io/bevy_egui/side_panel/ https://github.com/vladbat00/bevy_egui/blob/v0.36.0/examples/side_panel.rs

Or do you want it to be built on Bevy UI nodes specifically?

From my understanding, this renders egui over the viewport, hiding some of the contents, unless you manually, and precisely, manage the size of the viewport.

This feels like a limitation.

    let pos = UVec2::new(left as u32, top as u32);
    let size = UVec2::new(window.physical_width(), window.physical_height())
        - pos
        - UVec2::new(right as u32, bottom as u32);

    camera.viewport = Some(Viewport {
        physical_position: pos,
        physical_size: size,
        ..default()
    });

https://github.com/vladbat00/bevy_egui/blob/v0.36.0/examples/side_panel.rs#L100-L108

I am hoping to do dynamic sizing, where bevy's UI system does layouting. This would remove the need for manual calculation.

So yes, I would like to build on a Bevy UI node specifically.

[vladbat00]

Hm, I see. There might be an option to do that based on egui widget responses: e.g. we render a side panel on the left, and the rest is taken by another egui frame that just renders an image as a user egui texture. And that image will be a target for a Bevy camera. But I'm not sure what would be the API yet. I think that some glue code will be expected from users anyway, but maybe with the right helper functions we can make it as simple as:

set_viewport_rect(&mut camera.viewport, ui.image(...).rect);

So there's still no Bevy UI involved, but from what I understand it's not a strong requirement, you just want to have a better user experience with setting camera viewport based on egui widget sizes - is that correct?

I'm not sure how soon I'll be ready to explore this myself, but if anyone wants to tackle this, I'm happy to accept a PR.