731 lines
61 KiB
HTML
731 lines
61 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>
|
||
Unity Shader入门精要
|
||
</title>
|
||
<meta name="description" content="">
|
||
<meta name="keywords" content="">
|
||
<meta name="author" content="Mozzie">
|
||
<link rel="canonical" href="https://mozzie.cn/2023/11/06/clop66k0d000m6ez3b0mz4mb4/">
|
||
|
||
|
||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<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="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/css/4d4ea9c6.css">
|
||
|
||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||
|
||
<body id="app">
|
||
<!-- 响应式布局按钮 -->
|
||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||
<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">
|
||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||
<path d="M9 4v16"></path>
|
||
</g>
|
||
</svg>
|
||
</a>
|
||
<aside>
|
||
<div>
|
||
|
||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||
|
||
|
||
<div class="home-bar">
|
||
<a href="/" class="tip" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
<span>Mozzie</span>
|
||
</a>
|
||
<!-- 切换主题 -->
|
||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path
|
||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||
fill="currentColor"></path>
|
||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path
|
||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||
fill="currentColor"></path>
|
||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<script src="/js/ae2a0e7b.js"></script>
|
||
|
||
<!-- search -->
|
||
|
||
|
||
<link rel="stylesheet" href="/css/82dd7e5a.css">
|
||
|
||
<form class="search-group">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="currentColor">
|
||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
<span id="search-input">Search...</span>
|
||
<div class="short-key">
|
||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||
</div>
|
||
</form>
|
||
|
||
<script>
|
||
window.algolia = {
|
||
appId: "5DTW808BZ8",
|
||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||
}
|
||
window.search = {
|
||
enable: "true"
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/b9c2be9c.js"></script>
|
||
|
||
|
||
<!-- navigation -->
|
||
|
||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||
|
||
|
||
<section class="category-nav scrollbar-obtrusive">
|
||
<ul class="nav-items">
|
||
<li data-path="archives">
|
||
<a href="/archives">
|
||
<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="M12 7v14"></path>
|
||
<path d="M9 18l3 3l3-3"></path>
|
||
<circle cx="12" cy="5" r="2"></circle>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Timeline</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="roadmap">
|
||
<a href="/roadmap">
|
||
<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="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||
<path d="M13 9l2 2l-2 2"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Roadmap</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="resume">
|
||
<a href="/resume">
|
||
<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="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||
<circle cx="6" cy="14" r="3"></circle>
|
||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Resume</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<p>Category</p>
|
||
<ul>
|
||
|
||
<li class="">
|
||
<a href="/categories/EQ/">
|
||
<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="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
EQ
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/categories/Hexo/">
|
||
<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 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Hexo
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="">
|
||
<a href="/categories/Finance/">
|
||
<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"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Finance
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="active">
|
||
<a href="/categories/Front-End/">
|
||
<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="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>
|
||
Front-End
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<script src="/js/f8b20eb9.js"></script>
|
||
|
||
<!-- icp -->
|
||
|
||
<div class="icp">
|
||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
|
||
<link rel="stylesheet" href="/css/daabfbd2.css">
|
||
|
||
|
||
<div class="post-container">
|
||
<div class="content">
|
||
<header>
|
||
|
||
<link rel="stylesheet" href="/css/de5de8fb.css">
|
||
|
||
<nav class="breadcrumb">
|
||
<a href="/" class="home tip btn-hover right" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
|
||
<em>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</em>
|
||
<a href="/categories/Front-End/">
|
||
Front-End
|
||
</a>
|
||
|
||
|
||
|
||
<em>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</em>
|
||
<span class="ellipsis">
|
||
Unity Shader入门精要
|
||
</span>
|
||
|
||
</nav>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
</header>
|
||
<main class="scrollbar-obtrusive">
|
||
<div class="article-container">
|
||
<!-- 文章tags -->
|
||
|
||
<!-- 渲染文章内容 -->
|
||
<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="/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>
|
||
<li><p>DirectX 的 HLSL（High Level Shading Language）</p>
|
||
</li>
|
||
<li><p>OpenGL 的 GLSL（OpenGL Shading Language）</p>
|
||
</li>
|
||
<li><p>NVIDIA 的 CG（C for Graphic）。</p>
|
||
</li>
|
||
</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="/img/shader_1.png" alt="shader_1"></p>
|
||
<ul>
|
||
<li><p>顶点着色器（Vertex Shader）是完全可编程的，它通常用于实现顶点的空间变换、顶点着色等功能</p>
|
||
</li>
|
||
<li><p>曲面细分着色器（Tessellation Shader）是一个可选的着色器，它用于细分图元</p>
|
||
</li>
|
||
<li><p>几何着色器（Geometry Shader）同样是一个可选的着色器，它可以被用于执行逐图元（Per-Primitive）的着色操作，或者被用于产生更多的图元</p>
|
||
</li>
|
||
<li><p>裁剪（Clipping），这一阶段的目的是将那些不在摄像机视野内的顶点裁剪掉，并剔除某些三角图元的面片。例如，我们可以使用自定义的裁剪平面来配置裁剪区域，也可以通过指令控制裁剪三角图元的正面还是背面。</p>
|
||
</li>
|
||
<li><p>片元着色器（Fragment Shader），则是完全可编程的，它用于实现逐片元（Per-Fragment）的着色操作</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="顶点着色器-Vertex-Shader"><a href="#顶点着色器-Vertex-Shader" class="headerlink" title="顶点着色器 Vertex Shader"></a>顶点着色器 Vertex Shader</h2><p>CPU 输入进来的每个顶点都会调用一次顶点着色器。顶点着色器本身不可以创建或者销毁任何顶点，而且无法得到顶点与顶点之间的关系。例如，我们无法得知两个顶点是否属于同一个三角网格。但正是因为这样的相互独立性，GPU 可以利用本身的特性并行化处理每一个顶点，这意味着这一阶段的处理速度会很快。</p>
|
||
<p>顶点着色器需要完成的工作主要有：</p>
|
||
<ul>
|
||
<li>坐标变换：把顶点坐标转换到齐次裁剪坐标系下，接着通常再由硬件做透视除法后，最终得到归一化的设备坐标(NDC)</li>
|
||
</ul>
|
||
<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>
|
||
<ul>
|
||
<li>逐顶点光照</li>
|
||
</ul>
|
||
<h2 id="裁剪"><a href="#裁剪" class="headerlink" title="裁剪"></a>裁剪</h2><p>只有在单位立方体的图元才需要被继续处</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="/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>
|
||
<li><p>扫描变换：三角形遍历（Triangle Traversal）阶段将会检查每个像素是否被一个三角网格所覆盖。如果被覆盖的话，就会生成一个片元（fragment）、</p>
|
||
</li>
|
||
<li><p>使用三角网格 3 个顶点的顶点信息对整个覆盖区域的像素进行插值</p>
|
||
</li>
|
||
</ol>
|
||
<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="/img/shader_6.png" alt="shader_6"></p>
|
||
<h2 id="逐片元操作"><a href="#逐片元操作" class="headerlink" title="逐片元操作"></a>逐片元操作</h2><p>这一阶段有几个主要任务:</p>
|
||
<ul>
|
||
<li><p>决定每个片元的可见性。这涉及了很多测试工作，例如深度测试、模板测试等。</p>
|
||
</li>
|
||
<li><p>如果一个片元通过了所有的测试，就需要把这个片元的颜色值和已经存储在颜色缓冲区中的颜色进行合并，或者说是混合。</p>
|
||
</li>
|
||
</ul>
|
||
<blockquote>
|
||
<p>!! 对于不透明物体，开发者可以关闭混合（Blend）操作。这样片元着色器计算得到的颜色值就会直接覆盖掉颜色缓冲区中的像素值。但对于半透明物体，我们就需要使用混合操作来让这个物体看起来是透明的。</p>
|
||
</blockquote>
|
||
<h2 id="Draw-Call"><a href="#Draw-Call" class="headerlink" title="Draw Call"></a>Draw Call</h2><p>CPU 调用图像编程接口，如 OpenGL 中的 <code>glDrawElements</code> 命令或者 DirectX 中的 <code>DrawIndexedPrimitive</code>命令，以命令 GPU 进行渲染的操作。</p>
|
||
<h3 id="CPU-和-GPU-是如何实现并行工作的？"><a href="#CPU-和-GPU-是如何实现并行工作的？" class="headerlink" title="CPU 和 GPU 是如何实现并行工作的？"></a>CPU 和 GPU 是如何实现并行工作的？</h3><p>如果没有流水线化，那么 CPU 需要等到 GPU 完成上一个渲染任务才能再次发送渲染命令。但这种方法显然会造成效率低下。解决方法就是使用一个命令缓冲区（Command Buffer）。</p>
|
||
<p>由 CPU 向其中添加命令，而由 GPU 从中读取命令，添加和读取的过程是互相独立的。</p>
|
||
<h3 id="为什么-Draw-Call-多了会影响帧率？"><a href="#为什么-Draw-Call-多了会影响帧率？" class="headerlink" title="为什么 Draw Call 多了会影响帧率？"></a>为什么 Draw Call 多了会影响帧率？</h3><p>每一个复制动作需要很多额外的操作，例如分配内存、创建各种元数据等。如你所见，这些操作将造成很多额外的性能开销，如果我们复制了很多小文件，那么这个开销将会很大</p>
|
||
<h3 id="如何减少-Draw-Call？"><a href="#如何减少-Draw-Call？" class="headerlink" title="如何减少 Draw Call？"></a>如何减少 Draw Call？</h3><p>尽管减少 Draw Call 的方法有很多，但我们这里仅讨论使用批处理（Batching）的方法。我们讲过，提交大量很小的 Draw Call 会造成 CPU 的性能瓶颈，即 CPU 把时间都花费在准备 Draw Call 的工作上了。那么，一个很显然的优化想法就是把很多小的 DrawCall 合并成一个大的 Draw Call，这就是批处理的思想。</p>
|
||
<p>在游戏开发过程中，为了减少 Draw Call 的开销，有两点需要注意。</p>
|
||
<ul>
|
||
<li><p>避免使用大量很小的网格。当不可避免地需要使用很小的网格结构时，考虑是否可以合并它们。</p>
|
||
</li>
|
||
<li><p>避免使用过多的材质。尽量在不同的网格之间共用同一个材质。</p>
|
||
</li>
|
||
</ul>
|
||
<h1 id="你明白什么是-Shader"><a href="#你明白什么是-Shader" class="headerlink" title="你明白什么是 Shader"></a>你明白什么是 Shader</h1><ul>
|
||
<li><p>GPU 流水线上一些可高度编程的阶段，而由着色器编译出来的最终代码是会在 GPU 上运行的（对于固定管线的渲染来说，着色器有时等同于一些特定的渲染设置）</p>
|
||
</li>
|
||
<li><p>有一些特定类型的着色器，如顶点着色器、片元着色器等</p>
|
||
</li>
|
||
<li><p>依靠着色器我们可以控制流水线中的渲染细节，例如用顶点着色器来进行顶点变换以及传递数据，用片元着色器来进行逐像素的渲染。</p>
|
||
</li>
|
||
</ul>
|
||
<h1 id="Unity-Shader"><a href="#Unity-Shader" class="headerlink" title="Unity Shader"></a>Unity Shader</h1><blockquote>
|
||
<p>!! Unity Shader ! = 真正的 Shader</p>
|
||
</blockquote>
|
||
<p>Unity Shader 实际上指的就是一个 ShaderLab 文件——硬盘上以．shader 作为文件后缀的一种文件，提供了一种让开发者同时控制渲染流水线中多个阶段的一种方式，不仅仅是提供 Shader 代码。</p>
|
||
<p>作为开发者而言，我们绝大部分时候只需要和 Unity Shader 打交道，而不需要关心渲染引擎底层的实现细节</p>
|
||
<p>Unity 编辑器会把这些 CG 片段编译成低级语言，如汇编语言等。通常，Unity 会自动把这些 CG 片段编译到所有相关平台（这里的平台是指不同的渲染平台，例如 Direct3D 9、OpenGL、Direct3D 11、OpenGL ES 等）上</p>
|
||
<h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><p>在没有 Unity 这类编辑器的情况下，如果我们想要对某个模型设置渲染状态，可能需要类似下面的代码：</p>
|
||
<p>上述伪代码仅仅是简化后的版本, 当渲染的模型数目、需要调整的着色器属性不断增多时，上述过程将变得更加复杂和冗长。</p>
|
||
<p>而且，当涉及透明物体等多物体的渲染时，如果没有编辑器的帮助，我们要非常小心如渲染顺序等问题。</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 初始化渲染设置</span>
|
||
<span class="token keyword">void</span> <span class="token function">Initialization</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 从硬盘上加载顶点着色器的代码</span>
|
||
string vertexShaderCode <span class="token operator">=</span> <span class="token function">LoadShaderFromFile</span><span class="token punctuation">(</span>VertexShader<span class="token punctuation">.</span>shader<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 从硬盘上加载片元着色器的代码</span>
|
||
string fragmentShaderCode <span class="token operator">=</span> <span class="token function">LoadShaderFromFile</span><span class="token punctuation">(</span>FragmentShader<span class="token punctuation">.</span>shader<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 把顶点着色器加载到GPU中</span>
|
||
<span class="token function">LoadVertexShaderFromString</span><span class="token punctuation">(</span>vertexShaderCode<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 把片元着色器加载到GPU中</span>
|
||
<span class="token function">LoadFragmentShaderFromString</span><span class="token punctuation">(</span>fragmentShaderCode<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 设置名为"vertexPosition"的属性的输入，即模型顶点坐标</span>
|
||
<span class="token function">SetVertexShaderProperty</span><span class="token punctuation">(</span><span class="token string">"vertexPosition"</span><span class="token punctuation">,</span> vertices<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 设置名为"MainTex"的属性的输入，someTexture是某张已加载的纹理</span>
|
||
<span class="token function">SetVertexShaderProperty</span><span class="token punctuation">(</span><span class="token string">"MainTex"</span><span class="token punctuation">,</span> someTexture<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 设置名为"MVP"的属性的输入，MVP是之前由开发者计算好的变换矩阵</span>
|
||
<span class="token function">SetVertexShaderProperty</span><span class="token punctuation">(</span><span class="token string">"MVP"</span><span class="token punctuation">,</span> <span class="token constant">MVP</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 关闭混合</span>
|
||
<span class="token function">Disable</span><span class="token punctuation">(</span>Blend<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 设置深度测试</span>
|
||
<span class="token function">Enable</span><span class="token punctuation">(</span>ZText<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token function">SetZTestFunction</span><span class="token punctuation">(</span>LessOrEqual<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 其他设置</span>
|
||
…
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 每一帧迚行渲染</span>
|
||
<span class="token keyword">void</span> <span class="token function">OnRendering</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 调用渲染命令</span>
|
||
<span class="token function">DrawCall</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 当涉及多种渲染设置时，我们可能还需要在这里改变各种渲染设置</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">}</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></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>
|
||
|
||
<p>VertexShader.shader：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 输入：顶点位置、纹理、MVP变换矩阵</span>
|
||
<span class="token keyword">in</span> float3 vertexPosition<span class="token punctuation">;</span>
|
||
<span class="token keyword">in</span> sampler2D MainTex<span class="token punctuation">;</span>
|
||
<span class="token keyword">in</span> Matrix4x4 <span class="token constant">MVP</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// 输出：顶点经过MVP变换后的位置</span>
|
||
out float4 position<span class="token punctuation">;</span>
|
||
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 使用MVP对模型顶点坐标迚行变换</span>
|
||
position <span class="token operator">=</span> <span class="token constant">MVP</span> ＊ vertexPosition<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</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></code></pre>
|
||
|
||
<p>FragmentShader.shader：</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 输入：VertexShader输出的position、经过光栅化程序插值后的该片元对应的position</span>
|
||
<span class="token keyword">in</span> float4 position<span class="token punctuation">;</span>
|
||
<span class="token comment">// 输出：该片元的颜色值</span>
|
||
out float4 fragColor<span class="token punctuation">;</span>
|
||
<span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// 将片元颜色设为白色</span>
|
||
fragColor <span class="token operator">=</span> <span class="token function">float4</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">,</span> <span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</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></code></pre>
|
||
|
||
<h2 id="材质和-Unity-Shader"><a href="#材质和-Unity-Shader" class="headerlink" title="材质和 Unity Shader"></a>材质和 Unity Shader</h2><p>总体来说，在 Unity 中我们需要配合使用材质（Material）和 Unity Shader 才能达到需要的效果。一个最常见的流程是：</p>
|
||
<ul>
|
||
<li><p>创建一个材质</p>
|
||
</li>
|
||
<li><p>创建一个 Unity Shader，并把它赋给上一步中创建的材质</p>
|
||
</li>
|
||
<li><p>把材质赋给要渲染的对象</p>
|
||
</li>
|
||
<li><p>在材质面板中调整 Unity Shader 的属性，如使用的纹理、漫反射系数</p>
|
||
</li>
|
||
</ul>
|
||
<h2 id="Unity-表面着色器"><a href="#Unity-表面着色器" class="headerlink" title="Unity 表面着色器"></a>Unity 表面着色器</h2><p>表面着色器（Surface Shader）是 Unity 自己创造的一种着色器代码类型。它需要的代码量很少，Unity 在背后做了很多工作，但渲染的代价比较大。它在本质上和下面要讲到的顶点/片元着色器是一样的。也就是说，当给 Unity 提供一个表面着色器的时候，它在背后仍旧把它转换成对应的顶点/片元着色器。我们可以理解成，表面着色器是 Unity 对顶点/片元着色器的更高一层的抽象。它存在的价值在于，Unity 为我们处理了很多光照细节，使得我们不需要再操心这些“烦人的事情”。</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">Shader <span class="token string">"Custom/Simple Surface Shader"</span> <span class="token punctuation">{</span>
|
||
SubShader <span class="token punctuation">{</span>
|
||
Tags <span class="token punctuation">{</span> <span class="token string">"RenderType"</span> <span class="token operator">=</span> <span class="token string">"Opaque"</span> <span class="token punctuation">}</span>
|
||
<span class="token constant">CGPROGRAM</span>
|
||
#pragma surface surf Lambert
|
||
struct Input <span class="token punctuation">{</span>
|
||
float4 color <span class="token operator">:</span> <span class="token constant">COLOR</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">void</span> <span class="token function">surf</span> <span class="token punctuation">(</span><span class="token parameter">Input <span class="token constant">IN</span><span class="token punctuation">,</span> inout SurfaceOutput o</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
o<span class="token punctuation">.</span>Albedo <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token constant">ENDCG</span>
|
||
<span class="token punctuation">}</span>
|
||
Fallback <span class="token string">"Diffuse"</span>
|
||
<span class="token punctuation">}</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></code></pre>
|
||
|
||
<h2 id="顶点-x2F-片元着色器"><a href="#顶点-x2F-片元着色器" class="headerlink" title="顶点/片元着色器"></a>顶点/片元着色器</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">Shader <span class="token string">"Custom/Simple VertexFragment Shader"</span> <span class="token punctuation">{</span>
|
||
SubShader <span class="token punctuation">{</span>
|
||
Pass <span class="token punctuation">{</span>
|
||
<span class="token constant">CGPROGRAM</span>
|
||
#pragma vertex vert
|
||
#pragma fragment frag
|
||
float4 <span class="token function">vert</span><span class="token punctuation">(</span>float4 v <span class="token operator">:</span> <span class="token constant">POSITION</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token constant">SV_POSITION</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">mul</span> <span class="token punctuation">(</span><span class="token constant">UNITY_MATRIX_MVP</span><span class="token punctuation">,</span> v<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
fixed4 <span class="token function">frag</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> SV_Target <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token function">fixed4</span><span class="token punctuation">(</span><span class="token number">1.0</span><span class="token punctuation">,</span><span class="token number">0.0</span><span class="token punctuation">,</span><span class="token number">0.0</span><span class="token punctuation">,</span><span class="token number">1.0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token constant">ENDCG</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</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="/img/shader_8.png" alt="shader_8"></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="/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="/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="/img/shader_16.png" alt="shader_16"></p>
|
||
<p>向量 a 和向量 b：</p>
|
||
<p><img src="/img/shader_12.png" alt="shader_12"></p>
|
||
<p>叉乘公式为：</p>
|
||
<p><img src="/img/shader_13.png" alt="shader_13"></p>
|
||
<p>其中：</p>
|
||
<p><img src="/img/shader_14.png" alt="shader_14"></p>
|
||
<p>根据 i、j、k 间关系，有：</p>
|
||
<p><img src="/img/shader_15.png" alt="shader_15"></p>
|
||
<p>例如</p>
|
||
<p>(1,2,3)×(-2,-1,4) = (2 × 4 - 3 × -1, 3 × -2 - 1 × 4, 1 × -1 - 2 × -2) = (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="/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="/img/shader_18.png" alt="shader_18"></p>
|
||
<p>绕 y 轴的旋转</p>
|
||
<p><img src="/img/shader_19.png" alt="shader_19"></p>
|
||
<p>绕 z 轴的旋转</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="/img/shader_21.png" alt="shader_21"></p>
|
||
<blockquote>
|
||
<p>?? 如果我们需要同时绕着 3 个轴进行旋转，是先绕 x 轴、再绕 y 轴最后绕 z 轴旋转还是按其他的旋转顺序呢？</p>
|
||
</blockquote>
|
||
<p>根据坐标系，需要调整轴的顺序</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>
|
||
<h2 id="模型空间"><a href="#模型空间" class="headerlink" title="模型空间"></a>模型空间</h2><p>每个模型都有自己独立的坐标空间，当它移动或旋转的时候，模型空间也会跟着它移动和旋转。</p>
|
||
<blockquote>
|
||
<p>Unity 在模型空间中使用的是左手坐标系，因此在模型空间中，+x 轴、+y 轴、+z 轴分别对应的是模型的右、上和前向。</p>
|
||
</blockquote>
|
||
<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>
|
||
<p>Unity 中观察空间的坐标轴选择是：+x 轴指向右方，+y 轴指向上方，而+z 轴指向的是摄像机的后方</p>
|
||
</blockquote>
|
||
<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="/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="/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="/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="/img/shader_28.png" alt="shader_28"></p>
|
||
<h2 id="屏幕空间"><a href="#屏幕空间" class="headerlink" title="屏幕空间"></a>屏幕空间</h2><blockquote>
|
||
<p>在 Unity 中，从裁剪空间到屏幕空间的转换是由 Unity 帮我们完成的。</p>
|
||
</blockquote>
|
||
<p>屏幕空间是一个二维空间，因此，我们必须把顶点从裁剪空间投影到屏幕空间中，来生成对应的 2D 坐标。这个过程可以理解成有两个步骤:</p>
|
||
<ol>
|
||
<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="/img/shader_29.png" alt="shader_29"></p>
|
||
<p>而对于正交投影来说，它的裁剪空间实际已经是一个立方体了，而且由于经过正交投影矩阵变换后的顶点的 w 分量是 1，因此齐次除法并不会对顶点的 x、y、z 坐标产生影响，如图所示</p>
|
||
<p><img src="/img/shader_30.png" alt="shader_30"></p>
|
||
<ol start="2">
|
||
<li>映射输出窗口的对应像素坐标</li>
|
||
</ol>
|
||
<h2 id="Unity-内置变换矩阵"><a href="#Unity-内置变换矩阵" class="headerlink" title="Unity 内置变换矩阵"></a>Unity 内置变换矩阵</h2><table>
|
||
<thead>
|
||
<tr>
|
||
<th>变量名</th>
|
||
<th>描述</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody><tr>
|
||
<td>UNITY MATRIX MVP</td>
|
||
<td>当前的模型·观察·投影矩阵，用于将顶点/方向矢量从模型空间变换到裁剪空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX MV</td>
|
||
<td>当前的模型·观察矩阵，用于将顶点/方向矢量从模型空间变换到观察空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX V</td>
|
||
<td>当前的观察矩阵，用于将顶点/方向矢量从世界空间变换到观察空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX P</td>
|
||
<td>当前的投影矩阵，用于将顶点/方向矢量从观察空间变换到裁剪空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX VP</td>
|
||
<td>当前的观察投影矩阵，用于将顶点/方向矢量从世界空间变换到裁剪空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX T MV</td>
|
||
<td>UNITYMATRIX MV 的转置矩阵</td>
|
||
</tr>
|
||
<tr>
|
||
<td>UNITY MATRIX IT MV</td>
|
||
<td>UNITYMATRIX MV 的逆转置矩阵，用于将法线从模型空间变换到观察空间，也可用于得到 UNITYMATRIXMV 的逆矩阵</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Object2World</td>
|
||
<td>当前的模型矩阵，用于将顶点/方向矢量从模型空间变换到世界空间</td>
|
||
</tr>
|
||
<tr>
|
||
<td>World2Object</td>
|
||
<td>Object2World 的逆矩阵，用于将顶点/方向矢量从世界空间变换到模型空间</td>
|
||
</tr>
|
||
</tbody></table>
|
||
</article>
|
||
|
||
|
||
<link rel="stylesheet" href="/css/80d65618.css">
|
||
|
||
|
||
<div class="copyright">
|
||
<a target="_blank" href="https://mozzie.cn/2023/11/06/clop66k0d000m6ez3b0mz4mb4/">
|
||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6v13"></path>
|
||
<path d="M12 6v13"></path>
|
||
<path d="M21 6v13"></path>
|
||
</g>
|
||
</svg>
|
||
<span>Unity Shader入门精要</span>
|
||
</a>
|
||
<ul>
|
||
<li>
|
||
<span>Author</span>
|
||
<p> Mozzie</p>
|
||
</li>
|
||
<li>
|
||
<span>Published on</span>
|
||
<p>2023-11-06</p>
|
||
</li>
|
||
<li>
|
||
<span>License</span>
|
||
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
|
||
<!-- 评论 -->
|
||
<div id="vcomments"></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="meta-container">
|
||
<div class="toc-wrapper content-dialog">
|
||
<p class="catalog">
|
||
<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 6h16"></path>
|
||
<path d="M4 12h16"></path>
|
||
<path d="M4 18h12"></path>
|
||
</g>
|
||
</svg>
|
||
<span>Catalog</span>
|
||
</p>
|
||
<!-- 文章toc -->
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-OpenGL%E3%80%81DirectX"><span class="toc-number">1.</span> <span class="toc-text">什么是 OpenGL、DirectX</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF-HLSL%E3%80%81GLSL%E3%80%81CG"><span class="toc-number">2.</span> <span class="toc-text">什么是 HLSL、GLSL、CG</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#GPU-%E6%B5%81%E6%B0%B4%E7%BA%BF"><span class="toc-number">3.</span> <span class="toc-text">GPU 流水线</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8-Vertex-Shader"><span class="toc-number">3.1.</span> <span class="toc-text">顶点着色器 Vertex Shader</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A3%81%E5%89%AA"><span class="toc-number">3.2.</span> <span class="toc-text">裁剪</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%8F%E5%B9%95%E6%98%A0%E5%B0%84"><span class="toc-number">3.3.</span> <span class="toc-text">屏幕映射</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%89%E6%A0%85%E9%98%B6%E6%AE%B5"><span class="toc-number">3.4.</span> <span class="toc-text">光栅阶段</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E8%A7%92%E5%BD%A2%E8%AE%BE%E7%BD%AE"><span class="toc-number">3.4.1.</span> <span class="toc-text">三角形设置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E8%A7%92%E5%BD%A2%E9%81%8D%E5%8E%86"><span class="toc-number">3.4.2.</span> <span class="toc-text">三角形遍历()</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8-Fragment-Shader"><span class="toc-number">3.5.</span> <span class="toc-text">片元着色器 Fragment Shader</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%80%90%E7%89%87%E5%85%83%E6%93%8D%E4%BD%9C"><span class="toc-number">3.6.</span> <span class="toc-text">逐片元操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Draw-Call"><span class="toc-number">3.7.</span> <span class="toc-text">Draw Call</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CPU-%E5%92%8C-GPU-%E6%98%AF%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%B9%B6%E8%A1%8C%E5%B7%A5%E4%BD%9C%E7%9A%84%EF%BC%9F"><span class="toc-number">3.7.1.</span> <span class="toc-text">CPU 和 GPU 是如何实现并行工作的？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88-Draw-Call-%E5%A4%9A%E4%BA%86%E4%BC%9A%E5%BD%B1%E5%93%8D%E5%B8%A7%E7%8E%87%EF%BC%9F"><span class="toc-number">3.7.2.</span> <span class="toc-text">为什么 Draw Call 多了会影响帧率？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%87%8F%E5%B0%91-Draw-Call%EF%BC%9F"><span class="toc-number">3.7.3.</span> <span class="toc-text">如何减少 Draw Call？</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%A0%E6%98%8E%E7%99%BD%E4%BB%80%E4%B9%88%E6%98%AF-Shader"><span class="toc-number">4.</span> <span class="toc-text">你明白什么是 Shader</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Unity-Shader"><span class="toc-number">5.</span> <span class="toc-text">Unity Shader</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80"><span class="toc-number">5.1.</span> <span class="toc-text">基础</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9D%90%E8%B4%A8%E5%92%8C-Unity-Shader"><span class="toc-number">5.2.</span> <span class="toc-text">材质和 Unity Shader</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Unity-%E8%A1%A8%E9%9D%A2%E7%9D%80%E8%89%B2%E5%99%A8"><span class="toc-number">5.3.</span> <span class="toc-text">Unity 表面着色器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B6%E7%82%B9-x2F-%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8"><span class="toc-number">5.4.</span> <span class="toc-text">顶点/片元着色器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9D%90%E6%A0%87%E7%B3%BB"><span class="toc-number">6.</span> <span class="toc-text">坐标系</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B7%A6%E5%8F%B3%E6%89%8B"><span class="toc-number">6.1.</span> <span class="toc-text">左右手</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%91%E9%87%8F-%E7%9F%A2%E9%87%8F"><span class="toc-number">6.2.</span> <span class="toc-text">向量(矢量)</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1"><span class="toc-number">6.2.1.</span> <span class="toc-text">模</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%95%E4%BD%8D%E7%9F%A2%E9%87%8F"><span class="toc-number">6.2.2.</span> <span class="toc-text">单位矢量</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E7%A7%AF"><span class="toc-number">6.2.3.</span> <span class="toc-text">点积</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%91%E9%87%8F%E7%A7%AF-%E2%88%A7-%C3%97"><span class="toc-number">6.2.4.</span> <span class="toc-text">向量积 ∧ ×</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%9F%A9%E9%98%B5%E5%8F%98%E6%8D%A2-Vec4"><span class="toc-number">7.</span> <span class="toc-text">矩阵变换 Vec4</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B9%B3%E7%A7%BB%E7%9F%A9%E9%98%B5"><span class="toc-number">7.1.</span> <span class="toc-text">平移矩阵</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%A9%E6%94%BE%E7%9F%A9%E9%98%B5"><span class="toc-number">7.2.</span> <span class="toc-text">缩放矩阵</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%8B%E8%BD%AC%E7%9F%A9%E9%98%B5"><span class="toc-number">7.3.</span> <span class="toc-text">旋转矩阵</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%90%88%E5%8F%98%E6%8D%A2"><span class="toc-number">7.4.</span> <span class="toc-text">复合变换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%95%E7%BA%BF%E5%8F%98%E6%8D%A2"><span class="toc-number">7.5.</span> <span class="toc-text">法线变换</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9D%90%E6%A0%87%E7%A9%BA%E9%97%B4"><span class="toc-number">8.</span> <span class="toc-text">坐标空间</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9E%8B%E7%A9%BA%E9%97%B4"><span class="toc-number">8.1.</span> <span class="toc-text">模型空间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%96%E7%95%8C%E7%A9%BA%E9%97%B4"><span class="toc-number">8.2.</span> <span class="toc-text">世界空间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%91%84%E5%83%8F%E6%9C%BA%E7%A9%BA%E9%97%B4"><span class="toc-number">8.3.</span> <span class="toc-text">摄像机空间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A3%81%E5%89%AA%E7%A9%BA%E9%97%B4"><span class="toc-number">8.4.</span> <span class="toc-text">裁剪空间</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%8F%E8%A7%86%E6%91%84%E5%83%8F%E6%9C%BA%E8%A7%86%E9%94%A5%E4%BD%93%E6%A8%A1%E5%9E%8B"><span class="toc-number">8.4.1.</span> <span class="toc-text">透视摄像机视锥体模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AD%A3%E4%BA%A4%E6%91%84%E5%83%8F%E6%9C%BA%E8%A7%86%E9%94%A5%E4%BD%93%E6%A8%A1%E5%9E%8B"><span class="toc-number">8.4.2.</span> <span class="toc-text">正交摄像机视锥体模型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%8F%E5%B9%95%E7%A9%BA%E9%97%B4"><span class="toc-number">8.5.</span> <span class="toc-text">屏幕空间</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Unity-%E5%86%85%E7%BD%AE%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5"><span class="toc-number">8.6.</span> <span class="toc-text">Unity 内置变换矩阵</span></a></li></ol></li></ol>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.page = {
|
||
use: ''
|
||
}
|
||
window.katex = {
|
||
enable: "",
|
||
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
|
||
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
|
||
}
|
||
window.mermaid = {
|
||
enable: "",
|
||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||
}
|
||
window.valine = {
|
||
enable: "",
|
||
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
|
||
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
|
||
avatar: 'monsterid',
|
||
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
|
||
serverURLs: '//tismit6u.api.lncldglobal.com'
|
||
};
|
||
</script>
|
||
|
||
|
||
<script src="/js/24e1d5fd.js"></script>
|
||
|
||
</main>
|
||
</body>
|
||
<script>
|
||
window.i18n = {
|
||
"tip-collapse": "Collapse",
|
||
"tip-expand": "Expand",
|
||
"text-select": "select",
|
||
"text-move": "movement",
|
||
"text-esc": "close",
|
||
"tip-status-done": "Done",
|
||
"tip-status-doing": "In Progress",
|
||
"tip-status-todo": "Todo",
|
||
"tip-status-other": "Duplicate",
|
||
"tip-status-default": "Default",
|
||
"tip-roadmap-today": "Positioning to the today",
|
||
"text-search": "Search...",
|
||
"text-today": "Today",
|
||
// month
|
||
"January": "January",
|
||
"February": "February",
|
||
"March": "March",
|
||
"April": "April",
|
||
"May": "May",
|
||
"June": "June",
|
||
"July": "July",
|
||
"August": "August",
|
||
"September": "September",
|
||
"October": "October",
|
||
"November": "November",
|
||
"December": "December",
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/58c91c4e.js"></script>
|
||
|
||
|
||
</html> |