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>

Cargo.lock

@@ -921,12 +921,6 @@ dependencies = [
  "typenum",
 ]
 
-[[package]]
-name = "cty"
-version = "0.2.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b365fabc795046672053e29c954733ec3b05e4be654ab130fe8f1f94d7051f35"
-
 [[package]]
 name = "custom_3d_glow"
 version = "0.1.0"
@@ -2948,12 +2942,9 @@ checksum = "63e935c45e09cc6dcf00d2f0b2d630a58f4095320223d47fc68918722f0538b6"
 
 [[package]]
 name = "raw-window-handle"
-version = "0.5.0"
+version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ed7e3d950b66e19e0c372f3fa3fbbcf85b1746b571f74e0c2af6042a5c93420a"
-dependencies = [
- "cty",
-]
+checksum = "f2ff9a1f06a88b01621b7ae906ef0211290d1c8a168a15542486a8f61c0833b9"
 
 [[package]]
 name = "rctree"

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 {

crates/egui-wgpu/src/lib.rs

@@ -68,6 +68,8 @@ impl Default for WgpuConfiguration {
                 features: wgpu::Features::default(),
                 limits: wgpu::Limits::default(),
             },
+            // Add GL backend, primarily because WebGPU is not stable enough yet.
+            // (note however, that the GL backend needs to be opted-in via a wgpu feature flag)
             backends: wgpu::Backends::PRIMARY | wgpu::Backends::GL,
             present_mode: wgpu::PresentMode::AutoVsync,
             power_preference: wgpu::PowerPreference::HighPerformance,

scripts/build_demo_web.sh

@@ -13,23 +13,27 @@ export RUSTFLAGS=--cfg=web_sys_unstable_apis
 CRATE_NAME="egui_demo_app"
 
  # NOTE: persistence use up about 400kB (10%) of the WASM!
-FEATURES="glow,http,persistence,web_screen_reader"
+FEATURES="http,persistence,web_screen_reader"
 
 OPEN=false
 OPTIMIZE=false
 BUILD=debug
 BUILD_FLAGS=""
+WEB_GPU=false
 
 while test $# -gt 0; do
   case "$1" in
     -h|--help)
-      echo "build_demo_web.sh [--release] [--open]"
+      echo "build_demo_web.sh [--release] [--webgpu] [--open]"
       echo ""
       echo "  --release: Build with --release, and enable extra optimization step"
       echo "             Runs wasm-opt."
       echo "             NOTE: --release also removes debug symbols which are otherwise useful for in-browser profiling."
       echo ""
-      echo "  --open:     Open the result in a browser"
+      echo "  --webgpu:  Build a binary for WebGPU instead of WebGL"
+      echo "             Note that the resulting wasm will ONLY work on browsers with WebGPU."
+      echo ""
+      echo "  --open:    Open the result in a browser"
       exit 0
       ;;
 
@@ -40,6 +44,11 @@ while test $# -gt 0; do
       BUILD_FLAGS="--release"
       ;;
 
+    --webgpu)
+      shift
+      WEB_GPU=true
+      ;;
+
     --open)
       shift
       OPEN=true
@@ -51,8 +60,18 @@ while test $# -gt 0; do
   esac
 done
 
+OUT_FILE_NAME="egui_demo_app"
+
+if [[ "${WEB_GPU}" == true ]]; then
+  FEATURES="${FEATURES},wgpu"
+else
+  FEATURES="${FEATURES},glow"
+fi
+
+FINAL_WASM_PATH=docs/${OUT_FILE_NAME}_bg.wasm
+
 # Clear output from old stuff:
-rm -f "docs/${CRATE_NAME}_bg.wasm"
+rm -f "${FINAL_WASM_PATH}"
 
 echo "Building rust…"
 
@@ -71,22 +90,22 @@ TARGET=`cargo metadata --format-version=1 | jq --raw-output .target_directory`
 echo "Generating JS bindings for wasm…"
 TARGET_NAME="${CRATE_NAME}.wasm"
 WASM_PATH="${TARGET}/wasm32-unknown-unknown/$BUILD/$TARGET_NAME"
-wasm-bindgen "${WASM_PATH}" --out-dir docs --no-modules --no-typescript
+wasm-bindgen "${WASM_PATH}" --out-dir docs --out-name ${OUT_FILE_NAME} --no-modules --no-typescript
 
 # if this fails with "error: cannot import from modules (`env`) with `--no-modules`", you can use:
 # wasm2wat target/wasm32-unknown-unknown/release/egui_demo_app.wasm | rg env
 # wasm2wat target/wasm32-unknown-unknown/release/egui_demo_app.wasm | rg "call .now\b" -B 20 # What calls `$now` (often a culprit)
 
 # to get wasm-strip:  apt/brew/dnf install wabt
-# wasm-strip docs/${CRATE_NAME}_bg.wasm
+# wasm-strip ${FINAL_WASM_PATH}
 
 if [[ "${OPTIMIZE}" = true ]]; then
   echo "Optimizing wasm…"
   # to get wasm-opt:  apt/brew/dnf install binaryen
-  wasm-opt "docs/${CRATE_NAME}_bg.wasm" -O2 --fast-math -o "docs/${CRATE_NAME}_bg.wasm" # add -g to get debug symbols
+  wasm-opt "${FINAL_WASM_PATH}" -O2 --fast-math -o "${FINAL_WASM_PATH}" # add -g to get debug symbols
 fi
 
-echo "Finished docs/${CRATE_NAME}_bg.wasm"
+echo "Finished ${FINAL_WASM_PATH}"
 
 if [[ "${OPEN}" == true ]]; then
   if [[ "$OSTYPE" == "linux-gnu"* ]]; then