在Shader中會使用各種不同圖參與渲染,所以簡單地總結下各種圖的渲染原理、制作方法,最后面幾種是程序生成圖。
1. Albedo
2. Diffuse(Photographic)
<img data-rawwidth="731" data-rawheight="518" src="https://pic2.zhimg.com/v2-2ab448bf1a995508556afb5f77c96d9d_b.jpg" class="origin_image zh-lightbox-thumb" width="731" data-original="https://pic2.zhimg.com/v2-2ab448bf1a995508556afb5f77c96d9d_r.jpg">
從上圖可以看出來,Albedo是去掉Diffuse的光照和陰影生成的,而在pbr工作流下必須要用Albedo。轉換方法:How to Make an Albedo Texture from a Diffuse Texture
3. Alpha Map
注意:jpg沒有alpha通道,png也沒有alpha通道,顯示的alpha是根據rgb計算的灰度作為alpha使用。另外安卓平台ETC1也沒有alpha通道。
4. Bump Map
5. Height Map
基於高度的潮濕地面
<img data-rawwidth="721" data-rawheight="388" src="https://pic4.zhimg.com/v2-8093ccef2c44181a1f6f1c50b262357b_b.jpg" class="origin_image zh-lightbox-thumb" width="721" data-original="https://pic4.zhimg.com/v2-8093ccef2c44181a1f6f1c50b262357b_r.jpg">
6. Normal Map
Bump Map是凹凸貼圖,常用的有兩種:一種是Emboss Bump Map(浮雕凹凸貼圖,使用的Height Map),另一種是Dot3 Bump Map(點乘凹凸貼圖,使用的是Normal Map)
7. Mask Map
Mask用途比較多,常用來標識不同物體,比如標識建築上反光的窗戶、地面的積水、皮膚上汗水等。
<img data-rawwidth="716" data-rawheight="241" src="https://pic2.zhimg.com/v2-e8665a67398c1b51ce8061df26fdbc91_b.jpg" class="origin_image zh-lightbox-thumb" width="716" data-original="https://pic2.zhimg.com/v2-e8665a67398c1b51ce8061df26fdbc91_r.jpg">
8. Light Map(圖來源)
<img data-rawwidth="545" data-rawheight="352" src="https://pic4.zhimg.com/v2-92a7b8ea634bfb03c9237878c2098c87_b.jpg" class="origin_image zh-lightbox-thumb" width="545" data-original="https://pic4.zhimg.com/v2-92a7b8ea634bfb03c9237878c2098c87_r.jpg">
9. Lut
Lut(查找表lookup table)可以用於優化復雜光照的渲染,比如lambert blinn-phong可以把(NL,NH)作為uv坐標,將光照計算存儲在一張貼圖中,這樣渲染時復雜的計算過程就優化為紋理采樣了。另外皮膚、毛發之類復雜計算都可以用此方法優化。
10. Emission Map
<img data-rawwidth="636" data-rawheight="327" src="https://pic3.zhimg.com/v2-4ca95ad00c9cf415e88849e4f8fc4486_b.jpg" class="origin_image zh-lightbox-thumb" width="636" data-original="https://pic3.zhimg.com/v2-4ca95ad00c9cf415e88849e4f8fc4486_r.jpg">
如果要表現更好的效果,自發光還要配合HDR/ToneMap/Bloom。
11. Metallic Map/Roughness
12. Specular Map/ Smoothness
<img data-rawwidth="729" data-rawheight="619" src="https://pic3.zhimg.com/v2-6bb7e2d5941e8001c28f2da4fd9aabe6_b.jpg" class="origin_image zh-lightbox-thumb" width="729" data-original="https://pic3.zhimg.com/v2-6bb7e2d5941e8001c28f2da4fd9aabe6_r.jpg">
圖來源
高光工作流可以不受限於PBR,能做非真實渲染,而金屬工作流則對入門者更友好,限制在物理渲染的框架中,不至於渲染的太糟,當然金屬工作流也可以做風格化的渲染。如果是用Substance Painter或者Marmoset Toolbag制作,這兩種方式都支持導出的。
13. Gloss Map
14. Smothness Map
15. Roughness Map
光澤貼圖和高光貼圖是不同的,它類似平滑貼圖/粗糙貼圖,表示物體表面的平滑粗糙程度,而高光貼圖存儲的是高光的強度,金屬貼圖存儲的是金屬度。
16. pbr(sbsar)
<img data-rawwidth="760" data-rawheight="389" src="https://pic4.zhimg.com/v2-d27ead03403f6ed34d735bbf18b1a44b_b.jpg" class="origin_image zh-lightbox-thumb" width="760" data-original="https://pic4.zhimg.com/v2-d27ead03403f6ed34d735bbf18b1a44b_r.jpg">
17. Ramp Map
Ramp Map常用於卡通渲染,可以用於手工調節漫反、高光、陰影等,但是這比較依賴美術畫圖的功力,道理簡單,渲染的好看卻不容易。
圖來自米哈游的技術解說米哈游極樂凈土的卡通渲染
<img data-rawwidth="769" data-rawheight="522" src="https://pic4.zhimg.com/v2-a7cf9f4fe327ab8be586276d80eda673_b.jpg" class="origin_image zh-lightbox-thumb" width="769" data-original="https://pic4.zhimg.com/v2-a7cf9f4fe327ab8be586276d80eda673_r.jpg">
18. Detail Map(Albedo Emission Specular Normal 等)
Detail Map主要解決相機靠近模型時貼圖精度不足的問題,比如地面、皮膚、樹木等等靠近看會很模糊,用一張尺度更小的坑坑窪窪的圖來增加細節。左上是模糊的地面,右上是細節圖,最下面是增加細節后的地面。
<img data-rawwidth="693" data-rawheight="621" src="https://pic1.zhimg.com/v2-50dd757aabbe35798a0cab5f0798ff24_b.jpg" class="origin_image zh-lightbox-thumb" width="693" data-original="https://pic1.zhimg.com/v2-50dd757aabbe35798a0cab5f0798ff24_r.jpg">
19. Gradient Map(用於Color Gradient顏色分級、顏色校正等)
<img data-rawwidth="519" data-rawheight="369" src="https://pic1.zhimg.com/v2-01c492951257159441784a7d8cfe86c0_b.jpg" class="origin_image zh-lightbox-thumb" width="519" data-original="https://pic1.zhimg.com/v2-01c492951257159441784a7d8cfe86c0_r.jpg">
20. Jitter Map/Sparke Map/Glitter Map
這種閃爍的噪點主要用於沙子、雪等渲染,主要用於表現顆粒感。這可以用噪聲圖來用於渲染,也可以用函數生成,一般類似frac(a*sin+b)這樣形式,可以搭配WorldPos、ViewPos、Time來組合成函數。
<img data-rawwidth="772" data-rawheight="431" src="https://pic3.zhimg.com/v2-b3752386f3191ad96c856833b445927a_b.jpg" class="origin_image zh-lightbox-thumb" width="772" data-original="https://pic3.zhimg.com/v2-b3752386f3191ad96c856833b445927a_r.jpg">
21. Noise Map
Noise有很多種:白噪聲、藍噪聲、perlin噪聲、simplex噪聲、Voronoi噪聲。另外推薦個噪聲圖編輯器:numberflow
<img data-rawwidth="646" data-rawheight="354" src="https://pic2.zhimg.com/v2-f7f68a521e4cf6191114c0f3ddcf5a15_b.jpg" class="origin_image zh-lightbox-thumb" width="646" data-original="https://pic2.zhimg.com/v2-f7f68a521e4cf6191114c0f3ddcf5a15_r.jpg">
22. Splatting Map
最常用於地形渲染,單獨一張control texture作為多層貼圖的混合系數,既可以用於顏色混合,也可以用於法線混合。
<img data-rawwidth="769" data-rawheight="532" src="https://pic2.zhimg.com/v2-7d5e8df6fa91ce2a60ec086ebc1fbd05_b.jpg" class="origin_image zh-lightbox-thumb" width="769" data-original="https://pic2.zhimg.com/v2-7d5e8df6fa91ce2a60ec086ebc1fbd05_r.jpg">
23. Lens Map(Rain/Snow/Freeze/Glare/Flare/Flash/Gleam/starburst)
做鏡頭效果會需要很多類似雨滴、雪花、臟跡、冰凍、炫光、星星等貼圖。比如下面鏡頭雨滴。
<img data-rawwidth="679" data-rawheight="784" src="https://pic2.zhimg.com/v2-981bba00346b848059ac3702db644e39_b.jpg" class="origin_image zh-lightbox-thumb" width="679" data-original="https://pic2.zhimg.com/v2-981bba00346b848059ac3702db644e39_r.jpg">
24. CubeMap
Arm公司做的Ice Cave把CubeMap用在反射、折射、陰影,效果很贊(ice cave)
<img data-rawwidth="770" data-rawheight="429" src="https://pic2.zhimg.com/v2-020bfca59a8e6781d8ec5e7a24bbe3fd_b.jpg" class="origin_image zh-lightbox-thumb" width="770" data-original="https://pic2.zhimg.com/v2-020bfca59a8e6781d8ec5e7a24bbe3fd_r.jpg">
25. MatCap Map
Matcap的原理將法線轉換view坐標系,取XY作為UV采樣一張貼圖,原理如下圖
<img data-rawwidth="772" data-rawheight="453" src="https://pic3.zhimg.com/v2-5d3e9fd42676f2d518060c7c18bdfeb6_b.jpg" class="origin_image zh-lightbox-thumb" width="772" data-original="https://pic3.zhimg.com/v2-5d3e9fd42676f2d518060c7c18bdfeb6_r.jpg">
對於場景色調比較統一、不要求精准光照的情況,這是種運行效率非常高的渲染方式。
<img data-rawwidth="770" data-rawheight="494" src="https://pic1.zhimg.com/v2-8f7352f62481e390cb1548b688c3f918_b.jpg" class="origin_image zh-lightbox-thumb" width="770" data-original="https://pic1.zhimg.com/v2-8f7352f62481e390cb1548b688c3f918_r.jpg">
26. 3D Texture
3d紋理最常用於體渲染,比如雲、高度霧等。Unity不支持3d紋理的文件格式,但是支持動態創建Texture3D,這樣可以自己保存為asset格式或者自定義格式,在運行時轉換為Texture3D。因為體渲染比較常用的方式是raymatching,步進次數少效果很難表現出來,在移動端效率比較低。圖來HorizonZeroDawn
<img data-rawwidth="769" data-rawheight="263" src="https://pic1.zhimg.com/v2-0979b733a8e58efc350dd818d9f33824_b.jpg" class="origin_image zh-lightbox-thumb" width="769" data-original="https://pic1.zhimg.com/v2-0979b733a8e58efc350dd818d9f33824_r.jpg">
27. Translucency Map(Thickness Map、反向AO、單散射)
主要用於半透明物體,比如闊葉植被、玉等
<img data-rawwidth="711" data-rawheight="486" src="https://pic3.zhimg.com/v2-8369082ad40d88fab258338b8ff292c2_b.jpg" class="origin_image zh-lightbox-thumb" width="711" data-original="https://pic3.zhimg.com/v2-8369082ad40d88fab258338b8ff292c2_r.jpg">
28. Ambient Occlusion Map
AO的計算方法是從頂點的半球發出射線,檢測射線是否與網格相交,下圖的遮擋值是5/7。圖來源
<img data-rawwidth="436" data-rawheight="341" src="https://pic4.zhimg.com/v2-1511cb24bffef9b42d604de95fc458db_b.jpg" class="origin_image zh-lightbox-thumb" width="436" data-original="https://pic4.zhimg.com/v2-1511cb24bffef9b42d604de95fc458db_r.jpg">
因為AO圖噪點較多,即使增加射線的數量效果也不是很好,而體遮擋法能很好解決這個問題。AO如果作為后處理的話,SSVO、SSDO是比較流行的方法。
<img data-rawwidth="732" data-rawheight="272" src="https://pic1.zhimg.com/v2-9ce92e7568ffc05558f23e4516dec398_b.png" class="origin_image zh-lightbox-thumb" width="732" data-original="https://pic1.zhimg.com/v2-9ce92e7568ffc05558f23e4516dec398_r.jpg">
29. DUDV Map
DuDv圖看上去像蚯蚓爬過的法線圖,一般用RG兩個通道存儲數據,是根據法線求導后再模糊處理存儲的數據,類似與Parallax Map的用途,它也用於扭曲,比如下圖用於扭曲水面倒影。圖來源
<img data-rawwidth="766" data-rawheight="212" src="https://pic3.zhimg.com/v2-52da8752126e7702db06b9af438470ae_b.jpg" class="origin_image zh-lightbox-thumb" width="766" data-original="https://pic3.zhimg.com/v2-52da8752126e7702db06b9af438470ae_r.jpg">
30. Flow Map
Flow map存儲的是向量場數據,可以用於控制水面UV,比如下圖石頭周圍一圈一圈水紋,制作工具有很多,比如flowmap制作工具
<img data-rawwidth="666" data-rawheight="292" src="https://pic1.zhimg.com/v2-876652fcd20dc1820965f02d2237b904_b.jpg" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic1.zhimg.com/v2-876652fcd20dc1820965f02d2237b904_r.jpg">
31. Ripple Map
常用於雨滴水紋、物體落入水中的水紋等,可以算是flowmap的一種。
<img data-rawwidth="560" data-rawheight="170" src="https://pic2.zhimg.com/v2-135e70ad77b389e535edd80c930d3049_b.jpg" class="origin_image zh-lightbox-thumb" width="560" data-original="https://pic2.zhimg.com/v2-135e70ad77b389e535edd80c930d3049_r.jpg">
32. Distort Map
扭曲圖比較常用於半透物體,用於扭曲背景。比如下圖冰塊。
<img data-rawwidth="570" data-rawheight="405" src="https://pic2.zhimg.com/v2-2075fe820260c16e8022223f8e11ddb9_b.jpg" class="origin_image zh-lightbox-thumb" width="570" data-original="https://pic2.zhimg.com/v2-2075fe820260c16e8022223f8e11ddb9_r.jpg">
33. Displacement Map
34. Vector Displacement Map
這兩種圖常用鑲嵌,不過Displacement Map相當於高度圖,而Vector Displacement Map存儲的是三維向量,可以更好地細分模型。比如用地面蘑菇、地衣、耳朵等。
<img data-rawwidth="771" data-rawheight="413" src="https://pic2.zhimg.com/v2-33d496689f58d0f45078851ceac4a7cd_b.jpg" class="origin_image zh-lightbox-thumb" width="771" data-original="https://pic2.zhimg.com/v2-33d496689f58d0f45078851ceac4a7cd_r.jpg">
35. Radiosity Normal Map
半條命首先引入的光照貼圖方式,具體參考:Radiosity Normal Map,另外抵抗:人類隕落也有使用這種方法:抵抗中的光照
<img data-rawwidth="708" data-rawheight="537" src="https://pic2.zhimg.com/v2-542871bc0e70bcfc2bd5a53b71c8d6e9_b.jpg" class="origin_image zh-lightbox-thumb" width="708" data-original="https://pic2.zhimg.com/v2-542871bc0e70bcfc2bd5a53b71c8d6e9_r.jpg">
36. Cavity Map
縫隙圖存儲的是比普通AO更小的AO信息,主要用於表現裂縫。制作方法參考:縫隙圖筆記
<img data-rawwidth="576" data-rawheight="276" src="https://pic1.zhimg.com/v2-c78d817e7f1ae8a35aae572b8ec45df4_b.jpg" class="origin_image zh-lightbox-thumb" width="576" data-original="https://pic1.zhimg.com/v2-c78d817e7f1ae8a35aae572b8ec45df4_r.jpg">
37. Curvature Map
曲率圖和縫隙圖不同的是它主要用於表現邊緣、凹凸等效果,用於耳朵、眉骨、鼻子渲染效果會很好,利用DDX/DDY或fwidth也可以動態計算曲率。
<img data-rawwidth="273" data-rawheight="250" src="https://pic1.zhimg.com/v2-728a50436f1eac74716363498baa62d0_b.jpg" class="content_image" width="273">
38. Anisotropic Map
有些物體的光照會呈現各向異性,比如頭發、金屬等,下圖是三種頭發渲染的方式(環形、kajiya、Scheuermann)都用到各向異性的貼圖用於高光偏移。
<img data-rawwidth="769" data-rawheight="503" src="https://pic2.zhimg.com/v2-6a4bdb3b17d682bc53b0ecf6497e5465_b.jpg" class="origin_image zh-lightbox-thumb" width="769" data-original="https://pic2.zhimg.com/v2-6a4bdb3b17d682bc53b0ecf6497e5465_r.jpg">
39. Derivative Map
這是由頑皮狗大神Morten Mikkelsen首先提出法線圖的衍生方式(Bump Mapping Unparametrized Surfaces on the GPU),因為用法線圖一般在切線空間用於光照計算,而這種方法則不需要切線空間的參與,效率和效果都會更好,不用法線圖,而是表面梯度圖,和高度梯度圖是不同的。不過這文章讀起來挺心累的,最好參考Jim Blinn大神的凹凸貼圖原理。
<img data-rawwidth="713" data-rawheight="580" src="https://pic1.zhimg.com/v2-f034818198949b361e156277245d6c18_b.jpg" class="origin_image zh-lightbox-thumb" width="713" data-original="https://pic1.zhimg.com/v2-f034818198949b361e156277245d6c18_r.jpg">
40. Foam Map
泡沫貼圖、浪花貼圖用於水面超過一定值時泡沫會和水面顏色混合,水面頂點越高泡沫透明度越大。
<img data-rawwidth="418" data-rawheight="216" src="https://pic2.zhimg.com/v2-6a556407b7df4cdfa4ebd538ec78b3e5_b.jpg" class="content_image" width="418">
圖來源
41. Caustics Map
水紋貼圖:因為水面起伏、焦散導致水底某些地方會比周圍更亮,可以用Projector渲染水紋,也可以參考GPU Gems的反向計算折射光線來采樣太陽環境圖的方法(Rendering Water Caustics),還有一個制作水紋的工具(水紋生成器+Unity Demo)
<img data-rawwidth="736" data-rawheight="367" src="https://pic4.zhimg.com/v2-8e0c478babbcab1b39b3289df57681d3_b.jpg" class="origin_image zh-lightbox-thumb" width="736" data-original="https://pic4.zhimg.com/v2-8e0c478babbcab1b39b3289df57681d3_r.jpg">42.Bent Normal Map (經大神王滕昊提醒補充加上)
Bent Normal 常用於離線AO渲染中,是對原始法線修改后的向量,考慮周圍遮擋情況使其指向光線傳入的主方向,如下圖Bend Normal 比原始法線偏右。用於光照計算或者環境光采樣用Bend Normal在模型邊緣處會得到更好的AO和光照效果。
<img src="https://pic4.zhimg.com/v2-0ec60b580acd4ec3ecaad0dc8e983c4f_b.jpg" data-rawwidth="481" data-rawheight="236" class="origin_image zh-lightbox-thumb" width="481" data-original="https://pic4.zhimg.com/v2-0ec60b580acd4ec3ecaad0dc8e983c4f_r.jpg">
43. Depth Map
44. Camera Depth Map
45. Camera Depth Normal Map
相機深度圖可以用於渲染水、霧、掃描、半透物體等,這里有個不錯文章有關深度法線圖的:深度與法線圖
<img data-rawwidth="694" data-rawheight="425" src="https://pic4.zhimg.com/v2-82179da563ca53beb19412fa72b027bb_b.jpg" class="origin_image zh-lightbox-thumb" width="694" data-original="https://pic4.zhimg.com/v2-82179da563ca53beb19412fa72b027bb_r.jpg">
46. Grab Pass Texture
GrabPass可以用於熱浪扭曲、半透冰塊、沖擊波等需要背景用於渲染的情況,在移動端效率不高,不要求動態背景時可以用Cubemap來代替。
<img data-rawwidth="470" data-rawheight="776" src="https://pic1.zhimg.com/v2-5cabf9802b87699b047a18a579100dfc_b.jpg" class="origin_image zh-lightbox-thumb" width="470" data-original="https://pic1.zhimg.com/v2-5cabf9802b87699b047a18a579100dfc_r.jpg">
47. Vertex Texture Fetch
在Vertex Shader中讀取上一幀水面高度紋理,在當前幀繼續波動,這可以用於交互式水渲染,不過頂點紋理拾取是比較耗費資源的操作,不需要交互的水面是用不到的,對於海戰類型的游戲會比較有用。
<img data-rawwidth="418" data-rawheight="230" src="https://pic4.zhimg.com/v2-6dd542657a9770272383748116b2fb6f_b.jpg" class="content_image" width="418">