<p align="center">計算機圖形學</p>

介紹

計算機圖形學(Computer Graphics，簡稱CG)是一種使用數學算法將二維或三維圖形轉化為計算機顯示器的柵格形式的科學，==所有計算機學科中正反饋最強的一個，沒有之一==。

大綱

1. 數學

2. 渲染管線

3. 光照模型

<p align="center">數學</p>

<p align="center">一切科學都起源于數學</p>

<p align="center">渲染管線</p>

• 渲染管線，也稱渲染流水線，是顯示芯片內部處理圖形信號相互獨立的并行處理單元。渲染管線就是要把一系列的頂點數據，紋理等信息，最終轉換成一張人眼可以看到的圖像。這個過程由CPU和GPU共同完成。

<p align="center">頂點數據為[(1, 1, 1), [1, -1, 1]...]的正方形</p>

<p align="center">↓</p>

1. 準備階段（Input Assembler）

通過索引來定義如何將頂點組成三角形，構成面片

<p align="center">

</p>

<p align="center">↓</p>

<p align="center">

</p>

<p align="center">一個平面是由兩個三角形組成的</p>

<p align="center">

</p>

2. 頂點著色器（Vertex Shader）

a. 局部坐標系（Local）

獲取各個頂點的位置，并表示為矩陣[(1, 1, 1), [1, -1, 1]...]

b. 世界坐標系（World）

將模型通過平移、旋轉、縮放操作，實質是矩陣操作，將模型從局部坐標軸統一到世界坐標軸。
這些平移旋轉縮放矩陣相乘所得矩陣，稱之為世界變換矩陣

c. 觀察坐標系（View）

為了讓模型在觀察者的視角顯示出，最后得把所有坐標系統一到觀察坐標系，所乘矩陣稱之為觀察變換矩陣

d. 投影坐標系（Projection）

透視矩陣變換，產生近大遠小的視覺效果

3. 曲面細分（Tessellator）

dx11引入，曲面細分，或者更準確的說“鑲嵌化處理技術”，就是在頂點與頂點之間自動嵌入新的頂點。在自動插入大量新的頂點之后，模型的曲面會被分得非常細膩，看上去更加平滑致密

4. 幾何著色器（Geometry Shader）

在頂點和片段著色器之間有一個可選的著色器，叫做幾何著色器(Geometry Shader)。幾何著色器以一個或多個表示為一個單獨基本圖形（primitive）的頂點作為輸入，比如可以是一個點或者三角形。幾何著色器有意思的地方在于它可以把（一個或多個）頂點轉變為完全不同的基本圖形（primitive），從而生成比原來多得多的頂點。

==Unity2017開始支持，適用于發毛==

5. 裁剪（Clipping）

視域體以外的頂點忽略

6. 光柵化（Rasterization）

a. 視口變換
當適配不同設備屏幕時，不同比例以及不同分辨率的矩陣變換。

b. 背面剔除（Culling）
為了優化，刪除看不到的面的頂點數據，讓計算機忽略對其的處理

• 剔除前：

  
  

• 剔除后：

  
  

c. 頂點屬性插值

<p align="center"> ==有沒想過頂點有了，像素(屏幕所見的一切都是像素)怎么來==？</p>

<p align="center">

</p>

7. 像素著色器（Fragment Shader）

像素著色引擎是以每像素為單位的圖形處理功能。

像素都匯聚到這個地方了，接下來就可以為所欲為了

代碼層面上逐像素光照可以涉及的領域，Lambert光照（漫射光）、Phong Specular高光等光照模型可以套用的地方。

總結一下

<p align="center">準備階段（Input Assembler）

<p align="center">頂點著色器（Vertex Shader）

<p align="center">曲面細分（Tessellator）

<p align="center">幾何著色器（Geometry Shader）

<p align="center">裁剪（Clipping）

<p align="center">光柵化（Rasterization）

<p align="center">像素著色器（Fragment Shader）

<p align="center">不同工種研究不同的領域，作為技術美術，應該深入研究其中的三個

<p align="center">==頂點著色器==（Vertex Shader）

<p align="center">==幾何著色器==（Geometry Shader）

<p align="center">==像素著色器==（Fragment Shader）

<p align="center">什么是著色器？

<p align="center">所有復雜的兩層關系，可以通過==中間層==解決，著色器就是程序員告訴計算機如何渲染的方式

<p align="center">講得太抽象，結合實際代碼走一遍

一個只顯示白色的材質

//定義=告訴計算機
Shader "PeroPero/Unlit" //顯示材質在Unity面板的位置，如上圖
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {} //定義一個外部獲取的貼圖
    }
    SubShader
    {
        Tags { "LightMode"="ForwardBase" } //定義光照模式為ForwardBase

        Pass    //定義一個pass，代表一次渲染，多個pass代表多次渲染
        {
            CGPROGRAM   //定義用CG語言的語法溝通
            #pragma vertex vert //定義頂點著色器在vert函數中
            #pragma fragment frag //定義像素著色器在frag函數中
            
            #include "UnityCG.cginc" //引用外部程序集，用于一些快捷API

            //定義一個數據結構
            struct appdata
            {
                float4 vertex : POSITION; //釋義，告訴計算機這個值用于緩存頂點的本地坐標的位置
            };

            struct v2f
            {
                float4 vertex : SV_POSITION; //釋義，告訴計算機這個值用于緩存頂點的最終位置
            };
    
            //頂點著色器
            v2f vert (appdata v)
            {
                v2f o; 
                //頂點坐標乘以世界坐標系的混合矩陣M，再乘以觀察矩陣V，再乘以投影矩陣P，得到最終的坐標
                o.vertex = mul(UNITY_MATRIX_MVP, v.vertex); 
                //返回給計算機算出來的最終頂點坐標
                return o;
            }
            
            //像素著色器
            fixed4 frag (v2f i) : SV_Target
            {
                //像素的顏色都是白色
                return fixed4(1, 1, 1, 1);
            }
            ENDCG
        }
    }
}

頂點著色器（Vertex Shader）

image

在這里可以獲得所有頂點的控制權，可以做任何和頂點有關的效果。如UV動畫，頂點動畫，逐頂點光照

像素著色器（Fragment Shader）

在這里可以獲得所有像素的控制權，可以做一切渲染相關的效果，如光照、貼圖映射、凹凸貼圖等。

什么是光照效果？如Lambert（漫射光）、Phong Specular（馮氏高光）、Ramp Texture（漸變貼圖）、BRDF（雙向反射分布函數）、Fresnel Reflection（菲涅爾反射）等

<p align="center">Lambert（漫反射）

<p align="center">

</p>

<p align="center">Phong Specular（馮氏高光）

<p align="center">

<p align="center">BRDF（雙向反射分布函數））

<p align="center">

<p align="center">Fresnel Reflection（菲涅爾反射）

<p align="center">

<p align="center">把以上所有模擬真實環境的Shader都寫到一個材質中

<p align="center">那么這個材質就是大家天天吹牛所說的==PBR材質(Physically Based Rendering)==，即基于物理的渲染，沒什么深奧的。它就是是基于很多==光照模型==。

<p align="center">所以說，所有復雜的東西都是簡單的東西拼湊起來的。即積木原理，那大家知道什么叫拼圖原理呢？

<p align="center">光照模型</p>

什么是光照模型呢？

當光照射到物體表面時,物體對光會發生反射、透射、吸收、衍射、折射、和干涉,其中被物體吸收的部分轉化為熱,反射、透射的光進入人的視覺系統,使我們能看見物體。為模擬這一現象,我們建立一些數學模型來替代復雜的物理模型，這些模型就稱為明暗效應模型或者光照明模型

簡而言之，就是復雜的數學算法

Lambert漫反射

模擬漫反射。

漫反射，是投射在粗糙表面上的光向各個方向反射的現象。當一束平行的入射光線射到粗糙的表面時，表面會把光線向著四面八方反射，所以入射線雖然互相平行，由于各點的法線方向不一致，造成反射光線向不同的方向無規則地反射，這種反射稱之為“漫反射”或“漫射”

漫反射光的強度近似地服從于Lambert定律，即漫反射光的光強僅與入射光的方向和反射點處表面法向夾角的余弦成正比。

Phong Specular高光

模擬高光。

Phong 高光模型是最基礎且表現最友好的高光類型。它會計算出光在物體表面的反射方向與觀察者視線方向之間的對比結果。它是一種非常常見的高光模型，從游戲到電影都有諸多的應用。雖然在鏡面反射的精確建模上它并不是最接近現實的，但在大多數情況下它都顯得極為逼真。

BlinnPhong Specular高光

廉價高效模擬高光。

Blinn 是另一種計算和估算鏡面高光更有效的方式。它是通過視線方向和光線方向所形成的半角向量來完成的。它是由一位名叫吉姆·博林（Jim Blinn）的人帶進CG 世界的。他發現使用半角向量而不是我們自己形成的反射向量來進行計算顯得更加高效。這樣既減少了代碼量也減少了運算時間。

Anisotropic各向異性高光

模擬頭發和金屬絲的光照模型

(來自B站Aniraiden)

首先，經Anisotropic Normal Map擾動后，表面法線已經具備凹槽特性。

float3 anisoDir = normalize(s.Normal + s.AnisoDir);

float aniso = dot(anisoDir, halfVector);

==其次，Sin函數的目的中為了產生一個環。如下圖。如果沒有sin，則不會產生光環。==

最后，_AnisoOffset的作用是控制光環位置。使得光環可以水平位移，達到你想要的任何位置。

aniso = max(0, sin((aniso + _AnisoOffset) * 3.14));

如何成環呢，忽略_AnisoOffset

算式為 aniso = max(0, sin((aniso) * 3.14));

對比aniso = max(0, aniso);

則如下圖

<p align="center">僅高光的圖：

<p align="center">

<p align="center">加入Anisotropic各向異性后

<p align="center">