web examples working with vuepress

Cargo.lock

@@ -2945,7 +2945,7 @@ dependencies = [
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
- "wgpu 0.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
+ "wgpu 0.12.0 (git+https://github.com/gfx-rs/wgpu)",
  "winit",
 ]
 

build-wasm.sh

@@ -1,3 +1,4 @@
+export RES_PATH=learn-wgpu
 (trap 'killall background' INT;
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/pong code/showcase/pong &
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial1_window code/beginner/tutorial1-window &

code/beginner/tutorial9-models/Cargo.toml

@@ -35,6 +35,7 @@ web-sys = { version = "0.3", features = [
     "Document",
     "Window",
     "Element",
+    "Location",
 ]}
 
 [build-dependencies]

code/beginner/tutorial9-models/src/resources.rs

@@ -5,11 +5,23 @@ use wgpu::util::DeviceExt;
 
 use crate::{model, texture};
 
+#[cfg(target_arch = "wasm32")]
+    fn format_url(file_name: &str) -> reqwest::Url {
+    let window = web_sys::window().unwrap();
+    let location = window.location();
+    let base = reqwest::Url::parse(&format!(
+        "{}/{}/",
+        location.origin().unwrap(),
+        option_env!("RES_PATH").unwrap_or("res"),
+    )).unwrap();
+    base.join(file_name).unwrap()
+}
+
 pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
-            let txt = reqwest::get(&url)
+            let url = format_url(file_name);
+            let txt = reqwest::get(url)
                 .await?
                 .text()
                 .await?;
@@ -27,7 +39,7 @@ pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
 pub async fn load_binary(file_name: &str) -> anyhow::Result<Vec<u8>> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
+            let url = format_url(file_name);
             let data = reqwest::get(url)
                 .await?
                 .bytes()

code/intermediate/tutorial10-lighting/Cargo.toml

@@ -16,7 +16,7 @@ env_logger = "0.9"
 pollster = "0.2"
 log = "0.4"
 tobj = { version = "3.2", features = ["async"]}
-wgpu = "0.12"
+wgpu = { version = "0.12", git="https://github.com/gfx-rs/wgpu"}
 winit = "0.26"
 
 [dependencies.image]
@@ -28,13 +28,14 @@ features = ["png", "jpeg"]
 reqwest = { version = "0.11" }
 console_error_panic_hook = "0.1"
 console_log = "0.2"
-wgpu = { version = "0.12", features = ["webgl"]}
+wgpu = { version = "0.12", git="https://github.com/gfx-rs/wgpu", features = ["webgl"]}
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 web-sys = { version = "0.3", features = [
     "Document",
     "Window",
     "Element",
+    "Location",
 ]}
 
 [build-dependencies]

code/intermediate/tutorial10-lighting/src/light.wgsl

@@ -4,26 +4,26 @@ struct Camera {
     view_pos: vec4<f32>;
     view_proj: mat4x4<f32>;
 };
-[[group(0), binding(0)]]
+@group(0) @binding(0)
 var<uniform> camera: Camera;
 
 struct Light {
     position: vec3<f32>;
     color: vec3<f32>;
 };
-[[group(1), binding(0)]]
+@group(1) @binding(0)
 var<uniform> light: Light;
 
 struct VertexInput {
-    [[location(0)]] position: vec3<f32>;
+    @location(0) position: vec3<f32>;
 };
 
 struct VertexOutput {
-    [[builtin(position)]] clip_position: vec4<f32>;
-    [[location(0)]] color: vec3<f32>;
+    @builtin(position) clip_position: vec4<f32>;
+    @location(0) color: vec3<f32>;
 };
 
-[[stage(vertex)]]
+@stage(vertex)
 fn vs_main(
     model: VertexInput,
 ) -> VertexOutput {
@@ -36,7 +36,7 @@ fn vs_main(
 
 // Fragment shader
 
-[[stage(fragment)]]
-fn fs_main(in: VertexOutput) -> [[location(0)]] vec4<f32> {
+@stage(fragment)
+fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
     return vec4<f32>(in.color, 1.0);
 }

code/intermediate/tutorial10-lighting/src/resources.rs

@@ -5,11 +5,23 @@ use wgpu::util::DeviceExt;
 
 use crate::{model, texture};
 
+#[cfg(target_arch = "wasm32")]
+    fn format_url(file_name: &str) -> reqwest::Url {
+    let window = web_sys::window().unwrap();
+    let location = window.location();
+    let base = reqwest::Url::parse(&format!(
+        "{}/{}/",
+        location.origin().unwrap(),
+        option_env!("RES_PATH").unwrap_or("res"),
+    )).unwrap();
+    base.join(file_name).unwrap()
+}
+
 pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
-            let txt = reqwest::get(&url)
+            let url = format_url(file_name);
+            let txt = reqwest::get(url)
                 .await?
                 .text()
                 .await?;
@@ -27,7 +39,7 @@ pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
 pub async fn load_binary(file_name: &str) -> anyhow::Result<Vec<u8>> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
+            let url = format_url(file_name);
             let data = reqwest::get(url)
                 .await?
                 .bytes()

code/intermediate/tutorial10-lighting/src/shader.wgsl

@@ -4,39 +4,39 @@ struct Camera {
     view_pos: vec4<f32>;
     view_proj: mat4x4<f32>;
 };
-[[group(1), binding(0)]]
+@group(1) @binding(0)
 var<uniform> camera: Camera;
 
 struct Light {
     position: vec3<f32>;
     color: vec3<f32>;
 };
-[[group(2), binding(0)]]
+@group(2) @binding(0)
 var<uniform> light: Light;
 
 struct VertexInput {
-    [[location(0)]] position: vec3<f32>;
-    [[location(1)]] tex_coords: vec2<f32>;
-    [[location(2)]] normal: vec3<f32>;
+    @location(0) position: vec3<f32>;
+    @location(1) tex_coords: vec2<f32>;
+    @location(2) normal: vec3<f32>;
 };
 struct InstanceInput {
-    [[location(5)]] model_matrix_0: vec4<f32>;
-    [[location(6)]] model_matrix_1: vec4<f32>;
-    [[location(7)]] model_matrix_2: vec4<f32>;
-    [[location(8)]] model_matrix_3: vec4<f32>;
-    [[location(9)]] normal_matrix_0: vec3<f32>;
-    [[location(10)]] normal_matrix_1: vec3<f32>;
-    [[location(11)]] normal_matrix_2: vec3<f32>;
+    @location(5) model_matrix_0: vec4<f32>;
+    @location(6) model_matrix_1: vec4<f32>;
+    @location(7) model_matrix_2: vec4<f32>;
+    @location(8) model_matrix_3: vec4<f32>;
+    @location(9) normal_matrix_0: vec3<f32>;
+    @location(10) normal_matrix_1: vec3<f32>;
+    @location(11) normal_matrix_2: vec3<f32>;
 };
 
 struct VertexOutput {
-    [[builtin(position)]] clip_position: vec4<f32>;
-    [[location(0)]] tex_coords: vec2<f32>;
-    [[location(1)]] world_normal: vec3<f32>;
-    [[location(2)]] world_position: vec3<f32>;
+    @builtin(position) clip_position: vec4<f32>;
+    @location(0) tex_coords: vec2<f32>;
+    @location(1) world_normal: vec3<f32>;
+    @location(2) world_position: vec3<f32>;
 };
 
-[[stage(vertex)]]
+@stage(vertex)
 fn vs_main(
     model: VertexInput,
     instance: InstanceInput,
@@ -63,13 +63,13 @@ fn vs_main(
 
 // Fragment shader
 
-[[group(0), binding(0)]]
+@group(0) @binding(0)
 var t_diffuse: texture_2d<f32>;
-[[group(0), binding(1)]]
+@group(0) @binding(1)
 var s_diffuse: sampler;
 
-[[stage(fragment)]]
-fn fs_main(in: VertexOutput) -> [[location(0)]] vec4<f32> {
+@stage(fragment)
+fn fs_main(in: VertexOutput) -> @location(0) vec4<f32> {
     let object_color: vec4<f32> = textureSample(t_diffuse, s_diffuse, in.tex_coords);
     
     // We don't need (or want) much ambient light, so 0.1 is fine

code/intermediate/tutorial11-normals/Cargo.toml

@@ -35,12 +35,7 @@ web-sys = { version = "0.3", features = [
     "Document",
     "Window",
     "Element",
-    'Headers',
-    'Request',
-    'RequestInit',
-    'RequestMode',
-    'Response',
-    'Location',
+    "Location",
 ]}
 
 [build-dependencies]

code/intermediate/tutorial11-normals/src/resources.rs

@@ -10,8 +10,9 @@ use crate::{model, texture};
     let window = web_sys::window().unwrap();
     let location = window.location();
     let base = reqwest::Url::parse(&format!(
-        "{}/res/",
+        "{}/{}/",
         location.origin().unwrap(),
+        option_env!("RES_PATH").unwrap_or("res"),
     )).unwrap();
     base.join(file_name).unwrap()
 }

docs/.vuepress/components/WasmExample.vue

@@ -19,6 +19,7 @@ function toTitleCase(str) {
 }
 
 export default {
+  name: "WasmExample",
   props: { 
     example: "",
     autoLoad: false,
@@ -39,10 +40,7 @@ export default {
     async loadExample() {
       this.loading = true;
       try {
-        const init = await import(`./wasm/${this.example}/${this.example}.js`);
-        init().then(() => {
-          console.log("WASM Loaded");
-        });
+        await import(`./wasm/${this.example}/${this.example}.js`);
       } catch (e) {
         // TODO: Figure out a better way to ignore "control flow" errors
         if (`${e}` != "Error: Using exceptions for control flow, don't mind me. This isn't actually an error!") {

docs/beginner/tutorial9-models/README.md

@@ -141,11 +141,23 @@ use wgpu::util::DeviceExt;
 
 use crate::{model, texture};
 
+#[cfg(target_arch = "wasm32")]
+    fn format_url(file_name: &str) -> reqwest::Url {
+    let window = web_sys::window().unwrap();
+    let location = window.location();
+    let base = reqwest::Url::parse(&format!(
+        "{}/{}/",
+        location.origin().unwrap(),
+        option_env!("RES_PATH").unwrap_or("res"),
+    )).unwrap();
+    base.join(file_name).unwrap()
+}
+
 pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
-            let txt = reqwest::get(&url)
+            let url = format_url(file_name);
+            let txt = reqwest::get(url)
                 .await?
                 .text()
                 .await?;
@@ -163,7 +175,7 @@ pub async fn load_string(file_name: &str) -> anyhow::Result<String> {
 pub async fn load_binary(file_name: &str) -> anyhow::Result<Vec<u8>> {
     cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
-            let url = format!("http://127.0.0.1:8080/learn-wgpu/{}", file_name);
+            let url = format_url(file_name);
             let data = reqwest::get(url)
                 .await?
                 .bytes()
@@ -195,6 +207,17 @@ I'm using [reqwest](https://docs.rs/reqwest) to handle loading the requests when
 reqwest = { version = "0.11" }
 ```
 
+We'll also need to add the `Location` feature to `web-sys`:
+
+```toml
+web-sys = { version = "0.3", features = [
+    "Document",
+    "Window",
+    "Element",
+    "Location",
+]}
+```
+
 Make sure to add `resources` as a module in `lib.rs`:
 
 ```rust