Merge pull request #1096 from pacmancoder/feat/wgpu-webgl

Experimental WebGL wgpu backend support

Author: hecrj

.github/workflows/test.yml

@@ -37,3 +37,5 @@ jobs:
       run: cargo build --package tour --target wasm32-unknown-unknown
     - name: Check compilation of `todos` example
       run: cargo build --package todos --target wasm32-unknown-unknown
+    - name: Check compilation of `integration_wgpu` example
+      run: cargo build --package integration_wgpu --target wasm32-unknown-unknown

.gitignore

@@ -3,3 +3,4 @@ pkg/
 **/*.rs.bk
 Cargo.lock
 .cargo/
+dist/

Cargo.toml

@@ -13,7 +13,7 @@ categories = ["gui"]
 resolver = "2"
 
 [features]
-default = ["wgpu", "default_system_font"]
+default = ["wgpu"]
 # Enables the `iced_wgpu` renderer
 wgpu = ["iced_wgpu"]
 # Enables the `Image` widget
@@ -58,7 +58,6 @@ members = [
     "lazy",
     "native",
     "style",
-    "web",
     "wgpu",
     "winit",
     "examples/bezier_tool",
@@ -94,16 +93,16 @@ members = [
 [dependencies]
 iced_core = { version = "0.4", path = "core" }
 iced_futures = { version = "0.3", path = "futures" }
+iced_winit = { version = "0.3", path = "winit" }
+iced_glutin = { version = "0.2", path = "glutin", optional = true }
+iced_glow = { version = "0.2", path = "glow", optional = true }
 thiserror = "1.0"
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-iced_winit = { version = "0.3", path = "winit" }
-iced_glutin = { version = "0.2", path = "glutin", optional = true }
 iced_wgpu = { version = "0.4", path = "wgpu", optional = true }
-iced_glow = { version = "0.2", path = "glow", optional = true}
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
-iced_web = { version = "0.4", path = "web" }
+iced_wgpu = { version = "0.4", path = "wgpu", features = ["webgl"], optional = true }
 
 [package.metadata.docs.rs]
 rustdoc-args = ["--cfg", "docsrs"]

core/Cargo.toml

@@ -13,3 +13,6 @@ bitflags = "1.2"
 [dependencies.palette]
 version = "0.5"
 optional = true
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+wasm-timer = { version = "0.2" }

core/src/lib.rs

@@ -17,6 +17,7 @@
 pub mod alignment;
 pub mod keyboard;
 pub mod mouse;
+pub mod time;
 
 mod background;
 mod color;

core/src/time.rs

@@ -0,0 +1,9 @@
+//! Keep track of time, both in native and web platforms!
+
+#[cfg(target_arch = "wasm32")]
+pub use wasm_timer::Instant;
+
+#[cfg(not(target_arch = "wasm32"))]
+pub use std::time::Instant;
+
+pub use std::time::Duration;

examples/integration_wgpu/.gitignore

@@ -0,0 +1,2 @@
+*.wasm
+*.js

examples/integration_wgpu/Cargo.toml

@@ -7,5 +7,16 @@ publish = false
 
 [dependencies]
 iced_winit = { path = "../../winit" }
-iced_wgpu = { path = "../../wgpu", features = ["spirv"] }
+iced_wgpu = { path = "../../wgpu", features = ["webgl"] }
 env_logger = "0.8"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+console_error_panic_hook = "0.1.7"
+console_log = "0.2.0"
+log = "0.4"
+wasm-bindgen = "0.2"
+web-sys = { version = "0.3", features = ["Element", "HtmlCanvasElement", "Window", "Document"] }
+# This dependency a little bit quirky, it is deep in the tree and without `js` feature it
+# refuses to work with `wasm32-unknown-unknown target`. Unfortunately, we need this patch
+# to make it work
+getrandom = { version = "0.2", features = ["js"] }

examples/integration_wgpu/README.md

@@ -15,5 +15,22 @@ You can run it with `cargo run`:
 cargo run --package integration
 ```
 
+### How to run this example with WebGL backend
+NOTE: Currently, WebGL backend is is still experimental, so expect bugs.
+
+```sh
+# 0. Install prerequisites
+cargo install wasm-bindgen-cli https
+# 1. cd to the current folder
+# 2. Compile wasm module
+cargo build -p integration_wgpu --target wasm32-unknown-unknown
+# 3. Invoke wasm-bindgen
+wasm-bindgen ../../target/wasm32-unknown-unknown/debug/integration_wgpu.wasm --out-dir . --target web --no-typescript
+# 4. run http server
+http
+# 5. Open 127.0.0.1:8000 in browser
+```
+
+
 [`main`]: src/main.rs
 [`wgpu`]: https://github.com/gfx-rs/wgpu

examples/integration_wgpu/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>Iced - wgpu + WebGL integration</title>
+  </head>
+  <body>
+    <h1>integration_wgpu</h1>
+    <canvas id="iced_canvas"></canvas>
+    <script type="module">
+      import init from "./integration_wgpu.js";
+      init('./integration_wgpu_bg.wasm');
+    </script>
+    <style>
+      body {
+        width: 100%;
+        text-align: center;
+      }
+    </style>
+  </body>
+</html>