【轉】《Unity Shader入門精要》馮樂樂著 書中彩圖

爲方便我的手機學習時候查閱,從網上轉來這些彩圖。

如屬過當行爲，聯繫本人刪除。

勘錯表 http://candycat1992.github.io/unity_shaders_book/unity_shaders_book_corrigenda.html

轉自:http://candycat1992.github.io/unity_shaders_book/unity_shaders_book_images.html

前言

 

 

第2章 渲染流水線

 

 
圖2.1　真實生活中的流水線 

 
圖2.2 渲染流水線中的三個概念階段 

 
圖2.3 渲染所需的數據（兩張紋理以及3個網格）從硬盤最終加載到顯存中。在渲染時，GPU能夠快速訪問這些數據 

 
圖2.4 在同一狀態下渲染三個網格。因爲沒有更改渲染狀態，所以三個網格的外觀看起來像是同一種材質的物體。 

 
圖2.5 CPU經過調用Draw Call來告訴GPU開始進行一個渲染過程。一個Draw Call會指向本次調用須要渲染的圖元列表 

 
圖2.6 GPU的渲染流水線實現。顏色表示了不一樣階段的可配置性或可編程性：綠色表示該流水線階段是徹底可編程控制的，黃色表示該流水線階段能夠配置但不是可編程的，藍色表示該流水線階段是由GPU固定實現的，開發者沒有任何控制權。實線表示該shader必須由開發者編程實現，虛線表示該Shader是可選的 

 
圖2.7 GPU在每一個輸入的網格頂點上都會調用頂點着色器。頂點着色器必須進行頂點的座標變換，須要時還能夠計算和輸出頂點的顏色。例如，咱們可能須要進行逐頂點的光照 

 
圖2.8 頂點着色器會將模型頂點的位置變換到齊次裁剪座標空間下，進行輸出後再由硬件作透視除法獲得NDC下的座標 

 
圖2.9 只有在單位立方體的圖元才須要被繼續處理。所以，徹底在單位立方體外部的圖元（紅色三角形）被捨棄，徹底在單位立方體內部的圖元（綠色三角形）將被保留。和單位立方體相交的圖元（黃色三角形）會被裁剪，新的頂點會被生成，原來在外部的頂點會被捨棄 

 
圖2.10 屏幕映射將x、y座標從（-1, 1）範圍轉換到屏幕座標系中 

 
圖2.11 OpenGL和DirectX的屏幕座標系差別。對於一張512*512大小的圖像，在OpenGL中其（0, 0）點在左下角，而在DirectX中其(0, 0)點在左上角 

 
圖2.12 三角形遍歷的過程。根據幾何階段輸出的頂點信息，最終獲得該三角網格覆蓋的像素位置。對應像素會生成一個片元，而片元中的狀態是對三個頂點的信息進行插值獲得的。例如，對圖2.12中三個頂點的深度進行插值獲得其重心位置對應的片元的深度值爲-10.0 

 
圖2.13 根據上一步插值後的片元信息，片元着色器計算該片元的輸出顏色 

 
圖2.14 逐片元操做階段所作的操做。只有經過了全部的測試後，新生成的片元才能和顏色緩衝區中已經存在的像素顏色進行混合，最後再寫入顏色緩衝區中 

 
圖2.15 模板測試和深度測試的簡化流程圖。 

 
圖2.16 混合操做的簡化流程圖 

 
圖2.17 圖示場景中包含了兩個對象：球和長方體，繪製順序是先繪製球（在屏幕上顯示爲圓），再繪製長方體（在屏幕上顯示爲長方形）。若是深度測試在片元着色器以後執行，那麼在渲染長方體時，雖然它的大部分區域都被遮擋在球的後面，即它所覆蓋的絕大部分片元根本沒法經過深度測試，可是咱們仍然須要對這些片元執行片元着色器，形成了很大的性能浪費 

 
圖2.18 CPU、OpenGL/DirectX、顯卡驅動和GPU之間的關係 

 
圖2.19 命令緩衝區。CPU經過圖像編程接口向命令緩衝區中添加命令，而GPU從中讀取命令並執行。黃色方框內的命令就是Draw Call，而紅色方框內的命令用於改變渲染狀態。咱們使用紅色方框來表示改變渲染狀態的命令，
是由於這些命令每每更加耗時 

 
圖2.20 命令緩衝區中的虛線方框表示GPU已經完成的命令。此時，命令緩衝區中沒有能夠執行的命令了，GPU處於空閒狀態，而CPU尚未準備好下一個渲染命令。 

 
圖2.21 利用批處理，CPU在RAM把多個網格合併成一個更大的網格，再發送給GPU，而後在一個Draw Call中渲染它們。但要注意的是，使用批處理合並的網格將會使用同一種渲染狀態。也就是說，若是網格之間須要使用不一樣的渲染狀態，那麼就沒法使用批處理技術

 

 

 

第3章 Unity Shader基礎

 

 

 
圖3.1 Unity Shader和材質。首先建立須要的Unity Shader和材質，而後把Unity Shader賦給材質，並在材質面板上調整屬性（如使用的紋理、漫反射係數等）。最後，將材質賦給相應的模型來查看最終的渲染效果 

 
圖3.2 將材質直接拖曳到模型的Mesh Renderer組件中 

 
圖3.3 材質提供了一種可視化的方式來調整着色器中使用的參數 

 
圖3.4 Unity Shader的導入設置面板 

 
圖3.5 Gompile and show code下拉列表 

 
圖3.6 Unity Shader爲控制渲染過程提供了一層抽象。若是沒有使用Unity Shader（左圖），開發者須要和不少文件和設置打交道，才能讓畫面呈現出想要的效果；而在Unity Shader的幫助下（右圖），開發者只須要使用ShaderLab來編寫Unity Shader文件就能夠完成全部的工做 

 
圖3.7 在Unity Shader的名稱定義中利用
斜槓來組織在材質面板中的位置 

 
圖3.8 不一樣屬性類型在材質
面板中的顯示結果 

 
圖3.9 在Unity Shader的導入設置面板中能夠經過Compile and show code按鈕來查看Unity對CG片斷編譯後的代碼。經過單擊Compile and show code按鈕右端的倒三角能夠打開下拉菜單，在這個下拉菜單中能夠選擇編譯的平臺種類，如只爲當前的顯卡設備編譯特定的彙編代碼，或爲全部的平臺編譯彙編代碼，咱們也能夠自定義選擇編譯到哪些平臺上

 

 

第4章 學習Shader所需的數學基礎

 

 

 
圖4.1 咱們的農場遊戲。咱們的主角妞妞是一頭長得最壯、好奇心很強的奶牛 

 
圖4.2 傳說，笛卡爾座標系來源於笛卡爾對天花板上一隻蒼蠅的運動軌跡的觀察。笛卡爾發現，可使用蒼蠅距不一樣牆面的距離來描述它的當前位置 

 
圖4.3 一個二維笛卡爾座標系 

 
圖4.4 在屏幕映射時，OpenGL和DirectX使用了不一樣方向的二維笛卡爾座標系 

 
圖4.5 笛卡爾座標系可讓妞妞精確表述本身的位置 

 
圖4.6 一個三維笛卡爾座標系 

 
圖4.7 左手座標系 

 
圖4.8 右手座標系 

 
圖4.9 用左手法則和右手法則來判斷旋轉正方向 

 
圖4.10 爲了移動到新的位置，妞妞須要首先向某個方向平移1個單位，再向另外一個方向平移4個單位，最後再向一個方向旋轉60° 

 
圖4.11 左圖和右圖分別表示了在左手座標系和右手座標系中描述妞妞此次運動的結果，獲得的數學描述是不一樣的 

 
圖4.12 在模型空間和世界空間中，Unity使用的是左手座標系。圖中，球的座標軸顯示了它在模型空間中的3個座標軸（紅色爲x軸，綠色是y軸，藍色是z軸） 

 
圖4.13 在Unity中，觀察空間使用的是右手座標系，攝像機的前向是z軸的負方向，
z軸越小，物體的深度越大，離攝像機越遠 

 
圖4.14 攝像機的位置是（0, 1, -10），球體的位置是（0, 1, 0） 

 
圖4.15 一個二維向量以及它的頭和尾 

 
圖4.16 點和矢量之間的關係 

 
圖4.17 二維矢量和一些標量的乘法和除法 

 
圖4.18 二維矢量的加法和減法 

 
圖4.19 使用矢量減法來計算從點a到點b的位移 

 
圖4.20 矢量的模 

 
圖4.21 二維空間的單位矢量都會落在單位圓上 

 
圖4.22 矢量b在單位矢量a方向上的投影 

 
圖4.23 點積的符號 

 
圖4.24 兩個單位矢量進行點積 

 
圖4.25 三維矢量叉積的計算規律。不一樣顏色的線表示了計算結果矢量中對應顏色的份量的計算路徑。以紅色爲例，即結果矢量的第一個份量，它是從第一個矢量的y份量出發乘以第二個矢量的z份量，再減去第一個矢量的z份量和第二矢量的y份量的乘積 

 
圖4.26 使用矢量a和矢量b構建一個平行四邊形 

 
圖4.27 分別使用左手座標系和右手座標系獲得的叉積結果 

 
圖4.28 使用右手法則判斷右手座標系中a×b的方向 

 
圖4.29 三角形的三個頂點位於xy平面上，人眼位於z軸負方向，向z軸正方向觀察 

 
圖4.30 計算c23的過程 

 
圖4.31 場景中的妞妞（左圖）和屏幕上的妞妞（右圖）。妞妞想知道，本身的鼻子是如何被畫到屏幕上的 

 
圖4.32 在咱們的農場遊戲中，每一個奶牛都有本身的模型座標系。在模型座標系中妞妞鼻子的位置是(0, 2, 4, 1) 

 
圖4.33 Unity的Transform組件能夠調節模型的位置.若是Transform有父節點，如圖中的「Mesh」，那麼Position將是在其父節點（這裏是「Cow」）的模型空間中的位置；若是沒有父節點，Position就是在世界空間中的位置 

 
圖4.34 農場遊戲中的世界空間。世界空間的原點被放置在農場的中心。左下角顯示了妞妞在世界空間中所作的變換。咱們想要把妞妞的鼻子從模型空間變換到世界空間中 

 
圖4.35 農場遊戲中攝像機的觀察空間。觀察空間的原點位於攝像機處。注意在觀察空間中，攝像機的前向是z軸的負方向（圖中只畫出了z軸正方向），這是由於Unity在觀察空間中使用了右手座標系。左下角顯示了攝像機在世界空間中所作的變換。咱們想要把妞妞的鼻子從世界空間變換到觀察空間中 

 
圖4.36 透視投影（左圖）和正交投影（右圖）。左下角分別顯示了當前攝像機的投影模式和相關屬性 

 
圖4.37 視錐體和裁剪平面。左圖顯示了透視投影的視錐體，右圖顯示了正交投影的視錐體 

 
圖4.38 透視攝像機的參數對透視投影視錐體的影響 


圖4.39 在透視投影中，投影矩陣對頂點進行了縮放。圖3.38中標註了4個關鍵點通過投影矩陣變換後的結果。從這些結果能夠看出x、y、z和w份量的範圍發生的變化 

 
圖4.40 正交攝像機的參數對正交投影視錐體的影響 


圖4.41 在正交投影中，投影矩陣對頂點進行了縮放。圖中標註了4個關鍵點通過投影矩陣變換後的結果。從這些結果能夠看出x、y、z和w份量範圍發生的變化 

 
圖4.42 農場遊戲使用的攝像機參數和遊戲畫面的橫縱比 


圖4.43 通過齊次除法後，透視投影的裁剪空間會變換到一個立方體 


圖4.44 通過齊次除法後，正交投影的裁剪空間會變換到一個立方體 

 
圖4.45 渲染流水線中頂點的空間變換過程 

 
圖4.46 Unity中各個座標空間的旋向性 

 
圖4.47 頂點的切線和法線。切線和法線互相垂直 

 
圖4.48 進行非統一縮放時，若是使用和變換頂點相同的變換矩陣來變換法線，就會獲得錯誤的結果，即變換後的法線方向與平面再也不垂直 

 
圖4.49 由片元的像素位置獲得的圖像 

 
圖4.50 圖中兩個座標系的x軸和y軸是重合的，區別僅在於z軸的方向。左手座標系的（0, 0, 1）點和右手座標系中的（0, 0, 1）點是不一樣的，但它們旋轉後的點卻對應到了同一點 

 
圖4.51 絕對空間中的同一點，在左手和右手座標系中進行一樣角度的旋轉，其旋轉方向是不同的。在左手座標系中將按順時針方向旋轉，在右手座標系中將按逆時針方向旋轉 

 
圖4.52 在左手座標系中，若是叉積結果爲負，那麼3點的順序是順時針方向

 

 

第5章 開始Unity Shader學習之旅

 

 

 
圖5.1 在Unity 5中新建一個場景獲得的效果 

 
圖5.2 用一個最簡單的頂點/片元着色器獲得一個白色的球 

 
圖5.3 Unity的內置着色器 

 
圖5.4 用假彩色對Unity Shader進行調試 

 
圖5.5 使用顏色拾取器來查看調試信息 


圖5.6 幀調試器 


圖5.7 單擊Knot的深度圖渲染事件，在Game視圖會顯示該事件的效果，在Hierarchy視圖中會高亮顯示Knot對象，在幀調試器的右側窗口會顯示出該事件的細節 

 
圖5.8 OpenGL和DirectX使用了不一樣的屏幕空間座標

 

 

第6章 Unity中的基礎光照

 

 

 
圖6.1 在左圖中，光是垂直照射到物體表面，所以光線之間的垂直距離保持不變；而在右圖中，光是斜着照射到物體表面，在物體表面光線之間的距離是d/cosθ，所以單位面積上接收到的光線數目要少於左圖 

 
圖6.2 散射時，光線會發生折射和反射現象。對於不透明物體，折射的光線會在物體內部繼續傳播，最終有一部分光線會從新從物體表面被髮射出去 

 
圖6.3 使用Phong模型計算高光反射 

 
圖6.4 Blinn模型 

 
圖6.5 在Unity的Window -> Lighting面板中，咱們能夠經過Ambient Source/Ambient Color/Ambient Intensity來控制場景中的環境光的顏色和強度 

 
圖6.6 逐頂點的漫反射光照效果 

 
圖6.7 逐像素的漫反射光照效果 

 
圖6.8 逐頂點漫反射光照、逐像素漫反射光照、半蘭伯特光照的對比效果 

 
圖6.9 CG的reflect函數 

 
圖6.10 逐頂點的高光反射光照效果 

 
圖6.11 逐像素的高光反射光照效果 

 
圖6.12 逐頂點的高光反射光照、逐像素的高光反射光照（Phong光照模型）和Blinn-Phong高光反射光照的對比結果

 

 

第7章 基礎紋理

 

 

 
圖7.1 Unity中的紋理座標 

 
圖7.2 使用單張紋理 

 
圖7.3 調節紋理的平鋪（縮放）和偏移（平移）屬性 

 
圖7.4 紋理的屬性 

 
圖7.5 Wrap Mode決定了當紋理座標超過[0, 1]範圍後將會如何被平鋪 

 
圖7.6 偏移（Offset）屬性決定了紋理座標的偏移量 

 
圖7.7 在放大紋理時，分別使用三種Filter Mode獲得的結果 

 
圖7.8 在Advanced模式下能夠設置多級漸遠紋理的相關屬性 

 
圖7.9 從上到下： Point濾波 + 多級漸遠紋理技術，Bilinear濾波 + 多級漸遠紋理技術，Trilinear濾波 + 多級漸遠紋理技術 

 
圖7.10 選擇紋理的最大尺寸和紋理模式 

 
圖7.11 高度圖 

 
圖7.12 模型頂點的切線空間。其中，原點對應了頂點座標，x軸是切線方向（t），y軸是副切線方向（b），z軸是法線方向（n） 

 
圖7.13 左圖：模型空間下的法線紋理。右圖：切線空間下的法線紋理 

 
圖7.14 使用法線紋理 

 
圖7.15 使用Bump Scale屬性來調整模型的凹凸程度 

 
圖7.16 當使用UnpackNormal函數計算法線紋理中的法線方向時，須要把紋理類型標識爲Normal map 

 
圖7.17 當勾選了Create from Grayscale後，Unity會根據高度圖來生成一張切線空間下的法線紋理 

 
圖7.18 使用不一樣的漸變紋理控制漫反射光照，左下角給出了每張圖使用的漸變紋理 

 
圖7.19 Wrap Mode分別爲Repeat和Clamp模式的效果對比 

 
圖7.20 使用高光遮罩紋理。從左到右：只包含漫反射，未使用遮罩的高光反射，使用遮罩的高光反射 

 
圖7.21 本節使用的高光遮罩紋理

 

 

第8章 透明效果

 

 

 
圖8.1 場景中有兩個物體，其中A（黃色）是半透明物體，B（紫色）是不透明物體 

 
圖8.2 場景中有兩個物體，其中A和B都是半透明物體 

 
圖8.3 循環重疊的半透明物體老是沒法獲得正確的半透明效果 

 
圖8.4 使用哪一個深度對物體進行排序。紅色點分別標明瞭網格上距離攝像機最近的點、最遠的點以及網格中點 

 
圖8.5 一張透明紋理，其中每一個方格的透明度都不一樣 

 
圖8.6 透明度測試 


圖8.7 隨着Alpha cutoff參數的增大，更多的像素因爲不知足透明度測試條件而被剔除 

 
圖8.8 透明度混合 


圖8.9 隨着Alpha Scale參數的增大，模型變得愈來愈透明 

 
圖8.10 當模型網格之間有互相交叉的結構時，每每會獲得錯誤的半透明效果 

 
圖8.11 開啓了深度寫入的半透明效果 


圖8.12 不一樣混合狀態設置獲得的效果 

 
圖8.13 雙面渲染的透明度測試的物體 

 
圖8.14 雙面渲染的透明度混合的物體

 

 

第9章 更復雜的光照

 

 

 
圖9.1 設置Unity項目的渲染路徑 

 
圖9.2 攝像機組件的Rendering Path中的設置能夠覆蓋Project Settings中的設置 

 
圖9.3 設置光源的類型和渲染模式 

 
圖9.4 前向渲染的兩種Pass 

 
圖9.5 平行光 

 
圖9.6 點光源 

 
圖9.7 開啓Scene視圖中的光照 

 
圖9.8 聚光燈 

 
圖9.9 使用一個平行光和一個點光源共同照亮物體。右圖顯示了膠囊體、平行光和點光源在場景中的相對位置 

 
圖9.10 使用1個平行光 + 4個點光源照亮一個物體 


圖9.11 打開幀調試器查看場景的繪製事件 


圖9.12 本例中的6個渲染事件，繪製順序是從左到右、從上到下進行的 

 
圖9.13 若是物體不在一個光源的光照範圍內（從右圖能夠看出，膠囊體不在最左方的點光源的照明範圍內），Unity是不會調用Additional Pass來爲該物體處理該光源的 


圖9.14 當把光源的Render Mode設爲Not Important時，這些光源就不會按逐像素光來處理 

 
圖9.15 開啓光源的陰影效果 

 
圖9.16 Mesh Renderer組件的Cast Shadows和Receive Shadows屬性能夠控制該物體是否投射/接收陰影 

 
圖9.17 開啓Cast Shadows和Receive Shadows，從而讓正方體能夠投射和接收陰影 

 
圖9.18 把Cast Shadows設置爲Two Sided可讓右側平面的背光面也產生陰影 

 
圖9.19 正方體能夠接收來自右側平面的陰影 

 
圖9.20 使用幀調試器查看陰影繪製過程 

 
圖9.21 正方體對深度紋理的更新結果 

 
圖9.22 屏幕空間的陰影圖 


圖9.23 Unity繪製屏幕陰影的過程 

 
圖9.24 能夠投射陰影的使用透明度測試的物體 

 
圖9.25 正確設置了Fallback的使用透明度測試的物體 

 
圖9.26 正確設置了Cast Shadow屬性的使用透明度測試的物體 

 
圖9.27 把使用了透明度混合的Unity Shader的Fallback設置爲內置的Transparent/VertexLit。半透明物體不會向下方的平面投射陰影，也不會接收來自右側平面的陰影，它看起來就像是徹底透明同樣 

 
圖9.28 把Fallback設爲VertexLit來強制爲半透明物體生成陰影

 

 

第10章 高級紋理

 

 

 
圖10.1 對立方體紋理的採樣 

 
圖10.2 天空盒子材質 

 
圖10.3 爲場景使用自定義的天空盒子 

 
圖10.4 使用了天空盒子的場景 

 
圖10.5 使用腳本建立立方體紋理 

 
圖10.6 使用腳本渲染立方體紋理 

 
圖10.7 使用了反射效果的Teapot模型 

 
圖10.8 斯涅爾定律 

 
圖10.9 使用了折射效果的Teapot模型 

 
圖10.10 使用了菲涅耳反射的Teapot模型 

 
圖10.11 鏡子效果 

 
圖10.12 左圖：把攝像機的Target Texture設置成自定義的渲染紋理。右圖：渲染紋理使用的紋理設置 

 
圖10.13 玻璃效果 

 
圖10.14 本例使用的立方體紋理 

 
圖10.15 腳本生成的程序紋理 

 
圖10.16　調整程序紋理的參數來獲得不一樣的程序紋理 

 
圖10.17　後綴爲.sbsar的Substance材質 

 
圖10.18　程序紋理資源 


圖10.19　調整程序紋理屬性能夠獲得看似徹底不一樣的程序材質效果

 

 

第11章 讓畫面動起來

 

 

 
圖11.1 本節使用的序列幀圖像 


圖11.2 使用序列幀動畫來實現爆炸效果 

 
圖11.3 無限滾動的背景（紋理來源：forest-background © 2012-2013 Julien Jorge julien.jorge@stuff-o-matic.com） 


圖11.4 使用頂點動畫來模擬2D的河流 


圖11.5 法線固定（老是指向視角方向）時，計算廣告牌技術中的三個正交基的過程 


圖11.6 廣告牌效果。左圖顯示了攝像機和5個廣告牌之間的位置關係，攝像機是從斜上方向下觀察它們的。中間的圖顯示了當Vertical Restraints屬性爲1，即固定法線方向爲觀察視角時所獲得的效果，能夠看出，全部的廣告牌都徹底面朝攝像機。右圖顯示了當Vertical Restraints屬性爲0，即固定指向上的方向爲(0, 1, 0)時所獲得的效果，能夠看出，廣告牌雖然最大限度地面朝攝像機，但其指向上的方向並未發生改變 


圖11.7 當進行頂點動畫時，若是仍然使用內置的ShadowCaster Pass來渲染陰影，可能會獲得錯誤的陰影效果 

 
圖11.8 使用自定義的ShadowCaster Pass
爲變形物體繪製正確的陰影

 

 

第12章 屏幕後處理效果

 

 

圖12.1 左圖：原效果。右圖：調整了亮度（值爲1.2）、飽和度（值爲1.6）和對比度（值爲1.2）後的效果 

 
圖12.2 爲腳本設置Shader的默認值 


圖12.3 左圖：12.2節獲得的結果。
右圖：進行邊緣檢測後的效果 

 
圖12.4 卷積核與卷積。使用一個3×3大小的卷積覈對一張5×5大小的圖像進行卷積操做，當計算圖中紅色方塊對應的像素的卷積結果時，咱們首先把卷積核的中心放置在該像素位置，翻轉核以後再依次計算核中每一個元素和其覆蓋的圖像像素值的乘積並求和，獲得新的像素值 

 
圖12.5 三種常見的邊緣檢測算子 

 
圖12.6 只顯示邊緣的屏幕效果 


圖12.7 左圖：原效果。右圖：高斯模糊後的效果 

 
圖12.8 一個5×5大小的高斯核。左圖顯示了標準方差爲1的高斯核的權重分佈。咱們能夠把這個二維高斯核拆分紅兩個一維的高斯核（右圖） 

 
圖12.9 動畫短片《大象之夢》中的Bloom效果。光線透過門擴散到了周圍較暗的區域中 


圖12.10 左圖：原效果。右圖：Bloom處理後的效果 


圖12.11 左圖：原效果。右圖：應用運動模糊後的效果

 

 

第13章 使用深度和法線紋理

 

 

圖13.1 在透視投影中，投影矩陣首先對頂點進行了縮放。在通過齊次除法後，透視投影的裁剪空間會變換到一個立方體。圖中標註了4個關鍵點通過投影矩陣變換後的結果 


圖13.2 在正交投影中，投影矩陣對頂點進行了縮放。在通過齊次除法後，正交投影的裁剪空間會變換到一個立方體。圖中標註了4個關鍵點通過投影矩陣變換後的結果 


圖13.3 使用Frame Debugger查看深度紋理（左）和深度+法線紋理（右）。若是當前攝像機須要生成深度和法線紋理，幀調試器的面板中就會出現相應的渲染事件。只要單擊對應的事件就能夠查看獲得的深度和法線紋理 

 
圖13.4 左圖：線性空間下的深度紋理。右圖：解碼後而且被映射到[0, 1]範圍內的視角空間下的法線紋理 


圖13.5 左圖：原效果。右圖：添加全局霧效後的效果 

 
圖13.6 計算interpolatedRay 

 
圖13.7 採樣獲得的深度值並不是是點到攝像機的歐式距離 


圖13.8 左圖：原效果。右圖：直接對顏色圖像進行邊緣檢測的結果 


圖13.9 在深度和法線紋理上進行更健壯的邊緣檢測。左圖：在原圖上描邊的效果。右圖：只顯示描邊的效果 

 
圖13.10 Roberts算子

 

 

第14章 非真實感渲染

 

 

 
圖14.1 遊戲《大神》（英文名：Okami）的遊戲截圖 

 
圖14.2 卡通風格的渲染效果 

 
圖14.3 左圖：未對高光區域進行抗鋸齒處理。右圖：使用fwidth函數對高光區域進行抗鋸齒處理 

 
圖14.4 一個TAM的例子（來源：Praun E, et al. Real-time hatching4） 

 
圖14.5 素描風格的渲染效果

 

 

第15章 使用噪聲

 

 

 
圖15.1 箱子的消融效果 

 
圖15.2 消融效果使用的噪聲紋理 


圖15.3 包含菲涅耳反射的水面波動效果。在左圖中，視角方向和水面法線的夾角越大，反射效果越強。在右圖中，視角方向和水面法線的夾角越大，折射效果越強 

 
圖15.4 本例使用的立方體紋理 

 
圖15.5 水波效果使用的噪聲紋理。左圖：噪聲紋理的灰度圖。右圖：由左圖生成的法線紋理 


圖15.6 左圖：均勻霧效。右圖：使用噪聲紋理後的非均勻霧效 

 
圖15.7 本節使用的噪聲紋理

 

 

第16章 Unity中的渲染優化技術

 

 

 
圖16.1 Unity 5的渲染統計窗口 


圖16.2 使用Unity的性能分析器中的渲染區域來查看更多關於渲染的統計信息 

 
圖16.3 使用幀調試器來查看單獨的draw call的繪製結果 

 
圖16.4 動態批處理 

 
圖16.5 多光源對動態批處理的影響結果 

 
圖16.6 靜態批處理前的渲染統計數據 

 
圖16.7 把物體標誌爲Static 

 
圖16.8 靜態批處理 

 
圖16.9 靜態批處理中Unity會合並全部被標識爲「Static」的物體 


圖16.10 靜態批處理會佔用更多的內存。左圖：靜態批處理前的渲染統計數據。右圖：靜態批處理後的渲染統計數據 

 
圖16.11 處理其餘逐像素光的Pass不會被靜態批處理 

 
圖16.12 Unity的高級紋理設置面板

 

 

第17章 Surface Shader探祕

 

 

 
圖17.1 表面着色器的例子。左圖：在一個平行光下的效果。右圖：添加了一個點光源（藍色）和一個聚光燈（紫色）後的效果 

 
圖17.2 查看表面着色器生成的代碼 


圖17.3 表面着色器的渲染計算流水線。黃色：能夠自定義的函數。灰色：Unity自動生成的計算步驟 

 
圖17.4 沿頂點法線對模型進行膨脹。左圖：膨脹前。右圖：膨脹後

 

 

第18章 基於物理的渲染

 

 

 
圖18.1 在理想的邊界處，折射率的突變會把光線分紅兩個方向 

 
圖18.2 左圖：光滑表面的微平面的法線變化較小，反射光線的方向變化也更小。
右圖：粗糙表面的微平面的法線變化較大，反射光線的方向變化也更大 

 
圖18.3 微表面對光的折射。這些被折射的光中一部分被吸取，一部分又被散射到外部 

 
圖18.4 次表面散射。左圖：次表面散射的光線會從不一樣於入射點的位置射出。若是這些距離值小於須要被着色的像素大小，那麼渲染就能夠徹底在局部完成（右圖）。不然，就須要使用次表面散射渲染技術 

 
圖18.5 BRDF描述的兩種現象。高光反射部分用於描述反射，漫反射部分用於描述次表面散射 


圖18.6 （a）那些m=h的微面元會剛好把入射光從I反射到v上，只有這部分微面元才能夠添加到BRDF的計算中。（b）一部分知足（a）的微面元會在I方向上被其餘微面元遮擋住，它們不會接受到光照，所以會造成陰影。（c）還有一部分知足（a）的微面元會在反射方向v上被其餘微面元擋住，所以，這部分反射光也不會被看到 


圖18.7 Standard Shader中前向渲染路徑使用的Pass（簡化版本的PBS使用了VertexOutputBaseSimple等結構體來代替相應的結構體） 

 
圖18.8 Unity提供的校準表格。左圖：金屬工做流
使用的校準表格。右圖：高光反射工做流使用的校準表格 


圖18.9 使用金屬工做流來實現不一樣類型的材質。左邊的球體：金屬材質。右邊的球體：塑料材質 


圖18.10 在Unity 5中使用基於物理的渲染技術，場景在不一樣光照下的渲染結果 

 
圖18.11 光照面板下的Scene標籤頁 


圖18.12 左圖：當關閉場景中的全部光源並把環境光照強度設爲0後，使用了Standard Shader的物體仍然具備光照效果。右圖：在左圖的基礎上，把反射源設置爲空，使得物體不接受任何默認的反射信息 

 
圖18.13 使用的平行光 


圖18.14 左圖：將Bounce Intensity設置爲0，物體再也不受到間接光照的影響，木屋內陰影部分的可見細節不多。右圖：將Bounce Intensity設爲8，陰影部分的細節更加清楚 


圖18.15 左圖：未使用反射探針。右圖：在場景中放置了兩個反射探針，注意牆上的盾牌與左圖的差異 

 
圖18.16 使用反射探針實現相互反射的效果 


圖18.17 左圖：在線性空間下的渲染結果。右圖：在伽馬空間下的渲染結果 

 
圖18.18 人眼更容易感知暗部區域的變換，而對較亮區域的變化比較不敏感 

 
圖18.19 編碼伽馬和顯示伽馬 

 
圖18.20 左圖：伽馬空間下的渲染結果。右圖：線性空間下的渲染結果 

 
圖18.21 左圖：伽馬空間下的混合結果。右圖：線性空間下的混合結果

 

 

第19章 Unity 5更新了什麼

 

 

 圖19.1 在shader的導入面板中，單擊圖中按鈕可查看Unity爲該固定管線着色器生成的頂點/片元着色器代碼