Sprite Rendering

In addition to rendering webviews onto 3D meshes, bevy_cef supports 2D sprite rendering. This is useful for HUD elements, menus, or any scenario where you want a flat webview in a 2D scene.

Basic Setup

Sprite rendering requires no special material. Combine a WebviewSource with a standard Bevy Sprite component:

use bevy::prelude::*;
use bevy_cef::prelude::*;

fn main() {
    App::new()
        .add_plugins((DefaultPlugins, CefPlugin::default()))
        .add_systems(Startup, (spawn_camera, spawn_sprite_webview))
        .run();
}

fn spawn_camera(mut commands: Commands) {
    commands.spawn(Camera2d);
}

fn spawn_sprite_webview(mut commands: Commands, mut images: ResMut<Assets<Image>>) {
    commands.spawn((
        WebviewSource::new("https://github.com/not-elm/bevy_cef"),
        Pickable::default(),
        Sprite {
            image: images.add(Image::default()),
            custom_size: Some(Vec2::splat(500.0)),
            ..default()
        },
    ));
}

Key Differences from 3D Rendering

	3D Mesh	2D Sprite
Camera	Camera3d	Camera2d
Material	MeshMaterial3d<WebviewExtendStandardMaterial>	Not needed
Mesh	Mesh3d with any shape	Sprite with custom_size
Lighting	Responds to scene lighting	No lighting needed
Size control	Mesh dimensions	Sprite::custom_size

Input Handling

Add Pickable::default() to your sprite entity to enable mouse interaction. This allows bevy_cef to forward click, scroll, and hover events from Bevy's pointer system to the CEF browser.

Without Pickable, the webview will render but will not respond to mouse input.

Controlling the Display Size

Sprite::custom_size controls how large the webview appears on screen, in world units. WebviewSize (default 800×800 DIP) controls the logical-pixel viewport size the web page sees. On HiDPI displays the backing texture is automatically allocated at WebviewSize × device_pixel_ratio, so increasing WebviewSize is usually unnecessary for sharpness — only do it if the page is designed for a specific viewport size (e.g. 1920×1080).

commands.spawn((
    WebviewSource::new("https://example.com"),
    WebviewSize::new(1920, 1080),
    Pickable::default(),
    Sprite {
        image: images.add(Image::default()),
        custom_size: Some(Vec2::new(960.0, 540.0)),
        ..default()
    },
));