From d6299bcd91cec0af394ba3ec769eeee9e9884eda Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 16 Aug 2021 21:17:15 +0200 Subject: [PATCH] Expand egui_web/README.md with list of shortcomings --- README.md | 14 +++++++------- egui_web/README.md | 18 ++++++++++++++++++ 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 928d41abe..c12fe1726 100644 --- a/README.md +++ b/README.md @@ -37,11 +37,11 @@ If you have questions, use [Discussions](https://github.com/emilk/egui/discussio ## Demo -[Click to run egui web demo](https://emilk.github.io/egui/index.html) (works in any browser with WASM and WebGL support). +[Click to run egui web demo](https://emilk.github.io/egui/index.html) (works in any browser with WASM and WebGL support). Uses [`egui_web`](https://github.com/emilk/egui/tree/master/egui_web). To test the demo app locally, run `cargo run --release -p egui_demo_app`. -The native backend is currently using [`glium`](https://github.com/glium/glium) ([though there are plans to change that](https://github.com/emilk/egui/issues/93)) and should work out-of-the-box on Mac and Windows, but on Linux you need to first run: +The native backend is [`egui_glium`](https://github.com/emilk/egui/tree/master/egui_glium) (using [`glium`](https://github.com/glium/glium)) and should work out-of-the-box on Mac and Windows, but on Linux you need to first run: `sudo apt-get install libxcb-render0-dev libxcb-shape0-dev libxcb-xfixes0-dev libspeechd-dev libxkbcommon-dev` @@ -79,7 +79,7 @@ ui.label(format!("Hello '{}', age {}", name, age)); * Extensible: [easy to write your own widgets for egui](https://github.com/emilk/egui/blob/master/egui_demo_lib/src/apps/demo/toggle_switch.rs) * Modular: You should be able to use small parts of egui and combine them in new ways * Safe: there is no `unsafe` code in egui -* Minimal dependencies: [`ahash`](https://crates.io/crates/ahash) [`atomic_refcell`](https://crates.io/crates/atomic_refcell) [`ordered-float`](https://crates.io/crates/ordered-float) [`ab_glyph`](https://crates.io/crates/ab_glyph). +* Minimal dependencies: [`ab_glyph`](https://crates.io/crates/ab_glyph) [`ahash`](https://crates.io/crates/ahash) [`atomic_refcell`](https://crates.io/crates/atomic_refcell) [`ordered-float`](https://crates.io/crates/ordered-float). egui is *not* a framework. egui is a library you call into, not an environment you program for. @@ -101,11 +101,11 @@ But if you are writing something interactive in Rust that needs a simple GUI, eg ### egui vs Dear ImGui -The obvious alternative to egui is [`imgui-rs`](https://github.com/Gekkio/imgui-rs), the Rust wrapper around the C++ library [Dear ImGui](https://github.com/ocornut/imgui). Dear ImGui is a great library, which a lot more features and polish compared to egui. However, egui provides some benefits for Rust users: +The obvious alternative to egui is [`imgui-rs`](https://github.com/Gekkio/imgui-rs), the Rust wrapper around the C++ library [Dear ImGui](https://github.com/ocornut/imgui). Dear ImGui is a great library (and the main inspiration for egui), with a lot more features and polish. However, egui provides some benefits for Rust users: * egui is pure Rust * egui is easily compiled to WASM -* egui lets you use native Rust String types (`imgui-rs` forces you to use annoying macros and wrappers for zero-terminated strings) +* egui lets you use native Rust string types (`imgui-rs` forces you to use annoying macros and wrappers for zero-terminated strings) * [Writing your own widgets in egui is simple](https://github.com/emilk/egui/blob/master/egui_demo_lib/src/apps/demo/toggle_switch.rs) egui also tries to improve your experience in other small ways: @@ -162,8 +162,8 @@ The integration needs to do two things: I maintain two official egui integrations made for apps: -* [`egui_web`](https://crates.io/crates/egui_web) for making a web app. Compiles to WASM, renders with WebGL. [Click to run the egui demo](https://emilk.github.io/egui/index.html). -* [`egui_glium`](https://crates.io/crates/egui_glium) for compiling native apps with [Glium](https://github.com/glium/glium). +* [`egui_web`](https://github.com/emilk/egui/tree/master/egui_web) for making a web app. Compiles to WASM, renders with WebGL. [Click to run the egui demo](https://emilk.github.io/egui/index.html). +* [`egui_glium`](https://github.com/emilk/egui/tree/master/egui_glium) for compiling native apps with [Glium](https://github.com/glium/glium). If you making an app, consider using [`eframe`](https://github.com/emilk/egui/tree/master/eframe), a framework which allows you to write code that works on both the web (`egui_web`) and native (using `egui_glium`). diff --git a/egui_web/README.md b/egui_web/README.md index 22502c482..74b5c80e2 100644 --- a/egui_web/README.md +++ b/egui_web/README.md @@ -8,4 +8,22 @@ This crates allows you to compile GUI code written with [egui](https://crates.io/crates/egui) to [WASM](https://en.wikipedia.org/wiki/WebAssembly) to run on a web page. +[Run the web demo](https://emilk.github.io/egui/index.html) to try it now. + Check out [egui_template](https://github.com/emilk/egui_template) for an example of how to set it up. + +## Downsides with using egui on the web + +`egui_web` uses WebGL and WASM, and almost nothing else from the web tech stack. This has some benefits, but also produces some challanges and serious downsides. + +* Rendering: Getting pixel-perfect rendering right on the web is very difficult, leading to text that is hard to read on low-DPI screens (https://github.com/emilk/egui/issues/516). Additonally, WebGL does not support linear framebuffer blending. +* Search: you cannot search a egui web page like you would a normal web page. +* Bringing up an on-screen keyboard on mobile: there is no JS function to do this, so `egui_web` fakes it by adding some invisible DOM elements. It doesn't always work. +* Mobile text editing is not as good as for a normal web app. +* Accessibility: There is an experimental screen reader for `egui_web`, but it has to be enabled explicitly. There is no JS function to ask "Does the user want a screen reader?" (and there should probably not be such a function, due to user tracking/integrity conserns). +* No integration with browser settings for colors and fonts. +* On Linux and Mac, Firefox will copy the WebGL render target from GPU, to CPU and then back again (https://bugzilla.mozilla.org/show_bug.cgi?id=1010527#c0), slowing down egui. + +The suggested use for `egui_web` is for experiments, personal projects and web games. Using egui for a serious web page is probably a bad idea. + +In many ways, `egui_web` is trying to make the browser do something it wasn't designed to do (though there are many things browser vendors could do to improve how well libraries like egui work).