update

public/2023/10/23/Markdown Sample/index.html

@@ -294,7 +294,7 @@
 <p><a target="_blank" rel="noopener" href="https://baidu.com/">https://baidu.com</a></p>
 <p><a target="_blank" rel="noopener" href="http://www.this-anchor-link.com/">锚点链接</a> </p>
 <p><a href="mailto:test.test@gmail.com">mailto:test.test@gmail.com</a></p>
-<p>GFM a-tail link <a target="_blank" rel="noopener" href="https://my.oschina.net/u/3691274">@pandao</a>  邮箱地址自动链接 <a href="mailto:&#x74;&#x65;&#115;&#116;&#46;&#116;&#x65;&#x73;&#x74;&#64;&#x67;&#109;&#x61;&#x69;&#x6c;&#46;&#99;&#111;&#x6d;">&#x74;&#x65;&#115;&#116;&#46;&#116;&#x65;&#x73;&#x74;&#64;&#x67;&#109;&#x61;&#x69;&#x6c;&#46;&#99;&#111;&#x6d;</a>  <a href="mailto:&#x77;&#x77;&#119;&#64;&#118;&#105;&#x70;&#46;&#x71;&#x71;&#x2e;&#99;&#x6f;&#x6d;">&#x77;&#x77;&#119;&#64;&#118;&#105;&#x70;&#46;&#x71;&#x71;&#x2e;&#99;&#x6f;&#x6d;</a></p>
+<p>GFM a-tail link <a target="_blank" rel="noopener" href="https://my.oschina.net/u/3691274">@pandao</a>  邮箱地址自动链接 <a href="mailto:&#x74;&#x65;&#x73;&#116;&#x2e;&#116;&#x65;&#x73;&#x74;&#64;&#103;&#109;&#97;&#105;&#x6c;&#x2e;&#x63;&#x6f;&#x6d;">&#x74;&#x65;&#x73;&#116;&#x2e;&#116;&#x65;&#x73;&#x74;&#64;&#103;&#109;&#97;&#105;&#x6c;&#x2e;&#x63;&#x6f;&#x6d;</a>  <a href="mailto:&#119;&#119;&#119;&#64;&#x76;&#105;&#112;&#46;&#x71;&#113;&#46;&#x63;&#111;&#109;">&#119;&#119;&#119;&#64;&#x76;&#105;&#112;&#46;&#x71;&#113;&#46;&#x63;&#111;&#109;</a></p>
 <blockquote>
 <p>@pandao</p>
 </blockquote>

public/2023/11/06/front-end/Unity Shader入门精要/index.html

@@ -274,7 +274,7 @@
         <!-- 渲染文章内容 -->
         <article><p>代码基于<code>c#</code>，书籍 <code>Unity Shader</code>入门精要</p>
 <h1 id="什么是-OpenGL、DirectX"><a href="#什么是-OpenGL、DirectX" class="headerlink" title="什么是 OpenGL、DirectX"></a>什么是 OpenGL、DirectX</h1><p>用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发送渲染命令，而这些接口会依次向显卡驱动（Graphics Driver）发送渲染命令，这些显卡驱动是真正知道如何和 GPU 通信的角色，正是它们把 OpenGL 或者 DirectX 的函数调用翻译成了 GPU 能够听懂的语言，同时它们也负责把纹理等数据转换成 GPU 所支持的格式。一个比喻是，显卡驱动就是显卡的操作系统。</p>
-<p><img src="/data/img/shader_7.png" alt="shader_7"></p>
+<p><img src="/img/shader_7.png" alt="shader_7"></p>
 <h1 id="什么是-HLSL、GLSL、CG"><a href="#什么是-HLSL、GLSL、CG" class="headerlink" title="什么是 HLSL、GLSL、CG"></a>什么是 HLSL、GLSL、CG</h1><p>如顶点着色器、片元着色器等。这些着色器的可编程性在于，我们可以使用一种特定的语言来编写程序，就好比我们可以用 C#来写游戏逻辑一样。</p>
 <p>着色语言是专门用于编写着色器的，常见的着色语言有</p>
 <ul>
@@ -287,7 +287,7 @@
 </ul>
 <p>HLSL、GLSL、CG 都是“高级（High-Level）”语言，但这种高级是相对于汇编语言来说的，而不是像 C#相对于 C 的高级那样。这些语言会被编译成与机器无关的汇编语言，也被称为中间语言（Intermediate Language, IL）。这些中间语言再交给显卡驱动来翻译成真正的机器语言，即 GPU 可以理解的语言。</p>
 <h1 id="GPU-流水线"><a href="#GPU-流水线" class="headerlink" title="GPU 流水线"></a>GPU 流水线</h1><p>当 GPU 从 CPU 那里得到渲染命令后，就会进行一系列流水线操作，最终把图元渲染到屏幕上。</p>
-<p><img src="/data/img/shader_1.png" alt="shader_1"></p>
+<p><img src="/img/shader_1.png" alt="shader_1"></p>
 <ul>
 <li><p>顶点着色器（Vertex Shader）是完全可编程的，它通常用于实现顶点的空间变换、顶点着色等功能</p>
 </li>
@@ -305,7 +305,7 @@
 <ul>
 <li>坐标变换：把顶点坐标转换到齐次裁剪坐标系下，接着通常再由硬件做透视除法后，最终得到归一化的设备坐标(NDC)</li>
 </ul>
-<p><img src="/data/img/shader_2.png" alt="shader_2"></p>
+<p><img src="/img/shader_2.png" alt="shader_2"></p>
 <blockquote>
 <p>在 DirectX 中，NDC 的 z 方向取值范围是[0,1]，在 OpenGL 环境下是-1.0，DirectX 中是 0.0</p>
 </blockquote>
@@ -313,9 +313,9 @@
 <li>逐顶点光照</li>
 </ul>
 <h2 id="裁剪"><a href="#裁剪" class="headerlink" title="裁剪"></a>裁剪</h2><p>只有在单位立方体的图元才需要被继续处</p>
-<p><img src="/data/img/shader_3.png" alt="shader_3"></p>
+<p><img src="/img/shader_3.png" alt="shader_3"></p>
 <h2 id="屏幕映射"><a href="#屏幕映射" class="headerlink" title="屏幕映射"></a>屏幕映射</h2><p>OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最小的窗口坐标值，而 DirectX 则定义了屏幕的左上角为最小的窗口坐标值</p>
-<p><img src="/data/img/shader_4.png" alt="shader_4"></p>
+<p><img src="/img/shader_4.png" alt="shader_4"></p>
 <h2 id="光栅阶段"><a href="#光栅阶段" class="headerlink" title="光栅阶段"></a>光栅阶段</h2><p>从上一个阶段输出的信息：屏幕坐标系下的顶点位置以及和它们相关的额外信息，如深度值（z 坐标）、法线方向、视角方向等。光栅化阶段有两个最重要的目标：计算每个图元覆盖了哪些像素，以及为这些像素计算它们的颜色。</p>
 <h3 id="三角形设置"><a href="#三角形设置" class="headerlink" title="三角形设置"></a>三角形设置</h3><p>如果要得到整个三角网格对像素的覆盖情况，我们就必须计算每条边上的像素坐标。为了能够计算边界像素的坐标信息，我们就需要得到三角形边界的表示方式。</p>
 <h3 id="三角形遍历"><a href="#三角形遍历" class="headerlink" title="三角形遍历()"></a>三角形遍历()</h3><ol>
@@ -324,13 +324,13 @@
 <li><p>使用三角网格 3 个顶点的顶点信息对整个覆盖区域的像素进行插值</p>
 </li>
 </ol>
-<p><img src="/data/img/shader_5.png" alt="shader_5"></p>
+<p><img src="/img/shader_5.png" alt="shader_5"></p>
 <p>这一步的输出就是得到一个片元序列。需要注意的是，一个片元并不是真正意义上的像素，而是包含了很多状态的集合，这些状态用于计算每个像素的最终颜色。这些状态包括了（但不限于）它的屏幕坐标、深度信息，以及其他从几何阶段输出的顶点信息，例如法线、纹理坐标等。</p>
 <h2 id="片元着色器-Fragment-Shader"><a href="#片元着色器-Fragment-Shader" class="headerlink" title="片元着色器 Fragment Shader"></a>片元着色器 Fragment Shader</h2><p>前面的光栅化阶段实际上并不会影响屏幕上每个像素的颜色值，而是会产生一系列的数据信息，用来表述一个三角网格是怎样覆盖每个像素的。而每个片元就负责存储这样一系列数据。真正会对像素产生影响的阶段是下一个流水线阶段——逐片元操作</p>
 <blockquote>
 <p>在 DirectX 中，片元着色器被称为像素着色器（Pixel Shader）但片元着色器是一个更合适的名字，因为此时的片元并不是一个真正意义上的像素。</p>
 </blockquote>
-<p><img src="/data/img/shader_6.png" alt="shader_6"></p>
+<p><img src="/img/shader_6.png" alt="shader_6"></p>
 <h2 id="逐片元操作"><a href="#逐片元操作" class="headerlink" title="逐片元操作"></a>逐片元操作</h2><p>这一阶段有几个主要任务:</p>
 <ul>
 <li><p>决定每个片元的可见性。这涉及了很多测试工作，例如深度测试、模板测试等。</p>
@@ -470,50 +470,50 @@ out  float4  fragColor<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
 
 <h1 id="坐标系"><a href="#坐标系" class="headerlink" title="坐标系"></a>坐标系</h1><p>Unity 使用的是左手坐标系</p>
-<h2 id="左右手"><a href="#左右手" class="headerlink" title="左右手"></a>左右手</h2><p><img src="/data/img/shader_8.png" alt="shader_8"></p>
+<h2 id="左右手"><a href="#左右手" class="headerlink" title="左右手"></a>左右手</h2><p><img src="/img/shader_8.png" alt="shader_8"></p>
-<p><img src="/data/img/shader_9.png" alt="shader_9"></p>
+<p><img src="/img/shader_9.png" alt="shader_9"></p>
 <h2 id="向量-矢量"><a href="#向量-矢量" class="headerlink" title="向量(矢量)"></a>向量(矢量)</h2><h3 id="模"><a href="#模" class="headerlink" title="模"></a>模</h3><p>矢量的模是一个标量，可以理解为是矢量在空间中的长度。它的表示符号通常是在矢量两旁分别加上一条垂直线</p>
-<p><img src="/data/img/shader_10.png" alt="shader_10"></p>
+<p><img src="/img/shader_10.png" alt="shader_10"></p>
 <h3 id="单位矢量"><a href="#单位矢量" class="headerlink" title="单位矢量"></a>单位矢量</h3><p>在很多情况下，我们只关心矢量的方向而不是模。例如，在计算光照模型时，我们往往需要得到顶点的法线方向和光源方向，此时我们不关心这些矢量有多长。在这些情况下，我们就需要计算单位矢量（unit vector）</p>
 <p>单位矢量指的是那些模为 1 的矢量。单位矢量也被称为被归一化的矢量（normalized vector）。对任何给定的非零矢量，把它转换成单位矢量的过程就被称为归一化</p>
-<p><img src="/data/img/shader_11.png" alt="shader_11"></p>
+<p><img src="/img/shader_11.png" alt="shader_11"></p>
 <h3 id="点积"><a href="#点积" class="headerlink" title="点积"></a>点积</h3><p>一个向量在另一个向量方向上投影的长度，是一个标量</p>
 <p>公式：<code>a·b = |a||b|cosθ</code></p>
 <h3 id="向量积-∧-×"><a href="#向量积-∧-×" class="headerlink" title="向量积 ∧ ×"></a>向量积 ∧ ×</h3><blockquote>
 <p>向量积，数学中又称外积、叉积，物理中称矢积、叉乘</p>
 </blockquote>
 <p>几何意义，一个和已有两个向量都垂直的向量，法向量</p>
-<p><img src="/data/img/shader_16.png" alt="shader_16"></p>
+<p><img src="/img/shader_16.png" alt="shader_16"></p>
 <p>向量 a 和向量 b：</p>
-<p><img src="/data/img/shader_12.png" alt="shader_12"></p>
+<p><img src="/img/shader_12.png" alt="shader_12"></p>
 <p>叉乘公式为：</p>
-<p><img src="/data/img/shader_13.png" alt="shader_13"></p>
+<p><img src="/img/shader_13.png" alt="shader_13"></p>
 <p>其中：</p>
-<p><img src="/data/img/shader_14.png" alt="shader_14"></p>
+<p><img src="/img/shader_14.png" alt="shader_14"></p>
 <p>根据 i、j、k 间关系，有：</p>
-<p><img src="/data/img/shader_15.png" alt="shader_15"></p>
+<p><img src="/img/shader_15.png" alt="shader_15"></p>
 <p>例如</p>
 <p>(1,2,3)×(-2,-1,4) &#x3D; (2 × 4 - 3 × -1, 3 × -2 - 1 × 4, 1 × -1 - 2 × -2) &#x3D; (11,10,3)</p>
 <h1 id="矩阵变换-Vec4"><a href="#矩阵变换-Vec4" class="headerlink" title="矩阵变换 Vec4"></a>矩阵变换 Vec4</h1><p>由于 3×3 矩阵不能表示平移操作，我们就把其扩展到了 4×4 的矩阵</p>
 <h2 id="平移矩阵"><a href="#平移矩阵" class="headerlink" title="平移矩阵"></a>平移矩阵</h2><p>点的 x、y、z 分量分别增加了一个位置偏移。在 3D 中的可视化效果是，把点(x, y, z)在空间中平移了(tx, ty, tz)个单位</p>
-<p><img src="/data/img/shader_17.png" alt="shader_17"></p>
+<p><img src="/img/shader_17.png" alt="shader_17"></p>
 <h2 id="缩放矩阵"><a href="#缩放矩阵" class="headerlink" title="缩放矩阵"></a>缩放矩阵</h2><h2 id="旋转矩阵"><a href="#旋转矩阵" class="headerlink" title="旋转矩阵"></a>旋转矩阵</h2><p>旋转操作需要指定一个旋转轴，这个旋转轴不一定是空间中的坐标轴，但本节所讲的旋转就是指绕着空间中的 x 轴、y 轴或 z 轴进行旋转</p>
 <p>如果我们需要把点绕着 x 轴旋转 θ 度</p>
-<p><img src="/data/img/shader_18.png" alt="shader_18"></p>
+<p><img src="/img/shader_18.png" alt="shader_18"></p>
 <p>绕 y 轴的旋转</p>
-<p><img src="/data/img/shader_19.png" alt="shader_19"></p>
+<p><img src="/img/shader_19.png" alt="shader_19"></p>
 <p>绕 z 轴的旋转</p>
-<p><img src="/data/img/shader_20.png" alt="shader_20"></p>
+<p><img src="/img/shader_20.png" alt="shader_20"></p>
 <h2 id="复合变换"><a href="#复合变换" class="headerlink" title="复合变换"></a>复合变换</h2><p>先进行大小为(2, 2, 2)的缩放，再绕 y 轴旋转 30°，最后向 z 轴平移 4 个单位。</p>
 <blockquote>
 <p>矩阵乘法注意顺序</p>
 </blockquote>
-<p><img src="/data/img/shader_21.png" alt="shader_21"></p>
+<p><img src="/img/shader_21.png" alt="shader_21"></p>
 <blockquote>
 <p>?? 如果我们需要同时绕着 3 个轴进行旋转，是先绕 x 轴、再绕 y 轴最后绕 z 轴旋转还是按其他的旋转顺序呢？</p>
 </blockquote>
 <p>根据坐标系，需要调整轴的顺序</p>
-<p><img src="/data/img/shader_22.png" alt="shader_22"></p>
+<p><img src="/img/shader_22.png" alt="shader_22"></p>
 <h2 id="法线变换"><a href="#法线变换" class="headerlink" title="法线变换"></a>法线变换</h2><p>在游戏中，模型的一个顶点往往会携带额外的信息，而顶点法线就是其中一种信息。当我们变换一个模型的时候，不仅需要变换它的顶点，还需要变换顶点法线，以便在后续处理（如片元着色器）中计算光照等。</p>
 <h1 id="坐标空间"><a href="#坐标空间" class="headerlink" title="坐标空间"></a>坐标空间</h1><p>事实上，在我们的生活中，我们也总是使用不同的坐标空间来交流。现在正在读这本书的你，很可能正坐在办公室或书房中。如果问你：“办公室的饮水机在哪里？”你大概会回答：“在办公室门的左方 3 米处。”这里，你很自然地使用了以门为原点的坐标空间。</p>
 <p>要想定义一个坐标空间，必须指明其原点位置和 3 个坐标轴的方向。而这些数值实际上是相对于另一个坐标空间的（读者需要记住，所有的都是相对的）。也就是说，坐标空间会形成一个层次结构——每个坐标空间都是另一个坐标空间的子空间，反过来说，每个空间都有一个父（parent）坐标空间。对坐标空间的变换实际上就是在父空间和子空间之间对点和矢量进行变换。</p>
@@ -521,7 +521,7 @@ out  float4  fragColor<span class="token punctuation">;</span>
 <blockquote>
 <p>Unity 在模型空间中使用的是左手坐标系，因此在模型空间中，+x 轴、+y 轴、+z 轴分别对应的是模型的右、上和前向。</p>
 </blockquote>
-<p><img src="/data/img/shader_24.png" alt="shader_24"></p>
+<p><img src="/img/shader_24.png" alt="shader_24"></p>
 <h2 id="世界空间"><a href="#世界空间" class="headerlink" title="世界空间"></a>世界空间</h2><p>世界空间（world space）是一个特殊的坐标系，因为它建立了我们所关心的最大的空间。一些读者可能会指出，空间可以是无限大的，怎么会有“最大”这一说呢？这里说的最大指的是一个宏观的概念，也就是说它是我们所关心的<code>最外层</code>的坐标空间。</p>
 <h2 id="摄像机空间"><a href="#摄像机空间" class="headerlink" title="摄像机空间"></a>摄像机空间</h2><p>摄像机决定了我们渲染游戏所使用的视角。在观察空间中，摄像机位于原点</p>
 <blockquote>
@@ -530,20 +530,20 @@ out  float4  fragColor<span class="token punctuation">;</span>
 <p>Q：模型空间和世界空间中+z 轴指的都是物体的前方，为什么这里不一样了呢？</p>
 <p>A：Unity 在模型空间和世界空间中选用的都是左手坐标系，而在观察空间中使用的是右手坐标系。这是符合 OpenGL 传统的，在这样的观察空间中，摄像机的正前方指向的是-z 轴方向。</p>
 <h2 id="裁剪空间"><a href="#裁剪空间" class="headerlink" title="裁剪空间"></a>裁剪空间</h2><p>用于变换的矩阵叫做裁剪矩阵（clip matrix），也被称为投影矩阵（projection matrix）。位于这块空间内部的图元将会被保留，否则他剔除。由视锥体（view frustum）来决定。</p>
-<p><img src="/data/img/shader_26.png" alt="shader_26"></p>
+<p><img src="/img/shader_26.png" alt="shader_26"></p>
 <p>视锥体：指的是空间中的一块区域，这块区域决定了摄像机可以看到的空间。视锥体由六个平面包围而成，这些平面也被称为裁剪平面（clip planes）。视锥体有两种类型，这涉及两种投影类型：</p>
 <ul>
 <li>正交投影（orthographic projection）：所有的网格大小都一样，而且平行线会一直保持平行</li>
 <li>透视投影（perspective projection）：地板上的平行线并不会保持平行，离摄像机越近网格越大，离摄像机越远网格越小。</li>
 </ul>
-<p><img src="/data/img/shader_25.png" alt="shader_25"></p>
+<p><img src="/img/shader_25.png" alt="shader_25"></p>
 <blockquote>
 <p>追求真实感的 3D 游戏中我们往往会使用透视投影，而在一些 2D 游戏或渲染小地图等其他 HUD 元素时，我们会使用正交投影</p>
 </blockquote>
 <h3 id="透视摄像机视锥体模型"><a href="#透视摄像机视锥体模型" class="headerlink" title="透视摄像机视锥体模型"></a>透视摄像机视锥体模型</h3><p>在 Unity 中，一个摄像机的横纵比由 Game 视图的横纵比和 Viewport Rect 中的 <code>W</code> 和 <code>H</code> 属性共同决定（实际上，Unity 允许我们在脚本里通过 <code>Camera.aspect</code> 进行更改，但这里不做讨论）</p>
-<p><img src="/data/img/shader_27.png" alt="shader_27"></p>
+<p><img src="/img/shader_27.png" alt="shader_27"></p>
 <h3 id="正交摄像机视锥体模型"><a href="#正交摄像机视锥体模型" class="headerlink" title="正交摄像机视锥体模型"></a>正交摄像机视锥体模型</h3><p>通过 Camera 组件的 <code>Size</code> 属性来改变视锥体竖直方向上高度的一半，而 Clipping Planes 中的 Near 和 Far 参数可以控制视锥体的近裁剪平面和远裁剪平面距离摄像机的远近。</p>
-<p><img src="/data/img/shader_28.png" alt="shader_28"></p>
+<p><img src="/img/shader_28.png" alt="shader_28"></p>
 <h2 id="屏幕空间"><a href="#屏幕空间" class="headerlink" title="屏幕空间"></a>屏幕空间</h2><blockquote>
 <p>在 Unity 中，从裁剪空间到屏幕空间的转换是由 Unity 帮我们完成的。</p>
 </blockquote>
@@ -552,9 +552,9 @@ out  float4  fragColor<span class="token punctuation">;</span>
 <li>标准齐次除法（透视除法）：用齐次坐标系的 w 分量去除以 x、y、z 分量，在 OpenGL 中，得到的坐标叫做归一化的设备坐标（Normalized Device Coordinates, NDC）</li>
 </ol>
 <p>经过透视投影变换后的裁剪空间，经过齐次除法后会变换到一个立方体内。按照 OpenGL 的传统，这个立方体的 x、y、z 分量的范围都是[-1, 1]。但在 DirectX 这样的 API 中，z 分量的范围会是[0, 1]。而 Unity 选择了 OpenGL 这样的齐次裁剪空间，如图所示</p>
-<p><img src="/data/img/shader_29.png" alt="shader_29"></p>
+<p><img src="/img/shader_29.png" alt="shader_29"></p>
 <p>而对于正交投影来说，它的裁剪空间实际已经是一个立方体了，而且由于经过正交投影矩阵变换后的顶点的 w 分量是 1，因此齐次除法并不会对顶点的 x、y、z 坐标产生影响，如图所示</p>
-<p><img src="/data/img/shader_30.png" alt="shader_30"></p>
+<p><img src="/img/shader_30.png" alt="shader_30"></p>
 <ol start="2">
 <li>映射输出窗口的对应像素坐标</li>
 </ol>

public/archives/2023/10/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/2023/11/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/2023/11/page/2/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/2023/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/2023/page/2/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

public/archives/page/2/index.html

@@ -555,25 +555,6 @@ React 语境下前端 DDD 的思考
           </a>
         </li>
         
-        <li>
-          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
-            <div class="timeline-info">
-              <span>10-23 12:01:13</span>
-            </div>
-            <div class="timeline-marker"></div>
-            <div class="timeline-content">
-              <div class="timeline-title">
-                
-                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
-                
-                <span>Cosy 入门</span>
-              </div>
-              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
-#...</p>
-            </div>
-          </a>
-        </li>
-        
         <li>
           <a class="timeline-item" href="/2023/10/23/Markdown%20Sample/">
             <div class="timeline-info">
@@ -593,6 +574,25 @@ Heading 1 link Heading linkHeading 2 link Heading linkHeading 3 link Heading ...
           </a>
         </li>
         
+        <li>
+          <a class="timeline-item" href="/2023/10/23/Cosy-Starter-Guide/">
+            <div class="timeline-info">
+              <span>10-23 12:01:13</span>
+            </div>
+            <div class="timeline-marker"></div>
+            <div class="timeline-content">
+              <div class="timeline-title">
+                
+                <span class="icon status tip right" data-tip="In Progress"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h4L18.5 9.5a1.5 1.5 0 0 0-4-4L4 16v4"></path><path d="M13.5 6.5l4 4"></path></g></svg></span>
+                
+                <span>Cosy 入门</span>
+              </div>
+              <p>Hexo 安装主题Hexo 主题的安装方式非常简单，只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下，然后在 Hexo 的 _config.yml 中修改下主题配置即可
+#...</p>
+            </div>
+          </a>
+        </li>
+        
         <li>
           <a class="timeline-item" href="/2023/10/20/front-end/verdaccio/">
             <div class="timeline-info">

source/_posts/front-end/Unity Shader入门精要.md

@@ -11,7 +11,7 @@ status: done
 
 用于渲染二维或三维图形。可以说，这些接口架起了上层应用程序和底层 GPU 的沟通桥梁。一个应用程序向这些接口发送渲染命令，而这些接口会依次向显卡驱动（Graphics Driver）发送渲染命令，这些显卡驱动是真正知道如何和 GPU 通信的角色，正是它们把 OpenGL 或者 DirectX 的函数调用翻译成了 GPU 能够听懂的语言，同时它们也负责把纹理等数据转换成 GPU 所支持的格式。一个比喻是，显卡驱动就是显卡的操作系统。
 
-![shader_7](/data/img/shader_7.png)
+![shader_7](/img/shader_7.png)
 
 # 什么是 HLSL、GLSL、CG
 
@@ -31,7 +31,7 @@ HLSL、GLSL、CG 都是“高级（High-Level）”语言，但这种高级是
 
 当 GPU 从 CPU 那里得到渲染命令后，就会进行一系列流水线操作，最终把图元渲染到屏幕上。
 
-![shader_1](/data/img/shader_1.png)
+![shader_1](/img/shader_1.png)
 
 - 顶点着色器（Vertex Shader）是完全可编程的，它通常用于实现顶点的空间变换、顶点着色等功能
 
@@ -51,7 +51,7 @@ CPU 输入进来的每个顶点都会调用一次顶点着色器。顶点着色
 
 - 坐标变换：把顶点坐标转换到齐次裁剪坐标系下，接着通常再由硬件做透视除法后，最终得到归一化的设备坐标(NDC)
 
-![shader_2](/data/img/shader_2.png)
+![shader_2](/img/shader_2.png)
 
 > 在 DirectX 中，NDC 的 z 方向取值范围是[0,1]，在 OpenGL 环境下是-1.0，DirectX 中是 0.0
 
@@ -61,13 +61,13 @@ CPU 输入进来的每个顶点都会调用一次顶点着色器。顶点着色
 
 只有在单位立方体的图元才需要被继续处
 
-![shader_3](/data/img/shader_3.png)
+![shader_3](/img/shader_3.png)
 
 ## 屏幕映射
 
 OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最小的窗口坐标值，而 DirectX 则定义了屏幕的左上角为最小的窗口坐标值
 
-![shader_4](/data/img/shader_4.png)
+![shader_4](/img/shader_4.png)
 
 ## 光栅阶段
 
@@ -83,7 +83,7 @@ OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最
 
 2. 使用三角网格 3 个顶点的顶点信息对整个覆盖区域的像素进行插值
 
-![shader_5](/data/img/shader_5.png)
+![shader_5](/img/shader_5.png)
 
 这一步的输出就是得到一个片元序列。需要注意的是，一个片元并不是真正意义上的像素，而是包含了很多状态的集合，这些状态用于计算每个像素的最终颜色。这些状态包括了（但不限于）它的屏幕坐标、深度信息，以及其他从几何阶段输出的顶点信息，例如法线、纹理坐标等。
 
@@ -93,7 +93,7 @@ OpenGL 和 DirectX 之间的差异问题。OpenGL 把屏幕的左下角当成最
 
 > 在 DirectX 中，片元着色器被称为像素着色器（Pixel Shader）但片元着色器是一个更合适的名字，因为此时的片元并不是一个真正意义上的像素。
 
-![shader_6](/data/img/shader_6.png)
+![shader_6](/img/shader_6.png)
 
 ## 逐片元操作
 
@@ -278,9 +278,9 @@ Unity 使用的是左手坐标系
 
 ## 左右手
 
-![shader_8](/data/img/shader_8.png)
+![shader_8](/img/shader_8.png)
 
-![shader_9](/data/img/shader_9.png)
+![shader_9](/img/shader_9.png)
 
 ## 向量(矢量)
 
@@ -288,7 +288,7 @@ Unity 使用的是左手坐标系
 
 矢量的模是一个标量，可以理解为是矢量在空间中的长度。它的表示符号通常是在矢量两旁分别加上一条垂直线
 
-![shader_10](/data/img/shader_10.png)
+![shader_10](/img/shader_10.png)
 
 ### 单位矢量
 
@@ -296,7 +296,7 @@ Unity 使用的是左手坐标系
 
 单位矢量指的是那些模为 1 的矢量。单位矢量也被称为被归一化的矢量（normalized vector）。对任何给定的非零矢量，把它转换成单位矢量的过程就被称为归一化
 
-![shader_11](/data/img/shader_11.png)
+![shader_11](/img/shader_11.png)
 
 ### 点积
 
@@ -310,23 +310,23 @@ Unity 使用的是左手坐标系
 
 几何意义，一个和已有两个向量都垂直的向量，法向量
 
-![shader_16](/data/img/shader_16.png)
+![shader_16](/img/shader_16.png)
 
 向量 a 和向量 b：
 
-![shader_12](/data/img/shader_12.png)
+![shader_12](/img/shader_12.png)
 
 叉乘公式为：
 
-![shader_13](/data/img/shader_13.png)
+![shader_13](/img/shader_13.png)
 
 其中：
 
-![shader_14](/data/img/shader_14.png)
+![shader_14](/img/shader_14.png)
 
 根据 i、j、k 间关系，有：
 
-![shader_15](/data/img/shader_15.png)
+![shader_15](/img/shader_15.png)
 
 例如
 
@@ -340,7 +340,7 @@ Unity 使用的是左手坐标系
 
 点的 x、y、z 分量分别增加了一个位置偏移。在 3D 中的可视化效果是，把点(x, y, z)在空间中平移了(tx, ty, tz)个单位
 
-![shader_17](/data/img/shader_17.png)
+![shader_17](/img/shader_17.png)
 
 ## 缩放矩阵
 
@@ -350,15 +350,15 @@ Unity 使用的是左手坐标系
 
 如果我们需要把点绕着 x 轴旋转 θ 度
 
-![shader_18](/data/img/shader_18.png)
+![shader_18](/img/shader_18.png)
 
 绕 y 轴的旋转
 
-![shader_19](/data/img/shader_19.png)
+![shader_19](/img/shader_19.png)
 
 绕 z 轴的旋转
 
-![shader_20](/data/img/shader_20.png)
+![shader_20](/img/shader_20.png)
 
 ## 复合变换
 
@@ -366,13 +366,13 @@ Unity 使用的是左手坐标系
 
 > 矩阵乘法注意顺序
 
-![shader_21](/data/img/shader_21.png)
+![shader_21](/img/shader_21.png)
 
 > ?? 如果我们需要同时绕着 3 个轴进行旋转，是先绕 x 轴、再绕 y 轴最后绕 z 轴旋转还是按其他的旋转顺序呢？
 
 根据坐标系，需要调整轴的顺序
 
-![shader_22](/data/img/shader_22.png)
+![shader_22](/img/shader_22.png)
 
 ## 法线变换
 
@@ -390,7 +390,7 @@ Unity 使用的是左手坐标系
 
 > Unity 在模型空间中使用的是左手坐标系，因此在模型空间中，+x 轴、+y 轴、+z 轴分别对应的是模型的右、上和前向。
 
-![shader_24](/data/img/shader_24.png)
+![shader_24](/img/shader_24.png)
 
 ## 世界空间
 
@@ -410,14 +410,14 @@ A：Unity 在模型空间和世界空间中选用的都是左手坐标系，而
 
 用于变换的矩阵叫做裁剪矩阵（clip matrix），也被称为投影矩阵（projection matrix）。位于这块空间内部的图元将会被保留，否则他剔除。由视锥体（view frustum）来决定。
 
-![shader_26](/data/img/shader_26.png)
+![shader_26](/img/shader_26.png)
 
 视锥体：指的是空间中的一块区域，这块区域决定了摄像机可以看到的空间。视锥体由六个平面包围而成，这些平面也被称为裁剪平面（clip planes）。视锥体有两种类型，这涉及两种投影类型：
 
 - 正交投影（orthographic projection）：所有的网格大小都一样，而且平行线会一直保持平行
 - 透视投影（perspective projection）：地板上的平行线并不会保持平行，离摄像机越近网格越大，离摄像机越远网格越小。
 
-![shader_25](/data/img/shader_25.png)
+![shader_25](/img/shader_25.png)
 
 > 追求真实感的 3D 游戏中我们往往会使用透视投影，而在一些 2D 游戏或渲染小地图等其他 HUD 元素时，我们会使用正交投影
 
@@ -425,13 +425,13 @@ A：Unity 在模型空间和世界空间中选用的都是左手坐标系，而
 
 在 Unity 中，一个摄像机的横纵比由 Game 视图的横纵比和 Viewport Rect 中的 `W` 和 `H` 属性共同决定（实际上，Unity 允许我们在脚本里通过 `Camera.aspect` 进行更改，但这里不做讨论）
 
-![shader_27](/data/img/shader_27.png)
+![shader_27](/img/shader_27.png)
 
 ### 正交摄像机视锥体模型
 
 通过 Camera 组件的 `Size` 属性来改变视锥体竖直方向上高度的一半，而 Clipping Planes 中的 Near 和 Far 参数可以控制视锥体的近裁剪平面和远裁剪平面距离摄像机的远近。
 
-![shader_28](/data/img/shader_28.png)
+![shader_28](/img/shader_28.png)
 
 ## 屏幕空间
 
@@ -443,11 +443,11 @@ A：Unity 在模型空间和世界空间中选用的都是左手坐标系，而
 
 经过透视投影变换后的裁剪空间，经过齐次除法后会变换到一个立方体内。按照 OpenGL 的传统，这个立方体的 x、y、z 分量的范围都是[-1, 1]。但在 DirectX 这样的 API 中，z 分量的范围会是[0, 1]。而 Unity 选择了 OpenGL 这样的齐次裁剪空间，如图所示
 
-![shader_29](/data/img/shader_29.png)
+![shader_29](/img/shader_29.png)
 
 而对于正交投影来说，它的裁剪空间实际已经是一个立方体了，而且由于经过正交投影矩阵变换后的顶点的 w 分量是 1，因此齐次除法并不会对顶点的 x、y、z 坐标产生影响，如图所示
 
-![shader_30](/data/img/shader_30.png)
+![shader_30](/img/shader_30.png)
 
 2. 映射输出窗口的对应像素坐标