From 0e6d69d4c460c288a257f47cd007c5131a1d61de Mon Sep 17 00:00:00 2001 From: Andreas Reich Date: Mon, 24 Apr 2023 11:26:45 +0200 Subject: [PATCH] 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 --- Cargo.lock | 13 ++----- crates/eframe/CHANGELOG.md | 1 + crates/eframe/Cargo.toml | 5 +-- crates/eframe/src/epi/mod.rs | 4 +-- crates/eframe/src/web/web_painter_wgpu.rs | 41 ++++++++++++++++++++--- crates/egui-wgpu/src/lib.rs | 2 ++ scripts/build_demo_web.sh | 35 ++++++++++++++----- 7 files changed, 73 insertions(+), 28 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 4811a0d5..df8f811a 100644 --- a/Cargo.lock +++ b/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" diff --git a/crates/eframe/CHANGELOG.md b/crates/eframe/CHANGELOG.md index d50d6670..50bd5cb6 100644 --- a/crates/eframe/CHANGELOG.md +++ b/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)). diff --git a/crates/eframe/Cargo.toml b/crates/eframe/Cargo.toml index a7a52c13..5eee9709 100644 --- a/crates/eframe/Cargo.toml +++ b/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 } diff --git a/crates/eframe/src/epi/mod.rs b/crates/eframe/src/epi/mod.rs index 33ef0f75..75804980 100644 --- a/crates/eframe/src/epi/mod.rs +++ b/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(), diff --git a/crates/eframe/src/web/web_painter_wgpu.rs b/crates/eframe/src/web/web_painter_wgpu.rs index 3daa3bdc..93742133 100644 --- a/crates/eframe/src/web/web_painter_wgpu.rs +++ b/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 { 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 { diff --git a/crates/egui-wgpu/src/lib.rs b/crates/egui-wgpu/src/lib.rs index 9edbcd44..a89539f3 100644 --- a/crates/egui-wgpu/src/lib.rs +++ b/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, diff --git a/scripts/build_demo_web.sh b/scripts/build_demo_web.sh index c55f2c96..60892c44 100755 --- a/scripts/build_demo_web.sh +++ b/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