Add Script for Running WASM Examples

gfx-rs · Jul 19, 2021 · 8667453 · 8667453
1 parent f3ffdc5
commit 8667453
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 1 deletion.
diff --git a/run-wasm-example.sh b/run-wasm-example.sh
@@ -0,0 +1,34 @@
+#!/bin/env bash
+
+set -e
+
+echo "Compiling..."
+cargo build --example $1 --target wasm32-unknown-unknown --features webgl
+
+echo "Generating bindings..."
+mkdir -p target/wasm-examples/$1
+wasm-bindgen --target web --out-dir target/wasm-examples/$1 target/wasm32-unknown-unknown/debug/examples/$1.wasm
+cp wasm-resources/index.template.html target/wasm-examples/$1/index.html
+sed -i "s/{{example}}/$1/g" target/wasm-examples/$1/index.html
+
+# Find a serving tool to host the example
+SERVE_CMD=""
+SERVE_ARGS=""
+if which basic-http-server; then
+    SERVE_CMD="basic-http-server"
+    SERVE_ARGS="target/wasm-examples/$1 -a 127.0.0.1:1234"
+elif which miniserve && python3 -m http.server --help > /dev/null; then 
+    SERVE_CMD="miniserve"
+    SERVE_ARGS="target/wasm-examples/$1 -p 1234 --index index.html"
+elif python3 -m http.server --help > /dev/null; then 
+    SERVE_CMD="python3"
+    SERVE_ARGS="-m http.server --directory target/wasm-examples/$1 1234"
+fi
+
+# Exit if we couldn't find a tool to serve the example with
+if [ "$SERVE_CMD" = "" ]; then 
+    echo "Couldn't find a utility to use to serve the example web page. You can serve the `target/wasm-examples/$1` folder yourself using any simple static http file server."
+fi
+
+echo "Serving example with $SERVE_CMD at http://localhost:1234"
+$SERVE_CMD $SERVE_ARGS
diff --git a/wasm-resources/README.md b/wasm-resources/README.md
@@ -0,0 +1,3 @@
+# WASM Resources
+
+This directory contains resources used when building the WGPU examples for web.
diff --git a/wasm-resources/index.template.html b/wasm-resources/index.template.html
@@ -0,0 +1,13 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+  </head>
+  <body>
+    <script type="module">
+      import init from "./{{example}}.js";
+      window.addEventListener("load", () => {
+        init();
+      });
+    </script>
+  </body>
+</html>
diff --git a/wgpu/README.md b/wgpu/README.md
@@ -39,9 +39,15 @@ The following environment variables can be used to configure how the framework e
 
   If unset a low power adapter is preferred.
 
+- `WGPU_ADAPTER_NAME`
+
+  Select a specific adapter by specifying a substring of the adapter name.
+
 #### Run Examples on the Web (`wasm32-unknown-unknown`)
 
-See [wiki article](https://github.com/gfx-rs/wgpu-rs/wiki/Running-on-the-Web-with-WebGPU-and-WebGL).
+From the root of the repository you can use the `run-wasm-example.sh` script to compile and serve the web example locally. The script will build WGPU with WebGPU and WebGL support with WebGL being used if WebGPU is not supported in the target browser.
+
+> **Note:** Not all of the examples currently run on WebGL.
 
 ## Shaders
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# WASM Resources

		This directory contains resources used when building the WGPU examples for web.