【GDC2013】Sand Rendering in Journey

《風之旅人》是一款口碑很好的遊戲,它的渲染也是極具風格。他們在做渲染的時候有一個非常值得學習的理念,當你要營造某種環境的感覺時,需要一些超越真實或者誇張的方法,來達到感受上的真實,而並不需要遵循真實。《風之旅人》運用夢幻誇張的渲染方法,讓你在感受上真的覺得自己行走在茫茫的沙漠中。

所以,今天這篇Talk的分析,想加一個題目:

《風之旅人》中夢幻的真實

在學習他們技術點的同時,更要學習他們的渲染理念。現在太多技術人唯技術崇拜,忽略了一些產品、理念上的思考。沒有理念的思考,技術上的取捨,是無法做出好產品的。也無法

「真正」滿足美術的需要,很多唯技術崇拜的渲染程序往往會陷入這樣工作的循環:

  1. 美術 提出需求
  2. 程序 很快實現一個需求
  3. 美術 提出迭代
  4. 程序 很快完成迭代
  5. 美術 再次提出迭代
  6. 程序 開始懷疑人生,在不爽中完成迭代
  7. 美術 說又發現一個好的效果,再再次提出迭代
  8. 程序 開始抗拒迭代,認為美術想不清楚

認為合作夥伴想不清楚這種抱怨絕對可以在遊戲開發團隊抱怨排行榜排第一,但是必須說的是,他一直想不清楚,你也有不可推卸的責任。

解決這種現象,需要從兩個角度去做:

  1. 真正理解需求。通過討論,和美術交換想法,在目標和理念上和美術達成一致,而不是做一個被動的想法實現者
  2. 程序也要有追求效果的心。如果一個效果很重要,並且時間允許,迭代的需要又是合理的,那就毫無疑問的去做;很多時候,程序更能了解一些最新的渲染技術,在需要時,請主動提出效果的改進

先欣賞一組高清套圖


渲染分析

來看一下,今天的主題畫面:

拆解效果:

  • Base Heightmap

  • Detail Heightmap

  • Diffuse hack

  • Specular hack1 :Ocean specular

  • Specular hack2 :Glitter specular

  • Anisotropic masking

  • Sharp mips


Sharp mips

《風之旅人》的人大概1m高,在這個視角大概占屏幕100pixel:

現實中的沙子大概是0.5mm:

那麼,也就是每個pixel里,包括了400粒沙子

如果真的按照這種密度,實際上得到的是類似這樣的圖像(照片):

幾乎感受不到沙粒了。。但是,當你真的到達一個沙丘,你會感覺到到處都是沙粒,因為人眼擁有比攝像機、顯示器更高的解析度。你能看到、感受到那些沙粒。所以,需要盡可量的渲染出這種沙粒的感覺以還原真實的感受,比如需要每個像素之間能感受到沙粒的區分度。

基於噪波圖來表現沙粒:

當這張噪波圖downsample到下一級mip時:

會發現,整張圖的分布會往中間集中。也就是說,沙粒感會變弱。需要對mipmap做hack處理:


Glitter specular

對於高光,首先嘗試了標準的計算方法,並且使用一個噪波法線、和一個很大的specular power值。但是,在移動鏡頭時,會有嚴重的走樣現象。

重新思考沙子閃爍的感覺,它主要產生在你移動時,感受沙子的光點也在移動。也就是說,它主要是View Dependant。可以用一個簡單的公式 dot(N*V) 來模擬這種感覺:

並且,這種方式沒有產生走樣。詳細公式:


Anisotropic mask

在完成上一步的高光計算之後,得到這樣的結果:

在視角和沙漠的夾角比較大時,各向異性問題會讓高光點糊掉,即使開到了最高檔位的各向異性採樣也不能解決。從這裡面,發現一個很有意思的心理學現象,當這些細節沙粒的大小是像素大小時(或者只是統一大小),會感覺他們就是沙粒,感覺不出來它們實際上是400倍大小的沙粒。而當它們稍微再大一些,就變得更像碎石的感覺。開發者用了大量的時間來研究優化各向異性採樣,並沒有取得成功。最後,選擇使用mask圖,來mask掉那些各向異性採樣出現問題的區域。如何生成這個mask圖呢。使用mip-chain如下的貼圖來對各向異性的區域進行繪製判定:

然後,基於距離和使用的mip(上圖灰度值)生成mask圖:

使用這個mask圖mask掉高光。


Ocean Specular

之前的沙粒高光區域還是很小的,開發者增加了一個Ocean-stycle的大高光帶。


Diffuse shading

相對於Lambert diffuse,開發者使用的diffuse演算法對比度更高。其實這源於一個叫做Oren-Nayar的光照模型,它主要用於特別粗糙的表面:

開發者的衣服shader也是使用類似的光照模型:

Oren-Nayar的問題是,它的演算法開銷很高。這裡採用一種hack,通過一些簡單的公式模擬出相似的效果:

N.y *= 0.3;saturate(4 * dot( N, L ) );


Detail heightmaps

最後,看一下細節高度圖的使用:

整個沙漠,使用了多層高度圖來表示。作為基礎,使用了一個尺寸較低的高度圖(Base-Heightmap):

在此基礎上,使用四張細節高度圖(Detail-Heightmap)混合:

分析到此為止。

最新陳星漢的作品《Sky光遇》,有效果很好的體積雲,希望能早日看到分享。


網易遊戲招聘(應屆生、實習、社招)

求賢若渴招: 1.技術美術(TA) 2. 引擎程序 3. 邏輯開發

感興趣直接加本人微信:warmsuning 或發送簡歷: hzliyangyang@corp.netease.com

推薦閱讀:

譯:UE4是如何渲染一幀的(1)
讓角色半透明:後期模糊(二)
UE4中快速實現簡單GPU流體模擬
拓幻圖形學工程師教學手冊(第三講)|一字一字敲出OpenGL學習教程
走樣與反走樣(Aliasing/Anti-Aliasing):Graphics Cases

TAG:計算機圖形學 |