Monster Farm 開發日誌 （二）邊緣檢測

Monster Farm 開發日誌（二）邊緣檢測

這周主要講講我們的edge detection的技術吧，先預警這是技術文，看著各種名詞會頭痛的可以趕緊關掉了。這篇主要講的是Postrender實現的edge detection和外面toon shader的edge等妖艷賤貨不是一個東西。寫這篇日誌一是記錄下來自己的研究歷程，二是感謝前人研究的鋪墊，三是希望對大家有所啟發。

其實原理很簡單，三張圖就解釋清楚了。你照相機渲染的圖片，sample幾次並且每次sample都往不同方向移一移，然後找到顏色和周圍環境不同的的地方就是邊邊了。寫到這基本就沒什麼好說的了，後面的就是不同方式利用這個技巧了。(我特么，這些個網站文字編輯器的圖片都不能並排擺的么？知乎這個還不給調大小？日你大爺！)

由於本人是個描邊控，一直深愛給各種東西描邊，在還沒開始項目的時候我就開始研究怎麼做個好看的描邊效果，於是找到了一些先驅，他就是正在做Manifold Garden的William Chyr。

他寫了很多關於edge detection的文章，和unity自帶的幾種edge detection技術類似，都是通過相機渲染出來的depth和normal圖，然後調不同sample具體深度區別和normal圖顏色區別的參數來描邊，如果有人沒見過，depth和normal圖分別長這樣：

先要感謝一下他在我當時研究的時候他對我的幫助很大，通過他的文章理解了這些個東西原理都是怎麼回事兒。通過他我知道了另一個他覺得描邊做的很乾凈很duang很屌的人，他就是Return of the Obra Dinn的作者Lucas Pope，他更著名的一款遊戲叫papers, please。

他把物體通過在空間里的的不同位置以及不同面的向量隨機上一個顏色然後對圖片多次採樣、錯位、區分然後畫出邊界。他的整個devblog有完整的技術細節，包括他怎麼樣區分光照和texture並且進行dither.

我們基本是用的Lucas Pope的描邊技巧，通過物體在空間的具體位置隨機賦予一個顏色然後渲染出的邊界

大概就是醬紫，其實還有一些技術細節，根據模型的不同，生成的線圖很可能有不少蜜汁噪點，William Chyr在這個問題上糾結了兩年，我的解決方案自認為還挺巧妙的，給他發了我的實現方式，但我的Twitter像個殭屍號，所以沒回我也很正常，有機會的話跟大家講講我是怎麼除掉這些個噪點的。

整個edge detection具體實現的代碼嘛，暫時沒法公開。但是有興趣深入研究的可以跑去William Chyr和Lucas Pope的blog看，我會在文末附上地址，我就不分他們流量了。

雖然實現起來這麼蛋疼，但是我們組裡的美術貌似並不喜歡Orz，有移除的走向，不過反正我是挺喜歡的。

我是個平常不說話，寫個幾百字文章更是每次都要焦頭爛額，和zed不一樣，他很能說，雖然我覺得大部分都是錯的。特別是zed上一篇就說了個不特別對的東西，說要周更，於是我就只能被迫恁一篇出來。我這篇要糾正這個錯誤，說要月更，這樣子說如果實際我周更了，老爺們就會覺得我們很有誠意，如果月更了就說明我們誠實善良守信，如果我們石更了，那就有什麼地方出問題了。

通過前文你應該知道我是個粗人，愛說髒話，文章一直是小學水平，那時老師說要承上啟下，前文說到寫這篇日誌有三個目的，記性好的你可能還記得，但記性差的我自然已經不記得我說了啥，因為那都是放屁，主要目的還是為了漲粉，但是發這種技術文真的能漲粉么，我並不知道？呵呵。希望我這篇好像什麼都說了又好像什麼都沒說你看完最後還是不知道怎麼實現的文章對你有所幫助，也希望大家多多支持MonsterFarm。

William Chyr的Blog

Edge Detection Shader Deep Dive! Part 1 - Even or Thinner Edges?

Lucas Pope的Return of Obra Dinn的Dev Blog

https://forums.tigsource.com/index.php?topic=40832.80

（原文網址：Monster Farm 開發日誌 2017.02.04）

如果您對Monster Farm的後續信息和更新感興趣，歡迎關注我們的微博：

@Hi_MoE嗨盟遊戲組