Configure hello example to run it in the web browser too

Cargo.toml

@@ -11,7 +11,7 @@ documentation = "https://docs.rs/wgpu_glyph"
 readme = "README.md"
 
 [dependencies]
-wgpu = "0.7"
+wgpu = {version = "0.7", features = ["webgl"]}
 glyph_brush = "0.7"
 log = "0.4"
 
@@ -21,5 +21,15 @@ features = ["derive"]
 
 [dev-dependencies]
 env_logger = "0.7"
-winit = "0.24"
+winit = { version = "0.24", features = ["web-sys"] }
 futures = "0.3"
+
+[target.'cfg(not(target_arch = "wasm32"))'.dev-dependencies]
+pollster = "0.2"
+wgpu-subscriber = "0.1"
+
+[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
+console_error_panic_hook = "0.1.6"
+console_log = "0.1.2"
+web-sys = { version = "=0.3.46" }
+wasm-bindgen-futures = "0.4.19"

examples/hello.rs

@@ -1,17 +1,44 @@
-use std::error::Error;
 use wgpu_glyph::{ab_glyph, GlyphBrushBuilder, Section, Text};
+use winit::{
+    event_loop::EventLoop,
+    window::Window,
+};
 
-fn main() -> Result<(), Box<dyn Error>> {
-    env_logger::init();
-
+fn main() {
     // Open window and create a surface
     let event_loop = winit::event_loop::EventLoop::new();
 
     let window = winit::window::WindowBuilder::new()
         .with_resizable(false)
+        .with_title("Hello wgpu glyph !")
         .build(&event_loop)
         .unwrap();
 
+    #[cfg(not(target_arch = "wasm32"))]
+    {
+        wgpu_subscriber::initialize_default_subscriber(None);
+        // Temporarily avoid srgb formats for the swapchain on the web
+        pollster::block_on(run(event_loop, window));
+    }
+    #[cfg(target_arch = "wasm32")]
+    {
+        std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+        console_log::init().expect("could not initialize logger");
+        use winit::platform::web::WindowExtWebSys;
+        // On wasm, append the canvas to the document body
+        web_sys::window()
+            .and_then(|win| win.document())
+            .and_then(|doc| doc.body())
+            .and_then(|body| {
+                body.append_child(&web_sys::Element::from(window.canvas()))
+                    .ok()
+            })
+            .expect("couldn't append canvas to document body");
+        wasm_bindgen_futures::spawn_local(run(event_loop, window));
+    }
+}
+
+async fn run(event_loop: EventLoop<()>, window: Window) {
     let instance = wgpu::Instance::new(wgpu::BackendBit::all());
     let surface = unsafe { instance.create_surface(&window) };
 
@@ -37,7 +64,7 @@ fn main() -> Result<(), Box<dyn Error>> {
     let local_spawner = local_pool.spawner();
 
     // Prepare swap chain
-    let render_format = wgpu::TextureFormat::Bgra8UnormSrgb;
+    let render_format = wgpu::TextureFormat::Bgra8Unorm;
     let mut size = window.inner_size();
 
     let mut swap_chain = device.create_swap_chain(
@@ -54,7 +81,7 @@ fn main() -> Result<(), Box<dyn Error>> {
     // Prepare glyph_brush
     let inconsolata = ab_glyph::FontArc::try_from_slice(include_bytes!(
         "Inconsolata-Regular.ttf"
-    ))?;
+    )).unwrap();
 
     let mut glyph_brush = GlyphBrushBuilder::using_font(inconsolata)
         .build(&device, render_format);