move wasm build from experimental to examples, delete deprecated emscripten-free wasm experiments

Author: austinvhuang

examples/README.md

@@ -1,20 +1,29 @@
-# Examples (Work-in-Progress)
+# gpu.cpp examples
 
-Here are some standalone projects exemplifying how to use this library as well
-as what's under the hood.
+This directory contains examples of how to use gpu.cpp. 
 
-Note some of these examples are still a work-in-progress and may not be fully
-functional.
+Each example is a standalone project that can be built and run independently by
+running `make` from within the example directory.
 
-In order of beginning to advanced:
+Before running any of these examples, make sure you've downloaded the Dawn
+native webgpu installation binary by running `make dawnlib` from the root
+directory of the repository.
+
+## Basic Examples
 
 | Example | Description |
 |---------|-------------|
 | [hello_world](hello_world) | Minimal example to get started with gpu.cpp, implements a GELU neural network activation function. |
-| [gpu_puzzles](gpu_puzzles) | (WIP) Implementation of Sasha Rush's GPU puzzles
-| [render](render) | GPU rendering of a signed distance function for a 3D sphere. |
-| [shadertui](shadertui) | A terminal UI taker on shadertoy demonstrating runtime live reloading of WGSL. |
+| [gpu_puzzles](gpu_puzzles) | Implementation of Sasha Rush's GPU puzzles. |
+| [shadertui](shadertui) | An example of runtime live reloading of WGSL - demonstrated using a terminal shadertoy-like scii rendering. |
+| [render](render) | GPU ascii rendering of a signed distance function for two rotating 3D spheres. |
 | [physics](physics) | Parallel physics simulation of a double pendulum with each thread starting at a different initial condition. |
+| [web](web) | A minimal example of how to use gpu.cpp to build a WebAssembly module that runs in the browser. Before building this example, make sure you've installed the emscripten sdk by following the [instructions here](https://emscripten.org/docs/getting_started/downloads.html) and run `source emsdk_env.sh` from the `emsdk/` directory that was created when you cloned the emscripten repository. |
+
+## Advanced Examples
+
+| Example | Description |
+|---------|-------------|
 | [matmul](matmul) | Tiled matrix multiplication. |
 | [transpose](transpose) | Tiled matrix transpose. |
 | [webgpu_from_scratch](webgpu_from_scratch) | A minimal from-scratch example of how to use WebGPU directly without this library. This is useful to understand the code internals of gpu.cpp. Note this takes a while to build as it compiles the WebGPU C API implementation. |

experimental/wasm/emscripten/CMakeLists.txt examples/web/CMakeLists.txt

@@ -13,10 +13,4 @@ set(SHELL_FILE_PATH "../custom_shell.html")
 # see https://emscripten.org/docs/api_reference/emscripten.h.html#pseudo-synchronous-functions
 target_link_options(run PRIVATE "-sUSE_WEBGPU=1" "-sASYNCIFY=1" "--shell-file=${SHELL_FILE_PATH}")
 
-# em++ compiler arguments
-target_compile_options(run PRIVATE "-sUSE_WEBGPU=1" "-sASYNCIFY=1" "--shell-file=${SHELL_FILE_PATH}")
-
-
-target_include_directories(run PRIVATE "../../../")
-target_include_directories(run PRIVATE "../../../numeric_types")
-target_include_directories(run PRIVATE "../../../utils")
+target_include_directories(run PRIVATE "../../")

examples/web/Makefile

@@ -0,0 +1,38 @@
+GPUCPP=../..
+FLAGS=-std=c++17 -s USE_WEBGPU=1 -s ASYNCIFY=1 -I$(GPUCPP)
+
+.PHONY: default cmake check-emsdk browser clean
+
+default: server
+
+build/run.html: check-emsdk run.cpp custom_shell.html
+	em++ run.cpp -o build/run.html \
+		$(FLAGS) \
+		--shell-file custom_shell.html \
+
+build/run.wasm: check-emsdk run.cpp custom_shell.html
+	em++ run.cpp -o build/run.wasm \
+		$(FLAGS) \
+		--shell-file custom_shell.html \
+
+# make clean explicit here because custom_shell.html changes don't trigger a rebuild
+cmake: check-emsdk clean
+	emcmake cmake -B build && cmake --build build -j4
+	python3 -m http.server --directory .
+
+server: build/run.html
+	@echo "\n┌───────────────────────────────────────────────────────────────────────────────────┐"
+	@echo   "│  Open http://localhost:8000/build/run.html in your browser to see the output.     │"
+	@echo	  "│                                                                                   │"
+	@echo	  "│  Press Ctrl+C to stop the server.                                                 │"
+	@echo   "└───────────────────────────────────────────────────────────────────────────────────┘\n\n"
+	python3 -m http.server --directory .
+
+open-browser:
+	open http://127.0.0.1:8000/build/run.html
+
+clean:
+	rm -rf build/*
+
+check-emsdk:
+	@which em++ > /dev/null || (echo "emsdk not found. Please install emsdk and run 'source emsdk_env.sh' in the emsdk directory." && exit 1)