Make egui work on WebGPU out of the box. (#2945)

* Make wgpu webgl/gles opt-in (but still work out of the box via feature flag), workaround canvas creation issue

* missing allow unsafe code annotations

* add breaking change not to eframe release notes

* Add --webgpu flag to build_demo_web.sh

* Improve CHANGELOG docs

* Clean up, and prepare for having to wasm:s

* put canvas without workaround under `if false`

* fix spelling

---------

Co-authored-by: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>

crates/eframe/CHANGELOG.md

@@ -12,6 +12,7 @@ NOTE: [`egui-winit`](../egui-winit/CHANGELOG.md), [`egui_glium`](../egui_glium/C
 
 #### Web:
 * Bug fix: modifiers keys getting stuck on alt-tab ([#2857](https://github.com/emilk/egui/pull/2857)).
+* ⚠️ BREAKING: WebGPU is now the default web renderer when using the `wgpu` feature of `eframe`. To use WebGL with `wgpu`, you need to add `wgpu = { version = "0.16.0", features = ["webgl"] }` to your own `Cargo.toml`. ([#2945](https://github.com/emilk/egui/pull/2945))
 
 ## 0.21.3 - 2023-02-15
 * Fix typing the letter 'P' on web ([#2740](https://github.com/emilk/egui/pull/2740)).

crates/eframe/Cargo.toml

@@ -62,7 +62,7 @@ __screenshot = []
 
 ## Use [`wgpu`](https://docs.rs/wgpu) for painting (via [`egui-wgpu`](https://github.com/emilk/egui/tree/master/crates/egui-wgpu)).
 ## This overrides the `glow` feature.
-wgpu = ["dep:wgpu", "dep:egui-wgpu", "dep:pollster"]
+wgpu = ["dep:wgpu", "dep:egui-wgpu", "dep:pollster", "dep:raw-window-handle"]
 
 # Allow crates to choose an android-activity backend via Winit
 # - It's important that most applications should not have to depend on android-activity directly, and can
@@ -181,5 +181,6 @@ web-sys = { version = "0.3.58", features = [
 
 # optional web:
 egui-wgpu = { version = "0.21.0", path = "../egui-wgpu", optional = true } # if wgpu is used, use it without (!) winit
+raw-window-handle = { version = "0.5.2", optional = true }
 tts = { version = "0.25", optional = true, default-features = false }
-wgpu = { version = "0.16.0", optional = true, features = ["webgl"] }
+wgpu = { version = "0.16.0", optional = true }

crates/eframe/src/epi/mod.rs

@@ -498,8 +498,8 @@ impl Default for WebOptions {
 
             #[cfg(feature = "wgpu")]
             wgpu_options: egui_wgpu::WgpuConfiguration {
-                // WebGPU is not stable enough yet, use WebGL emulation
-                backends: wgpu::Backends::GL,
+                // Use WebGPU or WebGL. Note that WebGL needs to be opted in via a wgpu feature.
+                backends: wgpu::Backends::BROWSER_WEBGPU | wgpu::Backends::GL,
                 device_descriptor: wgpu::DeviceDescriptor {
                     label: Some("egui wgpu device"),
                     features: wgpu::Features::default(),

crates/eframe/src/web/web_painter_wgpu.rs

@@ -10,6 +10,24 @@ use crate::WebOptions;
 
 use super::web_painter::WebPainter;
 
+struct EguiWebWindow(u32);
+
+#[allow(unsafe_code)]
+unsafe impl raw_window_handle::HasRawWindowHandle for EguiWebWindow {
+    fn raw_window_handle(&self) -> raw_window_handle::RawWindowHandle {
+        let mut window_handle = raw_window_handle::WebWindowHandle::empty();
+        window_handle.id = self.0;
+        raw_window_handle::RawWindowHandle::Web(window_handle)
+    }
+}
+
+#[allow(unsafe_code)]
+unsafe impl raw_window_handle::HasRawDisplayHandle for EguiWebWindow {
+    fn raw_display_handle(&self) -> raw_window_handle::RawDisplayHandle {
+        raw_window_handle::RawDisplayHandle::Web(raw_window_handle::WebDisplayHandle::empty())
+    }
+}
+
 pub(crate) struct WebPainterWgpu {
     canvas: HtmlCanvasElement,
     canvas_id: String,
@@ -59,15 +77,28 @@ impl WebPainterWgpu {
     pub async fn new(canvas_id: &str, options: &WebOptions) -> Result<Self, String> {
         log::debug!("Creating wgpu painter");
 
-        let canvas = super::canvas_element_or_die(canvas_id);
-
         let instance = wgpu::Instance::new(wgpu::InstanceDescriptor {
             backends: options.wgpu_options.backends,
             dx12_shader_compiler: Default::default(),
         });
-        let surface = instance
-            .create_surface_from_canvas(canvas.clone())
-            .map_err(|err| format!("failed to create wgpu surface: {err}"))?;
+
+        let canvas = super::canvas_element_or_die(canvas_id);
+
+        let surface = if false {
+            instance.create_surface_from_canvas(canvas.clone())
+        } else {
+            // Workaround for https://github.com/gfx-rs/wgpu/issues/3710:
+            // Don't use `create_surface_from_canvas`, but `create_surface` instead!
+            let raw_window =
+                EguiWebWindow(egui::util::hash(&format!("egui on wgpu {canvas_id}")) as u32);
+            canvas.set_attribute("data-raw-handle", &raw_window.0.to_string());
+
+            #[allow(unsafe_code)]
+            unsafe {
+                instance.create_surface(&raw_window)
+            }
+        }
+        .map_err(|err| format!("failed to create wgpu surface: {err}"))?;
 
         let adapter = instance
             .request_adapter(&wgpu::RequestAdapterOptions {