原文：The Art of ‘The Witness’ – Art of Luis
翻譯：Zuxin
前言
作者 Luís António是一位在葡萄牙出生的已經有9年以上經驗的3D藝術家。在加入吹哥的Thekla公司之前，曾經在Rockstar的倫敦工作室、育碧的魁北克工作室製作美術。感受到自己受到商業化作品的束縛後選擇投身獨立遊戲製作。在見證者之後他自學編程製作了一個他多年腦海裡的遊戲《Twelve Minutes》(不知道有沒有人發現這款遊戲的美術和《見證者》的異同)的原型，並且擴充團隊完成了它。
譯者並沒有美術經驗，可能會有部分術語問題和用詞不當。此外，因為Blog裡有很多Youtube鏈接或者專用功能，我對此進行了一定的刪改。《見證者》中的Devblog也有大量有價值的文章，可以做拓展閱讀。希望這篇文章可以幫助遊戲設計師和藝術家相互協作，或者是獨立遊戲人來思考遊戲的表達與機制的關係。
雲
大約 9 年前，在 Rockstar Games 的 Midnight Club L.A. Remix 工作時，我最終制作了天空頂(skydomes)。與通常的世界建築相比，我很驚訝它是多麼不同的挑戰。 負責《見證者》中的雲和天空負責讓我想起了過去。
第一步是試圖弄清楚他們應該如何被看待和感覺。有一些設計限制意味著它們必須蓬鬆且易於組裝成形狀，因此我進行了研究和參考，但這一次，我專注於解釋，而不是攝影。 以下是我最喜歡的一些捕捉我們想要的感覺的東西：
而下面這張圖片可能是影響最大的一張。日本動畫處理繪畫背景的方式，特別是遠處的植被，是我們製作樹木和葉子的一個重要參考。因此，毫不奇怪，他們處理雲的方式也是一個很好的參考。他們是乾淨的，有表現力的，同時也是現實的，這在動畫中是很難做到的，對於尋找動畫服務的公司來說，他們可以從網上的網站獲得企業的視覺服務。
前景雲
我最初想看看我們是否可以用一個實體的網格(mesh)來表現它們，但這並不奏效。
這裡是一組雲，有一些有趣的東西，但它們對設計來說限制性太大而且感覺格格不入：
為了捕捉雲層的蓬鬆感，我決定像植被一樣對其進行建模，創建幾個相交的幾何平面：
然後將它們組合在一起：
它感覺更好，而且模塊化意味著我對形狀有更多的控制，但由於其巨大的規模，我們在照明和陰影方面會有各種各樣的問題：
但有時，從正確的角度和對紋理的一些調整，我們可以看到它的潛力：
然後它變成了一個技術問題。 當前的著色器並非旨在渲染這些大型物體，也無法正確散射光線。 你可以在魔法師Ignacio Castaño 的“技術細節”部分閱讀下面的技術流程。 一旦著色器正常工作，我就可以專注於創建更漂亮的雲，希望不會讓人覺得太可疑。
我對最終結果不太滿意，我希望我們能找到一種讓它們看起來更自然的方法，但在我們所有的瘋狂的限制下，它們工作得很好，與世界其他地方相適應。
後景雲
在很長一段時間裡，背景天空是一個帶有繪畫紋理的圓頂。這是一種資源的浪費，因為90%的天空都是藍色的，而且為了使雲層不被像素化(texturen)，它需要一個非常高的分辨率紋理。我加入之前的版本是這樣的：
我開始使用你在開始時看到的參考資料中的彩繪雲，並將它們作為臨時背景。這改變了氣氛，讓我更容易理解前景的雲彩是否有效。如果你仔細注意博客其他頁面上的天空背景或《見證者》網站上的進展，你不僅會看到這個天空，還會看到我在整個製作過程中嘗試的其他變化。另一個有趣的小插曲是，我在下面使用的這張圖片，實際上是對泡沫可能出現的樣子進行的塗抹(paintover)！
這裡是原版，沒有塗過的：
最終，Ignacio 將天穹更新為程序漸變(procedural gradient)，因此我可以將雲分離成紋理（畫起來超級輕鬆！）：
並讓他們在遠處的剪影(cardbord)，可以根據需要放置：
然後這是最終成品：
技術部分
正如我所提到的，超級圖形程序員 Ignacio 是讓雲成為可能的人。
我們原本打算在The Witness 博客上發表一篇關於雲的帖子，但我從來沒有真正有時間寫我的部分，而 Ignacio 則寫了他的！
所以我認為將它包含在某個地方會很酷，並且在他的許可下，這裡有一些關於他如何做的技術細節。
最初，我有一些關於體積著色的想法，我認為這將是有趣的探索，但對於一個小功能來說，這似乎是一個很大的工作，所以我首先開始做我能想到的最簡單的事情，結果發現這已經很好了。
首先，我使用阿爾法到覆蓋和阿爾法混合的組合(combination of alpha to coverage and alpha blending)，分兩次渲染雲彩。阿爾法覆蓋提供了正確的排序，而阿爾法混合則平滑了邊緣。我們以相反的順序渲染每一次，實心通道從前到後，透明通道從後到前。這實際上比單一的alpha混合通道要快，因為我們在第一通道中得到的大部分遮擋都是如此。雲層重疊和自相交錯，所以阿爾法混合的部分並不完全正確，但人工痕跡幾乎不明顯，因為雲層的顏色非常統一。我曾在植被上試驗過這種技術，但在這種情況下效果並不理想，因為它的對比度要高得多，分類錯誤會更多。
只用阿爾法覆蓋：
阿爾法覆蓋 + 阿爾法混合：
對於雲層的陰影，我只是採用了與我們用來模擬植被散射的包裹著色(wrap-shading)技術。如果我們假設雲層不會相互投射陰影，那麼這可以合理地使用內部自遮擋來近似漫散射。
為此，我們需要在雲表面周圍提供一個平滑的法線場。 對於植被，我們使用像 Normal Thief 這樣的工具在Maya或MAX上製作這些法線。 然而，雲在遊戲編輯器中是由更小的團塊組裝而成的。 為了得到一個包含整個雲的平滑法線場，我們將各個雲的頂點法線與計算得到的矢量場相結合，從雲質心中減去頂點位置，藝術家可以手動調整。
float forward_scattering = pow(forward_scattering, saturate(-10 * (0.9 + dot(V, L))), 4);
理想情況下，我們希望根據雲層的厚度來衰減該項，但由於我們沒有現成的數據，我們使用類似於包覆陰影項所使用的近似值，並假設厚度在閃電角時較低，也就是當N點L接近0時：
forward_scattering *= saturate(1.25 - abs(dot(N, L)));
雖然在物理上並不準確，但這產生了相當令人信服的結果！
只有漫反射時：
漫反射和前向散射：
森林和海灘(Forest & Beach)
這個區域的謎題已經設計好了，還有偽裝的面板主題，但是這個區域仍然在使用通用的樹木，感覺不到獨特。
景觀設計師建議，這個區域應該是一個“亞馬遜風格”的叢林。在我試圖表達這個意思之前，我清理了這個區域，並試圖定義一個能考慮到拼圖設計的引導。請注意，這時還沒有竹林或寺院附近的岩石。
在我們添加了海灘之後，我們希望有一條清晰的線路通向彩色燈建築(Colored lights building)，所以我不得不對森林進行了大量的修剪。這是我發送的電子郵件裡的圖片，顯示了路徑的變化。
在這個佈局獲得批准之後，我創建了一組極其簡單的資源，以查看我可以獲得更密集的森林。
我想創造一些東西，讓你從四面八方沉浸其中，忘記島上的其他地方。
Salvador添加了霧量(fog volumes)，所以我嘗試看看他們能否提供幫助。
我們都對結果非常滿意。 即使島嶼是這樣一個人為壓縮的空間，仍然可以推測出叢林深處的想法。
下一步是定義清晰的導航地標，這樣你就不會迷路和沮喪。 所以當你進入森林時，你的左邊有一組清晰的樓梯：
而在右邊，你有一條垂直倒下的圓木路：
後面是巨大的中心樹。這兩張圖片都是較早的版本，當時我還在試圖弄清構圖和情緒（看樹和葉子有什麼不同）：
最後看起來像這樣：
另一個重要的因素是，當你走過這條主要道路時，你對前方的道路有清晰的認識。 因此，當你繼續前進時，我展示了這座山：
還有更遠處的彩色燈建築：
我能夠在這麼短的時間內創造出這麼多的複雜性的唯一方法是擁有大量精確的模塊化，這也是我為城堡所做的。景觀設計師幫助我分解叢林的重要部分，圖像類似於：
這允許我用遊戲中的幾何圖形重現同樣的原理，用四種類型的資產來創造茂密的森林牆。
- 地面植被
- 完全阻擋你視線的植被牆
- 中等大小的不同樹木和樹葉，擋住了比植被牆略高的地方
- 一個帶有模塊化樹枝的樹幹，我可以用它來佈置一個更詳細的頂蓋
你可以在下面的圖片上看到它們。第二張圖片是相同的模型，但沒有樹葉，所以你可以清楚地看到假的畫出來的部分。
然後這是遊戲裡的樣子：
隱藏的懸崖小徑
對於隱藏的小徑，我想創造一些感覺與其他地方不同的東西，但仍在同一地區。如果你再看一下原來的佈局圖，你會發現有一個穩定的地形高度。這意味著你在行走時總是有一個不平整的地形，這感覺很奇怪。所以我決定將其平整成兩個不同的區域，用懸崖分隔。左邊的樓梯將你帶到“二樓”，在那裡你可以進入竹林。 這一改變使我能夠在 "第一層 "區域的次要路徑上有一個懸崖牆。我弄了一些在懸崖上流水的想法：
但他們看起來並不好。最後，它變成了一個長滿青苔的懸崖，有一種用樹木做成的屋頂天花板：
與主要的森林小徑類似，我們想要傳達一些重要的景觀。第一，如果你想辦法從海灘上走過那根倒下的木頭，你就會有一個帶有揚聲器的完美框架的面板：
如果你從懸崖上往下看，你會看到一條可疑的小徑，希望能暗示你錯過了什麼：
其他添加的區域，隨著森林變得更加詳細，其中的岩層進一步向上，隱藏了避難所(Vault)，屏蔽了森林與寺院的聯繫：
以及有助於確定河流形狀的彎曲岩層：
走過“二樓”，你就可以看到寺院的後面。這樣做是非常有趣的，因為我們在這一點上擁有所有的資源，所以主要是放置的問題。Orsi負責所有的竹子道具，它們看起來非常棒。另外，雕刻那些遠處的岩石也很有趣。
森林避難所
我還負責創建進入寺院避難所的旅程。 這個概念是它是最初的一個變種，靠近入口庭院，但帶有“植被接管”的氛圍。有了Eric最初的入口小徑保險庫的原始資源來工作，這個過程加快了很多。這裡是景觀設計師提供的一個很棒的草圖和參考。
這裡是最終版本：
海灘
關於海灘沒什麼好說的。 與第一次實現相比，它並沒有太大變化。 很長一段時間它都有一組潮汐池，但它們沒有用，看起來也不那麼好，所以最終被移除了。
與所有其他人相比，我喜歡碼頭最終成為一個非常自然的建築：
我從景觀設計師那裡學到了很多東西，比如棕櫚樹如果沒有被人工摘除，底部應該有乾枯的葉子，或者植被在海灘邊緣的生長方式，以便最大限度地增加陽光照射。
城堡(The Keep)
這是我最喜歡的遊戲區域之一，可能是因為它讓我們弄清了建築物的藝術風格，而我負責創建建築物和裡面的一切。這是一個非常詳細的結構，這是一個很好的練習，可以利用我們到目前為止學到的所有知識來完成這個項目。
從這張老照片上可以看出，前面的迷宮謎題在很早的時候就已經確定了：
建築師們提議對這座建築進行外觀設計，而之前的一位藝術家做了一個建築的粗略版本。
這就是這座塔過去的樣子，非常接近現在的形狀，但在建築細節和紋理方面，卻很不一樣：
城堡的後面，即使已經確定了謎題，仍然大部分是模擬的石板：
確定美術風格
第一步是試圖弄清楚我們希望如何將美術指導原則應用於環境。 為了弄清楚這一點，我從遊戲中的截圖開始，因為它是迭代最快的：
我畫了一遍以測試我的理論。 由於形狀非常簡單，我們需要角落的細節來顯示建築物的構成（在這種情況下是碎磚）。我還移除了嘈雜的天空並將紋理清理為更簡化的東西。 它運行良好，我們仍然從之前的屏幕截圖中獲得重要信息，沒有任何噪音，並且擺脫了遊戲中的尖銳邊緣，使其感覺像一個盒子。
下一步是對這些結果進行實際的遊戲應用，這樣我們就可以四處走動並瞭解玩家將如何感知它。我選擇了城堡中的一個角落，它足夠複雜，可以解決問題，但又足夠簡單，可以快速迭代。
我想弄清楚如何表達破碎的牆壁，因為它們本質上非常嘈雜，而城堡裡會有很多。我建造了一組磚牆和地板，並試圖在 ZBrush 中將它們拆除，匹配一些真實世界的物體作參考。
一旦我對此感到滿意，我就嘗試簡化它，問自己，我可以刪除哪些細節而不會丟失它的任何屬性？ 最後以這個結束：
同時，我也試圖瞭解我們如何能夠減少紋理細節，保持最低限度來表達牆壁的樣子。
然後將所有這些步驟應用於遊戲中的網格中：
它看起來很好，而且沒有卡通的感覺。所以我決定嘗試將這些原則應用到角落，考慮到結構細節和規模，使用參考並確保小細節將支持整體形狀。
同時，我與建築師一起工作，弄清楚建築本身的設計。他們提供了詳細的解釋，說明了這個結構過去是怎樣的，每個房間的用途，引導，牆的厚度等等。再一次，這些無價的細節本來需要我花很長時間才能理解。
由於我們對結果感到滿意，我將這些原則應用於整個結構。 這個過程最終非常耗時，在抽取後從 Zbrush 中清理網格，因此它們將具有乾淨的幾何形狀。 我也想避免在破碎的牆壁上有任何重複，所以廢墟中沒有太多的模塊化的物體。
這裡是一個例子，在許多情況下，我必須定製磚塊的雕刻。我還想確保磚塊與紋理的大小相匹配，這樣它們就能無縫融合。
然後這是用來測試美術的角落現在的樣子：
為了使這個過程更快，我在可能的地方使用了大量的模塊化。門和窗框、樓梯、拱門、壁架，任何至少會重複幾次的東西。
另外，由於我們的紋理非常乾淨，而且光照圖是按實體制作的，這意味著我可以旋轉網格，以迅速增加多樣性。下面是其中的一些。
其他的角度：
城堡領域
值得一提的是，這個區域有很多不同的想法。我就不多說了，但這裡有一些我在這個過程中拍攝的截圖。
以及最後的結果。有大量有趣的建築細節，大多數人都不會注意到，但我希望你能感受到它。例如，在下面的圖片中，如果你注意看，你會發現地形是不平坦的。這意味著每座塔的高度略有不同，從左邊最高的到右邊最矮的（當你在建築內行走時，這一點也會得到補正）。右邊也比左邊的廢墟更多，因為更暴露。
其他
由於我們的一些團隊成員很偏遠，而且我們中的大多數人每週在家工作兩次，因此來回發送了大量電子郵件。這樣做的好處是，我們沒有意識到我們最終通過電子郵件編列了很多有趣的東西，這讓我可以在網站上創建所有這些頁面。 這是一些我覺得有趣但並不適合任何地方的圖片庫：
什麼從哪裡開始？(當時沒有竹林)
減少玻璃廠沙堆的干擾：
對於沙漠廢墟謎題面板的想法（糟糕的想法！）
嘗試簡化岩層形狀：
平滑的數量：
Zbrush 模型來測試不同的水類型（河流、瀑布、湖泊等）：
弄明白樞紐碼頭區的樓梯：
糟糕的提案：
更多的面板組合噩夢：
複雜的雲：
生日快樂：
永恆的草bug：
捲髮：
舊島：
悲傷的入口庭院：
地堡的光照貼圖派對：
搗亂分子：
