mirror of
https://github.com/emilk/egui.git
synced 2026-09-02 14:50:03 -04:00
Add screenshot support for eframe web (#5438)
This implements web support for taking screenshots in an eframe app (and adds a nice demo). It also updates the native screenshot implementation to work with the wgpu gl backend. The wgpu implementation is quite different than the native one because we can't block to wait for the screenshot result, so instead I use a channel to pass the result to a future frame asynchronously. * Closes <https://github.com/emilk/egui/issues/5425> * [x] I have followed the instructions in the PR template https://github.com/user-attachments/assets/67cad40b-0384-431d-96a3-075cc3cb98fb
This commit is contained in:
@@ -1,77 +1,16 @@
|
||||
#![allow(clippy::missing_errors_doc)]
|
||||
#![allow(clippy::undocumented_unsafe_blocks)]
|
||||
|
||||
use std::{num::NonZeroU32, sync::Arc};
|
||||
|
||||
use egui::{ViewportId, ViewportIdMap, ViewportIdSet};
|
||||
|
||||
use crate::capture::{capture_channel, CaptureReceiver, CaptureSender, CaptureState};
|
||||
use crate::{renderer, RenderState, SurfaceErrorAction, WgpuConfiguration};
|
||||
use egui::{Context, Event, UserData, ViewportId, ViewportIdMap, ViewportIdSet};
|
||||
use std::{num::NonZeroU32, sync::Arc};
|
||||
|
||||
struct SurfaceState {
|
||||
surface: wgpu::Surface<'static>,
|
||||
alpha_mode: wgpu::CompositeAlphaMode,
|
||||
width: u32,
|
||||
height: u32,
|
||||
supports_screenshot: bool,
|
||||
}
|
||||
|
||||
/// A texture and a buffer for reading the rendered frame back to the cpu.
|
||||
/// The texture is required since [`wgpu::TextureUsages::COPY_DST`] is not an allowed
|
||||
/// flag for the surface texture on all platforms. This means that anytime we want to
|
||||
/// capture the frame, we first render it to this texture, and then we can copy it to
|
||||
/// both the surface texture and the buffer, from where we can pull it back to the cpu.
|
||||
struct CaptureState {
|
||||
texture: wgpu::Texture,
|
||||
buffer: wgpu::Buffer,
|
||||
padding: BufferPadding,
|
||||
}
|
||||
|
||||
impl CaptureState {
|
||||
fn new(device: &Arc<wgpu::Device>, surface_texture: &wgpu::Texture) -> Self {
|
||||
let texture = device.create_texture(&wgpu::TextureDescriptor {
|
||||
label: Some("egui_screen_capture_texture"),
|
||||
size: surface_texture.size(),
|
||||
mip_level_count: surface_texture.mip_level_count(),
|
||||
sample_count: surface_texture.sample_count(),
|
||||
dimension: surface_texture.dimension(),
|
||||
format: surface_texture.format(),
|
||||
usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
|
||||
view_formats: &[],
|
||||
});
|
||||
|
||||
let padding = BufferPadding::new(surface_texture.width());
|
||||
|
||||
let buffer = device.create_buffer(&wgpu::BufferDescriptor {
|
||||
label: Some("egui_screen_capture_buffer"),
|
||||
size: (padding.padded_bytes_per_row * texture.height()) as u64,
|
||||
usage: wgpu::BufferUsages::COPY_DST | wgpu::BufferUsages::MAP_READ,
|
||||
mapped_at_creation: false,
|
||||
});
|
||||
|
||||
Self {
|
||||
texture,
|
||||
buffer,
|
||||
padding,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct BufferPadding {
|
||||
unpadded_bytes_per_row: u32,
|
||||
padded_bytes_per_row: u32,
|
||||
}
|
||||
|
||||
impl BufferPadding {
|
||||
fn new(width: u32) -> Self {
|
||||
let bytes_per_pixel = std::mem::size_of::<u32>() as u32;
|
||||
let unpadded_bytes_per_row = width * bytes_per_pixel;
|
||||
let padded_bytes_per_row =
|
||||
wgpu::util::align_to(unpadded_bytes_per_row, wgpu::COPY_BYTES_PER_ROW_ALIGNMENT);
|
||||
Self {
|
||||
unpadded_bytes_per_row,
|
||||
padded_bytes_per_row,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Everything you need to paint egui with [`wgpu`] on [`winit`].
|
||||
@@ -80,6 +19,7 @@ impl BufferPadding {
|
||||
///
|
||||
/// NOTE: all egui viewports share the same painter.
|
||||
pub struct Painter {
|
||||
context: Context,
|
||||
configuration: WgpuConfiguration,
|
||||
msaa_samples: u32,
|
||||
support_transparent_backbuffer: bool,
|
||||
@@ -94,6 +34,8 @@ pub struct Painter {
|
||||
depth_texture_view: ViewportIdMap<wgpu::TextureView>,
|
||||
msaa_texture_view: ViewportIdMap<wgpu::TextureView>,
|
||||
surfaces: ViewportIdMap<SurfaceState>,
|
||||
capture_tx: CaptureSender,
|
||||
capture_rx: CaptureReceiver,
|
||||
}
|
||||
|
||||
impl Painter {
|
||||
@@ -110,6 +52,7 @@ impl Painter {
|
||||
/// a [`winit::window::Window`] with a valid `.raw_window_handle()`
|
||||
/// associated.
|
||||
pub fn new(
|
||||
context: Context,
|
||||
configuration: WgpuConfiguration,
|
||||
msaa_samples: u32,
|
||||
depth_format: Option<wgpu::TextureFormat>,
|
||||
@@ -126,7 +69,10 @@ impl Painter {
|
||||
crate::WgpuSetup::Existing { instance, .. } => instance.clone(),
|
||||
};
|
||||
|
||||
let (capture_tx, capture_rx) = capture_channel();
|
||||
|
||||
Self {
|
||||
context,
|
||||
configuration,
|
||||
msaa_samples,
|
||||
support_transparent_backbuffer,
|
||||
@@ -140,6 +86,9 @@ impl Painter {
|
||||
depth_texture_view: Default::default(),
|
||||
surfaces: Default::default(),
|
||||
msaa_texture_view: Default::default(),
|
||||
|
||||
capture_tx,
|
||||
capture_rx,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,17 +106,11 @@ impl Painter {
|
||||
) {
|
||||
crate::profile_function!();
|
||||
|
||||
let usage = if surface_state.supports_screenshot {
|
||||
wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_DST
|
||||
} else {
|
||||
wgpu::TextureUsages::RENDER_ATTACHMENT
|
||||
};
|
||||
|
||||
let width = surface_state.width;
|
||||
let height = surface_state.height;
|
||||
|
||||
let mut surf_config = wgpu::SurfaceConfiguration {
|
||||
usage,
|
||||
usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
|
||||
format: render_state.target_format,
|
||||
present_mode: config.present_mode,
|
||||
alpha_mode: surface_state.alpha_mode,
|
||||
@@ -292,8 +235,6 @@ impl Painter {
|
||||
} else {
|
||||
wgpu::CompositeAlphaMode::Auto
|
||||
};
|
||||
let supports_screenshot =
|
||||
!matches!(render_state.adapter.get_info().backend, wgpu::Backend::Gl);
|
||||
self.surfaces.insert(
|
||||
viewport_id,
|
||||
SurfaceState {
|
||||
@@ -301,7 +242,6 @@ impl Painter {
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
alpha_mode,
|
||||
supports_screenshot,
|
||||
},
|
||||
);
|
||||
let Some(width) = NonZeroU32::new(size.width) else {
|
||||
@@ -417,109 +357,12 @@ impl Painter {
|
||||
}
|
||||
}
|
||||
|
||||
// CaptureState only needs to be updated when the size of the two textures don't match and we want to
|
||||
// capture a frame
|
||||
fn update_capture_state(
|
||||
screen_capture_state: &mut Option<CaptureState>,
|
||||
surface_texture: &wgpu::SurfaceTexture,
|
||||
render_state: &RenderState,
|
||||
) {
|
||||
let surface_texture = &surface_texture.texture;
|
||||
match screen_capture_state {
|
||||
Some(capture_state) => {
|
||||
if capture_state.texture.size() != surface_texture.size() {
|
||||
*capture_state = CaptureState::new(&render_state.device, surface_texture);
|
||||
}
|
||||
}
|
||||
None => {
|
||||
*screen_capture_state =
|
||||
Some(CaptureState::new(&render_state.device, surface_texture));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handles copying from the CaptureState texture to the surface texture and the cpu
|
||||
fn read_screen_rgba(
|
||||
screen_capture_state: &CaptureState,
|
||||
render_state: &RenderState,
|
||||
output_frame: &wgpu::SurfaceTexture,
|
||||
) -> Option<epaint::ColorImage> {
|
||||
let CaptureState {
|
||||
texture: tex,
|
||||
buffer,
|
||||
padding,
|
||||
} = screen_capture_state;
|
||||
|
||||
let device = &render_state.device;
|
||||
let queue = &render_state.queue;
|
||||
|
||||
let tex_extent = tex.size();
|
||||
|
||||
let mut encoder = device.create_command_encoder(&Default::default());
|
||||
encoder.copy_texture_to_buffer(
|
||||
tex.as_image_copy(),
|
||||
wgpu::ImageCopyBuffer {
|
||||
buffer,
|
||||
layout: wgpu::ImageDataLayout {
|
||||
offset: 0,
|
||||
bytes_per_row: Some(padding.padded_bytes_per_row),
|
||||
rows_per_image: None,
|
||||
},
|
||||
},
|
||||
tex_extent,
|
||||
);
|
||||
|
||||
encoder.copy_texture_to_texture(
|
||||
tex.as_image_copy(),
|
||||
output_frame.texture.as_image_copy(),
|
||||
tex.size(),
|
||||
);
|
||||
|
||||
let id = queue.submit(Some(encoder.finish()));
|
||||
let buffer_slice = buffer.slice(..);
|
||||
let (sender, receiver) = std::sync::mpsc::channel();
|
||||
buffer_slice.map_async(wgpu::MapMode::Read, move |v| {
|
||||
drop(sender.send(v));
|
||||
});
|
||||
device.poll(wgpu::Maintain::WaitForSubmissionIndex(id));
|
||||
receiver.recv().ok()?.ok()?;
|
||||
|
||||
let to_rgba = match tex.format() {
|
||||
wgpu::TextureFormat::Rgba8Unorm => [0, 1, 2, 3],
|
||||
wgpu::TextureFormat::Bgra8Unorm => [2, 1, 0, 3],
|
||||
_ => {
|
||||
log::error!("Screen can't be captured unless the surface format is Rgba8Unorm or Bgra8Unorm. Current surface format is {:?}", tex.format());
|
||||
return None;
|
||||
}
|
||||
};
|
||||
|
||||
let mut pixels = Vec::with_capacity((tex.width() * tex.height()) as usize);
|
||||
for padded_row in buffer_slice
|
||||
.get_mapped_range()
|
||||
.chunks(padding.padded_bytes_per_row as usize)
|
||||
{
|
||||
let row = &padded_row[..padding.unpadded_bytes_per_row as usize];
|
||||
for color in row.chunks(4) {
|
||||
pixels.push(epaint::Color32::from_rgba_premultiplied(
|
||||
color[to_rgba[0]],
|
||||
color[to_rgba[1]],
|
||||
color[to_rgba[2]],
|
||||
color[to_rgba[3]],
|
||||
));
|
||||
}
|
||||
}
|
||||
buffer.unmap();
|
||||
|
||||
Some(epaint::ColorImage {
|
||||
size: [tex.width() as usize, tex.height() as usize],
|
||||
pixels,
|
||||
})
|
||||
}
|
||||
|
||||
/// Returns two things:
|
||||
///
|
||||
/// The approximate number of seconds spent on vsync-waiting (if any),
|
||||
/// and the captures captured screenshot if it was requested.
|
||||
///
|
||||
/// If `capture_data` isn't empty, a screenshot will be captured.
|
||||
pub fn paint_and_update_textures(
|
||||
&mut self,
|
||||
viewport_id: ViewportId,
|
||||
@@ -527,17 +370,18 @@ impl Painter {
|
||||
clear_color: [f32; 4],
|
||||
clipped_primitives: &[epaint::ClippedPrimitive],
|
||||
textures_delta: &epaint::textures::TexturesDelta,
|
||||
capture: bool,
|
||||
) -> (f32, Option<epaint::ColorImage>) {
|
||||
capture_data: Vec<UserData>,
|
||||
) -> f32 {
|
||||
crate::profile_function!();
|
||||
|
||||
let capture = !capture_data.is_empty();
|
||||
let mut vsync_sec = 0.0;
|
||||
|
||||
let Some(render_state) = self.render_state.as_mut() else {
|
||||
return (vsync_sec, None);
|
||||
return vsync_sec;
|
||||
};
|
||||
let Some(surface_state) = self.surfaces.get(&viewport_id) else {
|
||||
return (vsync_sec, None);
|
||||
return vsync_sec;
|
||||
};
|
||||
|
||||
let mut encoder =
|
||||
@@ -573,15 +417,6 @@ impl Painter {
|
||||
)
|
||||
};
|
||||
|
||||
let capture = match (capture, surface_state.supports_screenshot) {
|
||||
(false, _) => false,
|
||||
(true, true) => true,
|
||||
(true, false) => {
|
||||
log::error!("The active render surface doesn't support taking screenshots.");
|
||||
false
|
||||
}
|
||||
};
|
||||
|
||||
let output_frame = {
|
||||
crate::profile_scope!("get_current_texture");
|
||||
// This is what vsync-waiting happens on my Mac.
|
||||
@@ -596,40 +431,35 @@ impl Painter {
|
||||
Err(err) => match (*self.configuration.on_surface_error)(err) {
|
||||
SurfaceErrorAction::RecreateSurface => {
|
||||
Self::configure_surface(surface_state, render_state, &self.configuration);
|
||||
return (vsync_sec, None);
|
||||
return vsync_sec;
|
||||
}
|
||||
SurfaceErrorAction::SkipFrame => {
|
||||
return (vsync_sec, None);
|
||||
return vsync_sec;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
let mut capture_buffer = None;
|
||||
{
|
||||
let renderer = render_state.renderer.read();
|
||||
let frame_view = if capture {
|
||||
Self::update_capture_state(
|
||||
&mut self.screen_capture_state,
|
||||
&output_frame,
|
||||
render_state,
|
||||
);
|
||||
self.screen_capture_state
|
||||
.as_ref()
|
||||
.map_or_else(
|
||||
|| &output_frame.texture,
|
||||
|capture_state| &capture_state.texture,
|
||||
)
|
||||
.create_view(&wgpu::TextureViewDescriptor::default())
|
||||
|
||||
let target_texture = if capture {
|
||||
let capture_state = self.screen_capture_state.get_or_insert_with(|| {
|
||||
CaptureState::new(&render_state.device, &output_frame.texture)
|
||||
});
|
||||
capture_state.update(&render_state.device, &output_frame.texture);
|
||||
|
||||
&capture_state.texture
|
||||
} else {
|
||||
output_frame
|
||||
.texture
|
||||
.create_view(&wgpu::TextureViewDescriptor::default())
|
||||
&output_frame.texture
|
||||
};
|
||||
let target_view = target_texture.create_view(&wgpu::TextureViewDescriptor::default());
|
||||
|
||||
let (view, resolve_target) = (self.msaa_samples > 1)
|
||||
.then_some(self.msaa_texture_view.get(&viewport_id))
|
||||
.flatten()
|
||||
.map_or((&frame_view, None), |texture_view| {
|
||||
(texture_view, Some(&frame_view))
|
||||
.map_or((&target_view, None), |texture_view| {
|
||||
(texture_view, Some(&target_view))
|
||||
});
|
||||
|
||||
let render_pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
|
||||
@@ -671,6 +501,16 @@ impl Painter {
|
||||
clipped_primitives,
|
||||
&screen_descriptor,
|
||||
);
|
||||
|
||||
if capture {
|
||||
if let Some(capture_state) = &mut self.screen_capture_state {
|
||||
capture_buffer = Some(capture_state.copy_textures(
|
||||
&render_state.device,
|
||||
&output_frame,
|
||||
&mut encoder,
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let encoded = {
|
||||
@@ -699,15 +539,17 @@ impl Painter {
|
||||
}
|
||||
}
|
||||
|
||||
let screenshot = if capture {
|
||||
self.screen_capture_state
|
||||
.as_ref()
|
||||
.and_then(|screen_capture_state| {
|
||||
Self::read_screen_rgba(screen_capture_state, render_state, &output_frame)
|
||||
})
|
||||
} else {
|
||||
None
|
||||
};
|
||||
if let Some(capture_buffer) = capture_buffer {
|
||||
if let Some(screen_capture_state) = &mut self.screen_capture_state {
|
||||
screen_capture_state.read_screen_rgba(
|
||||
self.context.clone(),
|
||||
capture_buffer,
|
||||
capture_data,
|
||||
self.capture_tx.clone(),
|
||||
viewport_id,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
crate::profile_scope!("present");
|
||||
@@ -717,7 +559,21 @@ impl Painter {
|
||||
vsync_sec += start.elapsed().as_secs_f32();
|
||||
}
|
||||
|
||||
(vsync_sec, screenshot)
|
||||
vsync_sec
|
||||
}
|
||||
|
||||
/// Call this at the beginning of each frame to receive the requested screenshots.
|
||||
pub fn handle_screenshots(&self, events: &mut Vec<Event>) {
|
||||
for (viewport_id, user_data, screenshot) in self.capture_rx.try_iter() {
|
||||
let screenshot = Arc::new(screenshot);
|
||||
for data in user_data {
|
||||
events.push(Event::Screenshot {
|
||||
viewport_id,
|
||||
user_data: data,
|
||||
image: screenshot.clone(),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn gc_viewports(&mut self, active_viewports: &ViewportIdSet) {
|
||||
|
||||
Reference in New Issue
Block a user