Added a WASM demo.

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions-rs/cargo@v1
         with:
           command: check
-          args: --all
+          args: --all --exclude web
 
   test:
     name: Test Suite

.gitignore

@@ -1,11 +1,17 @@
 # Cargo specific.
 /target
 Cargo.lock
+
+# wasm-pack, npm, Parcel.
+/web/.parcel-cache
+/web/dist
+/web/node_modules
+/web/package-lock.json
 /web/pkg
 
 # Editors and IDEs.
 .idea
 .vscode
 
 # Misc.
-.DS_Store
+.DS_Store

Cargo.toml

@@ -21,6 +21,7 @@ members = [
     "demo",
     "e2e-tests",
     "forma",
+    "web",
 ]
 resolver = "2"
 

forma/src/lib.rs

@@ -142,6 +142,7 @@ pub mod prelude {
         },
         Channel, BGR0, BGR1, BGRA, RGB0, RGB1, RGBA,
     };
+    #[cfg(feature = "gpu")]
     pub use crate::gpu::Timings;
     pub use crate::{
         math::{AffineTransform, GeomPresTransform, Point},

web/.cargo/config.toml

@@ -0,0 +1,5 @@
+[target.wasm32-unknown-unknown]
+rustflags = ["-C", "target-feature=+simd128,+atomics,+bulk-memory,+mutable-globals"]
+
+[unstable]
+build-std = ["panic_abort", "std"]

web/.proxyrc.js

@@ -0,0 +1,22 @@
+// Copyright 2022 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+module.exports = function (app) {
+	app.use((req, res, next) => {
+    res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+
+		next();
+	});
+}

web/Cargo.toml

@@ -0,0 +1,45 @@
+# Copyright 2022 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+[package]
+name = "web"
+version = "0.1.0"
+edition = "2021"
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = false
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[features]
+default = ["console_error_panic_hook"]
+
+[dependencies]
+forma = { path = "../forma", package = "forma-render", default-features = false }
+getrandom = { version = "0.2", features = ["js"] }
+nalgebra = "0.31.4"
+rand = { version = "0.8", features = ["small_rng"] }
+wasm-bindgen = "0.2.63"
+wasm-bindgen-rayon = "1.0"
+winit = "0.27.1"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.6", optional = true }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.13"

web/README.md

@@ -0,0 +1,8 @@
+You can run the web demo with:
+
+```sh
+npm install
+npm run build
+npm start
+```
+

web/index.html

@@ -0,0 +1,29 @@
+<!--
+  Copyright 2022 Google LLC
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+  </head>
+  <body>
+    <main>
+      <input type="checkbox" id="partials" name="partials">
+      <label for="partials">Visualize partial updates</label>
+      <p id="fps">FPS: ??? (???/???)</p>
+      <canvas id="drawing" width="1000" height="1000" style="width: 500;"></canvas>
+      <script src="index.js" type="module"></script>
+    </main>
+  </body>
+</html>

web/index.js

@@ -0,0 +1,114 @@
+// Copyright 2022 Google LLC
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//     https://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const partials = document.getElementById('partials');
+
+const canvas = document.getElementById('drawing');
+const ctx = canvas.getContext('2d');
+
+var controls = 0b0000;
+
+document.addEventListener('keydown', (event) => {
+  switch (event.key) {
+    case "Up":
+    case "ArrowUp":
+      controls |= 0b1000;
+      break;
+    case "Right":
+    case "ArrowRight":
+      controls |= 0b0100;
+      break;
+    case "Down":
+    case "ArrowDown":
+      controls |= 0b0010;
+      break;
+    case "Left":
+    case "ArrowLeft":
+      controls |= 0b0001;
+      break;
+  }
+}, false);
+document.addEventListener('keyup', (event) => {
+  switch (event.key) {
+    case "Up":
+    case "ArrowUp":
+      controls &= 0b0111;
+      break;
+    case "Right":
+    case "ArrowRight":
+      controls &= 0b1011;
+      break;
+    case "Down":
+    case "ArrowDown":
+      controls &= 0b1101;
+      break;
+    case "Left":
+    case "ArrowLeft":
+      controls &= 0b1110;
+      break;
+  }
+}, false);
+
+const worker = new Worker(new URL('./worker.js', import.meta.url), {
+  type: 'module'
+});
+worker.postMessage({
+  'width': canvas.width,
+  'height': canvas.height,
+  'partials': partials.checked,
+});
+
+const fps = document.getElementById('fps');
+
+let timings = [];
+function pushTiming(timing) {
+  timings.push(timing);
+
+  if (timings.length == 50) {
+    const sum = timings.reduce((a, b) => a + b, 0);
+    const avg = (sum / timings.length) || 0;
+    const min = Math.min(...timings);
+    const max = Math.max(...timings);
+
+    fps.innerHTML = 'FPS: ' + (1 / avg).toFixed(2) + ' (' + (1 / max).toFixed(2) + '/' + (1 / min).toFixed(2) + ')';
+
+    timings = [];
+  }
+}
+
+let last_timestamp = 0;
+function animation(timestamp) {
+  const elapsed = timestamp - last_timestamp;
+  last_timestamp = timestamp;
+
+  pushTiming(elapsed / 1000);
+
+  worker.postMessage({
+    'elapsed': elapsed,
+    'width': canvas.width,
+    'height': canvas.height,
+    'partials': partials.checked,
+    'controls': controls,
+  });
+}
+
+worker.onmessage = function(message) {
+  ctx.putImageData(new ImageData(
+    new Uint8ClampedArray(message.data),
+    canvas.width,
+    canvas.height
+  ), 0, 0);
+
+  window.requestAnimationFrame(animation);
+}

web/package.json

@@ -0,0 +1,10 @@
+{
+  "source": "index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "wasm-pack build --target web && parcel build"
+  },
+  "devDependencies": {
+    "parcel": "^2.8.2"
+  }
+}

web/rust-toolchain

@@ -0,0 +1 @@
+nightly