前言
假期期間正好聽了機核會員節目的《工作彙報 EP4》，裡面重輕老師的分享又給了我很多啟發，其中一部分想法其實和我寫這個系列的初衷很像。由於圖形學和遊戲引擎是一個龐雜的迭代了幾十年的科目，當然沒有人能完全掌握，但憑興趣一點一點了解確實也是可能的；我把本來懂的和查資料才懂的知識或興趣點彙總到一起，只要不是特別忙就可以一直更下去。
如果用音樂來比方，《罪惡裝備》系列就是我遊戲歷程中的重金屬音樂，那裡面有味最衝的二次元刻板角色形象（不用說後面的《蒼翼默示錄》系列我也很喜歡）。在2015年發現這個沉寂了多年的系列以3D卡通渲染遊戲的方式重生時，我是非常驚喜的。
但是深入瞭解了他們的製作方式後，我的感覺是這很像十二平均律沒有推出以前的音樂，有很多限制。下面我會以節選加翻譯的方式，來為大家展現當時的ArcSystemWorks是如何用“笨辦法”來為大家帶來還原度極高、極富表現力的風格化畫面的。
*這次由於原文英語的篇幅較大，後面我就不列出全部英文原文了，文末照例會附鏈接。後面的章節中除了加星號的是我的備註，其它均為我翻譯的原文（主要是結合原文配的解說詞，而不是PPT內容）。
1 美術設計目標
*分享人是當時他們的技術美術本村純也。這個項目中他提出了“本村線”以解決勾線過程中的抗鋸齒問題，後面會提到。
GGXrd的美術風格
——雖然使用了大量3D特性，但遊戲仍在2D平面上戰鬥
——這種視覺效果是依靠自定義的Cel著色器結合定製化的3D模型來實現的。（Cel是Celluloid 賽璐璐的縮寫，是一種以動畫製作技法來指代一類動畫風格的詞語，通常就是指日式卡通渲染）
——由於採用了3D，意味著可以不受分辨率限制了。
*定製3D模型意味著有一些不同於傳統寫實渲染模型的配置指標，後面會提到。
*如果2D版是480P的遊戲分辨率，其實角色精靈圖往往是200像素左右的，這對角色像素製作其實有很高要求（看著完全不像只有200像素的）；另一個問題就是如果移植到高分辨率的設備上就顯得不夠看了，所有的像素圖都要重新修而不能簡單放大。而3D只要基礎精度夠高則沒有這個顧慮。
GGXrd的美術風格
——攝像機能在3D空間移動可以帶來更具戲劇張力的演出效果，還可以用於轉場動畫和故事敘事
*這一點也確實極大提升了終結技的觀感，有一種打破第三面牆的感覺
為什麼用3D而不是2D
——高精度的2D動畫風格已經在《蒼翼默示錄》中做得足夠好了，需要在新作中有所突破
為什麼用3D而不是2D
——我們也考慮過其它製作方式如矢量藝術風格、高精度精靈圖等
——分享人當時曾著手做過一個內部預研項目（圖中），有了部分技術積累，看到了這一風格的潛力
——如果能如預期實現前文所述的效果，在當時來說會是很超前的（Chance of becoming the best），這也會極大提升市場競爭力。
*後來看來，這麼做的一個trade off就是初版人物非常少，後面一直在以DLC的方式出人物。畢竟2D年代的人物資源都是積累下來的，改改就能用；進入3D之後全部要新做，外加人工製作的流程很多。例如本期封面是後期才推出的新Testament（角色名）。
*另外能感受到這是一套2D動畫美術導向的解題思路。後面分享者也會反覆提到，如果通用方式效果不好，就純手工來做。
2 著色相關
開發這種風格的渲染
——引擎選擇是虛幻3（選擇的原因不翻譯了，比較範式化）
——美術資源製作選擇的是Autodesk SoftImage。最重要的點就是內置了一款實時的shader編輯器，可以直接調整和預覽Cel著色器的效果。
*在建模工具中做主要的著色開發，最大的問題就是無法很好的做實時光照預覽。實際上這遊戲由於顏色偏固定，想要的效果就是不動態變顏色，所以這麼做還在可接受的範圍內。
角色視覺的開發
——角色必須儘量看起來像平面的，如果有哪裡看起來像3D，就需要調整以消除其影響。
——讓藝術家決定，而不是（shader中的）數學公式。所有視覺必須是經過設計得到的。*這裡說的已經比較露骨了，我摘一段原文：
This often boiled down to hand crafting by the artists, because while the math within the shader is always “correct”, “correct” is just not good enough. To get a convincing 2D look, every thing on screen has to be an intentional choice, not just a result of a calculation.
——得益於項目中有實時的shader預覽工具，我們通過快速反饋、及時調整的方式最終實現了預期的效果。
角色視覺的開發
——由於會有靠的很近的特寫，因此角色的三角面數需要能hold住這種需求（原文 so the models had to hold up even at an extremely close distance）。實際使用的大約是4萬個三角面，所有細節都是通過幾何多邊形來表現的。
——減少對紋理的依賴。沒有使用法線貼圖，相反的則是使用了頂點數據例如頂點顏色、頂點法線、UV座標。之所以這麼做的原因也是因為這樣得到的結果是與分辨率（理解成渲染精度）無關的，也不用考慮紋理縮放策略及相關的問題。
——頂點之間的參數是通過對頂點上參數的線性插值來得到的。
*後面會提到他們角色的主紋理基本也是沒過渡色的，偏向於就是純色，規避了各種由於紋理映射帶來的誤差。
角色視覺的開發
——在Cel風格著色中，顏色要麼是亮的要麼是暗的，沒有中間狀態。
In a drawing, the artist will choose the most convincing distribution of light and darkness. But in a shader, it’s all math, where unforgiving thresholds, mercilessly splits between light and dark. In Cel-shading, every little noise on the surface will become extremely distracting. The slightest difference in the surface normal may end up as a huge blotch .
——在繪畫中，藝術家會選擇最能讓人信服的明暗分佈；但在一個著色器中，由於它是基於數學公式的，只能很生硬的通過閾值來控制明暗分佈。因此在Cel著色中，任何小的平面噪點都會變得非常難調——模型表面輕微的法線變化都可能導致預期外的一大片斑點。
*實際上現在很多卡通渲染的明暗也不是硬切邊而是有漸變或多層過渡的了，有些甚至是基於物理渲染（PBR）的改良版。不過他們提出的這個閾值問題確實一直存在。
角色視覺的開發
——主要的著色計算非常簡單，通過一個step函數，輸入某個閾值，用來判斷光線與法線的夾角點乘（點乘得到的是一個係數，所謂的NdotL）來判斷某一個著色點是亮還是暗。（學過shader的可能知道除了step還有一個smoothstep）
——可以看出製作過程中主要就要控制三個值：明暗閾值、光線向量、法線向量。
*手動調萬物就開始了。其實後續更先進的卡通渲染還引入了很多額外的項，例如高光、粗糙度、眼睛多重反射、頭髮高光、皮膚次表面散射等，但在他們提出來的這個階段都還是沒有的；可以想象這些如果都要實現進去，是不可能再全部手調的。
角色視覺的開發——分別展示了關閉閾值、開啟閾值、紋理作為閾值的情況
——我們採用了頂點顏色中的一個通道用來存儲明暗閾值。藝術家可以手動定義某一個頂點的受遮蔽程度，即這個值越大就會有越小的幾率被照亮；反過來藝術家也可以設置這個值為0，即無論如何這個點都會被照亮。
——某些場合我們也使用了紋理來存儲明暗閾值，但更多時候還是頂點顏色達到的效果更好。因為紋理通過紋理映射後還是會受到分辨率的影響。
角色視覺的開發——圖片分別展示了傳統全局光照和角色定製光照的效果
——GGxrd沒有采用傳統3D遊戲的全局光照系統，每個角色的光照是完全為單個角色服務的
——每個角色的光照參數都儘量保證其在待機動作下有最好的視覺效果
——在轉場動畫時，這個燈光參數甚至需要隨動畫動態改動來配合達到不同角度最好的視覺效果。（原文是 but in cut scenes, it animated along with the character to get the best result each and every frame. ）
*到這裡我感覺已經萬物皆手調了。也是因為後面提到的法線是優先正面效果的，因此轉視角後法線不能動，只能調燈光了。
角色視覺的開發——圖中展示了法線不調整與調整的對比
——表面法線是Cel著色難以調好的主要原因，微小的不一致或不合適都會帶來很明顯的視覺穿幫。
——模型默認的法線是工具自動生成的，但在2D風格渲染中這往往不能符合要求。所幸 Softimage提供了強大的工具供人為調整法線的方向。
Although editing normals is nothing new to game graphics, we took it even further, To get rid of unintentional shading, we modified the normals on every major feature of the model. The faces of the Characters especially needed to be hand crafted to get a clean anime look.
——雖然編輯法線對於遊戲圖形來說不是新事了，但為了解決不符合預期的著色，我們更進一步修改了角色模型主要特徵相關的法線。尤其是角色的臉部需要手動調整來保持一個“乾淨的臉”。
*批量修改法線在卡通渲染中很普遍，如果看過很多卡通渲染的“白模”就知道，普通光照下那會很奇怪。但是這種針對2D的修臉，只能適用於固定角度，其實是有其侷限性的；一般自由視角的遊戲法線調整的目標是隻沿著角色的鼻子和臉頰出陰影，中間的區域儘量別有陰影。
角色的視覺開發——動畫中顏色對材質的表現邏輯
Color selection in anime is vital. Every color is carefully chosen to express not just the material, but the character it self. It is not as simple as just multiplying the shaded area with an ambient color.
——動畫中的顏色選取是很重要的。每種顏色都是被精挑細選出來，不僅表達對應的材質，更是角色本身特性的代表。因此不能簡單的把暗部顏色和環境顏色疊加起來就完事了。
角色視覺開發——圖中展示了用多紋理實現顏色修正的策略
In order to implement this in the shader, we used two textures. The base texture defines the color of the surface when it’s lit. While the Tint texture defines how dark it gets when shaded. Multiplying the two textures, we get the shaded color. This way, the choice of color is completely up to the artist. The artist can choose what ever color he or she may see fit, for the lit area and the shaded area of that material.
*這一段之前還講解了一下動畫中是如何利用暗處顏色來表現材質的，例如可以用不同顏色來表達物體的堅硬程度或透光程度等。
——為了實現這個shader，我們使用了2張紋理。基礎紋理定義了模型表面在受光時的基礎顏色，同時調色紋理定義了它在暗處的顏色。把兩張紋理中的顏色相乘得到的就是最終的著色顏色。這樣，顏色的選擇就被完全交給了藝術家，可以為每個著色區域自由選擇合適的受光顏色和暗處顏色。
On a side note. As you can see, both of these textures are just square areas consisting of single colors. This is because we simply use them as color lookups, and do not draw-in any details to the textures as images. As stated before, most meaningful information is stored in the mesh it self, rather than in textures.
——順帶一提，如大家可見，兩個紋理中的區域都是矩形單色的。這是因為我們只把紋理用來做顏色查找而不去映射紋理上的細節；如前文所述，大部分有用的信息都是保存在模型網格上，而不是紋理中。
3 勾線相關
角色視覺開發——角色外部勾線
——我們使用傳統的被稱為“Inverted Hull”的方式來做角色勾線。此方法在渲染時生成了一組暗色的多邊形，將其沿著法線方向擴張若干像素就可以得到角色的輪廓線。
——我們在此方法基礎上增加了一些tricks來使得到的結果更可控。
——現在基於後處理的勾線使很普遍的了，但我們發現這尤其適合我們的方案。首先，我們可以在模型視角直接預覽結果，這使我們可以在製作時（所見即所得）準確控制勾線效果；其次，我們得以引入基於距離的線寬係數（甚至某些位置完全不顯示勾線），在存儲這些參數時我們使用了頂點色的一個通道。（名字雖然叫頂點色，但其實是4維向量結構，裡面可以存4個通道的數值，不止是顏色）
角色視覺開發——角色內部勾線
——對於內勾線， “Inverted hull” 方法不適用，因此我們需要另一套方案。
——最簡單的方案是直接把線畫在紋理上，但這會有很大侷限；同時最大的挑戰還是分辨率。我們需要角色能hold住很近距離的視角的同時減少邊緣像素化或鋸齒感覺。為此紋理的精度需要很高，這顯然不現實。
——所以我們找到一個更好的方案，採用了一種通過特殊的UV映射來得到無鋸齒的內勾線的方案。這（圖中方形紋理）就是方案的原理，所有線都是軸向的，而模型的UV沿著這些線來映射；模型UV貼合這些線條的程度定義了內購線表現出來的粗度。
——缺點就是這樣得到的UV非常失真，不過由於我們不依賴紋理的細節，所以這反倒不是一個問題。
*這一段就是本村線的由來了，無鋸齒的原因是軸向的線不存在紋理映射過程中縮放導致失真的問題。不過由於現在往往不可能不依賴紋理去表現細節，所以也沒有普適性。
4 動畫相關
動畫——用2D的方法使它看起來像2D
——舊的《罪惡裝備》系列採用的動畫方案在日本被稱為 “Limited Animation”，與類似迪士尼的那種幀數很足的動畫不同，日系的動畫力求用較少的幀數來達到足夠抓眼球的效果。
——我們想以同樣的原則來做這個項目中的動畫（使其保持2D風格），但由於關鍵幀之間的插值平滑機制，使其反而失去了這種特性而顯得更3D了。因此我們禁用了插值並採用定幀動畫的方式來製作動畫。
動畫——動畫綁定
——由於使用了較少的幀數，因此我們需要為每幀添加更多信息。為此我們為模型的動畫狀態機添加了很多骨骼（平均每個角色500根）。
——我們也禁用了基於物理的動作模擬（Simulation），因為這會使動作看起來不像2D。
——我們採用了大量縮放形變動畫來表現誇張的動作、物體的顯示隱藏、拉伸或粉碎等視覺效果。由於這不是引擎自帶的特性，因此我們需要自己實現，感謝我們天才的程序員最終實現了這一效果。這一點是非常值得的。
*原文是It was difficult task, but thanks to our talented programmers, it was done. 前面雖然反覆說不相信數學公式，但這裡是高情商環節。
動畫——使動畫看起來像2D
——僅僅關閉關鍵幀插值還不夠，我們還需要另一個能模仿2D動畫的trick。秘密就在於每幀都把模型網格做形變，以添加視覺瑕疵。
——人的眼睛和腦對透視很敏感，如果一個3D模型在移動時保持它的形狀，人腦就會把它識別成一個堅固的3D物體。為了避免這一點，添加視覺瑕疵是必要的。
Nature is imperfect, the artist is imperfect, therefor perfection looks ‘too artificial’.
——自然是不完美的，藝術家也是不完美的，因此完美的東西反而看起來“過於人工”。
——“你需要以2D的方式思考”是我們團隊的口頭禪。在這個工作流中3D的精確性不是最優先的，我們往往犧牲這種精確性來得到更動態的效果。我們為四肢、手臂、腿部加入了很多形變動畫來表現誇張的透視，人物的面部也不是一直保持自然的位置結構。
——這其實和2D動畫一樣，精確性需要讓位於表達。我們在3D項目中也延續了這一原則。
*這一段能看出精於2D製作的團隊考慮問題的方方面面。這些講抽幀動畫的部分都很有啟發性，是做3D項目出發的人不會有的視角。
結語
分享人的感悟
分享人的感悟
最後摘了兩頁分享人的感悟，具體就不翻譯了，大家可以感受下他們骨子裡的那股2D動畫之魂以及作為藝術家的自尊與驕傲。（在我們這很少稱美術人員為藝術家，一方面確實很多人達不到標準，不過我覺得ArcSystemWorks這公司裡的他們值得這個稱號）
這篇分享由於其里程碑地位，中文互聯網上也有一些不錯的翻譯分析了，但我的關注點還是不太一樣的。有興趣的可以從文末的鏈接去看GDC原視頻，或看看解說稿全文。
幾年前我能完全看懂他們在做什麼的時候，最大的感受是這裡面純人工的比重太高了。不過由於藝術家的勤勞和精通，最終還是得到了非常好的效果。儘管情緒上我非常推崇這家公司，不過我也必須說，現在是無法在模仿其方式來製作一款好的卡通渲染遊戲的。
這個方案中有很多方面的侷限性：一方面它的出發點主要是基於固定視角的，轉場動畫的過程則需要大量手動K幀來人工修正，這完全不適用於自由視角的遊戲；另一方面它的著色方案也僅適合模型精度高，紋理偏純色的美術風格，進一步想表現更動態的光照和更細節的材質就都不行了；最後就是，太費美術的人力了，人工干預項多到完全不工業的程度，放棄了幾乎所有引擎自動化的內容。
儘管如此，這篇分享也算開啟了商業化的卡通渲染項目之門，讓外行和普通從業者能窺見其中非常細節的問題與取捨。
*另外說一個題外話，就是我發現中文互聯網有大幅混用“三渲二”和“卡通渲染”的趨勢。如果只是多音字這麼弄沒問題，但中文詞語這麼弄有一個問題，就是被替換的那個原詞指代的功能就沒有詞來用了，屬於一種鳩佔鵲巢的行為。我個人還是覺得，三渲二還是指代美術製作上先製作3D模型，再用渲染工具導出圖片的製作方式；而卡通渲染則是風格化渲染的一個分支，用來指代在渲染過程中呈現類似動畫風格的一種圖形技術方向。
最後是資料鏈接：
Arc官網上這篇分享的地址，Movie和PDF