計算機圖形學(xué)

<p align="center">計算機圖形學(xué)</p>


介紹

計算機圖形學(xué)(Computer Graphics鹏溯,簡稱CG)是一種使用數(shù)學(xué)算法將二維或三維圖形轉(zhuǎn)化為計算機顯示器的柵格形式的科學(xué),==所有計算機學(xué)科中正反饋最強的一個,沒有之一==陡叠。

大綱

1. 數(shù)學(xué)

2. 渲染管線

3. 光照模型


<p align="center">數(shù)學(xué)</p>

<p align="center">一切科學(xué)都起源于數(shù)學(xué)</p>



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


  • 渲染管線伸但,也稱渲染流水線敬尺,是顯示芯片內(nèi)部處理圖形信號相互獨立的并行處理單元。渲染管線就是要把一系列的頂點數(shù)據(jù)贴浙,紋理等信息砂吞,最終轉(zhuǎn)換成一張人眼可以看到的圖像。這個過程由CPU和GPU共同完成崎溃。

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

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


1. 準(zhǔn)備階段(Input Assembler)

通過索引來定義如何將頂點組成三角形蜻直,構(gòu)成面片

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

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

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


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

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


2. 頂點著色器(Vertex Shader)

a. 局部坐標(biāo)系(Local)

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


b. 世界坐標(biāo)系(World)

將模型通過平移袁串、旋轉(zhuǎn)概而、縮放操作,實質(zhì)是矩陣操作囱修,將模型從局部坐標(biāo)軸統(tǒng)一到世界坐標(biāo)軸赎瑰。
這些平移旋轉(zhuǎn)縮放矩陣相乘所得矩陣,稱之為世界變換矩陣



c. 觀察坐標(biāo)系(View)

為了讓模型在觀察者的視角顯示出破镰,最后得把所有坐標(biāo)系統(tǒng)一到觀察坐標(biāo)系餐曼,所乘矩陣稱之為觀察變換矩陣



d. 投影坐標(biāo)系(Projection)

透視矩陣變換,產(chǎn)生近大遠(yuǎn)小的視覺效果



3. 曲面細(xì)分(Tessellator)

dx11引入鲜漩,曲面細(xì)分源譬,或者更準(zhǔn)確的說“鑲嵌化處理技術(shù)”,就是在頂點與頂點之間自動嵌入新的頂點孕似。在自動插入大量新的頂點之后踩娘,模型的曲面會被分得非常細(xì)膩,看上去更加平滑致密


4. 幾何著色器(Geometry Shader)

在頂點和片段著色器之間有一個可選的著色器喉祭,叫做幾何著色器(Geometry Shader)霸饲。幾何著色器以一個或多個表示為一個單獨基本圖形(primitive)的頂點作為輸入,比如可以是一個點或者三角形臂拓。幾何著色器有意思的地方在于它可以把(一個或多個)頂點轉(zhuǎn)變?yōu)橥耆煌幕緢D形(primitive)厚脉,從而生成比原來多得多的頂點。

==Unity2017開始支持胶惰,適用于發(fā)毛==



5. 裁剪(Clipping)

視域體以外的頂點忽略


6. 光柵化(Rasterization)

a. 視口變換
當(dāng)適配不同設(shè)備屏幕時傻工,不同比例以及不同分辨率的矩陣變換。



b. 背面剔除(Culling)
為了優(yōu)化孵滞,刪除看不到的面的頂點數(shù)據(jù)中捆,讓計算機忽略對其的處理

  • 剔除前:


  • 剔除后:



c. 頂點屬性插值

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

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


7. 像素著色器(Fragment Shader)

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

像素都匯聚到這個地方了,接下來就可以為所欲為了
代碼層面上逐像素光照可以涉及的領(lǐng)域匿级,Lambert光照(漫射光)蟋滴、Phong Specular高光等光照模型可以套用的地方染厅。


總結(jié)一下

<p align="center">準(zhǔn)備階段(Input Assembler)

<p align="center">頂點著色器(Vertex Shader)

<p align="center">曲面細(xì)分(Tessellator)

<p align="center">幾何著色器(Geometry Shader)

<p align="center">裁剪(Clipping)

<p align="center">光柵化(Rasterization)

<p align="center">像素著色器(Fragment Shader)


<p align="center">不同工種研究不同的領(lǐng)域,作為技術(shù)美術(shù)津函,應(yīng)該深入研究其中的三個

<p align="center">==頂點著色器==(Vertex Shader)

<p align="center">==幾何著色器==(Geometry Shader)

<p align="center">==像素著色器==(Fragment Shader)


<p align="center">什么是著色器肖粮?


<p align="center">所有復(fù)雜的兩層關(guān)系,可以通過==中間層==解決尔苦,著色器就是程序員告訴計算機如何渲染的方式


<p align="center">講得太抽象涩馆,結(jié)合實際代碼走一遍


一個只顯示白色的材質(zhì)


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

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

            //定義一個數(shù)據(jù)結(jié)構(gòu)
            struct appdata
            {
                float4 vertex : POSITION; //釋義稠项,告訴計算機這個值用于緩存頂點的本地坐標(biāo)的位置
            };

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


頂點著色器(Vertex Shader)

image

在這里可以獲得所有頂點的控制權(quán),可以做任何和頂點有關(guān)的效果乐疆。如UV動畫划乖,頂點動畫,逐頂點光照




像素著色器(Fragment Shader)


在這里可以獲得所有像素的控制權(quán)挤土,可以做一切渲染相關(guān)的效果琴庵,如光照、貼圖映射仰美、凹凸貼圖等迷殿。

什么是光照效果?如Lambert(漫射光)咖杂、Phong Specular(馮氏高光)庆寺、Ramp Texture(漸變貼圖)、BRDF(雙向反射分布函數(shù))诉字、Fresnel Reflection(菲涅爾反射)等

<p align="center">Lambert(漫反射)

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

<p align="center">Phong Specular(馮氏高光)

<p align="center">


<p align="center">BRDF(雙向反射分布函數(shù)))

<p align="center">

<p align="center">Fresnel Reflection(菲涅爾反射)

<p align="center">


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

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

<p align="center">所以說,所有復(fù)雜的東西都是簡單的東西拼湊起來的伍绳。即積木原理踊挠,那大家知道什么叫拼圖原理呢?


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


什么是光照模型呢冲杀?

當(dāng)光照射到物體表面時,物體對光會發(fā)生反射效床、透射睹酌、吸收、衍射扁凛、折射忍疾、和干涉,其中被物體吸收的部分轉(zhuǎn)化為熱,反射闯传、透射的光進入人的視覺系統(tǒng),使我們能看見物體谨朝。為模擬這一現(xiàn)象,我們建立一些數(shù)學(xué)模型來替代復(fù)雜的物理模型,這些模型就稱為明暗效應(yīng)模型或者光照明模型

簡而言之甥绿,就是復(fù)雜的數(shù)學(xué)算法


Lambert漫反射

模擬漫反射字币。

漫反射,是投射在粗糙表面上的光向各個方向反射的現(xiàn)象共缕。當(dāng)一束平行的入射光線射到粗糙的表面時洗出,表面會把光線向著四面八方反射,所以入射線雖然互相平行图谷,由于各點的法線方向不一致翩活,造成反射光線向不同的方向無規(guī)則地反射,這種反射稱之為“漫反射”或“漫射”



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

Phong Specular高光

模擬高光。

Phong 高光模型是最基礎(chǔ)且表現(xiàn)最友好的高光類型承璃。它會計算出光在物體表面的反射方向與觀察者視線方向之間的對比結(jié)果利耍。它是一種非常常見的高光模型,從游戲到電影都有諸多的應(yīng)用盔粹。雖然在鏡面反射的精確建模上它并不是最接近現(xiàn)實的隘梨,但在大多數(shù)情況下它都顯得極為逼真。




BlinnPhong Specular高光

廉價高效模擬高光舷嗡。

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




Anisotropic各向異性高光

模擬頭發(fā)和金屬絲的光照模型

(來自B站Aniraiden)



首先垮斯,經(jīng)Anisotropic Normal Map擾動后郎仆,表面法線已經(jīng)具備凹槽特性。
float3 anisoDir = normalize(s.Normal + s.AnisoDir);
float aniso = dot(anisoDir, halfVector);
==其次兜蠕,Sin函數(shù)的目的中為了產(chǎn)生一個環(huán)扰肌。如下圖。如果沒有sin熊杨,則不會產(chǎn)生光環(huán)曙旭。==
最后盗舰,_AnisoOffset的作用是控制光環(huán)位置。使得光環(huán)可以水平位移桂躏,達(dá)到你想要的任何位置钻趋。
aniso = max(0, sin((aniso + _AnisoOffset) * 3.14));
如何成環(huán)呢,忽略_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">

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末剂习,一起剝皮案震驚了整個濱河市蛮位,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鳞绕,老刑警劉巖失仁,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異们何,居然都是意外死亡萄焦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門冤竹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拂封,“玉大人,你說我怎么就攤上這事鹦蠕∶扒” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵片部,是天一觀的道長镣衡。 經(jīng)常有香客問我,道長档悠,這世上最難降的妖魔是什么廊鸥? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮辖所,結(jié)果婚禮上惰说,老公的妹妹穿的比我還像新娘。我一直安慰自己缘回,他們只是感情好吆视,可當(dāng)我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酥宴,像睡著了一般啦吧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拙寡,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天授滓,我揣著相機與錄音,去河邊找鬼。 笑死般堆,一個胖子當(dāng)著我的面吹牛在孝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播淮摔,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼私沮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了和橙?” 一聲冷哼從身側(cè)響起仔燕,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胃碾,沒想到半個月后涨享,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筋搏,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡仆百,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奔脐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俄周。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖髓迎,靈堂內(nèi)的尸體忽然破棺而出峦朗,到底是詐尸還是另有隱情,我是刑警寧澤排龄,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布波势,位于F島的核電站,受9級特大地震影響橄维,放射性物質(zhì)發(fā)生泄漏尺铣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一争舞、第九天 我趴在偏房一處隱蔽的房頂上張望凛忿。 院中可真熱鬧,春花似錦竞川、人聲如沸店溢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽床牧。三九已至,卻和暖如春遭贸,著一層夾襖步出監(jiān)牢的瞬間戈咳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留除秀,地道東北人糯累。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像册踩,于是被迫代替她去往敵國和親泳姐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,930評論 2 361