Add WebAssembly demo (#87)

look I'm a web developer now
mkeeter · Apr 17, 2024 · 9916958 · 9916958
1 parent a53276d
commit 9916958
Show file tree

Hide file tree

Showing 11 changed files with 8,124 additions and 1 deletion.
diff --git a/.github/workflows/wasm-demo.yml b/.github/workflows/wasm-demo.yml
@@ -0,0 +1,28 @@
+name: wasm-demo build
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./wasm-demo
+    steps:
+    - uses: actions/checkout@v4
+    - uses: Swatinem/rust-cache@v2
+    - name: Install wasm target
+      run: rustup target add wasm32-unknown-unknown
+    - name: Install npm dependencies
+      run: npm install
+    - name: Check Prettier
+      run: npx prettier . --check
+    - name: Build wasm-demo
+      run: npm run build
diff --git a/Cargo.toml b/Cargo.toml
@@ -6,6 +6,7 @@ members = [
     "viewer",
     "workspace-hack",
 ]
+exclude = ["wasm-demo"]
 
 [profile.release]
 debug = true

diff --git a/README.md b/README.md
@@ -55,12 +55,26 @@ so adjust your expectations accordingly.
 In the [repository on Github](https://github.com/mkeeter/fidget), there are
 two demo applications:
 
-- `demo` does bitmap rendering from the command line
+- `demo` does bitmap rendering and meshing from the command line
 - `viewer` is a minimal GUI for interactive exploration
 
 These are deliberately not published to [https://crates.io](crates.io), because
 they're demo applications and not complete end-user tools.
 
+## WebAssembly demo
+The `wasm-demo` subfolder embeds Fidget into a web application.
+
+In that folder, run it with
+```
+npm install
+npm run serve
+```
+
+Or bundle files for distribution with
+```
+npm run build
+```
+
 ## Support matrix
 At the moment, Fidget supports a limited number of platforms:
 

diff --git a/wasm-demo/.gitignore b/wasm-demo/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+pkg
+dist
+target
diff --git a/wasm-demo/Cargo.toml b/wasm-demo/Cargo.toml
@@ -0,0 +1,14 @@
+[package]
+name = "fidget-wasm-demo"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+fidget = {path = "../fidget", default-features = false, features = ["rhai", "mesh", "render"]}
+wasm-bindgen = "0.2.92"
+
+# Take advantage of feature unification to turn on wasm-bindgen here
+rhai = { version = "*", features = ["wasm-bindgen"] }
diff --git a/wasm-demo/index.html b/wasm-demo/index.html
@@ -0,0 +1,55 @@
+<html>
+  <head>
+    <style>
+      div#editor {
+        height: 512;
+        width: 100%;
+        display: block;
+        outline: 1px solid #bbb;
+      }
+      div#output-outer {
+        width: 100%;
+        display: block;
+        margin-top: 10px;
+        outline: 1px solid #bbb;
+      }
+      div#canvascol {
+        width: 100%;
+        padding-right: 10px;
+      }
+      canvas#glcanvas {
+        display: block;
+        margin-left: 10px;
+        aspect-ratio: 1;
+        max-height: 512px;
+        width: calc(min(100%, 512px));
+        outline: 1px solid #bbb;
+      }
+      span#status {
+        display: block;
+        margin-left: 10px;
+        margin-top: 15px;
+        font-family: monospace;
+      }
+      .row {
+        display: flex;
+      }
+      .column {
+        flex: 50%;
+      }
+    </style>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+  </head>
+  <body>
+    <div class="row">
+      <div class="column">
+        <div id="editor-outer"></div>
+        <div id="output-outer"></div>
+      </div>
+      <div class="column" id="canvascol">
+        <canvas id="glcanvas" width="512" height="512"></canvas>
+        <span id="status">Loading...</span>
+      </div>
+    </div>
+  </body>
+</html>