From c269f46a0eb94c9302034c383d5638a55b0213c9 Mon Sep 17 00:00:00 2001
From: Ben Hansen <bhbenjaminhansen@gmail.com>
Date: Sat, 19 Feb 2022 11:21:54 -0700
Subject: [PATCH] testing some things

---
 .travis.yml                                   |  32 ---
 Cargo.lock                                    |  28 ++-
 build-wasm.sh                                 |   6 +-
 code/beginner/tutorial1-window/src/lib.rs     |   2 +-
 code/beginner/tutorial2-surface/src/lib.rs    |   2 +-
 code/beginner/tutorial9-models/src/lib.rs     |   1 -
 .../tutorial10-lighting/Cargo.toml            |   4 +
 .../tutorial10-lighting}/index.html           |   2 +-
 .../tutorial10-lighting}/server.py            |   2 +-
 .../tutorial10-lighting/src/lib.rs            |  34 ++-
 .../tutorial10-lighting/src/light.frag        |   8 -
 .../tutorial10-lighting/src/light.frag.spv    | Bin 564 -> 0 bytes
 .../tutorial10-lighting/src/light.vert        |  27 ---
 .../tutorial10-lighting/src/light.vert.spv    | Bin 1840 -> 0 bytes
 .../tutorial10-lighting/src/resources.rs      |   1 -
 .../tutorial10-lighting/src/shader.frag       |  47 ----
 .../tutorial10-lighting/src/shader.frag.spv   | Bin 3196 -> 0 bytes
 .../tutorial10-lighting/src/shader.vert       |  37 ----
 .../tutorial10-lighting/src/shader.vert.spv   | Bin 3060 -> 0 bytes
 .../tutorial11-normals/Cargo.toml             |  25 ++-
 .../tutorial11-normals/src/lib.rs             |  46 +++-
 .../tutorial11-normals/src/model.rs           | 173 +--------------
 .../tutorial11-normals/src/resources.rs       | 205 ++++++++++++++++++
 .../tutorial11-normals/src/texture.rs         |  16 +-
 .../intermediate/tutorial12-camera/Cargo.toml |  25 ++-
 .../intermediate/tutorial12-camera/src/lib.rs |   3 +
 .../tutorial13-threading/Cargo.toml           |  25 ++-
 .../tutorial13-threading/src/lib.rs           |   3 +
 deploy.sh                                     |  28 ---
 docs/beginner/tutorial9-models/README.md      |   5 +
 .../tutorial10-lighting/README.md             |   6 +-
 .../intermediate/tutorial11-normals/README.md |   2 +
 32 files changed, 407 insertions(+), 388 deletions(-)
 delete mode 100644 .travis.yml
 rename code/{beginner/tutorial9-models => intermediate/tutorial10-lighting}/index.html (87%)
 rename code/{beginner/tutorial9-models => intermediate/tutorial10-lighting}/server.py (92%)
 delete mode 100644 code/intermediate/tutorial10-lighting/src/light.frag
 delete mode 100644 code/intermediate/tutorial10-lighting/src/light.frag.spv
 delete mode 100644 code/intermediate/tutorial10-lighting/src/light.vert
 delete mode 100644 code/intermediate/tutorial10-lighting/src/light.vert.spv
 delete mode 100644 code/intermediate/tutorial10-lighting/src/shader.frag
 delete mode 100644 code/intermediate/tutorial10-lighting/src/shader.frag.spv
 delete mode 100644 code/intermediate/tutorial10-lighting/src/shader.vert
 delete mode 100644 code/intermediate/tutorial10-lighting/src/shader.vert.spv
 create mode 100644 code/intermediate/tutorial11-normals/src/resources.rs
 delete mode 100755 deploy.sh

diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index a528ed10..00000000
--- a/.travis.yml
+++ /dev/null
@@ -1,32 +0,0 @@
-matrix:
-  include:
-    - language: rust
-      addons:
-        apt:
-          packages:
-          - libasound2-dev
-      rust:
-        - stable
-        # - beta
-        # - nightly
-      jobs:
-        # allow_failures:
-        #   - rust: nightly
-        fast_finish: true
-      scripts:
-        - cargo build --verbose
-    - language: node_js
-      node_js:
-        - lts/*
-      install:
-        - npm ci
-      script:
-        - npm run build
-      deploy:
-        provider: pages
-        skip_cleanup: true
-        local_dir: docs/.vuepress/dist
-        github_token: $GITHUB_TOKEN # A token generated on GitHub allowing Travis to push code on you repository. Set in the Travis settings page of your repository, as a secure variable
-        keep_history: true
-        on:
-          branch: master
\ No newline at end of file
diff --git a/Cargo.lock b/Cargo.lock
index 6535d8a5..1831caf5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2870,6 +2870,7 @@ dependencies = [
  "image 0.24.0",
  "log",
  "pollster",
+ "reqwest",
  "tobj 3.2.0",
  "wasm-bindgen",
  "wasm-bindgen-futures",
@@ -2884,14 +2885,21 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "bytemuck",
+ "cfg-if 1.0.0",
  "cgmath",
+ "console_error_panic_hook",
+ "console_log",
  "env_logger",
  "fs_extra",
  "glob",
- "image 0.23.14",
+ "image 0.24.0",
  "log",
  "pollster",
+ "reqwest",
  "tobj 3.2.0",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
  "wgpu",
  "winit",
 ]
@@ -2902,14 +2910,21 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "bytemuck",
+ "cfg-if 1.0.0",
  "cgmath",
+ "console_error_panic_hook",
+ "console_log",
  "env_logger",
  "fs_extra",
  "glob",
- "image 0.23.14",
+ "image 0.24.0",
  "log",
  "pollster",
+ "reqwest",
  "tobj 3.2.0",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
  "wgpu",
  "winit",
 ]
@@ -2920,15 +2935,22 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "bytemuck",
+ "cfg-if 1.0.0",
  "cgmath",
+ "console_error_panic_hook",
+ "console_log",
  "env_logger",
  "fs_extra",
  "glob",
- "image 0.23.14",
+ "image 0.24.0",
  "log",
  "pollster",
  "rayon",
+ "reqwest",
  "tobj 3.2.0",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
  "wgpu",
  "winit",
 ]
diff --git a/build-wasm.sh b/build-wasm.sh
index e7a6322d..dc2f6efe 100755
--- a/build-wasm.sh
+++ b/build-wasm.sh
@@ -1,4 +1,4 @@
-(trap 'kill 0' SIGINT;
+(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 &
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial2_surface code/beginner/tutorial2-surface &
@@ -8,5 +8,7 @@ wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial5_text
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial6_uniforms code/beginner/tutorial6-uniforms &
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial7_instancing code/beginner/tutorial7-instancing &
 wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial8_depth code/beginner/tutorial8-depth &
-wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial9_models code/beginner/tutorial9-models
+wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial9_models code/beginner/tutorial9-models &
+wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial10_lighting code/intermediate/tutorial10-lighting &
+wasm-pack build --out-dir ../../../docs/.vuepress/components/wasm/tutorial11_normals code/intermediate/tutorial11-normals
 )
diff --git a/code/beginner/tutorial1-window/src/lib.rs b/code/beginner/tutorial1-window/src/lib.rs
index ff80406e..77b83fcd 100644
--- a/code/beginner/tutorial1-window/src/lib.rs
+++ b/code/beginner/tutorial1-window/src/lib.rs
@@ -8,7 +8,7 @@ use winit::{
 use wasm_bindgen::prelude::*;
 
 #[cfg_attr(target_arch="wasm32", wasm_bindgen(start))]
-pub async fn run() {
+pub fn run() {
     cfg_if::cfg_if! {
         if #[cfg(target_arch = "wasm32")] {
             std::panic::set_hook(Box::new(console_error_panic_hook::hook));
diff --git a/code/beginner/tutorial2-surface/src/lib.rs b/code/beginner/tutorial2-surface/src/lib.rs
index f6e92b3b..fb890a39 100644
--- a/code/beginner/tutorial2-surface/src/lib.rs
+++ b/code/beginner/tutorial2-surface/src/lib.rs
@@ -23,7 +23,7 @@ impl State {
 
         // The instance is a handle to our GPU
         // BackendBit::PRIMARY => Vulkan + Metal + DX12 + Browser WebGPU
-        let instance = wgpu::Instance::new(wgpu::Backends::all());
+        let instance = wgpu::Instance::new(wgpu::Backends::GL);
         let surface = unsafe { instance.create_surface(window) };
         let adapter = instance
             .request_adapter(&wgpu::RequestAdapterOptions {
diff --git a/code/beginner/tutorial9-models/src/lib.rs b/code/beginner/tutorial9-models/src/lib.rs
index f56ab81b..f6d13a69 100644
--- a/code/beginner/tutorial9-models/src/lib.rs
+++ b/code/beginner/tutorial9-models/src/lib.rs
@@ -596,7 +596,6 @@ pub async fn run() {
     }
 
     // State::new uses async code, so we're going to wait for it to finish
-    log::warn!("Creating State");
     let mut state = State::new(&window).await;
 
     event_loop.run(move |event, _, control_flow| {
diff --git a/code/intermediate/tutorial10-lighting/Cargo.toml b/code/intermediate/tutorial10-lighting/Cargo.toml
index f671dc03..9468fd8f 100644
--- a/code/intermediate/tutorial10-lighting/Cargo.toml
+++ b/code/intermediate/tutorial10-lighting/Cargo.toml
@@ -4,6 +4,9 @@ version = "0.1.0"
 authors = ["Ben Hansen <bhbenjaminhansen@gmail.com>"]
 edition = "2018"
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
 cfg-if = "1"
 anyhow = "1.0"
@@ -22,6 +25,7 @@ default-features = false
 features = ["png", "jpeg"]
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
+reqwest = { version = "0.11" }
 console_error_panic_hook = "0.1"
 console_log = "0.2"
 wgpu = { version = "0.12", features = ["webgl"]}
diff --git a/code/beginner/tutorial9-models/index.html b/code/intermediate/tutorial10-lighting/index.html
similarity index 87%
rename from code/beginner/tutorial9-models/index.html
rename to code/intermediate/tutorial10-lighting/index.html
index 10afb64e..090a79db 100644
--- a/code/beginner/tutorial9-models/index.html
+++ b/code/intermediate/tutorial10-lighting/index.html
@@ -14,7 +14,7 @@
     </div>
 
     <script type="module">
-        import init from "./pkg/tutorial9_models.js";
+        import init from "./pkg/tutorial10_lighting.js";
         init().then(() => {
             console.log("WASM Loaded");
         });
diff --git a/code/beginner/tutorial9-models/server.py b/code/intermediate/tutorial10-lighting/server.py
similarity index 92%
rename from code/beginner/tutorial9-models/server.py
rename to code/intermediate/tutorial10-lighting/server.py
index d79b810b..249305e0 100755
--- a/code/beginner/tutorial9-models/server.py
+++ b/code/intermediate/tutorial10-lighting/server.py
@@ -9,4 +9,4 @@ class CORSRequestHandler(SimpleHTTPRequestHandler):
         SimpleHTTPRequestHandler.end_headers(self)
 
 if __name__ == '__main__':
-    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
\ No newline at end of file
+    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8080)
\ No newline at end of file
diff --git a/code/intermediate/tutorial10-lighting/src/lib.rs b/code/intermediate/tutorial10-lighting/src/lib.rs
index 42a41140..2ca90d57 100644
--- a/code/intermediate/tutorial10-lighting/src/lib.rs
+++ b/code/intermediate/tutorial10-lighting/src/lib.rs
@@ -695,15 +695,47 @@ impl State {
     }
 }
 
+#[cfg_attr(target_arch="wasm32", wasm_bindgen(start))]
 pub async fn run() {
-    env_logger::init();
+    cfg_if::cfg_if! {
+        if #[cfg(target_arch = "wasm32")] {
+            std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+            console_log::init_with_level(log::Level::Warn).expect("Could't initialize logger");
+        } else {
+            env_logger::init();
+        }
+    }
+
     let event_loop = EventLoop::new();
     let title = env!("CARGO_PKG_NAME");
     let window = winit::window::WindowBuilder::new()
         .with_title(title)
         .build(&event_loop)
         .unwrap();
+
+    
+    #[cfg(target_arch = "wasm32")]
+    {
+        // Winit prevents sizing with CSS, so we have to set
+        // the size manually when on web.
+        use winit::dpi::PhysicalSize;
+        window.set_inner_size(PhysicalSize::new(450, 400));
+        
+        use winit::platform::web::WindowExtWebSys;
+        web_sys::window()
+            .and_then(|win| win.document())
+            .and_then(|doc| {
+                let dst = doc.get_element_by_id("wasm-example")?;
+                let canvas = web_sys::Element::from(window.canvas());
+                dst.append_child(&canvas).ok()?;
+                Some(())
+            })
+            .expect("Couldn't append canvas to document body.");
+    }
+
+    // State::new uses async code, so we're going to wait for it to finish
     let mut state = State::new(&window).await;
+
     event_loop.run(move |event, _, control_flow| {
         *control_flow = ControlFlow::Poll;
         match event {
diff --git a/code/intermediate/tutorial10-lighting/src/light.frag b/code/intermediate/tutorial10-lighting/src/light.frag
deleted file mode 100644
index a7ae2f2a..00000000
--- a/code/intermediate/tutorial10-lighting/src/light.frag
+++ /dev/null
@@ -1,8 +0,0 @@
-#version 450
-
-layout(location=0) in vec3 v_color;
-layout(location=0) out vec4 f_color;
-
-void main() {
-    f_color = vec4(v_color, 1.0);
-}
\ No newline at end of file
diff --git a/code/intermediate/tutorial10-lighting/src/light.frag.spv b/code/intermediate/tutorial10-lighting/src/light.frag.spv
deleted file mode 100644
index 199e2f43156a2c9613b7c9a917c31010239018bc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 564
zcmYk2%}T>i5QWF4f426|g6^c^QYbF82%@een?MyG;37$cKx|7J3+{Y2pUREk`QokQ
z!es6_b7tn;1huo4*`9T*XJh+2Bdduq>sqtSVe}kLH$^hNyt+Wqx1bcF8Cc8e%Ea4C
zwxF=DI8Y3wgVzGx0!=mhQd3>q!pMd5c^Eyoc(rny;v-L8o-I<BWa~68vTcg4UD0KW
zIDb#7f`$~;y<m2~x_Fr{*9OMN*5lCEPsDM+)OUC+hj=_K-CB7+(!D8eqBxeGw}9C@
z(YLM4-+;gI7!PphJId(6=)21L1tpIjj0d=LVYGdP+2{RCFTfAGIL!DK(@?$@%j}+l
r{wJ~Y4m_vy&ka4tj-77gIp#mgJ^l|B^rNSak2`JUJ=A{W@>=l=2YxQu

diff --git a/code/intermediate/tutorial10-lighting/src/light.vert b/code/intermediate/tutorial10-lighting/src/light.vert
deleted file mode 100644
index dfb0dec0..00000000
--- a/code/intermediate/tutorial10-lighting/src/light.vert
+++ /dev/null
@@ -1,27 +0,0 @@
-#version 450
-
-layout(location=0) in vec3 a_position;
-
-layout(location=0) out vec3 v_color;
-
-layout(set=0, binding=0)
-uniform Camera {
-    vec3 u_view_position; // unused
-    mat4 u_view_proj;
-};
-
-layout(set=1, binding=0)
-uniform Light {
-    vec3 u_position;
-    vec3 u_color;
-};
-
-// Let's keep our light smaller than our other objects
-float scale = 0.25;
-
-void main() {
-    vec3 v_position = a_position * scale + u_position;
-    gl_Position = u_view_proj * vec4(v_position, 1);
-
-    v_color = u_color;
-}
\ No newline at end of file
diff --git a/code/intermediate/tutorial10-lighting/src/light.vert.spv b/code/intermediate/tutorial10-lighting/src/light.vert.spv
deleted file mode 100644
index 7b8ff818f7c2d658d8b325c5b2f987144e53f010..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1840
zcmY+E+fEZv6oz*@Z9xzak%Nl0rJm7>3TR@)7%}Cd2^gZclV&>NHbdLA(|WkV7clXa
zd@65D{J-h!I__q<_W!TLUWY+1Uz;)}XJ*Wtd1}UI(d5M#GiyqTZZwaZ^+DXOZ|`j3
zF>k!Y5uXJ!o!krh_q1g@fO$z(vMurS%S-=~b3v~(nttQ(u+e<u2fdy@h`&amAK6am
zw{1TRVmk`)o6h*zP7n>-S%;!LvhRVZVi2?<g`1*&=cPw}uRE}@?W!s`>T3PR70g9(
zO?&b&mM-ZB<_t4_CB?$i@6ZprQMWI~Gna7GDJt%|^hx9&h5h$oKMudZlMkMQ%@tEJ
zQwdMLgtwje*nXpQMT~9COt#mN?d{t^-0B43#K!co4WnpcqaJ3?q1T%9yN><P?Vk?d
z$P33A`Xd{D{?{ONVjK52w)MN8l*KbQlL&Gal6{WS{u{!~vz*!w<l$!L-f<jx;VwuT
z%84KSk%Jj-Nbqsk^+CLw->mE$$Kel$b{sk3ybQ-3j_-xH$%h{?u1=>9<i(ww#f%Ra
zp88!Joc?eoJz;k}F*ADN&=a_tpfTp}!p&_-QN&eMn<veEMYoc4C6Pk%4j6f^e7wu|
z4&D?-pOYAKwzn!gqZ=IgD#G+n3_N&FI+tSdf!QToS(yFc>-?8=r!IK>!R!rgS$J8x
zA|al7z$+3C@2yJXOFrtmDouUtg!pyoiiATv_?m=#>%z<mf4H)4?9k=FhVV{Bnx3&!
zC%7tsTNB=pCXRRMvnEYV@WkJcrcQX`!R!vs^>s`4oCN>dsf~EIhfUp$IeUryk#4-r
zo8TuY=1ua0`4;fm)fdM*)W(7PEr#z9Uv|j<Y3y-NR`$=%U&uzj1qnL@Gb_GTe10ec
z_C*Ok@UO(NlQju@WLGZF<&^)P#$6F67M^#h0gfE>e@DWMm<u_W#a#)!%Xv?C;@&ET
z+U`r>IF5UuI~=ohTs`HO%aJ-~jt?co<By$r|5RRVTN2*Jhx(ZRV@Xv)kJJyw&&^;*
WcV^(~XI8rsc>LK9_>U@kCix4M42k~$

diff --git a/code/intermediate/tutorial10-lighting/src/resources.rs b/code/intermediate/tutorial10-lighting/src/resources.rs
index 54459b29..5fca116b 100644
--- a/code/intermediate/tutorial10-lighting/src/resources.rs
+++ b/code/intermediate/tutorial10-lighting/src/resources.rs
@@ -59,7 +59,6 @@ pub async fn load_model(
     queue: &wgpu::Queue,
     layout: &wgpu::BindGroupLayout,
 ) -> anyhow::Result<model::Model> {
-    log::warn!("Loading obj text");
     let obj_text = load_string(file_name).await?;
     let obj_cursor = Cursor::new(obj_text);
     let mut obj_reader = BufReader::new(obj_cursor);
diff --git a/code/intermediate/tutorial10-lighting/src/shader.frag b/code/intermediate/tutorial10-lighting/src/shader.frag
deleted file mode 100644
index 98d766d5..00000000
--- a/code/intermediate/tutorial10-lighting/src/shader.frag
+++ /dev/null
@@ -1,47 +0,0 @@
-#version 450
-
-layout(location=0) in vec2 v_tex_coords;
-layout(location=1) in vec3 v_normal;
-layout(location=2) in vec3 v_position;
-
-layout(location=0) out vec4 f_color;
-
-layout(set = 0, binding = 0) uniform texture2D t_diffuse;
-layout(set = 0, binding = 1) uniform sampler s_diffuse;
-
-layout(set=1, binding=0) 
-uniform Camera {
-    vec3 u_view_position;
-    mat4 u_view_proj; // unused
-};
-
-layout(set=2, binding=0) uniform Light {
-    vec3 light_position;
-    vec3 light_color;
-};
-
-void main() {
-    vec4 object_color = texture(sampler2D(t_diffuse, s_diffuse), v_tex_coords);
-
-    // We don't need (or want) much ambient light, so 0.1 is fine
-    float ambient_strength = 0.1;
-    vec3 ambient_color = light_color * ambient_strength;
-
-    vec3 normal = normalize(v_normal);
-    vec3 light_dir = normalize(light_position - v_position);
-    
-    float diffuse_strength = max(dot(normal, light_dir), 0.0);
-    vec3 diffuse_color = light_color * diffuse_strength;
-
-    vec3 view_dir = normalize(u_view_position - v_position);
-    vec3 half_dir = normalize(view_dir + light_dir);
-
-    float specular_strength = pow(max(dot(normal, half_dir), 0.0), 32);
-    vec3 specular_color = specular_strength * light_color;
-
-    vec3 result = (ambient_color + diffuse_color + specular_color) * object_color.xyz;
-
-    // Since lights don't typically (afaik) cast transparency, so we use
-    // the alpha here at the end.
-    f_color = vec4(result, object_color.a);
-}
\ No newline at end of file
diff --git a/code/intermediate/tutorial10-lighting/src/shader.frag.spv b/code/intermediate/tutorial10-lighting/src/shader.frag.spv
deleted file mode 100644
index 66d1414f1dd80a8ba242382e65d15cf657576d66..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3196
zcmZXUTUT3U5QaB}Kxyg8+5@dtQtGjaRohxEw55uv8iiV0JfLX^32Y1rD+#EVE|<4n
z`HQ@+|Hm8G@_CXyu&p0!n3;Eu-+Yrjd|-MkNrsX`$&q9`8JrWz0gxm)oQ(E)sr;Zk
z)9tOzT)lQhkE6+O-%+1q$#^mXm$s^DOT%gCGW0gofR5v@okB>%WKWVm2_B(psaz>7
zE|$s*mD=`prQ7?tS+6wHR=u*8cIvfWx?9)pV9qaX)tWnNd4~cX`T7O=9;Zfob(0j8
zTD#fqpe6<WCg44iHyS%#Qundr@a})G(f%EFE4}(pgtt3uU0m=TOU}WoTdQfk)uY=^
zy|v!k7}!RW3pra9wYL|*%jx<?4?ao`bx%{Qvfb{cy|m5bM)}j`TnDy6mI5;?8o)8%
ztMFF4vsG;l`ghj5l|TmA4A>wCgY3r@`tPxutLJ^LW6P%Tzx&MQZ2R{qB=g|AY5hmv
z2(drI58w}5X@j=<v+|x|o}EhHd+(y&Q=9h;Tc^EAp5bJ{0FH0<DSV^aZ0y$=OP0X8
z+x6N`v)aiw?3*v=ZCS(4YX!Vh@9s2t0Cjh=k*!4u-JQ4yc|wnQtGge0ySjG!*Y3Xi
z_MUrGi1(cyKzo?}V#b%atA73#%waxj<aIHRcHh_<QPba+y8hOTS?|{z*_&}8=acUt
z;>7%IMqlQNK70@Rin{7W$YWp5GVXqoDC3IUZ5Xb68fg?h1)ag)I_myjr}%#mE+$R#
zt33qQZoT{o-I&9fLEoF1?i+f}QS~TXzhiyG@72Ih-8*{D)7LX_bJ*9jaO>K$v8UkH
z6t{-D?<}T$5*~NCjBf0C=&vVF=FImTvY2zw|9QCn;up|;du2)c6x`b4)>AJ+VyDnA
z!l$4i$a?C&wYu?_;QB_s*D{;B`PAK^eEgf}p0K-9VYm19HFC}pe;025zMK8KBjy&j
z{)ceui<?i~T@j1<JVfT))xVA~44G4Z^+twyUq7l-kjHrS6f)*I`)*!)@reBmQh=Mw
zo$~u1xqU0Y+oAgw?rdK7o0`}Ceui$m-^tL8pM6T7e@ge;75>IA<#glyR)t-CCDZ5V
z-<>=Hxzp<I?+M7=eZ(!@+mnz!;`+F!XCQZU86R_>h4d4@#gv?hn6mS5U+3|?1b-1K
zLer4>eA|~Gadr3MWyrYSiP8QFq>s2covB#FzmDwAO%SdB8_*E60BJMExr;|1SCH+)
z-HbeMA&ZCp4zj!YYu3kAWPQY=)-~j)rQKS-sd(gh7uouu-$2&q5Au57_aJ@5Czz<%
zO~}07Q@g(rbGskf;vRFz-XlNHTj=7}GuLg%xR~c1WPQZVISao7Mb3|qon3x5C3Nw)
z!#(8uY(7TUM?7Zp33ALvyS3)w;*qC}EEf7_$j;`MZ04UM>mwd{7m*{ccJul>5RW|f
zk@GYE0$rb&`2%Eq#AD`PBAeHlYj@^hdxWgbz0}WdjCK9JX|t}g{t6O{S$>UNg!1q6
z4Z3)|$G6C0#+q{(E*5wB4%wX#{d;8JEM`<e)<-;i9wVD4e5%O$J%;odgRes4&>~+l
ze>b%Z6Zd#uzkk1FZ?T4K9{ucd1uhmf*OA4%`y_l5GJgu`<9vRA#P4Uj-$XXf6WA8A
fnDql|Wtjae(Y^h*A>;MeZf^T(z_tBDh8xhohWr43

diff --git a/code/intermediate/tutorial10-lighting/src/shader.vert b/code/intermediate/tutorial10-lighting/src/shader.vert
deleted file mode 100644
index 4ebe393f..00000000
--- a/code/intermediate/tutorial10-lighting/src/shader.vert
+++ /dev/null
@@ -1,37 +0,0 @@
-#version 450
-
-layout(location=0) in vec3 a_position;
-layout(location=1) in vec2 a_tex_coords;
-layout(location=2) in vec3 a_normal;
-
-layout(location=0) out vec2 v_tex_coords;
-layout(location=1) out vec3 v_normal;
-layout(location=2) out vec3 v_position;
-
-layout(set=1, binding=0) 
-uniform Camera {
-    vec3 u_view_position; // unused
-    mat4 u_view_proj;
-};
-
-layout(location=5) in vec4 model_matrix_0;
-layout(location=6) in vec4 model_matrix_1;
-layout(location=7) in vec4 model_matrix_2;
-layout(location=8) in vec4 model_matrix_3;
-
-void main() {
-    mat4 model_matrix = mat4(
-        model_matrix_0,
-        model_matrix_1,
-        model_matrix_2,
-        model_matrix_3
-    );
-    v_tex_coords = a_tex_coords;
-    mat3 normal_matrix = mat3(transpose(inverse(model_matrix)));
-    v_normal = normal_matrix * a_normal;
-
-    vec4 model_space = model_matrix * vec4(a_position, 1.0);
-    v_position = model_space.xyz;
-
-    gl_Position = u_view_proj * model_space;
-}
\ No newline at end of file
diff --git a/code/intermediate/tutorial10-lighting/src/shader.vert.spv b/code/intermediate/tutorial10-lighting/src/shader.vert.spv
deleted file mode 100644
index cf6af9179b83edb435f218e93436ff265c5a7a1d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3060
zcmZvdYjYG;5Qc|@4aimGsv>TPcQm2`q6h>7Zq#Uk0Ynsrb$7AG+U%xwHxd2hU+^#a
ztNdb>&ogscCn*p0=5)V(Io*BE4%1U}d$Md-wl6!FJ;|zdB%6ZCvi;dixwn?rmgmQl
z?)-&|=k++0O_z@P9L}CC<=y;UZx;iV1K<$Q@*H>vybBh<BKRDvg8N{ae^cy#l596s
zw3hSM%1UebR^Hjz$j6gk`@Oth40?ID81*`nVyma$-kM)A==3+cb%zEX^?Dlgv5zy>
zhuvO3UvE!F#Z%Nw-dgK?PKWZ=zm0#d;_Yc0|9-{W=QjR>insTzeA0WGcZS1JcZ^!*
zcOLEk;V-}shNJa%t<VM$3-DWcWkG~#l(TH_;9A(KI>sCAPOtQH-tBy2I4&l|kQ*}A
z`EPCGX0m&5KlSs~-soO$M9HX3qT-dcMUt6pPwDR)DEVSASu1|yc8sZP-Yd4nez9@0
z7*E;*>Is`KNZV$=|F5mVTkuV|tnqvHyMy8h<0$85tek5z-zs{){MUeWYO|iOjfOvy
zWjcFk0IS8T@V?K0M$)}!^_ir5zv}!bN`LQFeQ(mePj#31yhnA<RbSYl``)!X3+>)T
zJ>Gi=`w~@o2d@3qmIY^iIrreqDd#MMQ<n4nx3HK`KkYHQIds<&UNJN05k8)wkF%(A
z&P2|<#zjxg_biARsLuk|QM~k<CC1v6Parw(COAnA=2f@mQ~Y(-a_UX~K9h8L^_YV`
zSCa0%?yBkDYhAbQy6(NIpCjJ0kAW=v{d(xfOTDV^9I`&v?)h)C+l##CtNSkGw9m6w
zxhuQ6??ldi`IMCT^tWF=Ate{_d^*bh<;{1UU7K;9r@jEf|5Idhhh2R!amIg!?5tv5
z+I@${L_Xi4`Hthi#@+-j=b?TF=zkjhF1z!PJA>pKGq;>J;kn<kn^U{zs8`?o>YVS;
zo4~xDqy7N6&Y=6o>?!X32jnRrZ$5S3nq0&`LN=f0=gAiFU3BZQ)=T^zjPs4T<o|;4
zcVKScod0LU%)Ar7&7nKfR?@HHFMkmD4nseT>^lto2(s@m^rOhW!`qzd>`nl4xPm*0
zEN4%_ol2bb2lss9>?61rkgdTL+>6L^^?aujSI_rS;_CVQPT7Mi^1X~KSI^f>Ts_}x
z;_CU%!Z`z1<eNj5tLJ+qarJz!CeD1TOyBvx2ArWYb4Jc2Y_B6b5Bs-Y`wQC}$o6J0
zO<=8IdlT6@t;;$*SDSC@E#R5vHiy2~cuBq+ZQirri1WbTzc#-U>e|e45$Jz_7odI#
z*t=(HyOaDrMAqh<?DaB`bFC2R@8lyOFI?t{nHlpjFh)LNt|VTYYiG<SaK@M?Vy+^~
z3s=Of(u3cuYrtB}t*?Fi+mW|#eQp3bb!)!~7Qr9%r+y3QBX9fyyIjm|3E8<t{1?c6
z)8ZX{i7e*|ZW&q5dV~8aarPH?{x!1k`fEQ1tjig$0MFLPx>|{|4(+!=#Z`CmP2%KT
zF)L&J=4!t|ZogHJ!9(x}M4xTs$4NK;kHGv<PX}2adGmDHd*D8J06a%szrQ*CGWZ8)
C(C!NW

diff --git a/code/intermediate/tutorial11-normals/Cargo.toml b/code/intermediate/tutorial11-normals/Cargo.toml
index 31b11f42..2663c44d 100644
--- a/code/intermediate/tutorial11-normals/Cargo.toml
+++ b/code/intermediate/tutorial11-normals/Cargo.toml
@@ -4,18 +4,39 @@ version = "0.1.0"
 authors = ["Ben Hansen <bhbenjaminhansen@gmail.com>"]
 edition = "2018"
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
+cfg-if = "1"
 anyhow = "1.0"
 bytemuck = { version = "1.4", features = [ "derive" ] }
 cgmath = "0.18"
 env_logger = "0.9"
 pollster = "0.2"
-image = "0.23"
 log = "0.4"
-tobj = "3.0"
+tobj = { version = "3.2", features = ["async"]}
 wgpu = "0.12"
 winit = "0.26"
 
+[dependencies.image]
+version = "0.24"
+default-features = false
+features = ["png", "jpeg"]
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+reqwest = { version = "0.11" }
+console_error_panic_hook = "0.1"
+console_log = "0.2"
+wgpu = { version = "0.12", features = ["webgl"]}
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = [
+    "Document",
+    "Window",
+    "Element",
+]}
+
 [build-dependencies]
 anyhow = "1.0"
 fs_extra = "1.2"
diff --git a/code/intermediate/tutorial11-normals/src/lib.rs b/code/intermediate/tutorial11-normals/src/lib.rs
index 7f86c2f1..3b476e9b 100644
--- a/code/intermediate/tutorial11-normals/src/lib.rs
+++ b/code/intermediate/tutorial11-normals/src/lib.rs
@@ -8,7 +8,11 @@ use winit::{
     window::Window,
 };
 
+#[cfg(target_arch="wasm32")]
+use wasm_bindgen::prelude::*;
+
 mod model;
+mod resources;
 mod texture;
 
 use model::{DrawLight, DrawModel, Vertex};
@@ -493,14 +497,12 @@ impl State {
             label: Some("camera_bind_group"),
         });
 
-        let res_dir = std::path::Path::new(env!("OUT_DIR")).join("res");
-        let obj_model = model::Model::load(
+        let obj_model = resources::load_model(
+            "cube.obj",
             &device,
             &queue,
             &texture_bind_group_layout,
-            res_dir.join("cube.obj"),
-        )
-        .unwrap();
+        ).await.unwrap();
 
         let light_uniform = LightUniform {
             position: [2.0, 2.0, 2.0],
@@ -742,15 +744,47 @@ impl State {
     }
 }
 
+#[cfg_attr(target_arch="wasm32", wasm_bindgen(start))]
 pub async fn run() {
-    env_logger::init();
+    cfg_if::cfg_if! {
+        if #[cfg(target_arch = "wasm32")] {
+            std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+            console_log::init_with_level(log::Level::Warn).expect("Could't initialize logger");
+        } else {
+            env_logger::init();
+        }
+    }
+
     let event_loop = EventLoop::new();
     let title = env!("CARGO_PKG_NAME");
     let window = winit::window::WindowBuilder::new()
         .with_title(title)
         .build(&event_loop)
         .unwrap();
+
+    
+    #[cfg(target_arch = "wasm32")]
+    {
+        // Winit prevents sizing with CSS, so we have to set
+        // the size manually when on web.
+        use winit::dpi::PhysicalSize;
+        window.set_inner_size(PhysicalSize::new(450, 400));
+        
+        use winit::platform::web::WindowExtWebSys;
+        web_sys::window()
+            .and_then(|win| win.document())
+            .and_then(|doc| {
+                let dst = doc.get_element_by_id("wasm-example")?;
+                let canvas = web_sys::Element::from(window.canvas());
+                dst.append_child(&canvas).ok()?;
+                Some(())
+            })
+            .expect("Couldn't append canvas to document body.");
+    }
+
+    // State::new uses async code, so we're going to wait for it to finish
     let mut state = State::new(&window).await;
+
     event_loop.run(move |event, _, control_flow| {
         *control_flow = ControlFlow::Poll;
         match event {
diff --git a/code/intermediate/tutorial11-normals/src/model.rs b/code/intermediate/tutorial11-normals/src/model.rs
index 1d382a55..f25126d7 100644
--- a/code/intermediate/tutorial11-normals/src/model.rs
+++ b/code/intermediate/tutorial11-normals/src/model.rs
@@ -1,9 +1,4 @@
-use anyhow::*;
-use cgmath::InnerSpace;
 use std::ops::Range;
-use std::path::Path;
-use tobj::LoadOptions;
-use wgpu::util::DeviceExt;
 
 use crate::texture;
 
@@ -14,11 +9,11 @@ pub trait Vertex {
 #[repr(C)]
 #[derive(Copy, Clone, Debug, bytemuck::Pod, bytemuck::Zeroable)]
 pub struct ModelVertex {
-    position: [f32; 3],
-    tex_coords: [f32; 2],
-    normal: [f32; 3],
-    tangent: [f32; 3],
-    bitangent: [f32; 3],
+    pub position: [f32; 3],
+    pub tex_coords: [f32; 2],
+    pub normal: [f32; 3],
+    pub tangent: [f32; 3],
+    pub bitangent: [f32; 3],
 }
 
 impl Vertex for ModelVertex {
@@ -119,164 +114,6 @@ pub struct Model {
     pub materials: Vec<Material>,
 }
 
-impl Model {
-    pub fn load<P: AsRef<Path>>(
-        device: &wgpu::Device,
-        queue: &wgpu::Queue,
-        layout: &wgpu::BindGroupLayout,
-        path: P,
-    ) -> Result<Self> {
-        let (obj_models, obj_materials) = tobj::load_obj(
-            path.as_ref(),
-            &LoadOptions {
-                triangulate: true,
-                single_index: true,
-                ..Default::default()
-            },
-        )?;
-
-        let obj_materials = obj_materials?;
-
-        // We're assuming that the texture files are stored with the obj file
-        let containing_folder = path.as_ref().parent().context("Directory has no parent")?;
-
-        let mut materials = Vec::new();
-        for mat in obj_materials {
-            let diffuse_path = mat.diffuse_texture;
-            let diffuse_texture =
-                texture::Texture::load(device, queue, containing_folder.join(diffuse_path), false)?;
-
-            let normal_path = mat.normal_texture;
-            let normal_texture =
-                texture::Texture::load(device, queue, containing_folder.join(normal_path), true)?;
-
-            materials.push(Material::new(
-                device,
-                &mat.name,
-                diffuse_texture,
-                normal_texture,
-                layout,
-            ));
-        }
-
-        let mut meshes = Vec::new();
-        for m in obj_models {
-            let mut vertices = Vec::new();
-            for i in 0..m.mesh.positions.len() / 3 {
-                vertices.push(ModelVertex {
-                    position: [
-                        m.mesh.positions[i * 3],
-                        m.mesh.positions[i * 3 + 1],
-                        m.mesh.positions[i * 3 + 2],
-                    ]
-                    .into(),
-                    tex_coords: [m.mesh.texcoords[i * 2], m.mesh.texcoords[i * 2 + 1]].into(),
-                    normal: [
-                        m.mesh.normals[i * 3],
-                        m.mesh.normals[i * 3 + 1],
-                        m.mesh.normals[i * 3 + 2],
-                    ]
-                    .into(),
-                    // We'll calculate these later
-                    tangent: [0.0; 3].into(),
-                    bitangent: [0.0; 3].into(),
-                });
-            }
-
-            let indices = &m.mesh.indices;
-            let mut triangles_included = (0..vertices.len()).collect::<Vec<_>>();
-
-            // Calculate tangents and bitangets. We're going to
-            // use the triangles, so we need to loop through the
-            // indices in chunks of 3
-            for c in indices.chunks(3) {
-                let v0 = vertices[c[0] as usize];
-                let v1 = vertices[c[1] as usize];
-                let v2 = vertices[c[2] as usize];
-
-                let pos0: cgmath::Vector3<_> = v0.position.into();
-                let pos1: cgmath::Vector3<_> = v1.position.into();
-                let pos2: cgmath::Vector3<_> = v2.position.into();
-
-                let uv0: cgmath::Vector2<_> = v0.tex_coords.into();
-                let uv1: cgmath::Vector2<_> = v1.tex_coords.into();
-                let uv2: cgmath::Vector2<_> = v2.tex_coords.into();
-
-                // Calculate the edges of the triangle
-                let delta_pos1 = pos1 - pos0;
-                let delta_pos2 = pos2 - pos0;
-
-                // This will give us a direction to calculate the
-                // tangent and bitangent
-                let delta_uv1 = uv1 - uv0;
-                let delta_uv2 = uv2 - uv0;
-
-                // Solving the following system of equations will
-                // give us the tangent and bitangent.
-                //     delta_pos1 = delta_uv1.x * T + delta_u.y * B
-                //     delta_pos2 = delta_uv2.x * T + delta_uv2.y * B
-                // Luckily, the place I found this equation provided
-                // the solution!
-                let r = 1.0 / (delta_uv1.x * delta_uv2.y - delta_uv1.y * delta_uv2.x);
-                let tangent = (delta_pos1 * delta_uv2.y - delta_pos2 * delta_uv1.y) * r;
-                let bitangent = (delta_pos2 * delta_uv1.x - delta_pos1 * delta_uv2.x) * r;
-
-                // We'll use the same tangent/bitangent for each vertex in the triangle
-                vertices[c[0] as usize].tangent =
-                    (tangent + cgmath::Vector3::from(vertices[c[0] as usize].tangent)).into();
-                vertices[c[1] as usize].tangent =
-                    (tangent + cgmath::Vector3::from(vertices[c[1] as usize].tangent)).into();
-                vertices[c[2] as usize].tangent =
-                    (tangent + cgmath::Vector3::from(vertices[c[2] as usize].tangent)).into();
-                vertices[c[0] as usize].bitangent =
-                    (bitangent + cgmath::Vector3::from(vertices[c[0] as usize].bitangent)).into();
-                vertices[c[1] as usize].bitangent =
-                    (bitangent + cgmath::Vector3::from(vertices[c[1] as usize].bitangent)).into();
-                vertices[c[2] as usize].bitangent =
-                    (bitangent + cgmath::Vector3::from(vertices[c[2] as usize].bitangent)).into();
-
-                // Used to average the tangents/bitangents
-                triangles_included[c[0] as usize] += 1;
-                triangles_included[c[1] as usize] += 1;
-                triangles_included[c[2] as usize] += 1;
-            }
-
-            // Average the tangents/bitangents
-            for (i, n) in triangles_included.into_iter().enumerate() {
-                let denom = 1.0 / n as f32;
-                let mut v = &mut vertices[i];
-                v.tangent = (cgmath::Vector3::from(v.tangent) * denom)
-                    .normalize()
-                    .into();
-                v.bitangent = (cgmath::Vector3::from(v.bitangent) * denom)
-                    .normalize()
-                    .into();
-            }
-
-            let vertex_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
-                label: Some(&format!("{:?} Vertex Buffer", path.as_ref())),
-                contents: bytemuck::cast_slice(&vertices),
-                usage: wgpu::BufferUsages::VERTEX,
-            });
-            let index_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
-                label: Some(&format!("{:?} Index Buffer", path.as_ref())),
-                contents: bytemuck::cast_slice(&m.mesh.indices),
-                usage: wgpu::BufferUsages::INDEX,
-            });
-
-            meshes.push(Mesh {
-                name: m.name,
-                vertex_buffer,
-                index_buffer,
-                num_elements: m.mesh.indices.len() as u32,
-                material: m.mesh.material_id.unwrap_or(0),
-            });
-        }
-
-        Ok(Self { meshes, materials })
-    }
-}
-
 pub trait DrawModel<'a> {
     fn draw_mesh(
         &mut self,
diff --git a/code/intermediate/tutorial11-normals/src/resources.rs b/code/intermediate/tutorial11-normals/src/resources.rs
new file mode 100644
index 00000000..447ec3d4
--- /dev/null
+++ b/code/intermediate/tutorial11-normals/src/resources.rs
@@ -0,0 +1,205 @@
+use std::io::{BufReader, Cursor};
+
+use cfg_if::cfg_if;
+use wgpu::util::DeviceExt;
+
+use crate::{model, texture};
+
+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)
+                .await?
+                .text()
+                .await?;
+        } else {
+            let path = std::path::Path::new(env!("OUT_DIR"))
+                .join("res")
+                .join(file_name);
+            let txt = std::fs::read_to_string(path)?;
+        }
+    }
+
+    Ok(txt)
+}
+
+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 data = reqwest::get(url)
+                .await?
+                .bytes()
+                .await?
+                .to_vec();
+        } else {
+            let path = std::path::Path::new(env!("OUT_DIR"))
+                .join("res")
+                .join(file_name);
+            let data = std::fs::read(path)?;
+        }
+    }
+
+    Ok(data)
+}
+
+pub async fn load_texture(
+    file_name: &str,
+    is_normal_map: bool,
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+) -> anyhow::Result<texture::Texture> {
+    let data = load_binary(file_name).await?;
+    texture::Texture::from_bytes(device, queue, &data, file_name, is_normal_map)
+}
+
+pub async fn load_model(
+    file_name: &str,
+    device: &wgpu::Device,
+    queue: &wgpu::Queue,
+    layout: &wgpu::BindGroupLayout,
+) -> anyhow::Result<model::Model> {
+    let obj_text = load_string(file_name).await?;
+    let obj_cursor = Cursor::new(obj_text);
+    let mut obj_reader = BufReader::new(obj_cursor);
+
+    let (models, obj_materials) = tobj::load_obj_buf_async(
+        &mut obj_reader,
+        &tobj::LoadOptions {
+            triangulate: true,
+            single_index: true,
+            ..Default::default()
+        },
+        |p| async move {
+            let mat_text = load_string(&p).await.unwrap();
+            tobj::load_mtl_buf(&mut BufReader::new(Cursor::new(mat_text)))
+        },
+    )
+    .await?;
+
+    let mut materials = Vec::new();
+    for m in obj_materials? {
+        let diffuse_texture = load_texture(&m.diffuse_texture, false, device, queue).await?;
+        let normal_texture = load_texture(&m.normal_texture, true, device, queue).await?;
+
+        materials.push(model::Material::new(
+            device,
+            &m.name,
+            diffuse_texture,
+            normal_texture,
+            layout,
+        ));
+    }
+
+    let meshes = models
+        .into_iter()
+        .map(|m| {
+            let mut vertices = (0..m.mesh.positions.len() / 3)
+                .map(|i| model::ModelVertex {
+                    position: [
+                        m.mesh.positions[i * 3],
+                        m.mesh.positions[i * 3 + 1],
+                        m.mesh.positions[i * 3 + 2],
+                    ],
+                    tex_coords: [m.mesh.texcoords[i * 2], m.mesh.texcoords[i * 2 + 1]],
+                    normal: [
+                        m.mesh.normals[i * 3],
+                        m.mesh.normals[i * 3 + 1],
+                        m.mesh.normals[i * 3 + 2],
+                    ],
+                    // We'll calculate these later
+                    tangent: [0.0; 3],
+                    bitangent: [0.0; 3],
+                })
+                .collect::<Vec<_>>();
+
+            let indices = &m.mesh.indices;
+            let mut triangles_included = vec![0; vertices.len()];
+
+            // Calculate tangents and bitangets. We're going to
+            // use the triangles, so we need to loop through the
+            // indices in chunks of 3
+            for c in indices.chunks(3) {
+                let v0 = vertices[c[0] as usize];
+                let v1 = vertices[c[1] as usize];
+                let v2 = vertices[c[2] as usize];
+
+                let pos0: cgmath::Vector3<_> = v0.position.into();
+                let pos1: cgmath::Vector3<_> = v1.position.into();
+                let pos2: cgmath::Vector3<_> = v2.position.into();
+
+                let uv0: cgmath::Vector2<_> = v0.tex_coords.into();
+                let uv1: cgmath::Vector2<_> = v1.tex_coords.into();
+                let uv2: cgmath::Vector2<_> = v2.tex_coords.into();
+
+                // Calculate the edges of the triangle
+                let delta_pos1 = pos1 - pos0;
+                let delta_pos2 = pos2 - pos0;
+
+                // This will give us a direction to calculate the
+                // tangent and bitangent
+                let delta_uv1 = uv1 - uv0;
+                let delta_uv2 = uv2 - uv0;
+
+                // Solving the following system of equations will
+                // give us the tangent and bitangent.
+                //     delta_pos1 = delta_uv1.x * T + delta_u.y * B
+                //     delta_pos2 = delta_uv2.x * T + delta_uv2.y * B
+                // Luckily, the place I found this equation provided
+                // the solution!
+                let r = 1.0 / (delta_uv1.x * delta_uv2.y - delta_uv1.y * delta_uv2.x);
+                let tangent = (delta_pos1 * delta_uv2.y - delta_pos2 * delta_uv1.y) * r;
+                let bitangent = (delta_pos2 * delta_uv1.x - delta_pos1 * delta_uv2.x) * r;
+
+                // We'll use the same tangent/bitangent for each vertex in the triangle
+                vertices[c[0] as usize].tangent =
+                    (tangent + cgmath::Vector3::from(vertices[c[0] as usize].tangent)).into();
+                vertices[c[1] as usize].tangent =
+                    (tangent + cgmath::Vector3::from(vertices[c[1] as usize].tangent)).into();
+                vertices[c[2] as usize].tangent =
+                    (tangent + cgmath::Vector3::from(vertices[c[2] as usize].tangent)).into();
+                vertices[c[0] as usize].bitangent =
+                    (bitangent + cgmath::Vector3::from(vertices[c[0] as usize].bitangent)).into();
+                vertices[c[1] as usize].bitangent =
+                    (bitangent + cgmath::Vector3::from(vertices[c[1] as usize].bitangent)).into();
+                vertices[c[2] as usize].bitangent =
+                    (bitangent + cgmath::Vector3::from(vertices[c[2] as usize].bitangent)).into();
+
+                // Used to average the tangents/bitangents
+                triangles_included[c[0] as usize] += 1;
+                triangles_included[c[1] as usize] += 1;
+                triangles_included[c[2] as usize] += 1;
+            }
+
+            // Average the tangents/bitangents
+            for (i, n) in triangles_included.into_iter().enumerate() {
+                let denom = 1.0 / n as f32;
+                let mut v = &mut vertices[i];
+                v.tangent = (cgmath::Vector3::from(v.tangent) * denom).into();
+                v.bitangent = (cgmath::Vector3::from(v.bitangent) * denom).into();
+            }
+
+            let vertex_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                label: Some(&format!("{:?} Vertex Buffer", file_name)),
+                contents: bytemuck::cast_slice(&vertices),
+                usage: wgpu::BufferUsages::VERTEX,
+            });
+            let index_buffer = device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                label: Some(&format!("{:?} Index Buffer", file_name)),
+                contents: bytemuck::cast_slice(&m.mesh.indices),
+                usage: wgpu::BufferUsages::INDEX,
+            });
+
+            model::Mesh {
+                name: file_name.to_string(),
+                vertex_buffer,
+                index_buffer,
+                num_elements: m.mesh.indices.len() as u32,
+                material: m.mesh.material_id.unwrap_or(0),
+            }
+        })
+        .collect::<Vec<_>>();
+
+    Ok(model::Model { meshes, materials })
+}
diff --git a/code/intermediate/tutorial11-normals/src/texture.rs b/code/intermediate/tutorial11-normals/src/texture.rs
index 0272cc8b..d066b4bf 100644
--- a/code/intermediate/tutorial11-normals/src/texture.rs
+++ b/code/intermediate/tutorial11-normals/src/texture.rs
@@ -1,6 +1,6 @@
 use anyhow::*;
 use image::GenericImageView;
-use std::{num::NonZeroU32, path::Path};
+use std::num::NonZeroU32;
 
 pub struct Texture {
     pub texture: wgpu::Texture,
@@ -11,20 +11,6 @@ pub struct Texture {
 impl Texture {
     pub const DEPTH_FORMAT: wgpu::TextureFormat = wgpu::TextureFormat::Depth32Float;
 
-    pub fn load<P: AsRef<Path>>(
-        device: &wgpu::Device,
-        queue: &wgpu::Queue,
-        path: P,
-        is_normal_map: bool,
-    ) -> Result<Self> {
-        // Needed to appease the borrow checker
-        let path_copy = path.as_ref().to_path_buf();
-        let label = path_copy.to_str();
-
-        let img = image::open(path)?;
-        Self::from_image(device, queue, &img, label, is_normal_map)
-    }
-
     pub fn create_depth_texture(
         device: &wgpu::Device,
         config: &wgpu::SurfaceConfiguration,
diff --git a/code/intermediate/tutorial12-camera/Cargo.toml b/code/intermediate/tutorial12-camera/Cargo.toml
index 5746695d..0167bceb 100644
--- a/code/intermediate/tutorial12-camera/Cargo.toml
+++ b/code/intermediate/tutorial12-camera/Cargo.toml
@@ -4,18 +4,39 @@ version = "0.1.0"
 authors = ["Ben Hansen <bhbenjaminhansen@gmail.com>"]
 edition = "2018"
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
+cfg-if = "1"
 anyhow = "1.0"
 bytemuck = { version = "1.4", features = [ "derive" ] }
 cgmath = "0.18"
 env_logger = "0.9"
 pollster = "0.2"
-image = "0.23"
 log = "0.4"
-tobj = "3.0"
+tobj = { version = "3.2", features = ["async"]}
 wgpu = "0.12"
 winit = "0.26"
 
+[dependencies.image]
+version = "0.24"
+default-features = false
+features = ["png", "jpeg"]
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+reqwest = { version = "0.11" }
+console_error_panic_hook = "0.1"
+console_log = "0.2"
+wgpu = { version = "0.12", features = ["webgl"]}
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = [
+    "Document",
+    "Window",
+    "Element",
+]}
+
 [build-dependencies]
 anyhow = "1.0"
 fs_extra = "1.2"
diff --git a/code/intermediate/tutorial12-camera/src/lib.rs b/code/intermediate/tutorial12-camera/src/lib.rs
index 4dc2c8b3..fa37ce82 100644
--- a/code/intermediate/tutorial12-camera/src/lib.rs
+++ b/code/intermediate/tutorial12-camera/src/lib.rs
@@ -8,6 +8,9 @@ use winit::{
     window::Window,
 };
 
+#[cfg(target_arch="wasm32")]
+use wasm_bindgen::prelude::*;
+
 mod camera;
 mod model;
 mod texture; // NEW!
diff --git a/code/intermediate/tutorial13-threading/Cargo.toml b/code/intermediate/tutorial13-threading/Cargo.toml
index 99d08829..d5c5f986 100644
--- a/code/intermediate/tutorial13-threading/Cargo.toml
+++ b/code/intermediate/tutorial13-threading/Cargo.toml
@@ -4,19 +4,40 @@ version = "0.1.0"
 authors = ["Ben Hansen <bhbenjaminhansen@gmail.com>"]
 edition = "2018"
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [dependencies]
+cfg-if = "1"
 anyhow = "1.0"
 bytemuck = { version = "1.4", features = [ "derive" ] }
 cgmath = "0.18"
 env_logger = "0.9"
 pollster = "0.2"
-image = "0.23"
 log = "0.4"
 rayon = "1.4" # NEW!
-tobj = "3.0"
+tobj = { version = "3.2", features = ["async"]}
 wgpu = "0.12"
 winit = "0.26"
 
+[dependencies.image]
+version = "0.24"
+default-features = false
+features = ["png", "jpeg"]
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+reqwest = { version = "0.11" }
+console_error_panic_hook = "0.1"
+console_log = "0.2"
+wgpu = { version = "0.12", features = ["webgl"]}
+wasm-bindgen = "0.2"
+wasm-bindgen-futures = "0.4"
+web-sys = { version = "0.3", features = [
+    "Document",
+    "Window",
+    "Element",
+]}
+
 [build-dependencies]
 anyhow = "1.0"
 fs_extra = "1.2"
diff --git a/code/intermediate/tutorial13-threading/src/lib.rs b/code/intermediate/tutorial13-threading/src/lib.rs
index bb867e87..a9b557c9 100644
--- a/code/intermediate/tutorial13-threading/src/lib.rs
+++ b/code/intermediate/tutorial13-threading/src/lib.rs
@@ -8,6 +8,9 @@ use winit::{
     window::Window,
 };
 
+#[cfg(target_arch="wasm32")]
+use wasm_bindgen::prelude::*;
+
 mod camera;
 mod model;
 mod texture; // NEW!
diff --git a/deploy.sh b/deploy.sh
deleted file mode 100755
index aa65a75b..00000000
--- a/deploy.sh
+++ /dev/null
@@ -1,28 +0,0 @@
-#!/usr/bin/env sh
-
-# abort on errors
-set -e
-
-# build
-npm run build
-
-# navigate into the build output directory
-cd docs/.vuepress/dist
-
-# if you are deploying to a custom domain
-# echo 'www.example.com' > CNAME
-
-git init
-git add -A
-git commit -m 'deploy'
-
-# if you are deploying to https://<USERNAME>.github.io
-# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
-
-# if you are deploying to https://<USERNAME>.github.io/<REPO>
-git push -f git@github.com:sotrh/learn-wgpu.git master:gh-pages
-
-# cleanup
-rm -rf ./.git
-
-cd -
\ No newline at end of file
diff --git a/docs/beginner/tutorial9-models/README.md b/docs/beginner/tutorial9-models/README.md
index 6b9f70bf..65cfad71 100644
--- a/docs/beginner/tutorial9-models/README.md
+++ b/docs/beginner/tutorial9-models/README.md
@@ -195,6 +195,11 @@ I'm using [reqwest](https://docs.rs/reqwest) to handle loading the requests when
 reqwest = { version = "0.11" }
 ```
 
+Make sure to add `resources` as a module in `lib.rs`:
+
+```rust
+mod resources;
+```
 
 ## Loading models with TOBJ
 
diff --git a/docs/intermediate/tutorial10-lighting/README.md b/docs/intermediate/tutorial10-lighting/README.md
index 809062cc..4af3acc1 100644
--- a/docs/intermediate/tutorial10-lighting/README.md
+++ b/docs/intermediate/tutorial10-lighting/README.md
@@ -805,7 +805,7 @@ Don't forget to update the `Camera` struct in `light.wgsl` as well, as if it doe
 We're going to need to update the `CameraUniform` struct as well.
 
 ```rust
-// main.rs
+// lib.rs
 #[repr(C)]
 #[derive(Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
 struct CameraUniform {
@@ -832,7 +832,7 @@ impl CameraUniform {
 Since we want to use our uniforms in the fragment shader now, we need to change it's visibility.
 
 ```rust
-// main.rs
+// lib.rs
 let camera_bind_group_layout = device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
     entries: &[
         wgpu::BindGroupLayoutBinding {
@@ -891,4 +891,6 @@ It's hard to tell the difference, but here's the results.
 
 ![./half_dir.png](./half_dir.png)
 
+<WasmExample example="tutorial10_lighting"></WasmExample>
+
 <AutoGithubLink/>
diff --git a/docs/intermediate/tutorial11-normals/README.md b/docs/intermediate/tutorial11-normals/README.md
index 09da2d76..ac0c8caa 100644
--- a/docs/intermediate/tutorial11-normals/README.md
+++ b/docs/intermediate/tutorial11-normals/README.md
@@ -627,4 +627,6 @@ That gives us something like this.
 
 You can find the textures I use in the Github Repository.
 
+<WasmExample example="tutorial11_normals"></WasmExample>
+
 <AutoGithubLink/>