Configure a primary window on wasm.

tychedelia · Feb 11, 2025 · eaf8425 · eaf8425
1 parent b81c4c7
commit eaf8425
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 254 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/bevy_nannou_derive/Cargo.toml b/bevy_nannou_derive/Cargo.toml
@@ -9,7 +9,6 @@ proc-macro = true
 [dependencies]
 syn = {  version = "1", features = ["full"] }
 quote = "1.0"
-proc-macro2 = "1.0"
 
 [dev-dependencies]
 bevy = { workspace = true }

diff --git a/bevy_nannou_draw/Cargo.toml b/bevy_nannou_draw/Cargo.toml
@@ -8,8 +8,6 @@ bevy = { workspace = true }
 lyon = "1.0"
 nannou_core = { path = "../nannou_core" }
 rusttype = { version = "0.8", features = ["gpu_cache"] }
-num-traits = "0.2"
-bytemuck = "1.15.0"
 rayon = { workspace = true }
 uuid = "1.8"
 bitflags = "2.6.0"

diff --git a/bevy_nannou_draw/src/lib.rs b/bevy_nannou_draw/src/lib.rs
@@ -22,7 +22,7 @@ fn reset_draw(mut draw_q: Query<&mut DrawHolder>) {
     }
 }
 
-fn spawn_draw(mut commands: Commands, query: Query<Entity, Added<Window>>) {
+fn spawn_draw(mut commands: Commands, query: Query<Entity, (Without<DrawHolder>, With<Window>)>) {
     for entity in query.iter() {
         commands
             .entity(entity)

diff --git a/bevy_nannou_isf/Cargo.toml b/bevy_nannou_isf/Cargo.toml
@@ -5,7 +5,6 @@ edition = "2021"
 
 [dependencies]
 bevy = { workspace = true, features = ["shader_format_glsl"] }
-bevy_egui = { workspace = true }
 bevy-inspector-egui = { workspace = true }
 isf = "0.1.0"
 thiserror = "1"

diff --git a/examples/Cargo.toml b/examples/Cargo.toml
@@ -15,14 +15,11 @@ edition = "2018"
 
 [dev-dependencies]
 audrey = "0.3"
-hotglsl = "0.2"
 hrtf = "0.2"
 nannou = { version ="0.19.0", path = "../nannou" }
 nannou_audio = { version ="0.19.0", path = "../nannou_audio" }
 nannou_laser = { version ="0.19.0", features = ["ffi", "ilda-idtf"], path = "../nannou_laser" }
 nannou_osc = { version ="0.19.0", path = "../nannou_osc" }
-pitch_calc = { version = "0.12", features = ["serde"] }
-time_calc = { version= "0.13", features = ["serde"] }
 walkdir = "2"
 hound = "3.4.0"
 ringbuf = "0.2.2"

diff --git a/examples/draw/draw.rs b/examples/draw/draw.rs
@@ -8,6 +8,7 @@ fn view(app: &App) {
     // Begin drawing
     let draw = app.draw();
 
+    info!("draw");
     // Clear the background to blue.
     draw.background().color(CORNFLOWER_BLUE);
 

diff --git a/examples/wasm/index.html b/examples/wasm/index.html
@@ -0,0 +1,27 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      body {
+        background: linear-gradient(
+          135deg,
+          white 0%,
+          white 49%,
+          black 49%,
+          black 51%,
+          white 51%,
+          white 100%
+        ) repeat;
+        background-size: 20px 20px;
+      }
+      canvas {
+        background-color: white;
+      }
+    </style>
+    <title>Wasm Example</title>
+  </head>
+  <script type="module">
+    import init from './target/draw.js'
+    init()
+  </script>
+</html>
diff --git a/nannou/Cargo.toml b/nannou/Cargo.toml
@@ -17,34 +17,28 @@ bevy_egui = { workspace = true, optional = true }
 bevy_common_assets = { workspace = true, optional = true }
 bevy_nannou = { version = "0.1.0", path = "../bevy_nannou" }
 bevy_nannou_derive = { version = "0.1.0", path = "../bevy_nannou_derive" }
-futures = "0.3"
 find_folder = "0.3"
-getrandom = "0.2.3"
-instant = "0.1.9"
 lyon = "1.0"
 nannou_core = { version ="0.19.0", path = "../nannou_core", features = ["std"] }
 nannou_wgpu = { version = "0.19.0", path = "../nannou_wgpu", features = ["capturer"]}
 noise = "0.7"
-notosans = { version = "0.1", optional = true }
-num_cpus = "1"
 pennereq = "0.3"
-rusttype = { version = "0.8", features = ["gpu_cache"] }
 serde = { workspace = true, features = ["derive"], optional = true}
 serde_json = { workspace = true, optional = true }
 toml = { workspace = true, optional = true }
 walkdir = "2"
-web-sys = { version = "0.3.64", optional = true }
 wgpu = { workspace = true }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 tokio = { version = "1", features = ["full"]}
 image = { workspace = true, features = ["default"] }
 [target.'cfg(target_arch = "wasm32")'.dependencies]
+bevy = { workspace = true, features = ["webgpu"] }
 tokio = { version = "1", features = ["rt"]}
 image = { workspace = true, features = [], default-features = false }
 
 [features]
-default = ["notosans"]
+default = []
 egui = ["bevy_egui", "bevy-inspector-egui"]
 hot_reload = ["bevy/file_watcher"]
 isf = ["bevy_nannou/isf"]

diff --git a/nannou/src/app.rs b/nannou/src/app.rs
@@ -252,8 +252,17 @@ where
         let mut app = bevy::app::App::new();
         app.add_plugins((
             DefaultPlugins.set(WindowPlugin {
+                #[cfg(not(target_arch = "wasm32"))]
                 // Don't spawn a  window by default, we'll handle this ourselves
                 primary_window: None,
+                #[cfg(target_arch = "wasm32")]
+                // We create a default window on wasm to make sure that the render initialization
+                // has a canvas to attach to when configuring the surface.
+                primary_window: Some(Window {
+                    title: "Nannou".to_string(),
+                    resolution: (1024.0, 768.0).into(),
+                    ..default()
+                }),
                 exit_condition: ExitCondition::OnAllClosed,
                 ..default()
             }),
@@ -1061,10 +1070,8 @@ where
                 };
             }
         };
-        #[cfg(not(target_os = "unknown"))]
-        {
-            let _ = window.primary().build();
-        }
+
+        let _ = window.primary().build();
     }
 
     // Initialise the model.

diff --git a/nannou/src/window.rs b/nannou/src/window.rs
@@ -410,26 +410,52 @@ where
         self
     }
 
-    #[cfg(not(target_os = "unknown"))]
     /// Builds the window, inserts it into the `App`'s display map and returns the unique ID.
     pub fn build(self) -> Entity {
-        let entity = self
-            .app
-            .component_world_mut()
-            .spawn((self.window, WindowUserFunctions(self.user_functions)))
-            .id();
+        if cfg!(target_arch = "wasm32") && !self.primary {
+            // TODO: figure out a way to dynamically attach to a canvas with new windows
+            panic!("Non-primary windows are not supported on wasm");
+        }
 
-        if self.primary {
-            let mut q = self.app.component_world_mut().query::<&PrimaryWindow>();
-            if q.get_single(&mut self.app.component_world_mut()).is_ok() {
-                panic!("Only one primary window can be created");
+        let entity = if !cfg!(target_arch = "wasm32") {
+            let entity = self
+                .app
+                .component_world_mut()
+                .spawn((self.window, WindowUserFunctions(self.user_functions)))
+                .id();
+
+            if self.primary {
+                let mut q = self.app.component_world_mut().query::<&PrimaryWindow>();
+                if q.get_single(&mut self.app.component_world_mut()).is_ok() {
+                    panic!("Only one primary window can be created");
+                }
+
+                self.app
+                    .component_world_mut()
+                    .entity_mut(entity)
+                    .insert(PrimaryWindow);
             }
 
+            entity
+        } else {
+            let mut q = self
+                .app
+                .component_world_mut()
+                .query_filtered::<(Entity, &mut bevy::window::Window), With<PrimaryWindow>>();
+            let entity = if let Ok((entity, mut window)) = q.get_single_mut(&mut self.app.component_world_mut()) {
+                *window = self.window;
+                entity
+            } else {
+                panic!("No primary window found");
+            };
+
             self.app
                 .component_world_mut()
                 .entity_mut(entity)
-                .insert(PrimaryWindow);
-        }
+                .insert(WindowUserFunctions(self.user_functions));
+
+            entity
+        };
 
         let layer = RenderLayers::layer(self.app.window_count());
 

diff --git a/nannou_wgpu/Cargo.toml b/nannou_wgpu/Cargo.toml
@@ -12,8 +12,6 @@ edition = "2018"
 [dependencies]
 futures = "0.3"
 image = { workspace = true, optional = true }
-instant = { version = "0.1.9", optional = true }
-num_cpus = { version = "1", optional = true }
 wgpu = { workspace = true }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
@@ -22,7 +20,7 @@ tokio = { version = "1", features = ["full"]}
 tokio = { version = "1", features = ["rt"]}
 
 [features]
-capturer = ["image", "instant", "num_cpus"]
+capturer = ["image"]
 replay = ["wgpu/replay"]
 serde = ["wgpu/serde"]
 spirv = ["wgpu/spirv"]