ミクのためのブログ。 為了ミク而創設的BLOG。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

>>週刊ディーヴァ・ステーション「「pjd技術部」タグ誕生! :第一回「アンチエイリアシング」」

本篇BLOG記事內容翻譯自初音ミク Project DIVA官方開發日誌「週刊ディーヴァ・ステーション」。

感謝Jeiz大的協助。
若對譯文有任何意見歡迎留言。

以下本文。




DIVA STATION的各位讀者初次見面,大家好。
我是程式設計師的Y。主要是負責Aracde的畫面繪製相關範疇。
為了能夠將美麗的ミクさん描繪得更加美麗、將可愛的リンちゃん描繪得更加可愛而努力地日益精進。

說到這個標籤,是希望能夠一一介紹在背後支持著Project DIVA的形形色色技術。雖然這次介紹的是繪圖程式設計(Graphics Programming),但之後或許也會有設計或是音效、網路等部門的負責人來撰寫文章也不一定。
希望穿插在平常的遊戲情報報導間的這些文章,能夠帶給讀者們樂趣。


那麼第一回的主題是:
因應2号的要求來談談「反鋸齒(Anti-aliasing)」。
這是在「初音ミク Project DIVA Arcade」ver.A Rev.1上,剛獲得具體改善的熱門主題。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
大部分的電腦繪圖都是在稱呼為「像素(pixel)」的方格四角型小箱中加上顏色,以此表現出一幅圖片。就像是在格紙上塗色那樣的感覺。

 所以,如果不多費什麼心思直接畫出ミクさん的話…


★未經修飾的ミクさん

註:以下的圖片全部都是為了這篇文章而將遊戲中的場景放大得來的。

延著方格可以看見「一格一格」對吧。
如果是在遊戲當中變動的畫面看起來還會有「閃爍」的感覺。
這些「一格一格」「閃爍」被稱呼為「鋸齒」。
是一種圖像的雜訊。

 我們希望能夠盡量去除這些雜訊。
 此種去除/減輕的作業手法便被稱為「反鋸齒(Anti-aliasing)」。

在ver.A以前都是以一種稱為「temporal Antialiasing(簡稱temporal AA)」的手法,來減輕鋸齒的產生。這是在VR快打5上使用的技術,而DIVA Arcade直接採用了這項技術。接下來的圖片便是使用後的結果。


★temporal AA 套用後的ミクさん

能夠看出來一格一格的感覺減輕了。
不只是多邊形形狀的部份,以貼圖方式呈現的荷葉邊也能夠呈現出來了。

temporal AA是經由合成先前的畫格來達到效果。雖然在畫面靜止時呈現出來的效果相當漂亮,但當圖像動作(特別是視角的移動)時效果幾乎會不見。
與VR快打5相比,DIVA系列在視角的切換及縮放上相當頻繁,因此反鋸齒的效果就會變得相當有限。

於是,我們在ver.A Rev.1便追加導入了一種稱為
「Morphological Antialiasing(簡稱MLAA)」
的手法[參考資料1]。
偵測出圖像中一格一格的部份,然後以中間色加以取代。


★MLAA上偵測畫像鋸齒以及填入中間色的處理方法
"Morphological Antialiasing"
出自http://visual-computing.intel-research.net/publications/papers/2009/mlaa/mlaa.pdf


 那麼就來套用在ミクさん的圖片上吧。


★temporal AA + MLAA 套用後的ミクさん

頭髮以及輪廓都變漂亮了。
其他部份的一格一格也都變得不顯眼了。
MLAA是從單張畫面來進行處理的,因此即使視角移動也能夠發揮效果。
遊戲中視角切換及縮放造成的閃爍也能夠減少。
當ver.A Rev.1正式上線後可以試著注意看看喔。

雖然是這麼說,但是反鋸齒是在像素層面上的處理,想要在遊戲中確認是相當困難的。
請在觀賞模式及有另外裝設輸出螢幕的店家,欣賞變得更為美麗的ミクさん及其他人吧。
現在的話,能夠到場測實施中店家的人可以試著比較ver.A 與 ver.A Rev.1 ,那或許也會很有趣。


■稍微深入的補充說明
1. 使用了反鋸齒處理之後,畫像會顯得似乎有些模糊。
實際的成品會再加上輪廓強化濾鏡來讓畫面變得清晰。

2. 反鋸齒的根本是在投影矩陣上的抖動與累積緩衝區進行數次的繪圖處理而完成的[參考資料2]。
即時遊戲上在1畫格中進行數次的繪圖處理會造成系統很大的負擔,因此是以累積先前的畫格來實踐反鋸齒的處理。
雖然將這稱為 temporal Antialiasing 似乎是誤用,但因為一般大眾已經如此稱呼便以這樣的形式表記。

3. temporal AA 也可藉由名為再投影的手法,來跟隨視角的轉移。
在VR快打5的時候曾經實驗過,但由於會造成系統龐大負荷以及產生破圖的情形,因此先擱置搭載再投影一事。
目前我們認為也許能適用在賽車遊戲上吧。

4. 在顯示卡上有被稱為Multi Sampling Antialiasing(簡稱MSAA)的專屬功能。
雖然需要相當程度的記憶體及效能,但如果情況允許的話使用 MSAA 將能比 MLAA 更容易達到顯示出漂亮畫面的目的。
在ver.A Rev.1 中,樂曲選擇時也有用到 MSAA(更正確的說法是NVIDIA公司的CSAA),來為專輯封面的邊緣作反鋸齒處理。

5. MLAA也是種會帶給系統相當負擔的技術。
在先前發售的 GPU Pro 2 一書中,發表了使用顯示卡來實際達成的作法,讓這個作法更容易被採納[參考資料3]。
ver.A Rev.1 便是以[參考資料3]所提及的作法,再加以改良數處後實際使用的。


參考資料:
[1] Alexander Reshetov. "Morphological Antialiasing", In HPG'09, 2009.
http://visual-computing.intel-research.net/publications/papers/2009/mlaa/mlaa.pdf

[2] OpenGL策定委員会. "OpenGL プログラミングガイド 原著第5版",
第10章:フレームバッファ, シーンのアンチエイリアス処理, pp.464-469, 2006.

[3] Jorge Jimenez, Belen Masia, Jose I. Echevarria, Fernando Navarro, and Diego Gutierrez.
"Practical Morphological Antialiasing" In GPU Pro 2, pp.95-113, 2011.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
這裡是文章完成得比預料中還要早的程式設計師Y。

其實像是這樣子的大變動在更定版(REVISION UP)裡應是不會搭載的,但因為我們以「隨時要漂亮地呈現出以ミクさん為首的所有角色」為目標而努力,因此在特別搶眼的此次更新中加入。

看過推特上各位follower的反應後,發現獲得相當不錯的迴響。
而因此推出的「pjd技術部門」單元不曉得各位覺得如何呢?

「太難了,要更簡單一點」
「不會不會,再深入一點」
「我想知道那個和這個」

...等等,如果有任何希望或是讀後感想,希望各位能回覆在推特的官方帳號上。
関連記事


追記を閉じる▲




DIVA STATION的各位讀者初次見面,大家好。
我是程式設計師的Y。主要是負責Aracde的畫面繪製相關範疇。
為了能夠將美麗的ミクさん描繪得更加美麗、將可愛的リンちゃん描繪得更加可愛而努力地日益精進。

說到這個標籤,是希望能夠一一介紹在背後支持著Project DIVA的形形色色技術。雖然這次介紹的是繪圖程式設計(Graphics Programming),但之後或許也會有設計或是音效、網路等部門的負責人來撰寫文章也不一定。
希望穿插在平常的遊戲情報報導間的這些文章,能夠帶給讀者們樂趣。


那麼第一回的主題是:
因應2号的要求來談談「反鋸齒(Anti-aliasing)」。
這是在「初音ミク Project DIVA Arcade」ver.A Rev.1上,剛獲得具體改善的熱門主題。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
大部分的電腦繪圖都是在稱呼為「像素(pixel)」的方格四角型小箱中加上顏色,以此表現出一幅圖片。就像是在格紙上塗色那樣的感覺。

 所以,如果不多費什麼心思直接畫出ミクさん的話…


★未經修飾的ミクさん

註:以下的圖片全部都是為了這篇文章而將遊戲中的場景放大得來的。

延著方格可以看見「一格一格」對吧。
如果是在遊戲當中變動的畫面看起來還會有「閃爍」的感覺。
這些「一格一格」「閃爍」被稱呼為「鋸齒」。
是一種圖像的雜訊。

 我們希望能夠盡量去除這些雜訊。
 此種去除/減輕的作業手法便被稱為「反鋸齒(Anti-aliasing)」。

在ver.A以前都是以一種稱為「temporal Antialiasing(簡稱temporal AA)」的手法,來減輕鋸齒的產生。這是在VR快打5上使用的技術,而DIVA Arcade直接採用了這項技術。接下來的圖片便是使用後的結果。


★temporal AA 套用後的ミクさん

能夠看出來一格一格的感覺減輕了。
不只是多邊形形狀的部份,以貼圖方式呈現的荷葉邊也能夠呈現出來了。

temporal AA是經由合成先前的畫格來達到效果。雖然在畫面靜止時呈現出來的效果相當漂亮,但當圖像動作(特別是視角的移動)時效果幾乎會不見。
與VR快打5相比,DIVA系列在視角的切換及縮放上相當頻繁,因此反鋸齒的效果就會變得相當有限。

於是,我們在ver.A Rev.1便追加導入了一種稱為
「Morphological Antialiasing(簡稱MLAA)」
的手法[參考資料1]。
偵測出圖像中一格一格的部份,然後以中間色加以取代。


★MLAA上偵測畫像鋸齒以及填入中間色的處理方法
"Morphological Antialiasing"
出自http://visual-computing.intel-research.net/publications/papers/2009/mlaa/mlaa.pdf


 那麼就來套用在ミクさん的圖片上吧。


★temporal AA + MLAA 套用後的ミクさん

頭髮以及輪廓都變漂亮了。
其他部份的一格一格也都變得不顯眼了。
MLAA是從單張畫面來進行處理的,因此即使視角移動也能夠發揮效果。
遊戲中視角切換及縮放造成的閃爍也能夠減少。
當ver.A Rev.1正式上線後可以試著注意看看喔。

雖然是這麼說,但是反鋸齒是在像素層面上的處理,想要在遊戲中確認是相當困難的。
請在觀賞模式及有另外裝設輸出螢幕的店家,欣賞變得更為美麗的ミクさん及其他人吧。
現在的話,能夠到場測實施中店家的人可以試著比較ver.A 與 ver.A Rev.1 ,那或許也會很有趣。


■稍微深入的補充說明
1. 使用了反鋸齒處理之後,畫像會顯得似乎有些模糊。
實際的成品會再加上輪廓強化濾鏡來讓畫面變得清晰。

2. 反鋸齒的根本是在投影矩陣上的抖動與累積緩衝區進行數次的繪圖處理而完成的[參考資料2]。
即時遊戲上在1畫格中進行數次的繪圖處理會造成系統很大的負擔,因此是以累積先前的畫格來實踐反鋸齒的處理。
雖然將這稱為 temporal Antialiasing 似乎是誤用,但因為一般大眾已經如此稱呼便以這樣的形式表記。

3. temporal AA 也可藉由名為再投影的手法,來跟隨視角的轉移。
在VR快打5的時候曾經實驗過,但由於會造成系統龐大負荷以及產生破圖的情形,因此先擱置搭載再投影一事。
目前我們認為也許能適用在賽車遊戲上吧。

4. 在顯示卡上有被稱為Multi Sampling Antialiasing(簡稱MSAA)的專屬功能。
雖然需要相當程度的記憶體及效能,但如果情況允許的話使用 MSAA 將能比 MLAA 更容易達到顯示出漂亮畫面的目的。
在ver.A Rev.1 中,樂曲選擇時也有用到 MSAA(更正確的說法是NVIDIA公司的CSAA),來為專輯封面的邊緣作反鋸齒處理。

5. MLAA也是種會帶給系統相當負擔的技術。
在先前發售的 GPU Pro 2 一書中,發表了使用顯示卡來實際達成的作法,讓這個作法更容易被採納[參考資料3]。
ver.A Rev.1 便是以[參考資料3]所提及的作法,再加以改良數處後實際使用的。


參考資料:
[1] Alexander Reshetov. "Morphological Antialiasing", In HPG'09, 2009.
http://visual-computing.intel-research.net/publications/papers/2009/mlaa/mlaa.pdf

[2] OpenGL策定委員会. "OpenGL プログラミングガイド 原著第5版",
第10章:フレームバッファ, シーンのアンチエイリアス処理, pp.464-469, 2006.

[3] Jorge Jimenez, Belen Masia, Jose I. Echevarria, Fernando Navarro, and Diego Gutierrez.
"Practical Morphological Antialiasing" In GPU Pro 2, pp.95-113, 2011.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
這裡是文章完成得比預料中還要早的程式設計師Y。

其實像是這樣子的大變動在更定版(REVISION UP)裡應是不會搭載的,但因為我們以「隨時要漂亮地呈現出以ミクさん為首的所有角色」為目標而努力,因此在特別搶眼的此次更新中加入。

看過推特上各位follower的反應後,發現獲得相當不錯的迴響。
而因此推出的「pjd技術部門」單元不曉得各位覺得如何呢?

「太難了,要更簡單一點」
「不會不會,再深入一點」
「我想知道那個和這個」

...等等,如果有任何希望或是讀後感想,希望各位能回覆在推特的官方帳號上。
関連記事

FC2blog テーマ:初音ミク -Project DIVA- - ジャンル:ゲーム

【2011/05/13 21:05】  |   Project DIVA 技術部  |   トラックバック(0)  |  
コメント
この記事へのコメント
コメントを投稿
URL:

Pass:
秘密: 管理者にだけ表示を許可
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。