1. 程式人生 > >網易技術美術總監:深度解析次世代手遊的貼圖與著色技巧

網易技術美術總監:深度解析次世代手遊的貼圖與著色技巧

在5月12日舉辦的Unite2017開發者大會上,網易盤古遊戲部技術美術總監的李正彪分享了關於其內部對於美術和設計各方面的乾貨,同時也以當前市場上的一些遊戲產品作為案例進行了講解,並對未來的美術技術進行了一些預期,由於美術設計需要極強的專業性,因此這可能也是這場大會上最“乾貨”的內容了。

以下為演講原文,遊戲葡萄整理髮布:

尊敬的先生、女士們,大家好!本次講座是以美術和技術為中心展開的。我是來自網易盤古技術部的李正彪,這是我第二次參加Unite大會。2012年第一次參加Unite大會,再次感謝Unite中國對我誠摯的邀請。希望各位以一種輕鬆的心態來聽我的講座。

今天演講的主題主要可以分為三個部分,因為演講時間有限,所以我把這三點做了濃縮。其實我們平時接觸的大多數圖形學技術都可以在這裡發表,如果在座的哪位對圖形學有興趣的話,當你讀完Gpro7為止的話會發現,其實它也沒有那麼難。2018年,程式處理技法會成為流行趨勢。

接下來以回顧的心態來主要談談美術表現。對於手遊美術這一塊,過去、現在和將來當然主要集中於美術表現。作為專家,必須要知道的優化方法主要包含了以下內容:確認程式碼返會編,最後一部分主要來看一下Unity 5.6當中新增的幾個PBR相關的一些內容。對於觀眾的定義,本人衷心地希望此次講座能夠成為遊戲開發和技術開發工程師之間的工作溝通的橋樑。

3.jpg

首先暫時先把Unity先忘掉吧。

第一部分的主要內容包括了對於手遊畫面發展歷程的回顧。手遊環境下美術層面的構想和實現,硬體的通性或者版本的不同而帶來的畫面實現方式,並且都跟過去做比較。同時會介紹幾種值得推薦的美術表現,傳遞一些更加符合手遊美術環境的。

6.jpg

回顧過去,我們看一下14年前在2003年開發的遊戲環境,G-Force簡單來說就是《天堂》2003年上線了,同時技術美術這個崗位開始在遊戲公司形成。隨著在市場上佔據的份額越來越大,遊戲環境的品質也從過去的手繪變成了現在的工具來完成。《天堂2》上線五年以後,當時開發《天堂2》的虛幻引擎從2.0到2.5。新種族翼人使用的就是這個虛幻技術。回顧手遊開發的過去十年,今天的手遊畫面變得愈發精緻。甚至通過近似演算法,在手遊硬體上也能進行基於物理的渲染和線性空間渲染。

8.jpg

《龍之谷》這個遊戲僅使用了動態燈光處理,整體做了完美的銜接,甚至對於今天的手遊開發者來說,也是一個很好的案例。

9.jpg

10.jpg

如果還依舊堅持傳統的Art  work,對此可能會沒有興趣。其實審美的開發對它也是很有重要的。資料調查是很重要的,我們可以利用百度或者谷歌,我們可以找到從20年前到至今為止所有的技術內容。《DOTA2》是一項很好的參考資料,從配置表到SHADER,如上圖所示,可以通過美學來完成最好的表現。

11.jpg

被微軟收購的《我的世界》這個遊戲是傳統2D遊戲當中很好的一個案例。美術的造型和達到最終表現的方法跟對技術的理解是分不開的。在這個例子中,藝術家很清楚怎麼樣能夠實現更好的渲染,所以這是很好的參考資料。

12.jpg

以上是2011年包括我在內的僅由兩名開發者開發的開發原形,2011年的當時,這種程度的畫面也被稱之為次世代手遊,甚至榮獲在GDC 202參展的手遊。

14.jpg

在當時的手機上,Unity還沒有深度處理陰影的功能。跟Unity5.6相比,開發環境還是很惡劣的。Unity5.6更新之後相對有了一個更好的手遊開發環境。對於最近剛使用Unity的人來說,使用起來還不太習慣。僅用Unity基本SHADER來實現表現,還是會受到很多限制。在當時硬體效能剛好處於iPhone 3到iPhone 4的表現,再加上當時的大部分開發者對強化SHADER方面也不太很好,所以從過去的硬體平臺當中獲取很多機制。

15.jpg

2006年所提出的雙拋面技術來對VR效能做優化。2012年大多數的智慧手機僅支援opengl-es2.0,之後部分旗艦機型可以使用2.0,之後可以支援3.0以上的版本。未來支援opengl-es2.0以上的版本會成為主流登場。

16.jpg

以上是美術手遊當中經常使用的SHADER,儘管指令不少,實際從效能層面考慮,價效比還是比較高的。2005年,應用的材質很出名。

17.jpg

上圖就是大家所熟知的SHADER效果。效能層面的好處,儘管指令數也不少,但是實際從效能層面考慮,價效比還是比較高的,從2004年發表的拋物面反射,優點是運算快,完全替代燈光,缺點是燈光效果屬於重組視角。

18.jpg

以上是2012年在其他公司應用的案例。重要的是製作怎樣的Matcap  shader來使用,或者可以使用matcap來製作。下一頁我會簡單介紹一下LYS的案例。

19.jpg

不適用PBR的shader的模型也有很多種,實行各種運算模式,這款軟體是很好用的。可以確認座標系,在Unity當中使用Matcap  shader並確認。應用Matcap  shader色像空間存在一點差異,但是通過photoshop是能夠被矯正的。

20.jpg

不適用Unity的PBR標準shader,使用Unity反射探偵反射,給粗糙度貼圖乘以常數2.5左右的值。現在雖然還處於試驗階段,簡單給大家做一下介紹。

22.jpg

相比於Cubemap,手機裝置效能層面是有優勢的。在2015年,Gratin開發者們發表過實際應用案例,我看過論文,看來大家的想法都是比較類似的。

21.jpg

簡單地說,就是把拋物面鏡子放置在正面和背面來匯出反射資訊,跟Cubemap相比,可能會略有扭曲現象發生,但是看起來並不礙眼。

23.jpg

上圖是在Unity座標系除錯的場景。

24.jpg

簡單的數學公式,接下來使用DOTA  workshop為原例。

25.jpg

以DOTA為例,為MOD使用者整理了Artwork檔案和shader檔案,設定新的題材和美術方向的時候,使用參考遊戲的網格資訊和質感資訊,用MOD也是一種很好的方式。

26.jpg

我大致羅列了一下我能獲取並且使用的資訊。有幾個資訊雖然是手遊美術中經常用到的資料資訊但是非常有用。它更新的版本速度比我們想象當中要快。

接下來看一下Matcap自定義圖表當中的,我們要矯正遊戲中被表現的物件的特性並且要看它在美術上面發揮的作用。反正在手機螢幕上看起來並不那麼顯眼,用陰影的快感來表現立體感,有時候也是一種很好的方法。

27.jpg

以上是正在嘗試正在試驗資訊變形的過程,頂點的法線方向是從其他的定點法線捕捉而來,會反正到N上面來,但是要注意的是用在沒有使用法線貼圖的資料的時候,是有效果的。

28.jpg

如果使用了法線貼圖,那麼資訊可能會出錯。本次講座的特點還是通過對我們使用的資訊的變形能夠做哪些事情。

29.jpg

添加了反射探偵,該部分為美術視覺化體現了試驗。

30.jpg

在開發試驗階段,一般要從效能以外方面入手,然後再刪除或者隱藏在探索階段內不重要的東西。要保證程式碼的整潔和優化,從試驗階段開始,它的直觀性還是比較低的

31.jpg

頂點色可以用多種方法來表現手遊的效果。把一些光照資訊用頂點色保存於網格中,來表現開發shader。這可以聯結在shader上,在手遊開發環境中無法使用多個燈光效果,所以有必要努力使用多個資訊資料來表現多個效果。

32.jpg

在手遊場景中生成光照貼圖是有作用的,根據小畫面當中看到的物件的大小不同,可以把這一塊區域分配給更加重要的物件。以上是由簡單的計算式構成的。

33.jpg

其實使用預先生成的資訊要比法線向量進行計算要來得好。

34.jpg

35.jpg

也推薦深層使用頂點位置貼圖。

38.jpg

SH資訊是由27個資訊構成的,對RGB記錄了9個方向的取樣資訊,全部儲存在了lighting  deta裡面,編寫自定義shader的時候,shader九函式是非常有用的,用權重可以使用它來控制。

37.jpg

手遊開發者在PC顯示器環境中開發,有時候關於色感或者光的表現跟在PC上面看到的時候相比會出現得比較模糊,對於這種現象,我們的美術組通過使用烘焙燈光過濾來矯正,從原理上來看絕對不能有除了color以外的資訊。

40.jpg

39.jpg

以上是提供的烘焙燈光濾鏡。

42.jpg

接下來看一下關於Unity  PBR。不久的將來,PBR將會在手遊開發中更加廣泛地使用。次世代,我們該怎樣定義次世代手遊畫面呢?其實並不只意味著PBR的使用,更確切地只是硬體正規化更新換代的時期。渲染本身發生了很大的變化,手機裝置也是同樣,像Metal或者Vulkan等低階API的登場和硬體的發展,以上我們可以把它定義成次世代。

43.jpg

PBR其實不用想得那麼複雜,只要熟知幾種資訊就可以了。第一點能量守恆,而且基於這種現象的高光也是由光來決定的。完全的金屬不存在Diffuse,再重申一遍,完全的金屬性色像就是高光的色像,這個顏色是被記錄在Bas  Color中的。

中間物質呢?所謂中間物質就是分子結構下的結構物質。我們可以簡單地做如下定義,世界上單獨由分子結構構成的純粹的物質是不多的,特別是現代社會,陶瓷類等等跟圖層略有不同。還有根據分子和原子的結晶結構來決定它的導電性,結論上來看,實施PBR也不能完全地表現但是在我們現實使用中已經完全地足夠了。

44.jpg

現在很多的中國遊戲公司也開始使用Substance  Painter,PBR受環境影響比較大。所以要對工作環境做適當矯正,所以Unity5.6是非常好的。

45.jpg

我們要知道白色平衡,在手遊中這不是很多。基本實現的環境效果都是中午十二點到下午二點。如果一般已經對準了中午十二點到下午兩點,一個晴朗的天氣中,環境光的白平衡在室內也能正確地表示出物件的色像。

46.jpg

白色不一定會展現為白色,一般TC是5500的話,為了達到材質求標準材質設定,工程師開發PBR的時候要更符合shader的環境。要基於展示更多的環境來製作。天空光不太強烈的時候,即使大白天也可以裹上一層強烈的青色感。

47.jpg

直接致用HDR提供的素材。色溫和色像對於color的渲染的標準場景,最好的是使用正確的IBO素材。

48.jpg

從Unity5.6開始,新增了可以比較由環境光帶來的LookDev的介面,看Color是否有發生變更。

50.jpg

Look-dev提供中的,最好不要勾選Enable  Tone  Mapping。一般藝術家如果充分認為灰色調是沒有被汙染的話,其他顏色是沒有問題的。但是根據曝光值的不同,其他環境光也會有不同。所以除非是特殊環境,否則不要對曝光環境做太多的修改。

51.jpg

大家用的最多的就是Substance  Painter裡面提供的,它裡面有少量的雲和黃色土地。基本上,Substance  Painter和Unity3D最大的不同就是主光點還有高光部分的渲染處理也有所不同。如果在接受這部分,在理解相互不同點的基礎上是可以還原出類似環境的。

52.jpg

使用Unity5.6的  Look Dev功能,我們要確認我們的服裝的顏色,到底能展示出怎樣的效果。

53.jpg

為了特殊的場景,我們需要摳掉IBO材料內部的太陽光。

54.jpg

如果要使用白色標準場景的話,Substance也是要根據它來的。由於不同的畫面角度和IBO素材的曝光度帶來的變化,我們也需要觀察。

55.jpg

2015年以後,發售的大部分手機硬體都支援PBR,支援蘋果5S以上,安卓SDK4.3以上,opengl  es2.0extension中部分機型支援PBR。結論就是確保PBR的渲染環境性,就要使用以上的硬體。

57.jpg

接下來主要講優化方案的必要戰略,對於IPC這個專業用於,對藝術家們來說,多少會有點生疏。但對我們來說得稍微瞭解一下IPC和ALU,希望大家通過百度和谷歌瞭解更多的資訊。IPC屬於中高檔,未來智慧手機渲染還是很值得期待的。效能相比6XT也做了很大的改善,XT作為普及性產品,相信XT的效能也會十分優秀。隨著ALU改善帶來的命令組的快速執行也是備受矚目的。

接下來來講講怎樣使用近似值計法,來降低shader的程式碼。每個分支所能執行的指令數,平常一般會問有幾個是在相似shader還有頂點shader。我們關注的是怎麼樣減少指令,以怎樣的方式來減少指令。根據方式的不同,我們要確認程式碼是否有錯分類,參考論文中也有提到,分好類的程式碼運作速度要提升30%以上。

58.jpg

為了進行單元測試,我使用了兩種編譯器,使用了2015年生產的普及型型號。上圖是非常受限制的特效用公式。

59.jpg

以上是PC推定製的結果,編譯器使用了Series  6和Series  8。

60.jpg

以上是經過近似值處理和優化的結果,我們可以確認per  line  cycle的總數是減少的,以其他不同的方法再去了解一下。

61.jpg

62.jpg

因為考慮到power  VR的編輯,編譯器內部指令已經做了公式上的優化。

接下來我們來看一下關於頂點,美術能做什麼樣的轉化。

63.jpg

我們可以把它看成是從客戶端的記憶體傳遞以及儲存到服務端記憶體的物件,因此GPU需要快速地完成。

我們需要知道頂點快取的屬性資訊,為什麼要做到最小化呢。最新的GPU有了質的飛躍,在藝術家層面,頂點快取渲染的尺寸還是得能儘量減就減。

64.jpg

我們試著羅列了頂點快取的資訊,從網格開始構成了整個遊戲資料。我們需要給藝術家提供給這些壓縮的方法。大部分藝術家僅僅對三角形個性所感興趣,如果有十年以上的工作3D模型師對這方面應該有了解。對於我們亞洲的開發者,這一點是值得注意的。我們要儘可能減少定點快取。

65.jpg

66.jpg

67.jpg

68.jpg

69.jpg

接下來看一下網格的頂點數量最後會給VBO帶來怎麼樣的變化。我們可以確認在Unity遊戲引擎當中,計算的頂點數量是增加的。但是雖然是完全分開的,現實中不存在這種情況。這是組成網格形態的頂點數量。雖然對shader進行了分割,但是頂點數量還是不變的。在遊戲引擎中進行了確認了,左側是UV Shell一個的時候和兩個的時候,頂點資訊數量是不一樣的。

70.jpg

接下來對手機上發生的法線貼圖來做一下分析。法線貼圖的高光部分會出現問題。PC上使用的是TXC5N,實際我們確認標準shader最終會進行歸一化處理。

71.jpg

發生如上圖所示情況的時候,要先確認幾個基本資訊。頂點法線和切線法線資訊,因為進行了線性差值,要確認頂點法線的向量是否有發生變更,這部分如果在shader部分裡面進行歸一化處理的話,大部分能解決。但是我們還是希望在畫素法線中進行。

72.jpg

以IOS為基準,對幾種情況進行了視覺評價,有問題的法線貼圖我們可以確認藝術家在photoshop中對切線進行了調整。在貼圖上不管對法線貼圖進行怎樣的歸一處理,這一種問題還是很難解決的。

73.jpg

由於壓縮部分造成的問題還是沒有辦法解決,容量也比之前來得大。雖然在shader上進行簡單的歸一化處理就能解決,但是增加了一個指令,每次是需要大量的預算量的,負擔也比較大。最終把美術加工的貼圖以原來尺作為貼圖。使用24位真彩色,因為進行了降階取樣,所以小的細節會丟失,但是實際在4.5英寸的畫面中,那些小的細節原來就是沒有意義的。對沒有進行歸一化處理的normal  texture進行了比較。

74.jpg

以IOS為標準,RGB  PVRTC  4bit進行了處理,RGB  ASTC也進行了處理。容量是1.3兆。如果對遊戲效果沒有影響的話,就沒有問題。

75.jpg

如果遊戲本身要處理大量的畫素shader的話,24位真彩像也是值得考慮的。

76.jpg

通過USB3.0,把手機連線到電腦上,如圖所示,我們可以把Unity編輯器遊戲畫面移到手機畫面上,作為雙顯連線的解析度是希望不要太高,給記憶體留一點頻寬是最好的。一般安卓手機和蘋果都有登陸鎖,單純地通過幀率調速,為了獲取到穩定精確的資訊,除了高溫的throttling以外,throttling是可辨比率。這些都是需要正確的效能分析來確定,因此我們要定義嚴格的評價尺寸。

77.jpg

比較沉悶的講座終於要結束了,結論就是手遊畫面的開發暫時還是會以過去PC畫面處理經驗為基礎,收集哪些資訊,怎樣靈活使用是很重要的。藝術家怎樣使用參考資料也是需要值得探究的。任何實時處理的開銷還是比較大的,而且需要對近似值有所瞭解,總的定義就是積土成山,能節省的東西都要優化,希望各位能銘記這一點!再次感謝。