Slow egui performance, native, compared to the web demo

[skyne98]

Hi there, community! I am currently integrating egui to my wgpu game using the official examples, via the egui-wgpu and egui-winit crates. Running the egui_demo_lib application with all the subwindows open takes ~120ms (--release, most of the time is taken by running the application itself, so I assume layouting and such), compared to the browser number of ~13ms.

Why such a performance difference? Have I skipped something? Here is the renderer implementation I have stripped from the official examples:

use anyhow::Result;
use bevy_ecs::{
    prelude::resource_changed,
    schedule::{IntoSystemConfigs, Schedule},
    system::{Res, ResMut, Resource},
    world::World,
};
use wgpu::TextureFormat;

use crate::gpu::GpuContext;

use super::present::FrameBuffer;

pub fn setup_ui(world: &mut World, schedule: &mut Schedule) -> Result<()> {
    let gpu = world
        .get_resource::<GpuContext>()
        .ok_or_else(|| anyhow::anyhow!("GpuContext resource not found"))?;

    let pipeline = EguiRenderer::new(
        &gpu.device,
        TextureFormat::Rgba16Float,
        None,
        1,
        &gpu.window,
    );
    let app = egui_demo_lib::DemoWindows::default();
    let ui = EguiState {
        renderer: pipeline,
        app,
    };

    world.insert_resource(ui);

    schedule.add_systems(frame_buffer_changed_system.run_if(resource_changed::<FrameBuffer>));

    Ok(())
}

pub fn frame_buffer_changed_system(
    frame_buffer: Res<FrameBuffer>,
    gpu: Res<GpuContext>,
    mut pipeline: ResMut<EguiState>,
) {
    let new_size = gpu.window.inner_size();
    let new_scale = gpu.window.scale_factor();
}

// =============================== UI RESOURCE ===============================
#[derive(Resource)]
pub struct EguiState {
    pub(crate) renderer: EguiRenderer,
    pub(crate) app: egui_demo_lib::DemoWindows,
}
unsafe impl Send for EguiState {}
unsafe impl Sync for EguiState {}
impl EguiState {
    pub fn run_app(&mut self) {
        self.app.ui(&self.renderer.context());
    }
}

// =============================== RENDERER ===============================
use egui::Context;
use egui_wgpu::wgpu::{CommandEncoder, Device, Queue, StoreOp, TextureView};
use egui_wgpu::{wgpu, Renderer, ScreenDescriptor};
use egui_winit::{EventResponse, State};
use winit::event::WindowEvent;
use winit::window::Window;

pub struct EguiRenderer {
    state: State,
    renderer: Renderer,
    frame_started: bool,
}

impl EguiRenderer {
    pub fn context(&self) -> &Context {
        self.state.egui_ctx()
    }

    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();
        egui_extras::install_image_loaders(&egui_context);

        let egui_state = egui_winit::State::new(
            egui_context,
            egui::viewport::ViewportId::ROOT,
            &window,
            Some(window.scale_factor() as f32),
            None,
            Some(2 * 1024), // default dimension is 2048
        );
        let egui_renderer = Renderer::new(
            device,
            output_color_format,
            output_depth_format,
            msaa_samples,
            true,
        );

        EguiRenderer {
            state: egui_state,
            renderer: egui_renderer,
            frame_started: false,
        }
    }

    pub fn handle_input(&mut self, window: &Window, event: &WindowEvent) -> EventResponse {
        self.state.on_window_event(window, event)
    }

    pub fn ppp(&mut self, v: f32) {
        self.context().set_pixels_per_point(v);
    }

    pub fn begin_frame(&mut self, window: &Window) {
        let raw_input = self.state.take_egui_input(window);
        self.state.egui_ctx().begin_pass(raw_input);
        self.frame_started = true;
    }

    pub fn end_frame_and_draw(
        &mut self,
        device: &Device,
        queue: &Queue,
        encoder: &mut CommandEncoder,
        window: &Window,
        window_surface_view: &TextureView,
        screen_descriptor: ScreenDescriptor,
    ) {
        if !self.frame_started {
            panic!("begin_frame must be called before end_frame_and_draw can be called!");
        }

        self.ppp(screen_descriptor.pixels_per_point);

        let full_output = self.state.egui_ctx().end_pass();

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

        let tris = self
            .state
            .egui_ctx()
            .tessellate(full_output.shapes, self.state.egui_ctx().pixels_per_point());
        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 rpass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
            color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                view: window_surface_view,
                resolve_target: None,
                ops: egui_wgpu::wgpu::Operations {
                    load: egui_wgpu::wgpu::LoadOp::Load,
                    store: StoreOp::Store,
                },
            })],
            depth_stencil_attachment: None,
            timestamp_writes: None,
            label: Some("egui main render pass"),
            occlusion_query_set: None,
        });

        self.renderer
            .render(&mut rpass.forget_lifetime(), &tris, &screen_descriptor);
        for x in &full_output.textures_delta.free {
            self.renderer.free_texture(x)
        }

        self.frame_started = false;
    }
}

// UI
let _guard = tracing_tracy::client::Client::running()
    .expect("client must be running")
    .non_continuous_frame(frame_name!("ui"));
ui.renderer.begin_frame(&gpu.window);
// most CPU time is taken
ui.run_app();
// ...here
let frame_buffer_size = frame_buffer.texture.texture.size();
let screen_descriptor = ScreenDescriptor {
    size_in_pixels: [frame_buffer_size.width, frame_buffer_size.height],
    pixels_per_point: gpu.window.scale_factor() as f32,
};
ui.renderer.end_frame_and_draw(
    &gpu.device,
    &gpu.queue,
    &mut encoder,
    &gpu.window,
    &frame_buffer.texture.view,
    screen_descriptor,
);

drop(_guard);

I really, really want to use egui for the UI in the game, but current performance I am getting is not feasible, unfortunately.

Some additional info:

• checked via RenderDoc, rendering itself takes only 0.8ms, so it's purely CPU time, not GPU
• once again, narrowing down has shown that 90% of that time is spent in the egui_demo_lib itself
• I have compared how the official demo does things and it uses the egui_demo_lib in the same way
• I have both running in "continuous" mode
• events are fed to the app as soon as they arrive via winit

In advance, great thanks for the help!

[skyne98]

Bump, bump, still a giant difference of 90ms native vs 12ms on https://egui.rs on the latest 0.31.0

[PPakalns]

I am seeing some bevy code. What underlying renderers are you using? bevy_egui, egui_wgpu? Are you using the same on both platforms?

[skyne98]

Hi! Thanks for your time! The only bevy code used is bevy ECS, egui is ran via egui-winit, egui-wgpu and wgpu :)

The interface is from egui-demo-lib.

[YgorSouza]

You can use puffin to see where the time is being spent on your game vs on the demo app. Just copy this to your code and use puffin_viewer to see the data:

egui/crates/egui_demo_app/src/main.rs

Lines 62 to 80 in 510b3cd

	#[cfg(feature = "puffin")]
	fn start_puffin_server() {
	puffin::set_scopes_on(true); // tell puffin to collect data
	match puffin_http::Server::new("127.0.0.1:8585") {
	Ok(puffin_server) => {
	log::info!("Run: cargo install puffin_viewer && puffin_viewer --url 127.0.0.1:8585");
	std::process::Command::new("puffin_viewer")
	.arg("--url")
	.arg("127.0.0.1:8585")
	.spawn()
	.ok();
	// We can store the server if we want, but in this case we just want
	// it to keep running. Dropping it closes the server, so let's not drop it!
	#[allow(clippy::mem_forget)]
	std::mem::forget(puffin_server);
	}

[skyne98]

Thanks, will try today! But what I can tell right away, is that 99% of that time comes from the egui "update" method, running the "egui-demo-lib", the same gui that the egui.rs runs, which is why it's so strange to me!

Actual rendering takes close to no time and I made sure I call the methods in the same manner as they are on egui.rs :(

[YgorSouza]

The profiler should give more detail about which internal egui functions are slow. Since egui does a lot of memory allocations, it could be just that the allocator is struggling because of what the rest of your code is doing. That is what another person seems to have concluded in #5199.

[skyne98]

@YgorSouza, thanks so much! Tried yesterday and the allocator indeed ended up being the issue. I switched to MiMalloc and removed tracing from my allocations -> boom, stable 60 FPS. Didn't expect egui to allocate so frequently.