談一談英雄聯盟手遊渲染技術與畫面

本文轉載自知乎文章，《談一談英雄聯盟手遊渲染技術與畫面》，作者Lute Li，GameRes已獲作者授權。
原文地址：https://zhuanlan.zhihu.com/p/270560224

經過千難萬險我終於在第一時間玩上了英雄聯盟的手遊，專門開一篇，談談lol手遊的畫面。

先看看pc版本英雄聯盟的問題

英雄聯盟作為一個上帝視角遊戲，人物在戰鬥畫面裡佔比極小。

拿一張截圖為例。


1080p解析度標準，4個角色加起來佔比3%！平均一個角色才0.75%左右。


按畫面貢獻來排序，優先順序應該是：地圖＞UI＞特效＞人物

回想英雄聯盟以往的更新，也的確是按照這個順序在優化內容。

常看Riot技術分享的人應該清楚，他往往是討論人物設計，特效製作等。之口不談渲染相關內容，因為Riot知道這是自己短板，沒什麼可以說的。

幾年前有人公佈過第一人稱lol視訊，近距離看人物模型，來看一組對比圖。


（近幾年的做好了不少）

所以在玩家群體裡，常把英雄皮膚叫“付費PPT"。買的只是一張圖片和技能特效，遊戲內的人物只能自己腦補。

畫面渲染的提升

先說下一個詞：unlit。無光模型。

很好理解，在模型上畫畫，塗啥色最終就是啥色，沒有燈光，沒有亮暗面，想要影子就自己畫黑點。

unlit幾乎沒有計算量，相容各種低端裝置，早期手機遊戲常使用unlit來渲染模型。這也是lol常被人詬病"就是個手機遊戲"的原因。


對比下lol的競品，Dota2和風暴英雄。


不像LOL人物展示是一張圖片，他們都是用3D模型，所以對渲染要求較高。其中Dota2使用魔改BlinnPhong來渲染。（有興趣的可以看下我之前寫的dota2渲染）


常用技術按年份來排：Unlit→Lambert→Blinn-Phong→各種PBR

而這次英雄聯盟手遊，是直接從Unlit跳到了成熟的PBR渲染。(可能還是魔改BlinnPhong？等抓幀老哥文章)


打個比方，類似於小學裡的第一名，突然跳級高考進大學，而且大學成績還名列前茅。

下面是遊戲內截圖。

法線和漂亮的亞光高光（注意看眼睛下的一抹淚水）


金屬


3S皮膚（像蠟一樣）


霓虹反射（我也不確定是反射球就這麼花哨，還是加了張ramp圖）


順著髮絲的各向異性高光


製作過遊戲的夥伴應該清楚，單看每個技術都不難。但是想讓一直做unlit材質的美術，能一口氣做出這麼完備的效果，可不是一件易事，很考驗團隊能力。

人物展示介面的特寫鏡頭

每個角色都有自己的特效鏡頭，甚至於特殊皮膚特效鏡頭還不一樣。

普通鏡頭5秒左右，像kda的鏡頭有接近10秒。（這次手遊簡直是kda專場）


每個角色！每個特殊皮膚！都有一個單獨的特寫鏡頭！

想想這個複雜程度。

物理模擬

裙襬，頭髮，在展示介面都有著相當精準的擺動。

• 擺動起來形狀很好看。
• 除大幅度擺動外，少有穿幫現象。
  

資源無縫載入解除安裝

每個角色和皮膚，都有自己的 模型/貼圖/背景/音效/特效/動畫 等一系列美術資源。

正常載入下一個模型，需要三步：載入下個資源，顯示內容，解除安裝上個資源。

這一來二去難免會卡一下。

但在英雄聯盟手遊裡，隨意切換皮膚和角色，幾乎是瞬間載入。


同樣是unity，為什麼你這麼不合理。嘛時候官方發文章講講啊，急死了。


頂尖的UI設計

LOL的UI設計，水平絕對是第一梯隊。


LOL的UI風格整整改過4版。

從最初模仿魔獸爭霸，到具象的碉堡形狀，到逐漸扁平化，到現代風格。

不是修補，是整個風格推倒重來4次。試問還有哪個遊戲有這種魄力。

英雄聯盟手游完美繼承了整套UI。


注意看（壓縮太猛，建議看視訊，原版比這好一萬倍）

• 每個元素出場和入場都有自己的順序和動畫
• 前置選單出現會模糊後面的畫面（類似於景深）
• UI的不同材質感，金屬鑲邊/寶石/霧氣/布料等
• UI上的光效
  

動畫，縮放，深度，材質，光線

這不正是微軟發的設計風格：Fluent Design，有興趣的可以瞭解下。此前我只在明日方舟中見過這麼高階的UI設計。


感興趣的可以看下官方發的ui設計視訊。順便關注一下這個官方號，太可憐了才8w粉。

新的業界標杆已經出現

英雄聯盟另一個很驚人的成就，是在美術風格上，讓全世界達成了統一。邀請各國的美術家去設計角色，最終撮合成大眾風格。不至於侷限在亞洲。

受眾廣，手遊，還在渲染技術上補齊了自己的短板。

相反，很多公司該緊一緊，過去還能說英雄聯盟渲染還不如我的手機遊戲，現在Riot不僅進入了手機市場，還直接拔高了業界標杆。

財大氣粗的拳頭這次著實讓我震撼到了，給每個角色皮膚重置模型貼圖，又把命給續上了。

流水的流行遊戲，鐵打的英雄聯盟。

對了，你問我遊戲內的戰鬥畫面？戰鬥和人物展示介面是兩套資源。

還是原汁原味，原汁原味。



原文：https://zhuanlan.zhihu.com/p/270560224