diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/1_1.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/1_1.png"
index 0ae48949f5..1f53ad4e13 100644
Binary files "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/1_1.png" and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/1_1.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/2_1.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/2_1.png"
index e707787ee1..2984b6756f 100644
Binary files "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/2_1.png" and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/2_1.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_1.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_1.png"
new file mode 100644
index 0000000000..51fcf29f19
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_1.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_2.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_2.png"
new file mode 100644
index 0000000000..f805b94582
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/3_2.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_1.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_1.png"
new file mode 100644
index 0000000000..08c5ad459f
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_1.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_2.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_2.png"
new file mode 100644
index 0000000000..cead1bdf1a
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_2.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_3.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_3.png"
new file mode 100644
index 0000000000..270e4d045d
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_3.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_4.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_4.png"
new file mode 100644
index 0000000000..350dadd00a
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_4.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_5.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_5.png"
new file mode 100644
index 0000000000..58823e0f00
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_5.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_6.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_6.png"
new file mode 100644
index 0000000000..424de0ded8
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_6.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_7.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_7.png"
new file mode 100644
index 0000000000..72736dddda
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_7.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_8.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_8.png"
new file mode 100644
index 0000000000..71619f6310
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/4_8.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_1.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_1.png"
new file mode 100644
index 0000000000..e08286a5d9
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_1.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_2.png" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_2.png"
new file mode 100644
index 0000000000..3a25e29b7e
Binary files /dev/null and "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/HW0_2.png" differ
diff --git "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/index.html" "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/index.html"
index 6b8842571d..0a91a26e0a 100644
--- "a/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/index.html"
+++ "b/2023/10/25/CG-GAMES101-\347\216\260\344\273\243\350\256\241\347\256\227\346\234\272\345\233\276\345\275\242\345\255\246\345\205\245\351\227\250-\351\227\253\344\273\244\347\220\252\357\274\2101\357\274\211/index.html"
@@ -336,7 +336,10 @@ <h2><span id="cg-games101-现代计算机图形学入门-闫令琪1">CG-GAMES101
 <li><a href="#资源">资源</a></li>
 <li><a href="#lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</a></li>
 <li><a href="#lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear Algebra</a></li>
+<li><a href="#lecture-03-transformation">Lecture 03 Transformation</a></li>
+<li><a href="#lecture-04-transformation-cont">Lecture 04 Transformation Cont.</a></li>
 <li><a href="#hw0">HW0</a></li>
+<li><a href="#hw1">HW1</a></li>
 </ul>
 <!-- tocstop -->
 <h2><span id="资源">资源</span></h2><ul>
@@ -345,6 +348,7 @@ <h2><span id="资源">资源</span></h2><ul>
 <li><p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1X7411F744/?p=1">Lecture 01 Overview of Computer Graphics_哔哩哔哩_bilibili</a></p>
 </li>
 <li><a target="_blank" rel="noopener" href="https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html">GAMES101: 现代计算机图形学入门 (ucsb.edu)</a></li>
+<li><a target="_blank" rel="noopener" href="https://www.notion.so/GAMES101-b0e27c856cde429b8672671a54c34817">GAMES101 笔记 (notion.so)</a></li>
 </ul>
 <h2><span id="lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</span></h2><p>What is Computer Graphics？ 图形学的应用：</p>
 <ul>
@@ -524,7 +528,7 @@ <h2><span id="lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear A
 <p>构建右手坐标系：</p>
 <script type="math/tex; mode=display">\|\vec{u}\|=\|\vec{v}\|=\|\vec{w}\|=1</script><script type="math/tex; mode=display">\vec{u}\cdot\vec{v}=\vec{v}\cdot\vec{w}=\vec{u}\cdot\vec{w}=0</script><script type="math/tex; mode=display">\vec{w}=\vec{u}\times\vec{v}</script><script type="math/tex; mode=display">\vec p=(\vec p\cdot\vec u)\vec u+(\vec p\cdot\vec v)\vec v+(\vec p\cdot\vec w)\vec w</script><p><strong>Matrix 矩阵</strong></p>
 <p><strong>Matrix-Matrix Multiplication 矩阵乘法</strong></p>
-<p>一般不满足交换律（一般不满足 $AB\= BA$）</p>
+<p>一般不满足交换律（一般不满足 $AB\ne BA$）</p>
 <p>满足结合律和分配律：</p>
 <ul>
 <li>$(AB)C=A(BC)$</li>
@@ -539,8 +543,338 @@ <h2><span id="lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear A
 <script type="math/tex; mode=display">\vec{a}\cdot\vec{b}=\vec{a}^T\vec{b}</script><script type="math/tex; mode=display">=\begin{pmatrix}x_a&y_a&z_a\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}=\begin{pmatrix}x_ax_b+y_ay_b+z_az_b\end{pmatrix}</script><ul>
 <li>Cross product 叉乘</li>
 </ul>
-<script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><h2><span id="hw0">HW0</span></h2><p><img src="/C:/Users/19048/AppData/Roaming/Typora/typora-user-images/image-20231026155230885.png" alt="image-20231026155230885"></p>
-
+<script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><h2><span id="lecture-03-transformation">Lecture 03 Transformation</span></h2><p><strong>2D Transform 二维变换</strong></p>
+<p><strong>Scale Transform 缩放</strong></p>
+<p>等比缩放：</p>
+<script type="math/tex; mode=display">x^{\prime}=sx</script><script type="math/tex; mode=display">y^{\prime}=sx</script><p>用矩阵乘法表示：</p>
+<script type="math/tex; mode=display">\left.\left[\begin{array}{c}x'\\y'\end{array}\right.\right]=\left[\begin{array}{cc}s&0\\0&s\end{array}\right]\left[\begin{array}{c}x\\y\end{array}\right]</script><p><strong>Scale (Non-Uniform) 任意缩放</strong></p>
+<script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}s_x&0\\0&s_y\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Reflection Matrix 镜像</strong></p>
+<p>Horizontal reflection 水平镜像：</p>
+<script type="math/tex; mode=display">x^{\prime}=-x</script><script type="math/tex; mode=display">y^{\prime}=y</script><p>用矩阵乘法表示：</p>
+<script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}-1&0\\0&1\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Shear Matrix 斜切：</strong></p>
+<p><img src="3_1.png" alt="png"></p>
+<p>Hints:</p>
+<ul>
+<li>Horizontal shift is $0$ at $y=0$</li>
+<li>Horizontal shift is $a$ at $y=1$</li>
+<li>Vertical shift is always $0$</li>
+</ul>
+<script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}1&a\\0&1\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Rotation Matrix 旋转</strong></p>
+<script type="math/tex; mode=display">\mathbf{R}_\theta=\begin{bmatrix}\cos\theta&-\sin\theta\\\sin\theta&\cos\theta\end{bmatrix}</script><p>旋转相反的角等于矩阵的逆，等于矩阵的转置：</p>
+<p>旋转矩阵是<strong>正交矩阵</strong>。</p>
+<script type="math/tex; mode=display">\mathbf{R}_{-\theta}=\mathbf{R}_\theta^{-1}=\mathbf{R}_{\theta}^T</script><p><strong>Linear Transforms = Matrices 线性变换 = 矩阵</strong></p>
+<script type="math/tex; mode=display">x^{\prime}=ax+by</script><script type="math/tex; mode=display">y^{\prime}=cx+dy</script><script type="math/tex; mode=display">\left.\left[\begin{array}{c}x'\\y'\end{array}\right.\right]=\left[\begin{array}{cc}a&b\\c&d\end{array}\right]\left[\begin{array}{c}x\\y\end{array}\right]</script><p>简写为：</p>
+<script type="math/tex; mode=display">\mathbf{x}^{\prime}=\mathbf{M}\mathbf{x}</script><p><strong>Translation 平移</strong></p>
+<script type="math/tex; mode=display">x^{\prime}=x+t_x</script><script type="math/tex; mode=display">y^{\prime}=y+t_y</script><p><strong>Why Homogeneous Coordinates 为什么引入齐次坐标</strong></p>
+<ul>
+<li>Translation cannot be represented in matrix form 平移变换不能用矩阵来表示</li>
+</ul>
+<script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}a&b\\c&d\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}t_x\\t_y\end{bmatrix}</script><p>因此，平移变换不是线性变换！</p>
+<ul>
+<li><p>But we don’t want translation to be a special case 但我们不希望平移变换成为特例</p>
+</li>
+<li><p>Is there a unified way to represent all transformations? (and what’s the cost?) 用统一的方式描述所有变换？（代价是什么？）</p>
+</li>
+</ul>
+<p>Solution: Homogenous Coordinates 解决办法：齐次坐标</p>
+<p>Add a third coordinate (w-coordinate) 增加一个维度</p>
+<ul>
+<li>2D point = $(x, y, {\color{Red}1})^T$</li>
+<li>2D vector = $(x, y, {\color{Red}0})^T$</li>
+</ul>
+<p>Matrix representation of translations 用矩阵描述所有变换</p>
+<script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\w'\end{pmatrix}=\begin{pmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}=\begin{pmatrix}x+t_x\\y+t_y\\1\end{pmatrix}</script><p>Valid operation if w-coordinate of result is 1 or 0 所增加维度的值不是 1 就是 0，这是因为：</p>
+<ul>
+<li>vector + vector = vector</li>
+<li>point – point = vector</li>
+<li>point + vector = point </li>
+<li>point + point = 它们的中点</li>
+</ul>
+<p>因此定义，在齐次坐标中：</p>
+<script type="math/tex; mode=display">\begin{pmatrix}x\\y\\w\end{pmatrix}\text{ is the 2D point }\begin{pmatrix}x/w\\y/w\\1\end{pmatrix},w\neq0</script><p><strong>Affine Transformation 仿射变换</strong></p>
+<p>Affine map = linear map + translation 仿射变换 = 线性变换 + 平移</p>
+<script type="math/tex; mode=display">\begin{pmatrix}x^{\prime}\\y^{\prime}\end{pmatrix}~=~\begin{pmatrix}a&b\\c&d\end{pmatrix}\cdot\begin{pmatrix}x\\y\end{pmatrix}+\begin{pmatrix}t_x\\t_y\end{pmatrix}</script><p>Using homogenous coordinates: 使用齐次坐标</p>
+<script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\1\end{pmatrix}=\begin{pmatrix}a&b&t_x\\c&d&t_y\\0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}</script><p><strong>2D Transformations 2D 变换</strong></p>
+<p>Scale 缩放</p>
+<script type="math/tex; mode=display">\mathbf{S}(s_x,s_y)~=~\begin{pmatrix}s_x&0&0\\0&s_y&0\\0&0&1\end{pmatrix}</script><p>Rotation 旋转</p>
+<script type="math/tex; mode=display">\mathbf{R}(\alpha)=\begin{pmatrix}\cos\alpha&-\sin\alpha&0\\\sin\alpha&\cos\alpha&0\\0&0&1\end{pmatrix}</script><p>Translation 平移</p>
+<script type="math/tex; mode=display">\mathbf{T}(t_x,t_y)=\begin{pmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{pmatrix}</script><p><strong>Inverse Transform 逆变换</strong></p>
+<script type="math/tex; mode=display">\mathbf{M^{-1}}</script><p><strong>Composing Transforms 复合变换</strong></p>
+<p>Sequence of affine transforms $A_1, A_2, A_3, …$ 对于仿射变换序列 $A_1, A_2, A_3, …$</p>
+<ul>
+<li>Compose by matrix multiplication 通过矩阵乘法进行合成<ul>
+<li>Very important for performance! 对性能非常重要！</li>
+</ul>
+</li>
+</ul>
+<script type="math/tex; mode=display">A_n(\ldots A_2(A_1(\mathbf{x})))=\mathbf{A}_n\cdots\mathbf{A}_2\cdot\mathbf{A}_1\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}</script><p>预乘 $n$ 个矩阵以获得表示组合变换的单个矩阵。</p>
+<p><strong>Decomposing Complex Transforms 分解复合变换</strong></p>
+<p><img src="3_2.png" alt="png"></p>
+<p>How to rotate around a given point $c$? 如何绕空间任意一点 $c$ 旋转？</p>
+<ol>
+<li>Translate center to origin 平移回原点</li>
+<li>Rotate 旋转</li>
+<li>Translate back 平移回去</li>
+</ol>
+<script type="math/tex; mode=display">\mathbf{T(c)}\cdot\mathbf{R(\alpha)}\cdot\mathbf{T(-c)}</script><p><strong>3D Transforms</strong></p>
+<p>Use homogeneous coordinates again 再次使用齐次坐标: </p>
+<ul>
+<li>3D point = $(x, y, z, {\color{Red}1})^T$</li>
+<li>3D vector = $(x, y, z, {\color{Red}0})^T$</li>
+</ul>
+<p>In general, $(x, y, z, w) (w \ne 0)$ is the 3D point：</p>
+<script type="math/tex; mode=display">(x/w, y/w, z/w)</script><p><strong>3D Transformations 3D 变换</strong></p>
+<p>Use $4\times 4$ matrices for affine transformations 使用 $4\times 4$ 齐次坐标表示：</p>
+<script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\z'\\1\end{pmatrix}=\begin{pmatrix}a&b&c&t_x\\d&e&f&t_y\\g&h&i&t_z\\0&0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\z\\1\end{pmatrix}</script><p>先应用线性变换，再平移。</p>
+<h2><span id="lecture-04-transformation-cont">Lecture 04 Transformation Cont.</span></h2><p>Viewing (观测) transformation</p>
+<ul>
+<li>View (视图) / Camera transformation</li>
+<li>Projection (投影) transformation</li>
+<li>Orthographic (正交) projection</li>
+<li>Perspective (透视) projection</li>
+</ul>
+<p><strong>3D Transformations 3D 变换</strong></p>
+<p>Rotation around $x$-, $y$-, or $z$-axis 沿 $x$、$y$、$z$ 轴旋转：</p>
+<p><img src="4_1.png" alt="png"></p>
+<script type="math/tex; mode=display">\mathbf{R}_x(\alpha)=\begin{pmatrix}1&0&0&0\\0&\cos\alpha&-\sin\alpha&0\\0&\sin\alpha&\cos\alpha&0\\0&0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{R}_y(\alpha)=\begin{pmatrix}\cos\alpha&0&\sin\alpha&0\\0&1&0&0\\-\sin\alpha&0&\cos\alpha&0\\0&0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{R}_z(\alpha)=\begin{pmatrix}\cos\alpha&-\sin\alpha&0&0\\\sin\alpha&\cos\alpha&0&0\\0&0&1&0\\0&0&0&1\end{pmatrix}</script><p>Compose any 3D rotation from $\mathbf{R}_x$, $\mathbf{R}_y$, $\mathbf{R}_z$? 让 $\mathbf{R}_x$, $\mathbf{R}_y$, $\mathbf{R}_z$ 构成任意三维旋转？</p>
+<script type="math/tex; mode=display">\mathbf{R}_{xyz}(\alpha,\beta,\gamma)~=~\mathbf{R}_x(\alpha)\mathbf{R}_y(\beta)\mathbf{R}_z(\gamma)</script><ul>
+<li>So-called Euler angles 所谓的欧拉角</li>
+<li>Often used in flight simulators: roll, pitch, yaw 常用于飞行模拟器：滚转、俯仰、偏航</li>
+</ul>
+<p><img src="4_2.png" alt="png"></p>
+<p><strong>Rodrigues’ Rotation Formula 罗德里格斯轮换公式</strong></p>
+<p>绕轴 $n$ 旋转角度 $\alpha$：</p>
+<script type="math/tex; mode=display">\mathbf{R}(\mathbf{n},\alpha)=\cos(\alpha)\mathbf{I}+(1-\cos(\alpha))\mathbf{n}\mathbf{n}^T+\sin(\alpha)\underbrace{\begin{pmatrix}0&-n_z&n_y\\n_z&0&-n_x\\-n_y&n_x&0\end{pmatrix}}_{\mathbf{N}}</script><p><strong>View / Camera Transformation 视图变换</strong></p>
+<ul>
+<li>What is view transformation? 什么是视图变换？</li>
+<li>Think about how to take a photo 考虑拍照<ul>
+<li>Find a good place and arrange people (model transformation) 摆好场景：模型变换</li>
+<li>Find a good “angle” to put the camera (view transformation) 选好视角：视图变换</li>
+<li>Cheese! (projection transformation) 拍照：投影变换</li>
+</ul>
+</li>
+<li>How to perform view transformation? 如何进行视图变换？<ul>
+<li>Define the camera first 首先定义一个相机<ul>
+<li>Position 位置 $\vec{e}$</li>
+<li>Look-at / gaze direction 注视/凝视方向 $\hat g$</li>
+<li>Up direction 上方向 $\hat t$</li>
+</ul>
+</li>
+</ul>
+</li>
+</ul>
+<p><img src="4_3.png" alt="png"></p>
+<ul>
+<li><p>Key observation 重点观察</p>
+<ul>
+<li>If the camera and all objects move together,  the “photo” will be the same 如果相机和所有物体一起移动，“照片”将是相同的</li>
+</ul>
+</li>
+<li><p>How about that we always transform the camera to 不如我们总是把相机变成</p>
+<ul>
+<li>The origin, up at $Y$, look at $-Z$ 处于原点，上方为 $Y$ 轴，看着 $-Z$ 轴方向</li>
+<li>And transform the objects along with the camera 并<strong>随相机变换对象</strong></li>
+</ul>
+</li>
+<li><p>Transform the camera by $M_{view}$</p>
+<ul>
+<li>So it’s located at the origin, up at $Y$, look at $-Z$ 所以它位于原点，向上看 $Y$，看 $-Z$</li>
+</ul>
+</li>
+<li><p>$M_{view}$ in math? $M_{view}=R_{view}T_{view}$</p>
+<ul>
+<li><p>Translates $e$ to origin</p>
+<p>$T_{view}=\begin{bmatrix}1&amp;0&amp;0&amp;-x_e\\0&amp;1&amp;0&amp;-y_e\\0&amp;0&amp;1&amp;-z_e\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p>
+</li>
+<li><p>Rotates $g$ to $-Z$、Rotates $t$ to $Y$、Rotates ($g \times t$) To $X$</p>
+<ul>
+<li><p>Difficult to write!  将 $g$ 旋转到 $-Z$ 轴、将 $t$ 旋转到 $Y$ 轴、将 ($g \times t$) 旋转到 $X$ 轴，描述成矩阵是很复杂的！</p>
+</li>
+<li><p>考虑求其逆变换</p>
+<p>$R_{view}^{-1}=\begin{bmatrix}x_{\hat{g}\times\hat{t}}&amp;x_{t}&amp;x_{-g}&amp;0\\y_{\hat{g}\times\hat{t}}&amp;y_{t}&amp;y_{-g}&amp;0\\z_{\hat{g}\times\hat{t}}&amp;z_{t}&amp;z_{-g}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p>
+</li>
+<li><p>由于旋转矩阵是正交矩阵，其逆为它的转置，因此易求得 $R_{view}$</p>
+<p>$R_{view}=\begin{bmatrix}x_{\hat{g}\times\hat{t}}&amp;y_{\hat{g}\times\hat{t}}&amp;z_{\hat{g}\times\hat{t}}&amp;0\\x_t&amp;y_t&amp;z_t&amp;0\\x_{-g}&amp;y_{-g}&amp;z_{-g}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p>
+</li>
+</ul>
+</li>
+</ul>
+</li>
+<li><p>Summary 总结</p>
+<ul>
+<li>Transform objects together with the camera 与摄影机一起变换对象</li>
+<li>Until camera’s at the origin, up at $Y$, look at $-Z$ 直到相机移动到原点，以 $Y$ 轴为上方，视点在 $-Z$ 轴方向。</li>
+</ul>
+</li>
+<li><p>Also known as ModelView Transformation 也称为 ModelView 变换</p>
+</li>
+</ul>
+<p><strong>Projection Transformation 投影变换</strong></p>
+<ul>
+<li>Projection in Computer Graphics 投影在计算机图形学<ul>
+<li>3D to 2D</li>
+<li>Orthographic projection 正交投影</li>
+<li>Perspective projection 透视投影</li>
+</ul>
+</li>
+</ul>
+<p><img src="4_4.png" alt="png"></p>
+<p><strong>Orthographic Projection 正交投影</strong></p>
+<ul>
+<li><p>A simple way of understanding 简单的理解方法</p>
+<ul>
+<li>Camera located at origin, looking at $-Z$, up at $Y$ (looks familiar?)  相机移动到原点，以 $Y$ 轴为上方，视点在 $-Z$ 轴方向</li>
+<li>Drop $Z$ coordinate 删除 $Z$ 坐标</li>
+<li>Translate and scale the resulting rectangle to $[-1, 1]^2$  将生成的矩形平移并缩放到 $[-1，1]^2$</li>
+</ul>
+</li>
+<li><p>In General</p>
+<ul>
+<li><p>We want to map a cuboid $[l, r]\times [b, t]\times [f, n]$ to  the “canonical” cube $[-1, 1]^3$</p>
+<p>我们想把长方体 $[l,r]\times[b,t]\times[f,n]$ 映射到“规范(正则、规范、标准)” 的立方体 $[-1，1]^3$</p>
+</li>
+</ul>
+</li>
+<li><p>Slightly different orders (to the “simple way”)</p>
+<ul>
+<li>Center cuboid by translating  通过平移使长方体居中</li>
+<li>Scale into “canonical” cube 缩放为“规范”多维数据集</li>
+</ul>
+</li>
+</ul>
+<p>$r,l,t,b,n,f$ 的定义如下所示：</p>
+<p><img src="4_5.png" alt="png"></p>
+<ul>
+<li><p>Transformation matrix?</p>
+<ul>
+<li><p>Translate (center to origin) first, then scale (length/width/height to 2) 首先平移（中心到原点），然后缩放（长度/宽度/高度到 2）</p>
+<p>$M_{ortho}=\begin{bmatrix}\frac2{r-l}&amp;0&amp;0&amp;0\\0&amp;\frac2{t-b}&amp;0&amp;0\\0&amp;0&amp;\frac2{n-f}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}\begin{bmatrix}1&amp;0&amp;0&amp;-\frac{r+l}2\\0&amp;1&amp;0&amp;-\frac{t+b}2\\0&amp;0&amp;1&amp;-\frac{n+f}2\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p>
+</li>
+</ul>
+</li>
+<li><p>Caveat</p>
+<ul>
+<li>Looking at / along $-Z$ is making near and far not intuitive ($n &gt; f$)  观察/沿着 $-Z$ 轴使远近不直观（$n&gt;f$）</li>
+<li>FYI: that’s why OpenGL (a Graphics API) uses left hand coords. 仅供参考：这就是 OpenGL（图形 API）使用左手坐标的原因。</li>
+</ul>
+</li>
+</ul>
+<p><strong>Perspective Projection 透视投影</strong></p>
+<ul>
+<li>Most common in Computer Graphics, art, visual system 最常见于计算机图形学、艺术、视觉系统</li>
+<li>Further objects are smaller 其他物体较小</li>
+<li>Parallel lines not parallel; converge to single point 平行线不平行；收敛到单点</li>
+</ul>
+<p><img src="4_6.png" alt="png"></p>
+<ul>
+<li><p>How to do perspective projection 如何进行透视投影</p>
+<ul>
+<li><p>First “squish” the <strong>frustum</strong> into a cuboid ($n \to n$, $f \to f$) ($M_{persp\to ortho}$) </p>
+<p>首先将截头体“<strong>压扁</strong>”成长方体（$n\to n$，$f\to f$）（$M_{persp\to ortho}$）</p>
+</li>
+<li><p>Do orthographic projection ($M_{ortho}$, already known!) 做正交投影（$M_{ortho}$，已经知道了！）</p>
+</li>
+</ul>
+</li>
+</ul>
+<p><img src="4_7.png" alt="png"></p>
+<ul>
+<li><p>In order to find a transformation 为了找到变换（推导出矩阵 $M_{persp\to ortho}$）</p>
+<ul>
+<li><p>Recall the key idea: Find the relationship between transformed points $(x’, y’,z’)$ and the original points $(x, y, z)$</p>
+<p>回想关键思想：找到转换之间的关系点 $(x’, y’,z’)$ 和原始点 $(x, y, z)$</p>
+<p>$y^{\prime}=\frac nzy$</p>
+<p>$x^{\prime}=\frac nzx$</p>
+</li>
+</ul>
+</li>
+</ul>
+<p><img src="4_8.png" alt="png"></p>
+<ul>
+<li><p>In homogeneous coordinates, 齐次坐标下，</p>
+<p>$\begin{pmatrix}x\\y\\z\\1\end{pmatrix}\Rightarrow\begin{pmatrix}nx/z\\ny/z\\\text{unknown}\\1\end{pmatrix}==\begin{pmatrix}nx\\ny\\\text{still unknown}\\z\end{pmatrix}$</p>
+</li>
+</ul>
+<ul>
+<li><p>So the “squish” (persp to ortho) projection does this 所以“挤压”（透视到正交）投影可以做到这一点</p>
+<p>$M_{persp\to ortho}^{(4\times4)}\begin{pmatrix}x\\y\\z\\1\end{pmatrix}=\begin{pmatrix}nx\\ny\\\text{unknown}\\z\end{pmatrix}$</p>
+</li>
+<li><p>Already good enough to figure out part of $M_{persp\to ortho}$ 可以求得 $M_{persp\to ortho}$ 的一部分：</p>
+<p>$M_{persp\to ortho}=\begin{pmatrix}n&amp;0&amp;0&amp;0\\0&amp;n&amp;0&amp;0\\?&amp;?&amp;?&amp;?\\0&amp;0&amp;1&amp;0\end{pmatrix}$</p>
+</li>
+<li><p>Observation: the third row is responsible for $z’$ 观察：第三排负责 $z’$</p>
+<ul>
+<li><p>Any point on the near plane will not change 近平面上的任何点都不会改变</p>
+</li>
+<li><p>Any point’s z on the far plane will not change 远平面上的任何点的 $z$ 都不会改变</p>
+</li>
+</ul>
+</li>
+<li><p>Any point on the near plane will not change 近平面上的任何点都不会改变</p>
+<p>$M_{persp\to ortho}^{(4\times4)}\begin{pmatrix}x\\y\\z\\1\end{pmatrix}=\begin{pmatrix}nx\\ny\\\text{unknown}\\z\end{pmatrix}\overset{\text{replace z with n}}{\operatorname*{\to}}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}\Rightarrow\begin{pmatrix}x\\y\\n\\1\end{pmatrix}==\begin{pmatrix}nx\\ny\\n^2\\n\end{pmatrix}$</p>
+</li>
+<li><p>So the third row must be of the form $(0\ 0\ A\ B)$ 所以第三行的形式必须是$(0\ 0\ A\ B)$</p>
+<p>$\begin{pmatrix}0&amp;0&amp;A&amp;B\end{pmatrix}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}=n^2$</p>
+</li>
+<li><p>What do we have now?</p>
+<p>$\begin{pmatrix}0&amp;0&amp;A&amp;B\end{pmatrix}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}=n^2\to An+B=n^2$</p>
+</li>
+<li><p>Any point’s z on the far plane will not change 近平面上的任何点都不会改变</p>
+<p>$\begin{pmatrix}0\\0\\f\\1\end{pmatrix}\Rightarrow\begin{pmatrix}0\\0\\f\\1\end{pmatrix}==\begin{pmatrix}0\\0\\f^2\\f\end{pmatrix}\quad\to\quad Af+B=f^2$</p>
+</li>
+<li><p>Solve for $A$ and $B$</p>
+<p>$\begin{aligned}An+B&amp;=n^2\\Af+B&amp;=f^2\end{aligned}\quad\to\quad\begin{aligned}A&amp;=n+f\\B&amp;=-nf\end{aligned}$</p>
+</li>
+<li><p>Finally, every entry in $M_{persp\to ortho}$ is known!</p>
+</li>
+<li><p>What’s next?</p>
+<ul>
+<li>完成正交投影（$M_{ortho}$）</li>
+<li>$\begin{aligned}M_{persp}=M_{ortho}M_{persp\to ortho}\end{aligned}$</li>
+</ul>
+</li>
+</ul>
+<h2><span id="hw0">HW0</span></h2><p><strong>环境配置</strong></p>
+<p>WSL2 下：</p>
+<figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sudo apt-get install xfce4-terminal<br>sudo apt-get install xfce4<br></code></pre></td></tr></table></figure>
+<p>配置环境变量：</p>
+<figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">echo &quot;export DISPLAY=localhost:0&quot;&gt;&gt; ~/.bashrc<br></code></pre></td></tr></table></figure>
+<p>MobaXterm 下配置 wsl2：</p>
+<p><img src="HW0_1.png" alt="png"></p>
+<p>开跑！</p>
+<p><img src="HW0_2.png" alt="png"></p>
+<p>安装库：</p>
+<figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sudo apt update<br>sudo apt install g++ gdb cmake<br>sudo apt install libopencv-dev libeigen3-dev<br>sudo apt install libglu1-mesa-dev freeglut3-dev mesa-common-dev xorg-dev<br></code></pre></td></tr></table></figure>
+<p>Windows 下的 VSCode，安装 wsl 插件，点击左下角，连接 wsl。</p>
+<p><img src="/C:/Users/19048/AppData/Roaming/Typora/typora-user-images/image-20231027164805639.png" alt="image-20231027164805639"></p>
+<p>打开作业模板，有如下命令：</p>
+<ul>
+<li><code>mkdir build</code>: 创建名为 build 的文件夹。</li>
+<li><code>cd build</code>: 移动到 build 文件夹下。</li>
+<li><code>cmake ..</code>: 注意其中 ’..’ 表示上一级目录，若为 ’.’ 则表示当前目录。</li>
+<li><code>make</code>: 编译程序，错误提示会显示在终端中。</li>
+<li><code>./Transformation</code>：若上一步无错误，则可运行程序（这里 Transformation 为可执行文件名，可参照 CMakeLists.txt 中修改)。</li>
+</ul>
+<p>写一个 <code>compile.sh</code> 便于编译：</p>
+<figure class="highlight sh"><table><tr><td class="code"><pre><code class="hljs sh"><span class="hljs-built_in">rm</span> -rf build<br><span class="hljs-built_in">mkdir</span> build<br><span class="hljs-built_in">cd</span> build<br>cmake ..<br>make<br>./Transformation<br><span class="hljs-built_in">cd</span> ../<br></code></pre></td></tr></table></figure>
+<p>修改权限：</p>
+<figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">chmod a+x compile.sh<br></code></pre></td></tr></table></figure>
+<p>开跑！</p>
+<figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sh compile.sh<br></code></pre></td></tr></table></figure>
+<p><strong>作业</strong></p>
+<p><strong>示例代码</strong></p>
+<figure class="highlight c++"><table><tr><td class="code"><pre><code class="hljs C++"><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;cmath&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Core&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Dense&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;iostream&gt;</span></span><br><br><span class="hljs-function"><span class="hljs-type">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span>&#123;<br><br>    <span class="hljs-comment">// Basic Example of cpp</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of cpp \n&quot;</span>;<br>    <span class="hljs-type">float</span> a = <span class="hljs-number">1.0</span>, b = <span class="hljs-number">2.0</span>;<br>    std::cout &lt;&lt; a &lt;&lt; std::endl;<br>    std::cout &lt;&lt; a/b &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">sqrt</span>(b) &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">acos</span>(<span class="hljs-number">-1</span>) &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">sin</span>(<span class="hljs-number">30.0</span>/<span class="hljs-number">180.0</span>*<span class="hljs-built_in">acos</span>(<span class="hljs-number">-1</span>)) &lt;&lt; std::endl;<br><br>    <span class="hljs-comment">// Example of vector</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of vector \n&quot;</span>;<br>    <span class="hljs-comment">// vector definition</span><br>    <span class="hljs-function">Eigen::Vector3f <span class="hljs-title">v</span><span class="hljs-params">(<span class="hljs-number">1.0f</span>,<span class="hljs-number">2.0f</span>,<span class="hljs-number">3.0f</span>)</span></span>;<br>    <span class="hljs-function">Eigen::Vector3f <span class="hljs-title">w</span><span class="hljs-params">(<span class="hljs-number">1.0f</span>,<span class="hljs-number">0.0f</span>,<span class="hljs-number">0.0f</span>)</span></span>;<br>    <span class="hljs-comment">// vector output</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of output \n&quot;</span>;<br>    std::cout &lt;&lt; v &lt;&lt; std::endl;<br>    <span class="hljs-comment">// vector add</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of add \n&quot;</span>;<br>    std::cout &lt;&lt; v + w &lt;&lt; std::endl;<br>    <span class="hljs-comment">// vector scalar multiply</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of scalar multiply \n&quot;</span>;<br>    std::cout &lt;&lt; v * <span class="hljs-number">3.0f</span> &lt;&lt; std::endl;<br>    std::cout &lt;&lt; <span class="hljs-number">2.0f</span> * v &lt;&lt; std::endl;<br><br>    <span class="hljs-comment">// Example of matrix</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of matrix \n&quot;</span>;<br>    <span class="hljs-comment">// matrix definition</span><br>    Eigen::Matrix3f i,j;<br>    i &lt;&lt; <span class="hljs-number">1.0</span>, <span class="hljs-number">2.0</span>, <span class="hljs-number">3.0</span>, <span class="hljs-number">4.0</span>, <span class="hljs-number">5.0</span>, <span class="hljs-number">6.0</span>, <span class="hljs-number">7.0</span>, <span class="hljs-number">8.0</span>, <span class="hljs-number">9.0</span>;<br>    j &lt;&lt; <span class="hljs-number">2.0</span>, <span class="hljs-number">3.0</span>, <span class="hljs-number">1.0</span>, <span class="hljs-number">4.0</span>, <span class="hljs-number">6.0</span>, <span class="hljs-number">5.0</span>, <span class="hljs-number">9.0</span>, <span class="hljs-number">7.0</span>, <span class="hljs-number">8.0</span>;<br>    <span class="hljs-comment">// matrix output</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of output \n&quot;</span>;<br>    std::cout &lt;&lt; i &lt;&lt; std::endl;<br>    <span class="hljs-comment">// matrix add i + j</span><br>    <span class="hljs-comment">// matrix scalar multiply i * 2.0</span><br>    <span class="hljs-comment">// matrix multiply i * j</span><br>    <span class="hljs-comment">// matrix multiply vector i * v</span><br><br>    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
+<hr>
+<p><strong>题目</strong></p>
+<p>给定一个点 $P=(2,1)$, 将该点绕原点先逆时针旋转 $45^\circ$，再平移<br>$(1,2)$，计算出变换后点的坐标（要求用齐次坐标进行计算）。</p>
+<hr>
+<p>$P$ 以齐次坐标的表示形式为 $(2, 1, 1)^T$</p>
+<p>旋转矩阵为 $R(\pi/4)=\begin{bmatrix}<br> \cos \pi/4 &amp; -\sin \pi/4 &amp; 0 \\<br> \sin \pi/4 &amp; \cos \pi/4 &amp; 0 \\<br> 0 &amp; 0 &amp; 1<br>\end{bmatrix}$</p>
+<p>平移矩阵 $T(1, 2)=\begin{bmatrix}<br>1 &amp; 0 &amp; 1 \\<br>0 &amp; 1 &amp; 2 \\<br>0 &amp; 0 &amp; 1<br>\end{bmatrix}$</p>
+<p>最终坐标为 $TRP$。</p>
+<figure class="highlight c++"><table><tr><td class="code"><pre><code class="hljs C++"><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;cmath&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Core&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Dense&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;iostream&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">define</span> PI 3.1415926535</span><br><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> std;<br><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> Eigen;<br><br><span class="hljs-function"><span class="hljs-type">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span><br><span class="hljs-function"></span>&#123;<br>    <span class="hljs-type">float</span> theta = PI / <span class="hljs-number">4.0f</span>;<br>    <span class="hljs-function">Vector3f <span class="hljs-title">P</span><span class="hljs-params">(<span class="hljs-number">2.0f</span>, <span class="hljs-number">1.0f</span>, <span class="hljs-number">1.0f</span>)</span></span>;<br>    Matrix3f R, T;<br>    R &lt;&lt; <br>        <span class="hljs-built_in">cos</span>(theta), -<span class="hljs-built_in">sin</span>(theta), <span class="hljs-number">0</span>,<br>        <span class="hljs-built_in">sin</span>(theta), <span class="hljs-built_in">cos</span>(theta), <span class="hljs-number">0</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>;<br>    T &lt;&lt;<br>        <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>;<br>    cout &lt;&lt; T * R * P &lt;&lt; endl;<br>    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></td></tr></table></figure>
+<figure class="highlight apache"><table><tr><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">1</span>.<span class="hljs-number">70711</span><br><span class="hljs-attribute">4</span>.<span class="hljs-number">12132</span><br>      <span class="hljs-attribute">1</span><br></code></pre></td></tr></table></figure>
+<h2><span id="hw1">HW1</span></h2>
   </div>
   <div id="gitalk-container"></div>
 </div>
diff --git a/search.xml b/search.xml
index f94e063a72..f42572ddbe 100644
--- a/search.xml
+++ b/search.xml
@@ -8,7 +8,7 @@
       <link href="/2023/10/25/CG-GAMES101-%E7%8E%B0%E4%BB%A3%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6%E5%85%A5%E9%97%A8-%E9%97%AB%E4%BB%A4%E7%90%AA%EF%BC%881%EF%BC%89/"/>
       <url>/2023/10/25/CG-GAMES101-%E7%8E%B0%E4%BB%A3%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9B%BE%E5%BD%A2%E5%AD%A6%E5%85%A5%E9%97%A8-%E9%97%AB%E4%BB%A4%E7%90%AA%EF%BC%881%EF%BC%89/</url>
       
-        <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2><span id="cg-games101-现代计算机图形学入门-闫令琪1">CG-GAMES101-现代计算机图形学入门-闫令琪（1）</span></h2><h2><span id="目录">目录</span></h2><!-- toc --><ul><li><a href="#资源">资源</a></li><li><a href="#lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</a></li><li><a href="#lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear Algebra</a></li><li><a href="#hw0">HW0</a></li></ul><!-- tocstop --><h2><span id="资源">资源</span></h2><ul><li><p><a href="https://csdiy.wiki/计算机图形学/GAMES101/">GAMES101 - CS自学指南 (csdiy.wiki)</a></p></li><li><p><a href="https://www.bilibili.com/video/BV1X7411F744/?p=1">Lecture 01 Overview of Computer Graphics_哔哩哔哩_bilibili</a></p></li><li><a href="https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html">GAMES101: 现代计算机图形学入门 (ucsb.edu)</a></li></ul><h2><span id="lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</span></h2><p>What is Computer Graphics？ 图形学的应用：</p><ul><li><p>Viedo Games 游戏 </p></li><li><p>Movies 电影特效</p></li><li><p>Animations 动画</p></li><li><p>Design 设计</p></li><li><p>Visualization 可视化</p></li><li><p>Visual Reality 虚拟现实</p></li><li>Augmented Reality 增强现实</li><li><p>Digital Illustration 数字化描述</p></li><li><p>Simulation 模拟</p></li><li><p>Graphical User Interfaces, GUI 图形用户接口</p></li><li><p>Typography 字体</p></li></ul><hr><p>Why study Computer Graphics？</p><ul><li>Computer Graphics is AWESOME！</li></ul><hr><p>Course Topics（mainly 4 parts）</p><ul><li><p>Rasterization 光栅化</p><ul><li>Project geometry primitives (3D triangles / polygons) onto the screen 将几何图元（三维三角形/多边形）投影到屏幕上</li><li>Break projected primitives into fragments (pixels) 将投影基元分解为片段（像素）</li><li>Gold standard in Video Games (Real-time Applications) 视频游戏（实时应用）的黄金标准</li></ul></li><li><p>Curves and Meshes 曲线和模型</p><ul><li>How to represent geometry in Computer Graphics 如何在计算机图形学中表示几何图形</li></ul></li><li><p>Ray Tracing 光线追踪</p><ul><li>Shoot rays from the camera though each pixel 通过每个像素从相机拍摄光线<ul><li>Calculate intersection and shading 计算交点和着色</li><li>Continue to bounce the rays till they hit light sources 继续反射光线，直到光线碰到光源</li><li>Gold standard in Animations / Movies (Offline Applications)  动画/电影黄金标准（离线应用程序）</li></ul></li></ul></li><li><p>Animation / Simulation 动画 / 模拟</p><ul><li>Key frame Animation 关键帧动画</li><li>Mass-spring System 质量弹簧系统</li></ul></li></ul><hr><p>计算机图形学、计算机视觉、数字图像处理的区别：</p><p><img src="1_1.png" alt="png"></p><h2><span id="lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear Algebra</span></h2><p>A <strong>Swift</strong> and <strong>Brutal</strong> Introduction to Linear Algebra!  一份对线性代数的<strong>迅速</strong>且<strong>直接</strong>的介绍！</p><p><strong>Graphics’ Dependencies 图形相关的依赖项</strong></p><ul><li><p>Basic mathematics  基础数学</p><ul><li>Linear algebra, calculus, statistics 线性代数、微积分、统计学</li></ul></li><li><p>Basic physics 基础物理学</p><ul><li>Optics, Mechanics 光学、力学</li></ul></li><li><p>Misc 杂项</p><ul><li><p>Signal processing 信号处理</p></li><li><p>Numerical analysis 数值分析</p></li></ul></li><li><p>And a bit of aesthetics 还有一点美学</p></li></ul><p><strong>This Course</strong></p><ul><li>More dependent on Linear Algebra 更多依赖于线性代数<ul><li>Vectors (dot products, cross products, …) 向量（点积、叉积等）</li><li>Matrices (matrix-matrix, matrix-vector mult., …) 矩阵（矩阵相乘、矩阵与向量相乘等）</li></ul></li><li>For example,<ul><li>A point is a vector? 一个点是一个向量吗？</li><li>An operation like translating or rotating objects can be matrix-vector multiplication 类似平移或旋转物体的操作可以通过矩阵与向量相乘实现</li></ul></li></ul><p><strong>Vectors</strong></p><ul><li><p>通常被写作 $\vec{a}$ 或 $\boldsymbol{a}$</p></li><li><p>向量的长度被写作 $\left|\left|\vec{a}\right|\right|$</p></li><li><p>向量的归一化，方向不变，长度设为 1：$\hat{a}=\vec{a}/|\vec{a}|$</p></li></ul><p><strong>Cartesian Coordinates 笛卡尔坐标系</strong></p><script type="math/tex; mode=display">\mathbf{A}=\begin{pmatrix}x\\y\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{A}^T=\left(x,y\right)</script><script type="math/tex; mode=display">||\mathbf{A}\|=\sqrt{x^2+y^2}</script><p><strong>Dot (scalar) Product 向量点乘</strong></p><script type="math/tex; mode=display">\vec{a}\cdot\vec{b}=\|\vec{a}\|\|\vec{b}\|\cos\theta</script><script type="math/tex; mode=display">\begin{aligned}\cos\theta&=\frac{\vec a\cdot\vec b}{\|\vec a\|\|\vec b\|}\end{aligned}</script><p>对于 Unit Vectors 单位向量：</p><script type="math/tex; mode=display">\cos\theta=\hat{a}\cdot\hat{b}</script><p>性质：</p><p>交换律：$\vec{a}\cdot\vec{b}=\vec{b}\cdot\vec{a}$</p><p>分配律：$\vec{a}\cdot(\vec{b}+\vec{c})=\vec{a}\cdot\vec{b}+\vec{a}\cdot\vec{c}$</p><p>结合律：$(k\vec{a})\cdot\vec{b}=\vec{a}\cdot(k\vec{b})=k(\vec{a}\cdot\vec{b})$</p><p><strong>Dot Product in Cartesian Coordinates 笛卡尔坐标系下的向量点乘</strong></p><p>Component-wise multiplication, then adding up 分量逐个相乘，然后求和</p><ul><li><p>In 2D</p><ul><li>$\vec{a}\cdot\vec{b}=\begin{pmatrix}x_a\\y_a\end{pmatrix}\cdot\begin{pmatrix}x_b\\y_b\end{pmatrix}=x_ax_b+y_ay_b$</li></ul></li><li><p>In 3D</p><ul><li>$\vec a\cdot\vec b=\begin{pmatrix}x_a\\y_a\\z_a\end{pmatrix}\cdot\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}=x_ax_b+y_ay_b+z_az_b$</li></ul></li></ul><p><strong>Dot Product in Graphics 向量点乘在图形学中的应用</strong></p><ul><li>Find angle between two vectors (e.g. cosine of angle between light source and surface) 寻找两个向量之间的夹角，例如光源和表面之间的夹角的余弦值。</li><li><p>Finding projection of one vector on another 找到一个向量在另一个向量上的投影。</p><ul><li>$\vec{b}_{\perp}$：$\vec{b}$ 在 $\vec{a}$ 方向的投影。<ul><li>$\vec{b}_{\perp}$ 必须与 $\vec{a}$ 或 $\hat{a}$ 平行。<ul><li>$\vec{b}_{\perp}=k\hat{a}, k=|\vec{b}_\perp|=|\vec{b}|\cos\theta $</li></ul></li></ul></li></ul></li><li><p>Measure how close  two directions are 测量两个方向之间的接近程度</p></li><li>Decompose a vector 分解一个向量</li><li>Determine forward /  backward 确定正向/反向</li></ul><p><strong>Cross (vector) Product 矢量积</strong></p><p><img src="2_1.png" alt="png"></p><ul><li>Cross product is orthogonal to two initial vectors 叉乘结果与两个初始向量垂直</li><li>Direction determined by right-hand rule 方向由右手定则确定<ul><li><a href="https://zhuanlan.zhihu.com/p/64707259">左手坐标系 vs 右手坐标系 - 知乎 (zhihu.com)</a></li></ul></li><li>Useful in constructing coordinate systems (later) 在构建坐标系时非常有用</li></ul><p>性质：</p><p>对于右手坐标系：</p><script type="math/tex; mode=display">\vec{x}\times\vec{y}=+\vec{z}</script><script type="math/tex; mode=display">\vec{y}\times\vec{x}=-\vec{z}</script><script type="math/tex; mode=display">\vec{y}\times\vec{z}=+\vec{x}</script><script type="math/tex; mode=display">\vec{z}\times\vec{y}=-\vec{x}</script><script type="math/tex; mode=display">\vec{z}\times\vec{x}=+\vec{y}</script><script type="math/tex; mode=display">\vec{x}\times\vec{z}=-\vec{y}</script><p>不满足交换律：$\vec{a}\times\vec{b}=-\vec{b}\times\vec{a}$</p><p>跟自身叉乘为零向量：$\vec{a}\times\vec{a}=\vec{0}$</p><p>满足分配律：</p><p>$\vec{a}\times(\vec{b}+\vec{c})=\vec{a}\times\vec{b}+\vec{a}\times\vec{c}$</p><p>$\vec{a}\times(k\vec{b})=k(\vec{a}\times\vec{b})$</p><p><strong>Cross Product: Cartesian Formula? 矢量积在笛卡尔坐标系中</strong></p><script type="math/tex; mode=display">\vec{a}\times\vec{b}=\begin{pmatrix}y_az_b-y_bz_a\\z_ax_b-x_az_b\\x_ay_b-y_ax_b\end{pmatrix}</script><script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><p>$A^*$ 是 $\vec{a}$ 的伴随矩阵（<a href="https://zh.wikipedia.org/wiki/伴随矩阵">伴随矩阵 - 维基百科，自由的百科全书 (wikipedia.org)</a>）</p><p><strong>Cross Product in Graphics 矢量积在图形学中的应用</strong></p><ul><li>Determine left / right 判别左右</li><li>Determine inside / outside 判别内外</li></ul><p><strong>Orthonormal Bases / Coordinate Frames 正交基 / 坐标系</strong></p><p>构建右手坐标系：</p><script type="math/tex; mode=display">\|\vec{u}\|=\|\vec{v}\|=\|\vec{w}\|=1</script><script type="math/tex; mode=display">\vec{u}\cdot\vec{v}=\vec{v}\cdot\vec{w}=\vec{u}\cdot\vec{w}=0</script><script type="math/tex; mode=display">\vec{w}=\vec{u}\times\vec{v}</script><script type="math/tex; mode=display">\vec p=(\vec p\cdot\vec u)\vec u+(\vec p\cdot\vec v)\vec v+(\vec p\cdot\vec w)\vec w</script><p><strong>Matrix 矩阵</strong></p><p><strong>Matrix-Matrix Multiplication 矩阵乘法</strong></p><p>一般不满足交换律（一般不满足 $AB\= BA$）</p><p>满足结合律和分配律：</p><ul><li>$(AB)C=A(BC)$</li><li>$A(B+C)=AB+AC$</li><li>$(A+B)C=AC+BC$</li></ul><script type="math/tex; mode=display">(AB)^T=B^TA^T</script><p><strong>Identity Matrix 单位矩阵</strong></p><script type="math/tex; mode=display">I_{3\times3}=\begin{pmatrix}1&0&0\\0&1&0\\0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">AA^{-1}=A^{-1}A=I</script><script type="math/tex; mode=display">(AB)^{-1}=B^{-1}A^{-1}</script><p><strong>Vector multiplication in Matrix form 向量与矩阵相乘</strong></p><ul><li>Dot product 点乘</li></ul><script type="math/tex; mode=display">\vec{a}\cdot\vec{b}=\vec{a}^T\vec{b}</script><script type="math/tex; mode=display">=\begin{pmatrix}x_a&y_a&z_a\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}=\begin{pmatrix}x_ax_b+y_ay_b+z_az_b\end{pmatrix}</script><ul><li>Cross product 叉乘</li></ul><script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><h2><span id="hw0">HW0</span></h2><p><img src="/C:/Users/19048/AppData/Roaming/Typora/typora-user-images/image-20231026155230885.png" alt="image-20231026155230885"></p>]]></content>
+        <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2><span id="cg-games101-现代计算机图形学入门-闫令琪1">CG-GAMES101-现代计算机图形学入门-闫令琪（1）</span></h2><h2><span id="目录">目录</span></h2><!-- toc --><ul><li><a href="#资源">资源</a></li><li><a href="#lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</a></li><li><a href="#lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear Algebra</a></li><li><a href="#lecture-03-transformation">Lecture 03 Transformation</a></li><li><a href="#lecture-04-transformation-cont">Lecture 04 Transformation Cont.</a></li><li><a href="#hw0">HW0</a></li><li><a href="#hw1">HW1</a></li></ul><!-- tocstop --><h2><span id="资源">资源</span></h2><ul><li><p><a href="https://csdiy.wiki/计算机图形学/GAMES101/">GAMES101 - CS自学指南 (csdiy.wiki)</a></p></li><li><p><a href="https://www.bilibili.com/video/BV1X7411F744/?p=1">Lecture 01 Overview of Computer Graphics_哔哩哔哩_bilibili</a></p></li><li><a href="https://sites.cs.ucsb.edu/~lingqi/teaching/games101.html">GAMES101: 现代计算机图形学入门 (ucsb.edu)</a></li><li><a href="https://www.notion.so/GAMES101-b0e27c856cde429b8672671a54c34817">GAMES101 笔记 (notion.so)</a></li></ul><h2><span id="lecture-01-overview-of-computer-graphics">Lecture 01 Overview of Computer Graphics</span></h2><p>What is Computer Graphics？ 图形学的应用：</p><ul><li><p>Viedo Games 游戏 </p></li><li><p>Movies 电影特效</p></li><li><p>Animations 动画</p></li><li><p>Design 设计</p></li><li><p>Visualization 可视化</p></li><li><p>Visual Reality 虚拟现实</p></li><li>Augmented Reality 增强现实</li><li><p>Digital Illustration 数字化描述</p></li><li><p>Simulation 模拟</p></li><li><p>Graphical User Interfaces, GUI 图形用户接口</p></li><li><p>Typography 字体</p></li></ul><hr><p>Why study Computer Graphics？</p><ul><li>Computer Graphics is AWESOME！</li></ul><hr><p>Course Topics（mainly 4 parts）</p><ul><li><p>Rasterization 光栅化</p><ul><li>Project geometry primitives (3D triangles / polygons) onto the screen 将几何图元（三维三角形/多边形）投影到屏幕上</li><li>Break projected primitives into fragments (pixels) 将投影基元分解为片段（像素）</li><li>Gold standard in Video Games (Real-time Applications) 视频游戏（实时应用）的黄金标准</li></ul></li><li><p>Curves and Meshes 曲线和模型</p><ul><li>How to represent geometry in Computer Graphics 如何在计算机图形学中表示几何图形</li></ul></li><li><p>Ray Tracing 光线追踪</p><ul><li>Shoot rays from the camera though each pixel 通过每个像素从相机拍摄光线<ul><li>Calculate intersection and shading 计算交点和着色</li><li>Continue to bounce the rays till they hit light sources 继续反射光线，直到光线碰到光源</li><li>Gold standard in Animations / Movies (Offline Applications)  动画/电影黄金标准（离线应用程序）</li></ul></li></ul></li><li><p>Animation / Simulation 动画 / 模拟</p><ul><li>Key frame Animation 关键帧动画</li><li>Mass-spring System 质量弹簧系统</li></ul></li></ul><hr><p>计算机图形学、计算机视觉、数字图像处理的区别：</p><p><img src="1_1.png" alt="png"></p><h2><span id="lecture-02-review-of-linear-algebra">Lecture 02 Review of Linear Algebra</span></h2><p>A <strong>Swift</strong> and <strong>Brutal</strong> Introduction to Linear Algebra!  一份对线性代数的<strong>迅速</strong>且<strong>直接</strong>的介绍！</p><p><strong>Graphics’ Dependencies 图形相关的依赖项</strong></p><ul><li><p>Basic mathematics  基础数学</p><ul><li>Linear algebra, calculus, statistics 线性代数、微积分、统计学</li></ul></li><li><p>Basic physics 基础物理学</p><ul><li>Optics, Mechanics 光学、力学</li></ul></li><li><p>Misc 杂项</p><ul><li><p>Signal processing 信号处理</p></li><li><p>Numerical analysis 数值分析</p></li></ul></li><li><p>And a bit of aesthetics 还有一点美学</p></li></ul><p><strong>This Course</strong></p><ul><li>More dependent on Linear Algebra 更多依赖于线性代数<ul><li>Vectors (dot products, cross products, …) 向量（点积、叉积等）</li><li>Matrices (matrix-matrix, matrix-vector mult., …) 矩阵（矩阵相乘、矩阵与向量相乘等）</li></ul></li><li>For example,<ul><li>A point is a vector? 一个点是一个向量吗？</li><li>An operation like translating or rotating objects can be matrix-vector multiplication 类似平移或旋转物体的操作可以通过矩阵与向量相乘实现</li></ul></li></ul><p><strong>Vectors</strong></p><ul><li><p>通常被写作 $\vec{a}$ 或 $\boldsymbol{a}$</p></li><li><p>向量的长度被写作 $\left|\left|\vec{a}\right|\right|$</p></li><li><p>向量的归一化，方向不变，长度设为 1：$\hat{a}=\vec{a}/|\vec{a}|$</p></li></ul><p><strong>Cartesian Coordinates 笛卡尔坐标系</strong></p><script type="math/tex; mode=display">\mathbf{A}=\begin{pmatrix}x\\y\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{A}^T=\left(x,y\right)</script><script type="math/tex; mode=display">||\mathbf{A}\|=\sqrt{x^2+y^2}</script><p><strong>Dot (scalar) Product 向量点乘</strong></p><script type="math/tex; mode=display">\vec{a}\cdot\vec{b}=\|\vec{a}\|\|\vec{b}\|\cos\theta</script><script type="math/tex; mode=display">\begin{aligned}\cos\theta&=\frac{\vec a\cdot\vec b}{\|\vec a\|\|\vec b\|}\end{aligned}</script><p>对于 Unit Vectors 单位向量：</p><script type="math/tex; mode=display">\cos\theta=\hat{a}\cdot\hat{b}</script><p>性质：</p><p>交换律：$\vec{a}\cdot\vec{b}=\vec{b}\cdot\vec{a}$</p><p>分配律：$\vec{a}\cdot(\vec{b}+\vec{c})=\vec{a}\cdot\vec{b}+\vec{a}\cdot\vec{c}$</p><p>结合律：$(k\vec{a})\cdot\vec{b}=\vec{a}\cdot(k\vec{b})=k(\vec{a}\cdot\vec{b})$</p><p><strong>Dot Product in Cartesian Coordinates 笛卡尔坐标系下的向量点乘</strong></p><p>Component-wise multiplication, then adding up 分量逐个相乘，然后求和</p><ul><li><p>In 2D</p><ul><li>$\vec{a}\cdot\vec{b}=\begin{pmatrix}x_a\\y_a\end{pmatrix}\cdot\begin{pmatrix}x_b\\y_b\end{pmatrix}=x_ax_b+y_ay_b$</li></ul></li><li><p>In 3D</p><ul><li>$\vec a\cdot\vec b=\begin{pmatrix}x_a\\y_a\\z_a\end{pmatrix}\cdot\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}=x_ax_b+y_ay_b+z_az_b$</li></ul></li></ul><p><strong>Dot Product in Graphics 向量点乘在图形学中的应用</strong></p><ul><li>Find angle between two vectors (e.g. cosine of angle between light source and surface) 寻找两个向量之间的夹角，例如光源和表面之间的夹角的余弦值。</li><li><p>Finding projection of one vector on another 找到一个向量在另一个向量上的投影。</p><ul><li>$\vec{b}_{\perp}$：$\vec{b}$ 在 $\vec{a}$ 方向的投影。<ul><li>$\vec{b}_{\perp}$ 必须与 $\vec{a}$ 或 $\hat{a}$ 平行。<ul><li>$\vec{b}_{\perp}=k\hat{a}, k=|\vec{b}_\perp|=|\vec{b}|\cos\theta $</li></ul></li></ul></li></ul></li><li><p>Measure how close  two directions are 测量两个方向之间的接近程度</p></li><li>Decompose a vector 分解一个向量</li><li>Determine forward /  backward 确定正向/反向</li></ul><p><strong>Cross (vector) Product 矢量积</strong></p><p><img src="2_1.png" alt="png"></p><ul><li>Cross product is orthogonal to two initial vectors 叉乘结果与两个初始向量垂直</li><li>Direction determined by right-hand rule 方向由右手定则确定<ul><li><a href="https://zhuanlan.zhihu.com/p/64707259">左手坐标系 vs 右手坐标系 - 知乎 (zhihu.com)</a></li></ul></li><li>Useful in constructing coordinate systems (later) 在构建坐标系时非常有用</li></ul><p>性质：</p><p>对于右手坐标系：</p><script type="math/tex; mode=display">\vec{x}\times\vec{y}=+\vec{z}</script><script type="math/tex; mode=display">\vec{y}\times\vec{x}=-\vec{z}</script><script type="math/tex; mode=display">\vec{y}\times\vec{z}=+\vec{x}</script><script type="math/tex; mode=display">\vec{z}\times\vec{y}=-\vec{x}</script><script type="math/tex; mode=display">\vec{z}\times\vec{x}=+\vec{y}</script><script type="math/tex; mode=display">\vec{x}\times\vec{z}=-\vec{y}</script><p>不满足交换律：$\vec{a}\times\vec{b}=-\vec{b}\times\vec{a}$</p><p>跟自身叉乘为零向量：$\vec{a}\times\vec{a}=\vec{0}$</p><p>满足分配律：</p><p>$\vec{a}\times(\vec{b}+\vec{c})=\vec{a}\times\vec{b}+\vec{a}\times\vec{c}$</p><p>$\vec{a}\times(k\vec{b})=k(\vec{a}\times\vec{b})$</p><p><strong>Cross Product: Cartesian Formula? 矢量积在笛卡尔坐标系中</strong></p><script type="math/tex; mode=display">\vec{a}\times\vec{b}=\begin{pmatrix}y_az_b-y_bz_a\\z_ax_b-x_az_b\\x_ay_b-y_ax_b\end{pmatrix}</script><script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><p>$A^*$ 是 $\vec{a}$ 的伴随矩阵（<a href="https://zh.wikipedia.org/wiki/伴随矩阵">伴随矩阵 - 维基百科，自由的百科全书 (wikipedia.org)</a>）</p><p><strong>Cross Product in Graphics 矢量积在图形学中的应用</strong></p><ul><li>Determine left / right 判别左右</li><li>Determine inside / outside 判别内外</li></ul><p><strong>Orthonormal Bases / Coordinate Frames 正交基 / 坐标系</strong></p><p>构建右手坐标系：</p><script type="math/tex; mode=display">\|\vec{u}\|=\|\vec{v}\|=\|\vec{w}\|=1</script><script type="math/tex; mode=display">\vec{u}\cdot\vec{v}=\vec{v}\cdot\vec{w}=\vec{u}\cdot\vec{w}=0</script><script type="math/tex; mode=display">\vec{w}=\vec{u}\times\vec{v}</script><script type="math/tex; mode=display">\vec p=(\vec p\cdot\vec u)\vec u+(\vec p\cdot\vec v)\vec v+(\vec p\cdot\vec w)\vec w</script><p><strong>Matrix 矩阵</strong></p><p><strong>Matrix-Matrix Multiplication 矩阵乘法</strong></p><p>一般不满足交换律（一般不满足 $AB\ne BA$）</p><p>满足结合律和分配律：</p><ul><li>$(AB)C=A(BC)$</li><li>$A(B+C)=AB+AC$</li><li>$(A+B)C=AC+BC$</li></ul><script type="math/tex; mode=display">(AB)^T=B^TA^T</script><p><strong>Identity Matrix 单位矩阵</strong></p><script type="math/tex; mode=display">I_{3\times3}=\begin{pmatrix}1&0&0\\0&1&0\\0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">AA^{-1}=A^{-1}A=I</script><script type="math/tex; mode=display">(AB)^{-1}=B^{-1}A^{-1}</script><p><strong>Vector multiplication in Matrix form 向量与矩阵相乘</strong></p><ul><li>Dot product 点乘</li></ul><script type="math/tex; mode=display">\vec{a}\cdot\vec{b}=\vec{a}^T\vec{b}</script><script type="math/tex; mode=display">=\begin{pmatrix}x_a&y_a&z_a\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}=\begin{pmatrix}x_ax_b+y_ay_b+z_az_b\end{pmatrix}</script><ul><li>Cross product 叉乘</li></ul><script type="math/tex; mode=display">\vec a\times\vec b=A^*b=\begin{pmatrix}0&-z_a&y_a\\z_a&0&-x_a\\-y_a&x_a&0\end{pmatrix}\begin{pmatrix}x_b\\y_b\\z_b\end{pmatrix}</script><h2><span id="lecture-03-transformation">Lecture 03 Transformation</span></h2><p><strong>2D Transform 二维变换</strong></p><p><strong>Scale Transform 缩放</strong></p><p>等比缩放：</p><script type="math/tex; mode=display">x^{\prime}=sx</script><script type="math/tex; mode=display">y^{\prime}=sx</script><p>用矩阵乘法表示：</p><script type="math/tex; mode=display">\left.\left[\begin{array}{c}x'\\y'\end{array}\right.\right]=\left[\begin{array}{cc}s&0\\0&s\end{array}\right]\left[\begin{array}{c}x\\y\end{array}\right]</script><p><strong>Scale (Non-Uniform) 任意缩放</strong></p><script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}s_x&0\\0&s_y\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Reflection Matrix 镜像</strong></p><p>Horizontal reflection 水平镜像：</p><script type="math/tex; mode=display">x^{\prime}=-x</script><script type="math/tex; mode=display">y^{\prime}=y</script><p>用矩阵乘法表示：</p><script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}-1&0\\0&1\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Shear Matrix 斜切：</strong></p><p><img src="3_1.png" alt="png"></p><p>Hints:</p><ul><li>Horizontal shift is $0$ at $y=0$</li><li>Horizontal shift is $a$ at $y=1$</li><li>Vertical shift is always $0$</li></ul><script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}1&a\\0&1\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}</script><p><strong>Rotation Matrix 旋转</strong></p><script type="math/tex; mode=display">\mathbf{R}_\theta=\begin{bmatrix}\cos\theta&-\sin\theta\\\sin\theta&\cos\theta\end{bmatrix}</script><p>旋转相反的角等于矩阵的逆，等于矩阵的转置：</p><p>旋转矩阵是<strong>正交矩阵</strong>。</p><script type="math/tex; mode=display">\mathbf{R}_{-\theta}=\mathbf{R}_\theta^{-1}=\mathbf{R}_{\theta}^T</script><p><strong>Linear Transforms = Matrices 线性变换 = 矩阵</strong></p><script type="math/tex; mode=display">x^{\prime}=ax+by</script><script type="math/tex; mode=display">y^{\prime}=cx+dy</script><script type="math/tex; mode=display">\left.\left[\begin{array}{c}x'\\y'\end{array}\right.\right]=\left[\begin{array}{cc}a&b\\c&d\end{array}\right]\left[\begin{array}{c}x\\y\end{array}\right]</script><p>简写为：</p><script type="math/tex; mode=display">\mathbf{x}^{\prime}=\mathbf{M}\mathbf{x}</script><p><strong>Translation 平移</strong></p><script type="math/tex; mode=display">x^{\prime}=x+t_x</script><script type="math/tex; mode=display">y^{\prime}=y+t_y</script><p><strong>Why Homogeneous Coordinates 为什么引入齐次坐标</strong></p><ul><li>Translation cannot be represented in matrix form 平移变换不能用矩阵来表示</li></ul><script type="math/tex; mode=display">\begin{bmatrix}x'\\y'\end{bmatrix}=\begin{bmatrix}a&b\\c&d\end{bmatrix}\begin{bmatrix}x\\y\end{bmatrix}+\begin{bmatrix}t_x\\t_y\end{bmatrix}</script><p>因此，平移变换不是线性变换！</p><ul><li><p>But we don’t want translation to be a special case 但我们不希望平移变换成为特例</p></li><li><p>Is there a unified way to represent all transformations? (and what’s the cost?) 用统一的方式描述所有变换？（代价是什么？）</p></li></ul><p>Solution: Homogenous Coordinates 解决办法：齐次坐标</p><p>Add a third coordinate (w-coordinate) 增加一个维度</p><ul><li>2D point = $(x, y, {\color{Red}1})^T$</li><li>2D vector = $(x, y, {\color{Red}0})^T$</li></ul><p>Matrix representation of translations 用矩阵描述所有变换</p><script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\w'\end{pmatrix}=\begin{pmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}=\begin{pmatrix}x+t_x\\y+t_y\\1\end{pmatrix}</script><p>Valid operation if w-coordinate of result is 1 or 0 所增加维度的值不是 1 就是 0，这是因为：</p><ul><li>vector + vector = vector</li><li>point – point = vector</li><li>point + vector = point </li><li>point + point = 它们的中点</li></ul><p>因此定义，在齐次坐标中：</p><script type="math/tex; mode=display">\begin{pmatrix}x\\y\\w\end{pmatrix}\text{ is the 2D point }\begin{pmatrix}x/w\\y/w\\1\end{pmatrix},w\neq0</script><p><strong>Affine Transformation 仿射变换</strong></p><p>Affine map = linear map + translation 仿射变换 = 线性变换 + 平移</p><script type="math/tex; mode=display">\begin{pmatrix}x^{\prime}\\y^{\prime}\end{pmatrix}~=~\begin{pmatrix}a&b\\c&d\end{pmatrix}\cdot\begin{pmatrix}x\\y\end{pmatrix}+\begin{pmatrix}t_x\\t_y\end{pmatrix}</script><p>Using homogenous coordinates: 使用齐次坐标</p><script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\1\end{pmatrix}=\begin{pmatrix}a&b&t_x\\c&d&t_y\\0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}</script><p><strong>2D Transformations 2D 变换</strong></p><p>Scale 缩放</p><script type="math/tex; mode=display">\mathbf{S}(s_x,s_y)~=~\begin{pmatrix}s_x&0&0\\0&s_y&0\\0&0&1\end{pmatrix}</script><p>Rotation 旋转</p><script type="math/tex; mode=display">\mathbf{R}(\alpha)=\begin{pmatrix}\cos\alpha&-\sin\alpha&0\\\sin\alpha&\cos\alpha&0\\0&0&1\end{pmatrix}</script><p>Translation 平移</p><script type="math/tex; mode=display">\mathbf{T}(t_x,t_y)=\begin{pmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{pmatrix}</script><p><strong>Inverse Transform 逆变换</strong></p><script type="math/tex; mode=display">\mathbf{M^{-1}}</script><p><strong>Composing Transforms 复合变换</strong></p><p>Sequence of affine transforms $A_1, A_2, A_3, …$ 对于仿射变换序列 $A_1, A_2, A_3, …$</p><ul><li>Compose by matrix multiplication 通过矩阵乘法进行合成<ul><li>Very important for performance! 对性能非常重要！</li></ul></li></ul><script type="math/tex; mode=display">A_n(\ldots A_2(A_1(\mathbf{x})))=\mathbf{A}_n\cdots\mathbf{A}_2\cdot\mathbf{A}_1\cdot\begin{pmatrix}x\\y\\1\end{pmatrix}</script><p>预乘 $n$ 个矩阵以获得表示组合变换的单个矩阵。</p><p><strong>Decomposing Complex Transforms 分解复合变换</strong></p><p><img src="3_2.png" alt="png"></p><p>How to rotate around a given point $c$? 如何绕空间任意一点 $c$ 旋转？</p><ol><li>Translate center to origin 平移回原点</li><li>Rotate 旋转</li><li>Translate back 平移回去</li></ol><script type="math/tex; mode=display">\mathbf{T(c)}\cdot\mathbf{R(\alpha)}\cdot\mathbf{T(-c)}</script><p><strong>3D Transforms</strong></p><p>Use homogeneous coordinates again 再次使用齐次坐标: </p><ul><li>3D point = $(x, y, z, {\color{Red}1})^T$</li><li>3D vector = $(x, y, z, {\color{Red}0})^T$</li></ul><p>In general, $(x, y, z, w) (w \ne 0)$ is the 3D point：</p><script type="math/tex; mode=display">(x/w, y/w, z/w)</script><p><strong>3D Transformations 3D 变换</strong></p><p>Use $4\times 4$ matrices for affine transformations 使用 $4\times 4$ 齐次坐标表示：</p><script type="math/tex; mode=display">\begin{pmatrix}x'\\y'\\z'\\1\end{pmatrix}=\begin{pmatrix}a&b&c&t_x\\d&e&f&t_y\\g&h&i&t_z\\0&0&0&1\end{pmatrix}\cdot\begin{pmatrix}x\\y\\z\\1\end{pmatrix}</script><p>先应用线性变换，再平移。</p><h2><span id="lecture-04-transformation-cont">Lecture 04 Transformation Cont.</span></h2><p>Viewing (观测) transformation</p><ul><li>View (视图) / Camera transformation</li><li>Projection (投影) transformation</li><li>Orthographic (正交) projection</li><li>Perspective (透视) projection</li></ul><p><strong>3D Transformations 3D 变换</strong></p><p>Rotation around $x$-, $y$-, or $z$-axis 沿 $x$、$y$、$z$ 轴旋转：</p><p><img src="4_1.png" alt="png"></p><script type="math/tex; mode=display">\mathbf{R}_x(\alpha)=\begin{pmatrix}1&0&0&0\\0&\cos\alpha&-\sin\alpha&0\\0&\sin\alpha&\cos\alpha&0\\0&0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{R}_y(\alpha)=\begin{pmatrix}\cos\alpha&0&\sin\alpha&0\\0&1&0&0\\-\sin\alpha&0&\cos\alpha&0\\0&0&0&1\end{pmatrix}</script><script type="math/tex; mode=display">\mathbf{R}_z(\alpha)=\begin{pmatrix}\cos\alpha&-\sin\alpha&0&0\\\sin\alpha&\cos\alpha&0&0\\0&0&1&0\\0&0&0&1\end{pmatrix}</script><p>Compose any 3D rotation from $\mathbf{R}_x$, $\mathbf{R}_y$, $\mathbf{R}_z$? 让 $\mathbf{R}_x$, $\mathbf{R}_y$, $\mathbf{R}_z$ 构成任意三维旋转？</p><script type="math/tex; mode=display">\mathbf{R}_{xyz}(\alpha,\beta,\gamma)~=~\mathbf{R}_x(\alpha)\mathbf{R}_y(\beta)\mathbf{R}_z(\gamma)</script><ul><li>So-called Euler angles 所谓的欧拉角</li><li>Often used in flight simulators: roll, pitch, yaw 常用于飞行模拟器：滚转、俯仰、偏航</li></ul><p><img src="4_2.png" alt="png"></p><p><strong>Rodrigues’ Rotation Formula 罗德里格斯轮换公式</strong></p><p>绕轴 $n$ 旋转角度 $\alpha$：</p><script type="math/tex; mode=display">\mathbf{R}(\mathbf{n},\alpha)=\cos(\alpha)\mathbf{I}+(1-\cos(\alpha))\mathbf{n}\mathbf{n}^T+\sin(\alpha)\underbrace{\begin{pmatrix}0&-n_z&n_y\\n_z&0&-n_x\\-n_y&n_x&0\end{pmatrix}}_{\mathbf{N}}</script><p><strong>View / Camera Transformation 视图变换</strong></p><ul><li>What is view transformation? 什么是视图变换？</li><li>Think about how to take a photo 考虑拍照<ul><li>Find a good place and arrange people (model transformation) 摆好场景：模型变换</li><li>Find a good “angle” to put the camera (view transformation) 选好视角：视图变换</li><li>Cheese! (projection transformation) 拍照：投影变换</li></ul></li><li>How to perform view transformation? 如何进行视图变换？<ul><li>Define the camera first 首先定义一个相机<ul><li>Position 位置 $\vec{e}$</li><li>Look-at / gaze direction 注视/凝视方向 $\hat g$</li><li>Up direction 上方向 $\hat t$</li></ul></li></ul></li></ul><p><img src="4_3.png" alt="png"></p><ul><li><p>Key observation 重点观察</p><ul><li>If the camera and all objects move together,  the “photo” will be the same 如果相机和所有物体一起移动，“照片”将是相同的</li></ul></li><li><p>How about that we always transform the camera to 不如我们总是把相机变成</p><ul><li>The origin, up at $Y$, look at $-Z$ 处于原点，上方为 $Y$ 轴，看着 $-Z$ 轴方向</li><li>And transform the objects along with the camera 并<strong>随相机变换对象</strong></li></ul></li><li><p>Transform the camera by $M_{view}$</p><ul><li>So it’s located at the origin, up at $Y$, look at $-Z$ 所以它位于原点，向上看 $Y$，看 $-Z$</li></ul></li><li><p>$M_{view}$ in math? $M_{view}=R_{view}T_{view}$</p><ul><li><p>Translates $e$ to origin</p><p>$T_{view}=\begin{bmatrix}1&amp;0&amp;0&amp;-x_e\\0&amp;1&amp;0&amp;-y_e\\0&amp;0&amp;1&amp;-z_e\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p></li><li><p>Rotates $g$ to $-Z$、Rotates $t$ to $Y$、Rotates ($g \times t$) To $X$</p><ul><li><p>Difficult to write!  将 $g$ 旋转到 $-Z$ 轴、将 $t$ 旋转到 $Y$ 轴、将 ($g \times t$) 旋转到 $X$ 轴，描述成矩阵是很复杂的！</p></li><li><p>考虑求其逆变换</p><p>$R_{view}^{-1}=\begin{bmatrix}x_{\hat{g}\times\hat{t}}&amp;x_{t}&amp;x_{-g}&amp;0\\y_{\hat{g}\times\hat{t}}&amp;y_{t}&amp;y_{-g}&amp;0\\z_{\hat{g}\times\hat{t}}&amp;z_{t}&amp;z_{-g}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p></li><li><p>由于旋转矩阵是正交矩阵，其逆为它的转置，因此易求得 $R_{view}$</p><p>$R_{view}=\begin{bmatrix}x_{\hat{g}\times\hat{t}}&amp;y_{\hat{g}\times\hat{t}}&amp;z_{\hat{g}\times\hat{t}}&amp;0\\x_t&amp;y_t&amp;z_t&amp;0\\x_{-g}&amp;y_{-g}&amp;z_{-g}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p></li></ul></li></ul></li><li><p>Summary 总结</p><ul><li>Transform objects together with the camera 与摄影机一起变换对象</li><li>Until camera’s at the origin, up at $Y$, look at $-Z$ 直到相机移动到原点，以 $Y$ 轴为上方，视点在 $-Z$ 轴方向。</li></ul></li><li><p>Also known as ModelView Transformation 也称为 ModelView 变换</p></li></ul><p><strong>Projection Transformation 投影变换</strong></p><ul><li>Projection in Computer Graphics 投影在计算机图形学<ul><li>3D to 2D</li><li>Orthographic projection 正交投影</li><li>Perspective projection 透视投影</li></ul></li></ul><p><img src="4_4.png" alt="png"></p><p><strong>Orthographic Projection 正交投影</strong></p><ul><li><p>A simple way of understanding 简单的理解方法</p><ul><li>Camera located at origin, looking at $-Z$, up at $Y$ (looks familiar?)  相机移动到原点，以 $Y$ 轴为上方，视点在 $-Z$ 轴方向</li><li>Drop $Z$ coordinate 删除 $Z$ 坐标</li><li>Translate and scale the resulting rectangle to $[-1, 1]^2$  将生成的矩形平移并缩放到 $[-1，1]^2$</li></ul></li><li><p>In General</p><ul><li><p>We want to map a cuboid $[l, r]\times [b, t]\times [f, n]$ to  the “canonical” cube $[-1, 1]^3$</p><p>我们想把长方体 $[l,r]\times[b,t]\times[f,n]$ 映射到“规范(正则、规范、标准)” 的立方体 $[-1，1]^3$</p></li></ul></li><li><p>Slightly different orders (to the “simple way”)</p><ul><li>Center cuboid by translating  通过平移使长方体居中</li><li>Scale into “canonical” cube 缩放为“规范”多维数据集</li></ul></li></ul><p>$r,l,t,b,n,f$ 的定义如下所示：</p><p><img src="4_5.png" alt="png"></p><ul><li><p>Transformation matrix?</p><ul><li><p>Translate (center to origin) first, then scale (length/width/height to 2) 首先平移（中心到原点），然后缩放（长度/宽度/高度到 2）</p><p>$M_{ortho}=\begin{bmatrix}\frac2{r-l}&amp;0&amp;0&amp;0\\0&amp;\frac2{t-b}&amp;0&amp;0\\0&amp;0&amp;\frac2{n-f}&amp;0\\0&amp;0&amp;0&amp;1\end{bmatrix}\begin{bmatrix}1&amp;0&amp;0&amp;-\frac{r+l}2\\0&amp;1&amp;0&amp;-\frac{t+b}2\\0&amp;0&amp;1&amp;-\frac{n+f}2\\0&amp;0&amp;0&amp;1\end{bmatrix}$</p></li></ul></li><li><p>Caveat</p><ul><li>Looking at / along $-Z$ is making near and far not intuitive ($n &gt; f$)  观察/沿着 $-Z$ 轴使远近不直观（$n&gt;f$）</li><li>FYI: that’s why OpenGL (a Graphics API) uses left hand coords. 仅供参考：这就是 OpenGL（图形 API）使用左手坐标的原因。</li></ul></li></ul><p><strong>Perspective Projection 透视投影</strong></p><ul><li>Most common in Computer Graphics, art, visual system 最常见于计算机图形学、艺术、视觉系统</li><li>Further objects are smaller 其他物体较小</li><li>Parallel lines not parallel; converge to single point 平行线不平行；收敛到单点</li></ul><p><img src="4_6.png" alt="png"></p><ul><li><p>How to do perspective projection 如何进行透视投影</p><ul><li><p>First “squish” the <strong>frustum</strong> into a cuboid ($n \to n$, $f \to f$) ($M_{persp\to ortho}$) </p><p>首先将截头体“<strong>压扁</strong>”成长方体（$n\to n$，$f\to f$）（$M_{persp\to ortho}$）</p></li><li><p>Do orthographic projection ($M_{ortho}$, already known!) 做正交投影（$M_{ortho}$，已经知道了！）</p></li></ul></li></ul><p><img src="4_7.png" alt="png"></p><ul><li><p>In order to find a transformation 为了找到变换（推导出矩阵 $M_{persp\to ortho}$）</p><ul><li><p>Recall the key idea: Find the relationship between transformed points $(x’, y’,z’)$ and the original points $(x, y, z)$</p><p>回想关键思想：找到转换之间的关系点 $(x’, y’,z’)$ 和原始点 $(x, y, z)$</p><p>$y^{\prime}=\frac nzy$</p><p>$x^{\prime}=\frac nzx$</p></li></ul></li></ul><p><img src="4_8.png" alt="png"></p><ul><li><p>In homogeneous coordinates, 齐次坐标下，</p><p>$\begin{pmatrix}x\\y\\z\\1\end{pmatrix}\Rightarrow\begin{pmatrix}nx/z\\ny/z\\\text{unknown}\\1\end{pmatrix}==\begin{pmatrix}nx\\ny\\\text{still unknown}\\z\end{pmatrix}$</p></li></ul><ul><li><p>So the “squish” (persp to ortho) projection does this 所以“挤压”（透视到正交）投影可以做到这一点</p><p>$M_{persp\to ortho}^{(4\times4)}\begin{pmatrix}x\\y\\z\\1\end{pmatrix}=\begin{pmatrix}nx\\ny\\\text{unknown}\\z\end{pmatrix}$</p></li><li><p>Already good enough to figure out part of $M_{persp\to ortho}$ 可以求得 $M_{persp\to ortho}$ 的一部分：</p><p>$M_{persp\to ortho}=\begin{pmatrix}n&amp;0&amp;0&amp;0\\0&amp;n&amp;0&amp;0\\?&amp;?&amp;?&amp;?\\0&amp;0&amp;1&amp;0\end{pmatrix}$</p></li><li><p>Observation: the third row is responsible for $z’$ 观察：第三排负责 $z’$</p><ul><li><p>Any point on the near plane will not change 近平面上的任何点都不会改变</p></li><li><p>Any point’s z on the far plane will not change 远平面上的任何点的 $z$ 都不会改变</p></li></ul></li><li><p>Any point on the near plane will not change 近平面上的任何点都不会改变</p><p>$M_{persp\to ortho}^{(4\times4)}\begin{pmatrix}x\\y\\z\\1\end{pmatrix}=\begin{pmatrix}nx\\ny\\\text{unknown}\\z\end{pmatrix}\overset{\text{replace z with n}}{\operatorname*{\to}}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}\Rightarrow\begin{pmatrix}x\\y\\n\\1\end{pmatrix}==\begin{pmatrix}nx\\ny\\n^2\\n\end{pmatrix}$</p></li><li><p>So the third row must be of the form $(0\ 0\ A\ B)$ 所以第三行的形式必须是$(0\ 0\ A\ B)$</p><p>$\begin{pmatrix}0&amp;0&amp;A&amp;B\end{pmatrix}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}=n^2$</p></li><li><p>What do we have now?</p><p>$\begin{pmatrix}0&amp;0&amp;A&amp;B\end{pmatrix}\begin{pmatrix}x\\y\\n\\1\end{pmatrix}=n^2\to An+B=n^2$</p></li><li><p>Any point’s z on the far plane will not change 近平面上的任何点都不会改变</p><p>$\begin{pmatrix}0\\0\\f\\1\end{pmatrix}\Rightarrow\begin{pmatrix}0\\0\\f\\1\end{pmatrix}==\begin{pmatrix}0\\0\\f^2\\f\end{pmatrix}\quad\to\quad Af+B=f^2$</p></li><li><p>Solve for $A$ and $B$</p><p>$\begin{aligned}An+B&amp;=n^2\\Af+B&amp;=f^2\end{aligned}\quad\to\quad\begin{aligned}A&amp;=n+f\\B&amp;=-nf\end{aligned}$</p></li><li><p>Finally, every entry in $M_{persp\to ortho}$ is known!</p></li><li><p>What’s next?</p><ul><li>完成正交投影（$M_{ortho}$）</li><li>$\begin{aligned}M_{persp}=M_{ortho}M_{persp\to ortho}\end{aligned}$</li></ul></li></ul><h2><span id="hw0">HW0</span></h2><p><strong>环境配置</strong></p><p>WSL2 下：</p><figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sudo apt-get install xfce4-terminal<br>sudo apt-get install xfce4<br></code></pre></td></tr></table></figure><p>配置环境变量：</p><figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">echo &quot;export DISPLAY=localhost:0&quot;&gt;&gt; ~/.bashrc<br></code></pre></td></tr></table></figure><p>MobaXterm 下配置 wsl2：</p><p><img src="HW0_1.png" alt="png"></p><p>开跑！</p><p><img src="HW0_2.png" alt="png"></p><p>安装库：</p><figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sudo apt update<br>sudo apt install g++ gdb cmake<br>sudo apt install libopencv-dev libeigen3-dev<br>sudo apt install libglu1-mesa-dev freeglut3-dev mesa-common-dev xorg-dev<br></code></pre></td></tr></table></figure><p>Windows 下的 VSCode，安装 wsl 插件，点击左下角，连接 wsl。</p><p><img src="/C:/Users/19048/AppData/Roaming/Typora/typora-user-images/image-20231027164805639.png" alt="image-20231027164805639"></p><p>打开作业模板，有如下命令：</p><ul><li><code>mkdir build</code>: 创建名为 build 的文件夹。</li><li><code>cd build</code>: 移动到 build 文件夹下。</li><li><code>cmake ..</code>: 注意其中 ’..’ 表示上一级目录，若为 ’.’ 则表示当前目录。</li><li><code>make</code>: 编译程序，错误提示会显示在终端中。</li><li><code>./Transformation</code>：若上一步无错误，则可运行程序（这里 Transformation 为可执行文件名，可参照 CMakeLists.txt 中修改)。</li></ul><p>写一个 <code>compile.sh</code> 便于编译：</p><figure class="highlight sh"><table><tr><td class="code"><pre><code class="hljs sh"><span class="hljs-built_in">rm</span> -rf build<br><span class="hljs-built_in">mkdir</span> build<br><span class="hljs-built_in">cd</span> build<br>cmake ..<br>make<br>./Transformation<br><span class="hljs-built_in">cd</span> ../<br></code></pre></td></tr></table></figure><p>修改权限：</p><figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">chmod a+x compile.sh<br></code></pre></td></tr></table></figure><p>开跑！</p><figure class="highlight shell"><table><tr><td class="code"><pre><code class="hljs shell">sh compile.sh<br></code></pre></td></tr></table></figure><p><strong>作业</strong></p><p><strong>示例代码</strong></p><figure class="highlight c++"><table><tr><td class="code"><pre><code class="hljs C++"><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;cmath&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Core&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Dense&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;iostream&gt;</span></span><br><br><span class="hljs-function"><span class="hljs-type">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span>&#123;<br><br>    <span class="hljs-comment">// Basic Example of cpp</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of cpp \n&quot;</span>;<br>    <span class="hljs-type">float</span> a = <span class="hljs-number">1.0</span>, b = <span class="hljs-number">2.0</span>;<br>    std::cout &lt;&lt; a &lt;&lt; std::endl;<br>    std::cout &lt;&lt; a/b &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">sqrt</span>(b) &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">acos</span>(<span class="hljs-number">-1</span>) &lt;&lt; std::endl;<br>    std::cout &lt;&lt; std::<span class="hljs-built_in">sin</span>(<span class="hljs-number">30.0</span>/<span class="hljs-number">180.0</span>*<span class="hljs-built_in">acos</span>(<span class="hljs-number">-1</span>)) &lt;&lt; std::endl;<br><br>    <span class="hljs-comment">// Example of vector</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of vector \n&quot;</span>;<br>    <span class="hljs-comment">// vector definition</span><br>    <span class="hljs-function">Eigen::Vector3f <span class="hljs-title">v</span><span class="hljs-params">(<span class="hljs-number">1.0f</span>,<span class="hljs-number">2.0f</span>,<span class="hljs-number">3.0f</span>)</span></span>;<br>    <span class="hljs-function">Eigen::Vector3f <span class="hljs-title">w</span><span class="hljs-params">(<span class="hljs-number">1.0f</span>,<span class="hljs-number">0.0f</span>,<span class="hljs-number">0.0f</span>)</span></span>;<br>    <span class="hljs-comment">// vector output</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of output \n&quot;</span>;<br>    std::cout &lt;&lt; v &lt;&lt; std::endl;<br>    <span class="hljs-comment">// vector add</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of add \n&quot;</span>;<br>    std::cout &lt;&lt; v + w &lt;&lt; std::endl;<br>    <span class="hljs-comment">// vector scalar multiply</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of scalar multiply \n&quot;</span>;<br>    std::cout &lt;&lt; v * <span class="hljs-number">3.0f</span> &lt;&lt; std::endl;<br>    std::cout &lt;&lt; <span class="hljs-number">2.0f</span> * v &lt;&lt; std::endl;<br><br>    <span class="hljs-comment">// Example of matrix</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of matrix \n&quot;</span>;<br>    <span class="hljs-comment">// matrix definition</span><br>    Eigen::Matrix3f i,j;<br>    i &lt;&lt; <span class="hljs-number">1.0</span>, <span class="hljs-number">2.0</span>, <span class="hljs-number">3.0</span>, <span class="hljs-number">4.0</span>, <span class="hljs-number">5.0</span>, <span class="hljs-number">6.0</span>, <span class="hljs-number">7.0</span>, <span class="hljs-number">8.0</span>, <span class="hljs-number">9.0</span>;<br>    j &lt;&lt; <span class="hljs-number">2.0</span>, <span class="hljs-number">3.0</span>, <span class="hljs-number">1.0</span>, <span class="hljs-number">4.0</span>, <span class="hljs-number">6.0</span>, <span class="hljs-number">5.0</span>, <span class="hljs-number">9.0</span>, <span class="hljs-number">7.0</span>, <span class="hljs-number">8.0</span>;<br>    <span class="hljs-comment">// matrix output</span><br>    std::cout &lt;&lt; <span class="hljs-string">&quot;Example of output \n&quot;</span>;<br>    std::cout &lt;&lt; i &lt;&lt; std::endl;<br>    <span class="hljs-comment">// matrix add i + j</span><br>    <span class="hljs-comment">// matrix scalar multiply i * 2.0</span><br>    <span class="hljs-comment">// matrix multiply i * j</span><br>    <span class="hljs-comment">// matrix multiply vector i * v</span><br><br>    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></td></tr></table></figure><hr><p><strong>题目</strong></p><p>给定一个点 $P=(2,1)$, 将该点绕原点先逆时针旋转 $45^\circ$，再平移<br>$(1,2)$，计算出变换后点的坐标（要求用齐次坐标进行计算）。</p><hr><p>$P$ 以齐次坐标的表示形式为 $(2, 1, 1)^T$</p><p>旋转矩阵为 $R(\pi/4)=\begin{bmatrix}<br> \cos \pi/4 &amp; -\sin \pi/4 &amp; 0 \\<br> \sin \pi/4 &amp; \cos \pi/4 &amp; 0 \\<br> 0 &amp; 0 &amp; 1<br>\end{bmatrix}$</p><p>平移矩阵 $T(1, 2)=\begin{bmatrix}<br>1 &amp; 0 &amp; 1 \\<br>0 &amp; 1 &amp; 2 \\<br>0 &amp; 0 &amp; 1<br>\end{bmatrix}$</p><p>最终坐标为 $TRP$。</p><figure class="highlight c++"><table><tr><td class="code"><pre><code class="hljs C++"><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;cmath&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Core&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;eigen3/Eigen/Dense&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">include</span><span class="hljs-string">&lt;iostream&gt;</span></span><br><span class="hljs-meta">#<span class="hljs-keyword">define</span> PI 3.1415926535</span><br><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> std;<br><span class="hljs-keyword">using</span> <span class="hljs-keyword">namespace</span> Eigen;<br><br><span class="hljs-function"><span class="hljs-type">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span><br><span class="hljs-function"></span>&#123;<br>    <span class="hljs-type">float</span> theta = PI / <span class="hljs-number">4.0f</span>;<br>    <span class="hljs-function">Vector3f <span class="hljs-title">P</span><span class="hljs-params">(<span class="hljs-number">2.0f</span>, <span class="hljs-number">1.0f</span>, <span class="hljs-number">1.0f</span>)</span></span>;<br>    Matrix3f R, T;<br>    R &lt;&lt; <br>        <span class="hljs-built_in">cos</span>(theta), -<span class="hljs-built_in">sin</span>(theta), <span class="hljs-number">0</span>,<br>        <span class="hljs-built_in">sin</span>(theta), <span class="hljs-built_in">cos</span>(theta), <span class="hljs-number">0</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>;<br>    T &lt;&lt;<br>        <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>,<br>        <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>;<br>    cout &lt;&lt; T * R * P &lt;&lt; endl;<br>    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;<br>&#125;<br></code></pre></td></tr></table></figure><figure class="highlight apache"><table><tr><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">1</span>.<span class="hljs-number">70711</span><br><span class="hljs-attribute">4</span>.<span class="hljs-number">12132</span><br>      <span class="hljs-attribute">1</span><br></code></pre></td></tr></table></figure><h2><span id="hw1">HW1</span></h2>]]></content>
       
       
       <categories>