This example is running in WebGL2 and should work in most browsers. You can check the WebGPU examples here.
screenshot.rs:
//! An example showing how to save screenshots to disk
use bevy::{
prelude::*,
render::view::screenshot::{save_to_disk, Capturing, Screenshot},
window::SystemCursorIcon,
winit::cursor::CursorIcon,
};
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_systems(Startup, setup)
.add_systems(Update, (screenshot_on_spacebar, screenshot_saving))
.run();
}
fn screenshot_on_spacebar(
mut commands: Commands,
input: Res<ButtonInput<KeyCode>>,
mut counter: Local<u32>,
) {
if input.just_pressed(KeyCode::Space) {
let path = format!("./screenshot-{}.png", *counter);
*counter += 1;
commands
.spawn(Screenshot::primary_window())
.observe(save_to_disk(path));
}
}
fn screenshot_saving(
mut commands: Commands,
screenshot_saving: Query<Entity, With<Capturing>>,
windows: Query<Entity, With<Window>>,
) {
let Ok(window) = windows.get_single() else {
return;
};
match screenshot_saving.iter().count() {
0 => {
commands.entity(window).remove::<CursorIcon>();
}
x if x > 0 => {
commands
.entity(window)
.insert(CursorIcon::from(SystemCursorIcon::Progress));
}
_ => {}
}
}
/// set up a simple 3D scene
fn setup(
mut commands: Commands,
mut meshes: ResMut<Assets<Mesh>>,
mut materials: ResMut<Assets<StandardMaterial>>,
) {
// plane
commands.spawn((
Mesh3d(meshes.add(Plane3d::default().mesh().size(5.0, 5.0))),
MeshMaterial3d(materials.add(Color::srgb(0.3, 0.5, 0.3))),
));
// cube
commands.spawn((
Mesh3d(meshes.add(Cuboid::default())),
MeshMaterial3d(materials.add(Color::srgb(0.8, 0.7, 0.6))),
Transform::from_xyz(0.0, 0.5, 0.0),
));
// light
commands.spawn((
PointLight {
shadows_enabled: true,
..default()
},
Transform::from_xyz(4.0, 8.0, 4.0),
));
// camera
commands.spawn((
Camera3d::default(),
Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
));
commands.spawn((
Text::new("Press <spacebar> to save a screenshot to disk"),
Node {
position_type: PositionType::Absolute,
top: Val::Px(12.0),
left: Val::Px(12.0),
..default()
},
));
}