Simple Rust/Cargo project example using egui+winit+wgpu?

[kaphula]

Hello,

Anyone got an example app showing how to combine these libraries using the official latest egui crates? Not sure what crates I am supposed to include. Something that also shows how to glue them together to display a simple widget in a winit window.

[atbrakhi]

This might help: https://github.com/hasenbanck/egui_example

[kaphula]

It would if it used the latest egui 0.22 but it uses 0.19. I managed to integrate egui to my application with some trial and error, but I still think there should be an official example for this in the main repo for others to inspect since it is such a commonly used case and the library itself uses these libraries.

[9SMTM6]

doesnt the egui_demo fulfill this? concretly running cargo run --package egui_demo_app --release --no-default-features --features wgpu,wayland,persistence should run on winit, and certainly uses wgpu.

[Gardene-el]

Hi,
I've run into the same difficulty that you've mentioned. I was wondering if you were able to find the examples you needed or if you've come up with a solution? If so, would you mind sharing it with me? I would greatly appreciate any help you could provide.

[kaphula]

Sure, try this struct I wrote. You'll need to setup a basic winit program first that uses wgpu. Also make sure you have these crates as dependencies:

egui-wgpu 
egui-winit 
egui 
wgpu 
winit 

The main struct:

use egui::Context;
use egui_wgpu::renderer::ScreenDescriptor;
use egui_wgpu::Renderer;
use egui_winit::State;
use wgpu::{CommandEncoder, Device, Queue, TextureFormat, TextureView};
use winit::event::WindowEvent;
use winit::window::Window;

pub struct EguiRenderer {
    pub context: Context,
    state: State,
    renderer: Renderer,
}

impl EguiRenderer {
    pub fn new(
        device: &Device,
        output_color_format: TextureFormat,
        output_depth_format: Option<TextureFormat>,
        msaa_samples: u32,
        window: &Window,
    ) -> EguiRenderer {
        let egui_context = Context::default();
        let mut egui_state = egui_winit::State::new(&window);
        egui_state.set_pixels_per_point(window.scale_factor() as f32);
        let egui_renderer = egui_wgpu::renderer::Renderer::new(
            device,
            output_color_format,
            output_depth_format,
            msaa_samples,
        );

        EguiRenderer {
            context: egui_context,
            state: egui_state,
            renderer: egui_renderer,
        }
    }

    pub fn handle_input(&mut self, event: &WindowEvent) {
        self.state.on_event(&self.context, &event);
    }

    pub fn draw(
        &mut self,
        device: &Device,
        queue: &Queue,
        encoder: &mut CommandEncoder,
        window: &Window,
        window_surface_view: &TextureView,
        screen_descriptor: ScreenDescriptor,
        run_ui: impl FnOnce(&Context),
    ) {
        // self.state.set_pixels_per_point(window.scale_factor() as f32);
        let raw_input = self.state.take_egui_input(&window);
        let full_output = self.context.run(raw_input, |ui| {
            run_ui(&self.context);
        });

        self.state
            .handle_platform_output(&window, &self.context, full_output.platform_output);

        let tris = self.context.tessellate(full_output.shapes);
        for (id, image_delta) in &full_output.textures_delta.set {
            self.renderer
                .update_texture(&device, &queue, *id, &image_delta);
        }
        self.renderer
            .update_buffers(&device, &queue, encoder, &tris, &screen_descriptor);
        let mut rpass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
            color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                view: &window_surface_view,
                resolve_target: None,
                ops: wgpu::Operations {
                    load: wgpu::LoadOp::Load,
                    store: true,
                },
            })],
            depth_stencil_attachment: None,
            label: Some("egui main render pass"),
        });
        self.renderer.render(&mut rpass, &tris, &screen_descriptor);
        drop(rpass);
        for x in &full_output.textures_delta.free {
            self.renderer.free_texture(x)
        }
    }
}

And here's how to use it:

Initialize the renderer somewhere and store it:

   // ...
    let mut egui_renderer = EguiRenderer::new(
        &engine.device,       // wgpu Device
        engine.config.format, // TextureFormat
        None,                 // this can be None
        1,                    // samples
        &engine.window,       // winit Window
    );

Call the handle_input function under winit's WindowEvent match arm and pass in its event field to handle_input function:

    // ...
    event_loop.run(move |event, _, control_flow| {       // <- winit main event loop
        *control_flow = ControlFlow::Poll;
        match event {
            Event::WindowEvent { window_id, event } => {
                egui_renderer.handle_input(&event);
            }
          // ...
       }
}

Similarly on the winit events, call the draw method at RedrawRequested match arm:

           // ...
            Event::RedrawRequested(_) => {

                egui_renderer.draw(
                    &engine.device,
                    &engine.queue,
                    &mut encoder,
                    &engine.window,
                    &surface_view,
                    screen_descriptor,
                    |ui| {
                        egui::Window::new("Settings")
                            .resizable(true)
                            .vscroll(true)
                            .default_open(false)
                            .show(&ui, |mut ui| {
                                ui.label("Window!");
                                ui.label("Window!");
                                ui.label("Window!");
                                ui.label("Window!");

                                proto_scene.egui(ui);
                            });
                    },
                );
          }
       // ...

[MohammedKHC]

Sure, try this struct I wrote. You'll need to setup a basic winit program first that uses wgpu. Also make sure you have these crates as dependencies:

egui-wgpu 
egui-winit 
egui 
wgpu 
winit 

The main struct:

use egui::Context;
use egui_wgpu::renderer::ScreenDescriptor;
use egui_wgpu::Renderer;
use egui_winit::State;
use wgpu::{CommandEncoder, Device, Queue, TextureFormat, TextureView};
use winit::event::WindowEvent;
use winit::window::Window;

pub struct EguiRenderer {
    pub context: Context,
    state: State,
    renderer: Renderer,
}

impl EguiRenderer {
    pub fn new(
        device: &Device,
        output_color_format: TextureFormat,
        output_depth_format: Option<TextureFormat>,
        msaa_samples: u32,
        window: &Window,
    ) -> EguiRenderer {
        let egui_context = Context::default();
        let mut egui_state = egui_winit::State::new(&window);
        egui_state.set_pixels_per_point(window.scale_factor() as f32);
        let egui_renderer = egui_wgpu::renderer::Renderer::new(
            device,
            output_color_format,
            output_depth_format,
            msaa_samples,
        );

        EguiRenderer {
            context: egui_context,
            state: egui_state,
            renderer: egui_renderer,
        }
    }

    pub fn handle_input(&mut self, event: &WindowEvent) {
        self.state.on_event(&self.context, &event);
    }

    pub fn draw(
        &mut self,
        device: &Device,
        queue: &Queue,
        encoder: &mut CommandEncoder,
        window: &Window,
        window_surface_view: &TextureView,
        screen_descriptor: ScreenDescriptor,
        run_ui: impl FnOnce(&Context),
    ) {
        // self.state.set_pixels_per_point(window.scale_factor() as f32);
        let raw_input = self.state.take_egui_input(&window);
        let full_output = self.context.run(raw_input, |ui| {
            run_ui(&self.context);
        });

        self.state
            .handle_platform_output(&window, &self.context, full_output.platform_output);

        let tris = self.context.tessellate(full_output.shapes);
        for (id, image_delta) in &full_output.textures_delta.set {
            self.renderer
                .update_texture(&device, &queue, *id, &image_delta);
        }
        self.renderer
            .update_buffers(&device, &queue, encoder, &tris, &screen_descriptor);
        let mut rpass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
            color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                view: &window_surface_view,
                resolve_target: None,
                ops: wgpu::Operations {
                    load: wgpu::LoadOp::Load,
                    store: true,
                },
            })],
            depth_stencil_attachment: None,
            label: Some("egui main render pass"),
        });
        self.renderer.render(&mut rpass, &tris, &screen_descriptor);
        drop(rpass);
        for x in &full_output.textures_delta.free {
            self.renderer.free_texture(x)
        }
    }
}

And here's how to use it:

Initialize the renderer somewhere and store it:

   // ...
    let mut egui_renderer = EguiRenderer::new(
        &engine.device,       // wgpu Device
        engine.config.format, // TextureFormat
        None,                 // this can be None
        1,                    // samples
        &engine.window,       // winit Window
    );

Call the handle_input function under winit's WindowEvent match arm and pass in its event field to handle_input function:

    // ...
    event_loop.run(move |event, _, control_flow| {       // <- winit main event loop
        *control_flow = ControlFlow::Poll;
        match event {
            Event::WindowEvent { window_id, event } => {
                egui_renderer.handle_input(&event);
            }
          // ...
       }
}

Similarly on the winit events, call the draw method at RedrawRequested match arm:

           // ...
            Event::RedrawRequested(_) => {

                egui_renderer.draw(
                    &engine.device,
                    &engine.queue,
                    &mut encoder,
                    &engine.window,
                    &surface_view,
                    screen_descriptor,
                    |ui| {
                        egui::Window::new("Settings")
                            .resizable(true)
                            .vscroll(true)
                            .default_open(false)
                            .show(&ui, |mut ui| {
                                ui.label("Window!");
                                ui.label("Window!");
                                ui.label("Window!");
                                ui.label("Window!");

                                proto_scene.egui(ui);
                            });
                    },
                );
          }
       // ...

That's really great, does your code has license? Am I free to use it without conditions?

[kaphula]

If you want to be formal about it you can consider it to be under MIT license, so feel free to use it at your own risk.

[theunrealtarik]

So I've been trying to understand how to glue these three together since the morning untill I stumbled upon your code snippet which is a little outdated the time I'm writing this but I managed to update the obselete parts. May you please collaborate more on what the engine strucutre is? Thank you.

[kaphula]

I stripped the basics from my project to here:

https://github.com/kaphula/winit-egui-wgpu-template

I think you need to use these versions of the dependencies for now because newer versions are incompatible with each other.

[kaphula]

https://github.com/kaphula/winit-egui-wgpu-template

[theunrealtarik]

Merci.