bevyengine / bevyengine/bevy

WASM multiple canvas

Open
#20,453 5 comments 1 reaction 0 assignees View on GitHub
A-Rendering C-Feature S-Needs-Design
Dominant language
Rust
Stars
48.2k
Forks
4.8k
Avg merge
3d 16h
Merged PRs (30d)
171

Description

In Bevy there is currently [no way of using multiple canvas elements.](https://github.com/bevyengine/bevy/issues/20453#issuecomment-3677872675)

I'm trying to render multiple canvases using this code.
It's based on the [multiple_windows](https://github.com/bevyengine/bevy/blob/main/examples/window/multiple_windows.rs) example.

When it is ran in the browser I get this error output
```
panicked at /Users/kelp/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/bevy_render-0.16.0/src/view/window/mod.rs:338:51:
No supported formats for surface

Uncaught RuntimeError: unreachable
```

```html

```

```rust

fn main() {
App::new()
.add_plugins(DefaultPlugins.set(WindowPlugin {
primary_window: Some(Window {
canvas: Some("#bevy_canvas1".to_string()),
..default()
}),
..default()
}))
.add_systems(Startup, setup_scene)
.run();
}

fn setup_scene(mut commands: Commands) {

let first_window_camera = commands
.spawn(Camera2d)
.id();

// Spawn a second window
let second_window = commands
.spawn(Window {
canvas: Some("#bevy_canvas2".to_string()),
title: "Second window".to_owned(),
..default()
})
.id();

let second_window_camera = commands
.spawn((
Camera2d,
Camera {
target: RenderTarget::Window(WindowRef::Entity(second_window)),
..default()
},
))
.id();

let node = Node {
position_type: PositionType::Absolute,
top: Val::Px(12.0),
left: Val::Px(12.0),
..default()
};

commands
.spawn((
node.clone(),
UiTargetCamera(first_window_camera),
))
.with_child((Text::new("First window"), TextShadow::default()));

commands
.spawn((node, UiTargetCamera(second_window_camera)))
.with_child((Text::new("Second window"), TextShadow::default()));
}

```

Contributor guide

Open the contributing guide

Research direction

Start with examples/window/multiple_windows.rs and the browser reproduction, then inspect bevy_render-0.16.0/src/view/window/mod.rs around line 338 where the surface-format panic occurs. Confirm the behavior with two HTML canvas elements; done means multiple Bevy windows render in their separate canvases without the browser panic.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, rust, wasm
Domain
computer-graphics, game-dev, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.