#egui #winit #vulkano #ui #renderer


Egui immediate mode gui integration with winit and Vulkano

3 releases (breaking)

0.12.0 Oct 4, 2021
0.11.0 Sep 10, 2021
0.1.0 Sep 4, 2021

MIT license



MIT Apache

This is an egui integration for winit and vulkano.

You'll need a Vulkano target image as an input to which the UI will be painted. The aim of this is to allow a simple enough API to separate UI nicely out of your renderer and make it easy to build your immediate mode UI with Egui.


  1. Create your own renderer with Vulkano, and allow access to Vulkano's gfx queue Arc<Queue> and Vulkano's winit surface Arc<Surface<Window>>
  2. Create Gui integration with the surface & gfx queue
// Has its own renderpass (is_overlay = false means that the renderpass will clear the image, true means
// that the caller is responsible for clearing the image
let mut gui = Gui::new(renderer.surface(), renderer.queue(), false);
// Or with subpass
let mut gui = Gui::new_with_subpass(renderer.surface(), renderer.queue(), subpass);
  1. Inside your event loop, update gui integration
event_loop.run(move |event, _, control_flow| {
    // Update Egui integration so the UI works!
    // ...match event {..}
  1. Fill immediate mode UI through the integration in Event::RedrawRequested before you render
gui.immediate_ui(|gui| {
    let ctx = gui.context();
    // Fill egui UI layout here
    // It may be convenient to organize the layout under a stateful GuiState struct (See `wholesome` example)
  1. Render gui via your renderer on any image or most likely on your swapchain images:
renderer.render(&mut gui); //... and inside render function:
// Draw, where
// future = acquired future from previous_frame_end.join(swapchain_acquire_future) and
// image_view_to_draw_on = the final image onto which you wish to render UI, usually e.g.
// self.final_images[image_num].clone() = one of your swap chain images.
let after_future = gui.draw_on_image(future, image_view_to_draw_on);

// Or if you created the integration with subpass
let cb = gui.draw_on_subpass_image(framebuffer_dimensions);
  1. Finish your render by waiting on the future gui.draw returns. See finish function in example renderers. Or in the case of subpass, execute your commands.

See the examples directory for a more wholesome example which uses Vulkano developers' frame system to organize rendering.

Remember, on Linux, you need to install following to run Egui

sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev


cargo run --example wholesome
cargo run --example minimal
cargo run --example subpass


This integration would not have been possible without the examples from vulkano-examples or egui_winit_ash_vk_mem.


~1M SLoC