update blogs, resume and style (blog description)

livia23k · Jul 8, 2024 · ea3b384 · ea3b384
1 parent d107b71
commit ea3b384
Show file tree

Hide file tree

Showing 35 changed files with 169 additions and 12 deletions.
diff --git a/_includes/post-description.html b/_includes/post-description.html
@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}
diff --git a/_includes/subhome.html b/_includes/subhome.html
@@ -58,7 +58,7 @@
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
-            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
+            {% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
           {% endunless %}
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
@@ -92,10 +92,11 @@ <h1 class="card-title my-2 mt-md-0">
             </h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>
+              <p>{% include post-description.html %}</p>
+              <!-- <p>
                 {% include no-linenos.html content=post.content %}
                 {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+              </p> -->
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -14,6 +14,9 @@
 <article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p style="font-size: 15px; font-weight: 600;"> [Brief Intro] {{ page.description }}</p>
+    {% endif %}
 
     <div class="post-meta text-muted">
       <!-- published date -->

diff --git a/_posts/graphics-game/knowledges/2024-07-06-graphicsapi.md b/_posts/graphics-game/knowledges/2024-07-06-graphicsapi.md
@@ -0,0 +1,14 @@
+---
+title: Graphics API Comparision
+categories: [Computer Graphics & Game, Graphics]
+tags: [tech, graphics, API]
+---
+
+
+| Graphics API | Release Date | Pros                                      | Cons                                  |
+|--------------|--------------|-------------------------------------------|---------------------------------------|
+| OpenGL       | Jun. 1992| Cross-Platform, Wide Adoption, Extensible | Complex State Management, Less Control Over Hardware |
+| DirectX/Direct3D | Sep. 1995 | High Performance, Feature-Rich      | Platform-Limited (Windows, Xbox)      |
+| WebGL        | Mar. 2011| Web Integration, Cross-Platform           | Performance Limitations               |
+| Metal        | Jun. 2014 | Optimized for Apple Devices, Unified Graphics and Compute | Apple-Only                             |
+| Vulkan       | Feb. 2016 | Low Overhead, Cross-Platform, Modern Design | Complexity                          |
diff --git a/_posts/graphics-game/labs/2024-04-03-15662-pathtracing.md b/_posts/graphics-game/labs/2024-04-03-15662-pathtracing.md
@@ -15,8 +15,62 @@ Lecture slides:
 
 ## Render Result
 
-[TODO]
+### Features
 
+#### BVH Accelarating Data Structure
+
+![](bvh-cornellbox.png){: w="500px"}
+_BVH: Cornell Box_
+
+![](bvh-Bunny.png){: w="900px"}
+_BVH: Bunny_
+
+![](bvh-cow.png){: w="800px"}
+_BVH: Cow_
+
+#### Materials
+
+![](material.png){: w="800px"}
+_Materials_
+
+<p style="color:gray;"> Note: When the medium IOR is equal to 1.0 and refraction is present, the shadows on the floor appear jagged, which should be wrong. This is probably due to lack of edge case handling.</p>
+
+
+#### Sampling Methods
+
+Multiple Importance Sampling:
+
+Splitting the samples between BSDF scatters and the surface area lights (or the environment light). This method benefits when we have scenes using continuous distributions like the Lambertian.
+
+![](multiple-importance.png){: w="500px"}
+_Uniform Sampling V.S. Multiple Importance Sampling (with 32 samples)_
+
+#### Sample Numbers
+
+![](sample-numbers.png){: w="800px"}
+_Different Sample Numbers_
+
+#### Environment Lighting
+
+![](cow-grid.png){: w="500px"}
+_Environment Map: Grid_
+
+![](cow-indoor.png){: w="500px"}
+_Environment Map: Indoor_
+
+![](cow-outdoor.png){: w="500px"}
+_Environment Map: Outdoor_
+
+### Scenes
+
+![](bunnie.png){: w="600px"}
+_Bunny_
+
+![](cow.png){: w="600px"}
+_Cow_
+
+![](dragon-glass.png){: w="600px"}
+_Dragon (Material: Glass) in Sky_
 
 ## Acknowledgement
 

diff --git a/_posts/graphics-game/labs/2024-04-24-15662-animation.md b/_posts/graphics-game/labs/2024-04-24-15662-animation.md
@@ -15,7 +15,39 @@ Lecture slides:
 
 ## Render Result
 
-[TODO]
+
+### Forward Kinematics
+
+<video src="../../../assets/img/post/2024-04-24-animation/forward.mp4" width="600" controls></video>
+
+### Backward Kinematics
+
+<video src="../../../assets/img/post/2024-04-24-animation/backward.mp4" width="600" controls></video>
+
+
+### Particle Simulation
+
+Change Particle Position: 
+
+<video src="../../../assets/img/post/2024-04-24-animation/particle-move.mp4" width="600" controls></video>
+
+Change Particle Initial Velocity: 
+
+<video src="../../../assets/img/post/2024-04-24-animation/particle-vel.mp4" width="600" controls></video>
+
+Change Particle Radius: 
+
+<video src="../../../assets/img/post/2024-04-24-animation/particle-radius.mp4" width="600" controls></video>
+
+Change Particle Spread Angle:
+
+<video src="../../../assets/img/post/2024-04-24-animation/particle-angle.mp4" width="600" controls></video>
+
+
+### Self-made Animation
+
+<video src="../../../assets/img/post/2024-04-24-animation/walk.mp4" width="600" controls></video>
+
 
 
 ## Acknowledgement

diff --git a/_tabs/resume.md b/_tabs/resume.md
@@ -38,7 +38,7 @@ img_path: /assets/img/
 
 <div class="course-sub">
     <p class="course-sub-title">More Later</p>
-    <p class="course-sub-content">Computer Game Programming, Real Time Graphics, Computer Vision for Engineers, Cloud Infrastructure and Servicess;</p>
+    <p class="course-sub-content">Computer Game Programming, Real Time Graphics, Computer Vision for Engineers, Cloud Infrastructure and Services;</p>
 </div>
 
 <div style="height: 15px;"></div>
@@ -114,6 +114,48 @@ _Preview: Render Result of GAMES202 Mary_
 
 <!-- ================================================================================================================================================ -->
 
+<div class="proj">
+    <p class="proj-title">◼︎ Animation&nbsp;&nbsp;
+        <a href="{{site.baseurl}}/posts/15662-animation/">[Link]</a> 
+    </p>
+</div>
+
+<div class="proj-sub">
+    <p class="proj-sub-title">Brief</p>
+    <p class="proj-sub-content">Implemented Forward and Backward Kinematics for supporting smooth child-to-parent and parent-to-child skeleton transformations. Add Linear Blend Skinning to get the mesh to follow the movements of the skeleton. Complete a simple Particle System.</p>
+</div>
+
+<div class="proj-sub">
+    <p class="proj-sub-title">Features</p>
+    <p class="proj-sub-content">Hermite Curve, Catumull-Rom Spline, Linear Blend Skinning, Particle Simulation.</p>
+</div>
+
+![](/post/2024-04-24-animation/animationpreview.png){: w="400px"}
+_Preview: Animate Screen_
+
+<!-- ================================================================================================================================================ -->
+
+<div class="proj">
+    <p class="proj-title">◼︎ Path Tracing&nbsp;&nbsp;
+        <a href="{{site.baseurl}}/posts/15662-pathtracing/">[Link]</a> 
+    </p>
+</div>
+
+<div class="proj-sub">
+    <p class="proj-sub-title">Brief</p>
+    <p class="proj-sub-content">Implemented the path tracing pipeline based on rendering equation of Monte Carlo integration.</p>
+</div>
+
+<div class="proj-sub">
+    <p class="proj-sub-title">Features</p>
+    <p class="proj-sub-content">BVH accelarating data structure, BSDF, Materials(Diffuse/Mirror/ Refract/Glass), PDF/CDF Sampling, Uniform Sampling, Multiple Importance Sampling, Environment Lighting.</p>
+</div>
+
+![](/post/2024-04-03-pathtracing/bunnie.png){: w="400px"}
+_Preview: Rendering Stanford Bunny_
+
+<!-- ================================================================================================================================================ -->
+
 <div class="proj">
     <p class="proj-title">◼︎ Mesh Edit&nbsp;&nbsp;
         <a href="{{site.baseurl}}/posts/15662-meshedit/">[Link]</a> 
@@ -152,16 +194,11 @@ _Preview: Editting Stanford Bunny_
 </div>
 
 ![](/post/2024-02-14-rasterizer/bunnie.png){: w="400px"}
-_Preview: Render Result of Stanford Bunny_
+_Preview: Rendering Stanford Bunny_
 
 <!-- ================================================================================================================================================ -->
 
 
-
-<div style="height: 30px;"></div>
-
-[saving space]
-
 <div style="height: 30px;"></div>
 
 <div style="height: 25px;"></div>

diff --git a/assets/img/post/2024-04-03-pathtracing/bunnie.png b/assets/img/post/2024-04-03-pathtracing/bunnie.png
diff --git a/assets/img/post/2024-04-03-pathtracing/bvh-bunnie-zoom.png b/assets/img/post/2024-04-03-pathtracing/bvh-bunnie-zoom.png
diff --git a/assets/img/post/2024-04-03-pathtracing/bvh-bunnie.png b/assets/img/post/2024-04-03-pathtracing/bvh-bunnie.png
diff --git a/assets/img/post/2024-04-03-pathtracing/bvh-cornellbox.png b/assets/img/post/2024-04-03-pathtracing/bvh-cornellbox.png
diff --git a/assets/img/post/2024-04-03-pathtracing/bvh-cow-zoom.png b/assets/img/post/2024-04-03-pathtracing/bvh-cow-zoom.png
diff --git a/assets/img/post/2024-04-03-pathtracing/bvh-cow.png b/assets/img/post/2024-04-03-pathtracing/bvh-cow.png
diff --git a/assets/img/post/2024-04-03-pathtracing/cow-grid.png b/assets/img/post/2024-04-03-pathtracing/cow-grid.png
diff --git a/assets/img/post/2024-04-03-pathtracing/cow-indoor.png b/assets/img/post/2024-04-03-pathtracing/cow-indoor.png
diff --git a/assets/img/post/2024-04-03-pathtracing/cow-outdoor.png b/assets/img/post/2024-04-03-pathtracing/cow-outdoor.png
diff --git a/assets/img/post/2024-04-03-pathtracing/cow.png b/assets/img/post/2024-04-03-pathtracing/cow.png
diff --git a/assets/img/post/2024-04-03-pathtracing/dragon-glass.png b/assets/img/post/2024-04-03-pathtracing/dragon-glass.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-glass-ior1.5.png b/assets/img/post/2024-04-03-pathtracing/material-glass-ior1.5.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-glass-ior1.png b/assets/img/post/2024-04-03-pathtracing/material-glass-ior1.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-lam.png b/assets/img/post/2024-04-03-pathtracing/material-lam.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-mirror.png b/assets/img/post/2024-04-03-pathtracing/material-mirror.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-refract-ior1.5.png b/assets/img/post/2024-04-03-pathtracing/material-refract-ior1.5.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material-refract-ior1.png b/assets/img/post/2024-04-03-pathtracing/material-refract-ior1.png
diff --git a/assets/img/post/2024-04-03-pathtracing/material.png b/assets/img/post/2024-04-03-pathtracing/material.png
diff --git a/assets/img/post/2024-04-03-pathtracing/multiple-importance.png b/assets/img/post/2024-04-03-pathtracing/multiple-importance.png
diff --git a/assets/img/post/2024-04-03-pathtracing/sample-numbers.png b/assets/img/post/2024-04-03-pathtracing/sample-numbers.png
diff --git a/assets/img/post/2024-04-24-animation/animationpreview.png b/assets/img/post/2024-04-24-animation/animationpreview.png
diff --git a/assets/img/post/2024-04-24-animation/backward.mp4 b/assets/img/post/2024-04-24-animation/backward.mp4
diff --git a/assets/img/post/2024-04-24-animation/forward.mp4 b/assets/img/post/2024-04-24-animation/forward.mp4
diff --git a/assets/img/post/2024-04-24-animation/particle-angle.mp4 b/assets/img/post/2024-04-24-animation/particle-angle.mp4
diff --git a/assets/img/post/2024-04-24-animation/particle-move.mp4 b/assets/img/post/2024-04-24-animation/particle-move.mp4
diff --git a/assets/img/post/2024-04-24-animation/particle-radius.mp4 b/assets/img/post/2024-04-24-animation/particle-radius.mp4
diff --git a/assets/img/post/2024-04-24-animation/particle-vel.mp4 b/assets/img/post/2024-04-24-animation/particle-vel.mp4
diff --git a/assets/img/post/2024-04-24-animation/walk.mp4 b/assets/img/post/2024-04-24-animation/walk.mp4