update doc

docs/guide/animate.md

@@ -36,4 +36,5 @@ Once you've implemented **forward kinematics**, **inverse kinematics** and **ski
 Different poses can be set as keyframes to animate the object.
 
 <video src="./animate_mode/guide-posing-rig.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./animate_mode/guide-posing-rig.mp4)
 

docs/guide/layout.md

----
-layout: default
-title: "Layout"
-permalink: /guide/layout_mode/
-parent: User Guide
+[[Home]](/docs/index.md)  [[User Guide]](/docs/guide/guide.md) [[Mesh Edit]](/docs/meshedit/overview.md) [[Path Tracer]](/docs/pathtracer/overview.md) [[Animation]](/docs/animation/overview.md)
+
 ---
 
 # Layout
@@ -56,3 +53,4 @@ Finally, you may remove the object from the scene by pressing `Delete` or hittin
 ## Demo
 
 <video src="./layout_mode/layout.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./layout_mode/layout.mp4)

docs/guide/model.md

@@ -60,6 +60,7 @@ inset (i.e., shunken or expanded) by a user-controllable amount.
 - Vertex Extrude: The selected vertex _v_ is beveled by a flat amount (we use 1/3 the length of the edge from the original vertex _v_ to an adjacent vertex endpoint as the tangential offset), a new vertex _v'_ is inserted into the resulting face, and _v'_ is offset in its normal direction by a user-controllable amount.
 
 <video src="./model_mode/vertex_bevel.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/vertex_bevel.mp4)
 
 - Edge Bevel: The selected edge _e_ is replaced by a face _f_ whose
 vertices are connected to the edges originally incident on the endpoints of _e_.
@@ -67,6 +68,7 @@ The new face is inset and offset by some user-controllable amount, as with the
 vertex bevel.
 
 <video src="./model_mode/edge_bevel.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/edge_bevel.mp4)
 
 - Face Bevel: The selected face _f_ is replaced by a new face _g_, as well
 as a ring of faces around _g_, such that the vertices of _g_ connect to the
@@ -78,6 +80,7 @@ user-controllable amount.
 - Face Inset: The selected face _f_ is replaced by a new face _g_ as in Face Bevel, but its vertices are only offset in the tangent direction by a constant factor (we use 1/3 in the example).
 
 <video src="./model_mode/face_bevel.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/face_bevel.mp4)
 
 ### Local Connectivity Editing
 
@@ -91,12 +94,14 @@ and faces will be replaced with a single face _f_, that is the union of all
 faces originally incident on _v_.
 
 <video src="./model_mode/erase_vertex.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/erase_vertex.mp4)
 
 - Erase Edge: The selected edge _e_ will be replaced with the union of the
 faces containing it, producing a new face _e_ (if _e_ is a boundary edge,
 nothing happens).
 
 <video src="./model_mode/erase_edge.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/erase_edge.mp4)
 
 - Edge Collapse: The selected edge _e_ is replaced by a single vertex _v_.
 This vertex is connected by edges to all vertices previously connected to either
@@ -105,12 +110,14 @@ triangle, it will be replaced by an edge (rather than a degenerate polygon with
 only two edges).
 
 <video src="./model_mode/collapse_edge.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/collapse_edge.mp4)
 
 - Face Collapse: The selected face _f_ is replaced by a single vertex _v_.
 All edges previously connected to vertices of _f_ are now connected directly to
 _v_.
 
 <video src="./model_mode/collapse_face.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/collapse_face.mp4)
 
 - Vertex Inset: A new vertex _v_ is inset at the center of the selected face _f_, dividing _f_ into _n_ triangles (where _n_ is the degree of _f_).
 
@@ -119,12 +126,14 @@ sense that each endpoint moves to the next vertex (in counter-clockwise order)
 along the boundary of the two polygons containing _e_.
 
 <video src="./model_mode/edge_flip.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/edge_flip.mp4)
 
 - Edge Split: [Note: this method is for triangle meshes only!] The
 selected edge _e_ is split at its midpoint, and the new vertex _v_ is connected
 to the two opposite vertices (or one in the case of a surface with boundary).
 
 <video src="./model_mode/edge_split.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/edge_split.mp4)
 
 - Edge Bisect: The selected edge _e_ is split at its midpoint, and the new vertex _v_ at the split is returned. Note that the new vertex _v_ is not connected to the two opposite vertices as in Edge Split.
 
@@ -138,6 +147,7 @@ the path tracer), this command will be applied only to the selected mesh.
 - Triangulate: Each polygon is split into triangles.
 
 <video src="./model_mode/triangulate.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/triangulate.mp4)
 
 - Linear Subdivision: Each polygon in the selected mesh is split into
 quadrilaterals by inserting a vertex at the midpoint and connecting it to the
@@ -145,6 +155,7 @@ midpoint of all edges. New vertices are placed at the average of old vertices so
 that, e.g., flat faces stay flat, and old vertices remain where they were.
 
 <video src="./model_mode/linear_subd.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/linear_subd.mp4)
 
 - Catmull-Clark Subdivision: _[Note: this method is for meshes without boundary only!]_
 Just as with linear subdivision, each
@@ -154,6 +165,7 @@ rules](https://en.wikipedia.org/wiki/Catmull-Clark_subdivision_surface),
 ultimately generating a nice rounded surface.
 
 <video src="./model_mode/catmull_subd.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/catmull_subd.mp4)
 
 - Loop Subdivision:  _[Note: this method is for triangle meshes without boundary only!]_
 Each triangle is split into four by connecting the edge midpoints. Vertex
@@ -161,6 +173,7 @@ positions are updated according to the [Loop subdivision
 rules](https://en.wikipedia.org/wiki/Loop_subdivision_surface).
 
 <video src="./model_mode/loop_subd.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/loop_subd.mp4)
 
 - Isotropic Remeshing: _[Note: this method is for triangle meshes only!]_
 The mesh is resampled so that triangles all have roughly the same size and
@@ -168,12 +181,14 @@ shape, and vertex valence is close to regular (i.e., about six edges incident on
 every vertex).
 
 <video src="./model_mode/remesh.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/remesh.mp4)
 
 - Simplification _[Note: this method is for triangle meshes only!]_ The
 number of triangles in the mesh is reduced by a factor of about four, aiming to
 preserve the appearance of the original mesh as closely as possible.
 
 <video src="./model_mode/simplify.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./model_mode/simplify.mp4)
 
 ### Key Bindings
 

docs/guide/rig.md

@@ -11,6 +11,7 @@ You can create new bone by first selecting a parent joint and pressing `New Bone
 If you want to branch off at a joint, simply click on the joint to branch off of, then start another chain by adding a new bone from there.
 
 <video src="rigging_mode/guide-rigging-1.mov" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./rigging_mode/guide-rigging-1.mov)
 
 To view a rigged example, see `media/human.dae` example and select the object in the Rig tab to view its joints.
 Once you've implemented forward kinematics the skeleton should be setup like so:
@@ -24,6 +25,7 @@ Once you've implemented forward kinematics the skeleton should be setup like so:
 Each joint has an associated `Radius`  which controls the part of the mesh influenced by the selected bone during animaton. The radius is visualized by the blue capsule around each bone and can be edited using the menu. The position of the joint can also be edited using the `Extent` values in the menu.
 
 <video src="rigging_mode/guide-rigging-2.mov" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./rigging_mode/guide-rigging-2.mov)
 
 Note that rigging only uses extents of the bone for skeleton setup, joint pose does not influence the skeleton. Once rigging is done, the object can be posed by changing joint rotations in the [animate](/docs/guide/animate.md) mode.
 
@@ -35,7 +37,4 @@ To associate a target position with a joint, select `Add IK` and edit the target
 In the [animate](/docs/guide/animate.md) mode, once inverse kinematics is implemented, joint rotation(pose) is updated based on the enabled IK handles.
 
 <video src="rigging_mode/guide-ik.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
-
-
-
-
+![](./rigging_mode/guide-ik.mov)

docs/guide/simulate.md

@@ -22,6 +22,7 @@ Once an enabled emitter is added to the scene (and animation task 4: particle si
 For example, the `particles.dae` test scene:
 
 <video src="./simulate_mode/guide-simulate-1.mp4" controls preload muted loop style="max-width: 100%; margin: 0 auto;"></video>
+![](./simulate_mode/guide-simulate-1.mp4)
 
 Finally, note that you can render particles just like any other scene objects. Rendering `particles.dae` with depth of field:
 

docs/pathtracer/bounding_volume_hierarchy.md

@@ -5,9 +5,8 @@
 # (Task 3) Bounding Volume Hierarchy
 
 ## Walkthrough
-<video width="750" height="500" controls>
-    <source src="videos/Task3_BVH.mp4" type="video/mp4">
-</video>
+<video width="750" height="500" controls><source src="./videos/Task3_BVH.mp4" type="video/mp4"></video>
+![](./videos/Task3_BVH.mp4)
 
 In this task you will implement a bounding volume hierarchy that accelerates ray-scene intersection. Most of this work will be in `student/bvh.inl`. Note that this file has an unusual extension (`.inl` = inline) because it is an implementation file for a template class. This means `bvh.h` must `#include` it, so all code that sees `bvh.h` will also see `bvh.inl`.
 

docs/pathtracer/camera_rays.md

@@ -5,9 +5,8 @@
 # (Task 1) Generating Camera Rays
 
 ## Walkthrough
-<video width="750" height="500" controls>
-    <source src="videos/Task1_CameraRays.mp4" type="video/mp4">
-</video>
+<video width="750" height="500" controls><source src="videos/Task1_CameraRays.mp4" type="video/mp4"></video>
+![](./videos/Task1_CameraRays.mp4)
 
 "Camera rays" emanate from the camera and measure the amount of scene radiance that reaches a point on the camera's sensor plane. (Given a point on the virtual sensor plane, there is a corresponding camera ray that is traced into the scene.) Your job is to generate these rays, which is the first step in the raytracing procedure.
 

docs/pathtracer/environment_lighting.md

@@ -5,9 +5,8 @@
 # (Task 7) Environment Lighting
 
 ## Walkthrough
-<video width="750" height="500" controls>
-    <source src="videos/Task7_EnvMap.mp4" type="video/mp4">
-</video>
+<video width="750" height="500" controls><source src="videos/Task7_EnvMap.mp4" type="video/mp4"></video>
+![](./videos/Task7_EnvMap.mp4)
 
 The final task of this assignment will be to implement a new type of light source: an infinite environment light. An environment light is a light that supplies incident radiance (really, the light intensity dPhi/dOmega) from all directions on the sphere. Rather than using a predefined collection of explicit lights, an environment light is a capture of the actual incoming light from some real-world scene; rendering using environment lighting can be quite striking.
 

docs/pathtracer/materials.md

@@ -6,16 +6,15 @@
 
 ## Walkthrough
 
-<video width="750" height="500" controls>
-    <source src="videos/Task6_Materials.mp4" type="video/mp4">
-</video>
+<video width="750" height="500" controls><source src="videos/Task6_Materials.mp4" type="video/mp4"></video>
+![](./videos/Task6_Materials.mp4)
 
 Now that you have implemented the ability to sample more complex light paths, it's time to add support for more types of materials. In this task you will add support for two types of specular materials: mirrors and glass. These materials are implemented in `student/bsdf.cpp`.
 
 - In the diagrams below, both `out_dir` and `in_dir` are pointing _away_ from the intersection point. This is so that we can more consistently consider their angles with respect to the surface normal.
 - Remember that we are tracing rays _backwards_, from the camera into the scene. This is why the computed scattering direction (`in_dir`) corresponds with the _incoming_ light.
 
-<center><img src="figures\rays_dir.png" style="height:420px"></center>
+<center><img src="./figures/rays_dir.png" style="height:420px"></center>
 
 First, take another at the BSDF interface in `rays/bsdf.h`. There are a number of key methods you should understand in `BSDF`:
 
@@ -32,9 +31,9 @@ To complete the mirror and glass materials, you will only need to implement thei
 
 Finally, when working with Snell's law, there is a special case to account for: total internal reflection. This occurs when a ray hits a refractive boundary at an angle greater than the _critical angle_. The critical angle is the incident \theta_i that causes the refracted \theta_t to be >= 90 degrees, hence can produce no real solution to Snell's Law. In this case, you should set `was_internal` to `true`.
 
-<center><img src="figures\tir_eqns.png" width="200"></center>
+<center><img src="./figures/tir_eqns.png" width="200"></center>
 
-<center><img src="figures\bsdf_diagrams.png" style="height:200px"></center>
+<center><img src="./figures/bsdf_diagrams.png" style="height:200px"></center>
 
 ---
 

docs/pathtracer/ray_sphere_intersection.md

@@ -8,8 +8,8 @@
 
 You also need to implement the `hit` routines for the `Sphere` class in `student/shapes.cpp`. Remember that your intersection tests should respect the ray's `dist_bounds`, and that normals should be out-facing.
 
-<center><img src="figures\sphere_intersect_diagram.png" style="height:320px"></center>
-<center><img src="figures\sphere_intersect_eqns.png" style="height:400px"></center>
+<center><img src="./figures/sphere_intersect_diagram.png" style="height:320px"></center>
+<center><img src="./figures/sphere_intersect_eqns.png" style="height:400px"></center>
 
 **Tip 1:** take care **NOT** to use the `Vec3::normalize()` method when computing your
 normal vector. You should instead use `Vec3::unit()`, since `Vec3::normalize()`
@@ -21,4 +21,4 @@ normalized version.
 interesection time t1 is out of bounds but the second interesection time t2 is
 (in which case you should return t2).
 
-<center><img src="figures\sphere_specialcase_diagram.png" style="height:220px"></center>
+<center><img src="./figures/sphere_specialcase_diagram.png" style="height:220px"></center>

docs/pathtracer/ray_triangle_intersection.md

@@ -12,8 +12,8 @@ We recommend that you implement the *Moller-Trumbore algorithm*, a fast algorith
 that takes advantage of a barycentric coordinates parameterization of the
 intersection point, for ray-triangle intersection.
 
-<center><img src="figures\triangle_intersect_diagram.png" style="height:320px"></center>
-<center><img src="figures\triangle_intersect_eqns.png" style="height:400px"></center>
+<center><img src="./figures/triangle_intersect_diagram.png" style="height:320px"></center>
+<center><img src="./figures/triangle_intersect_eqns.png" style="height:400px"></center>
 
 There are two important details you should be aware of about intersection: