カテゴリ Project DIVA Arcade

pjd技術部:第四回「ノンフォトリアリスティックレンダリング」


みなさんこんにちは、2号です。

昨日、今月追加楽曲の情報が出ましたが、DIVAアーケード版「裏表ラバーズ」で採用された新表現「NPR」とは何ぞや?について、いつものプログラマYが寄稿してくれました。

それでは以下どうぞ!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
こんにちはプログラマのYです。みなさんGWはDIVAアーケード三昧でした?
私のGWはと言うと、先月の技術部記事で2号から
「恐らく近い内に、Yはもう1回記事を書いてくれるに違いない!?」
と超わかりやすく振られ、こうして記事を書いております。

そんな訳で今回は前回の続きです。まだ読んでないよ~と言う方は、先に第三回「初音ミク Project DIVA Arcadeとミクの日感謝祭とVirtua Fighter 5」に目を通してもらえると幸いです。

●フォトリアリスティックレンダリングとそうじゃないもの
前回「まるで本当にそこにいるかのようなミクさん」のCGについてお話しました。
これはコンピュータに「現実世界とカメラ」を真似させて、写真のような画像を得る技術です。

対して「まるで絵のようなミクさん」を描こう、と言うCGもあります。
こちらはコンピュータに「描く人や画材」を真似させて、絵のような画像を得る技術です。

今回は後者の、絵のCGについてお話します。

絵は写真に比べるとバリエーションが豊富で、描く人の個性や画材で大きく差が出ます。さらに見た目通りの必要もなく、形状をデフォルメしてもいいですし、青いところを赤く描いても構いません。
あまりに自由なせいか、CG用語ではまとめて「ノンフォトリアリスティックレンダリング(以下NPR)」とよく呼ばれます。
試しに “non photorealistic rendering” で画像検索してみてください。様々な表現が見られると思います。

●線画を描いてみよう
コンピュータに絵を描かせるにはどうしたらいいでしょうか。

写真であれば実物を観察してお手本を真似て行けます。(*1)
NPRは自由です。アスキーアートを出力する論文がCG学会のSIGGRAPHで真面目に発表されるくらい自由です。(*2)

取りつく島がなさそうですね。しかし「描く人」を真似るのであれば、人間の仕組みを調べることが一つ有効なアプローチです。

例えば、人間(生物)が世界を見るとき特有なものに「輪郭線」があります。
物体を認識する補助に使っていると考えられています。
実際、輪郭線だけの絵を見ても何が描かれているか判りますよね。絵を描く時もいきなり面で塗る人は少なく、先に輪郭線を描いて当たりを取る方が多いでしょう。

では、画像から輪郭線を抽出して、線画ぽいものを描いてみましょう!

●画像処理
今回は線画を「画像のフィルタ処理」で描いてみます。(*3)

フィルタ処理は、元情報(画像)から不要なもの除いて、欲しい情報だけを取り出す処理です。まさに情報をこし取る感じです。
デジカメや写真加工ソフトに、たくさんのフィルタメニューが並んでますよね。ぼかし、シャープ、ノイズ除去などなど。手元で試すと感じがつかめるかと思います。

フィルタ処理の実装は「『注視している中心ピクセル』と『その周辺のピクセル』の値を使って、新しいピクセル値に置き換える」ことで可能です。
例えば次のような 3×3 の値で、入力画像の各ピクセルで中心と周囲との積和をとると、画像をなだらかにする(高周波成分を取り除く)ことができます。

※平滑化フィルタの計算例
tech04_1.png

くっきり正方形の画像がぼけぼけの丸になりました。
この注視ピクセル周辺の重みを並べた小さなテーブルを、カーネルやオペレータと呼びます。カーネルのサイズや値によってさまざまなフィルタ処理が可能です。

試しにカーネルの値を次のように変更しましょう。
今度はカーネルに負の値が入っています。計算結果が負になった場合は絶対値を出力しておきます。

※横方向微分フィルタの計算例
tech04_2.png

横方向に一次微分して、横幅2ピクセルの縦の輪郭線が抽出できました。

…そろそろ計算に疲れて来たので数字の相手はここまでにして、お待ちかねミクさんの画像で試してみましょう。(*4)

※ミクさんに横方向微分フィルタ適用(クリックで拡大)
tech04_4.png

縦の輪郭線が抽出できましたね。
予想通り横方向の線は抽出できず、少し傾いている所がとびとびの鎖線になっています(腕の部分に顕著)。また一次微分のため、面が傾いている部分がうっすらと拾われています(髮に顕著)。

今度は横線も抽出してみましょう。ラプラシアンフィルタと呼ばれるカーネルが輪郭線抽出の定番です。面が傾いているだけの部分も二次微分で弾くことができます。

※ミクさんに4方向ラプラシアンフィルタ適用(クリックで拡大)
tech04_3.png
tech04_5.png

いい感じですね。
画像処理で縦横の輪郭線を抽出して、ミクさんの線画を描くことができました!

●NPR・イラスト調レンダリング
線画の中を塗ると、イラスト調のレンダリングができます。
今回は裏表ラバーズのPVの雰囲気に合わせたレンダリングを新規開発しました。

※ミクさんイラスト調レンダリング(クリックで拡大)
tech04_6.jpg

輪郭線はラプラシアンフィルタをベースに、製品レベルとなるようヒューリスティクスに手法を積み重ねています。
幾分艶っぽさ/生っぽさを残した塗りと合わせて、ぜひゲームセンターで見てみてください。

※塗りの一例(ピンクポップス)(クリックで拡大)
tech04_7.jpg

工数の都合上、ミクさんのデフォルト衣装にターゲットを絞ってレンダリングを調整しています。あまり合わない衣装もあるかと思いますが、

※鏡音リン 蘇芳 妖狐 / フロイライン(クリックで拡大)
tech04_8.jpg tech04_9.jpg

大抵の衣装は、かわいく艶っぽく描けてると思います。

●見るコンピュータ、描くコンピュータ
人間の目を模して特徴抽出し、さらに人間の脳を模してコンピュータに世界を認識させる技術を、画像の認識・理解と言います。
コンピュータに目を持たせる意味でコンピュータビジョン(CV)とも呼ばれます。この頃ARやKinectの流行で活気づいている分野です。

今回紹介した画像処理はその入口です。
CGは出力する側ですが、入力側のCVの技術を利用できるのは面白いですね。

ところで画像のフィルタ処理は自前で書くとなかなか大変です。今はOpenCVと言う便利なライブラリがありますので(*5)、利用すると楽に始められるかと思います。
CGやCVが多くの人に興味を持たれ研究されるよう願って筆を置きます。特に中高生のみなさん、ぜひ始めてみてください。(*6)

■少し詳しい補足説明
(*1) お手本はありますが、真似ようとすると計算量が膨大過ぎて不可能なことが多いです。現実は強大です。それを何とかしようと世界中の研究者が知恵を絞り続けています。

(*2) 毎年北米で開催されるCG最大の学会。素晴しいアスキーアートの論文は参考文献[1]。濃度ではなく構造から文字を選択する手法で、良好な結果を得ています。

(*3) ジオメトリ(ポリゴン形状)から輪郭線を生成する手法もあります。ゲームではこちらの方が主流でしょうか。品質向上にデータの仕込みが必要なため、今回の完全後付け実装では見送り、画像処理の方を採用しました(個人的な得手不得手もあります)。

(*4) 入力画像には色ではなく深度値を使いました。正確な深度値をさらっと使えるのがCGのよいところです。

(*5) 一般的な画像処理ならパラメータを指定するだけで行えます[文献2]。フィルタの実装は、検証や範囲外対応、高速化など地味に面倒なのです。

(*6) 私がはじめて画像のフィルタ処理を書いたのが高校生の時です。当時8ビット機のBASICですごく処理時間がかかりました。今だとブラウザとJavaScriptでも十分な速度と品質が得られます。OpenCVはありませんが手軽ですね[文献3]。

参考文献
[1] Xuemiao Xu, Linling Zhang, Tien-Tsin Wong. “Structure-based ASCII Art”, In SIGGRAPH’10, 2010.
http://www.cse.cuhk.edu.hk/~ttwong/papers/asciiart/asciiart….

[2] “OpenCV DevZone”, http://www.opencv.org/

[3] 古籏一浩. “[2-1]赤色強調フィルターを作る”, In HTML5+JavaScript アイデア&実践サンプル, pp.32-39, 2011.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
いかがでしたでしょうか?
連続で書いてくれたプログラマYには感謝。

・・・しかしまだ残る疑問があるので、Yに聞いてみました。

2号:これっていわゆるトゥーンシェーダーってやつ?
Y :そうですね~似たような傾向ですが、トゥーンがフラットぺたんこな
   塗りなのに対して、こちらは少し盛ってる感じでしょうか
   (写実感を少し残す)。
   輪郭線もタッチ再現は無理ですが、一本調子にならないよう
   配慮していますよ。
   なのでイラスト調と呼んでみました。いいんです好きに呼んで。
   NPRはフリーダムですから!

なるほど、フリーダムだそうですw

「初音ミク Project DIVA Arcade」では、今後もPVの雰囲気によって新しい表現を実装するかもしれません。
アスキーアート、楽しそうですネ!(冗談です)

ではまたお会いしましょう。

(2号)

カテゴリ Project DIVA Arcade

pjd技術部:第三回「初音ミク Project DIVA Arcadeとミクの日感謝祭とVirtua Fighter 5」


みなさん、こんにちは!2号です。

技術部の記事の前にお知らせ!
明日4/17(火)に久々の「DIVAチケット」で交換できるアイテムが追加されます!
技術部記事の次でご紹介を行っておりますので、是非御確認を!

さて、久々の「pjd技術部」の記事のアップです。
今回も画像/映像を担当するプログラマYによる寄稿です。
滅多に語られる事のない開発の内部!興味ある方にはたまらないかも?
それではどうぞ!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
果てしなくご無沙汰しております。プログラマのYです。

みなさん、3月9日は「最後のミクの日感謝祭」を見て頂けたでしょうか?
1号2号はじめ多くのスタッフが渾身の男気でお届けしたライブ、素晴らしかったですね。私は見終わったあとゲームセンターでしみじみと愛言葉をプレイして余韻にひたって来ました。

さて、そんなステージを描き出す技術も、初音ミクProject DIVA Arcadeの描画技術も、同じものが使われています。
今回はその基本描画技術を眺めてみましょう。(*1)

●クロスプラットフォーム
初音ミクProject DIVA Arcade(以下DIVAアーケード)は「Virtua Fighter 5(以下VF5)のプログラムでミクさんを描こう」と言う所からはじまりました。

取り急ぎデュラルのモデルをDIVAのモデルと入れ換えて表示。
2009年夏のミクフェスでお披露目されたミクさん(の内4曲ほど)は、LINDBERGH基板上のVF5のプログラムで描かれたものです。

時は流れ、DIVAアーケードとしてプロジェクトが始動。
VF5とプログラムの分家が行われ、基板をRINGEDGEに変更し、急ピッチでゲームが作られて行きます。
ロケテストは盛況で(本当にありがとうございます)、その合間に2010年春の最初の感謝祭。きゅうきゅうのスケジュールの中、無事完成!

※VF5とDIVAアーケードがなかよく同時起動(クリックで拡大)
miku_dev1.jpg

机周辺にモノが積み上げられるのは仕様です。

描画技術の話に戻しますと、VF5もDIVAアーケードもOpenGLと言うグラフィクスライブラリの上で動くよう作られています。
OpenGLは多くのOSや環境でサポートされていて、比較的簡単にアプリケーションの移植が可能です。

先のVF5との同時起動は私が普段開発に使っているLinux PC上での写真ですし、最後のミクの日感謝祭はハイパワーなGeForce GTX 570を積んだWindows PC上でレンダリングされています。(*2)
またPS3のドリーミーシアターは、VF5の移植チームが作成した高速OpenGL互換ライブラリを使うことで同じデータでの描画を実現しています。VF5の移植チームに感謝です!
さらに描画以外の、OSや環境の違いを吸収するライブラリを用意しているプログラマさんの仕事も重要です。ここで一緒に感謝です!

●DIVAアーケードの描画技術
VF5から生まれたDIVAアーケードですので、多くの技術やエフェクトがVF5ゆずりとなっています。

※地面のもや(クリックで拡大)
miku_dev2.jpg

※数万個の雪(クリックで拡大)
miku_dev3.jpg

またVF5のLINDBERGHよりDIVAアーケードのRINGEDGEの方が、世代的に新しいビデオカードを搭載しています。
ビデオカードの新機能は、OpenGLの場合メーカーの用意したドライバからすぐに利用できます。(*3)
次のような表現を追加しました。

※LINDBERGH版とRINGEDGE版の比較
miku_dev4.jpg

(1) セルフシャドウを綺麗に(*4)
(2) 肌を美しく(*5)
(3) 瞳を奥深く(*6)

ミクさんがとても美しくなりました。

なお第1回のアンチエイリアシング第2回のカメラモーションブラーも、LINDBERGH世代では難しかった実装です。
その他、2Dテクスチャの綺麗な圧縮など、見た目には判りづらい点でもVF5から進化した技術を投入しています。

●フォトリアリスティックレンダリング
DIVAアーケードはその生い立ちから、比較的リアル寄りな表現をしています。
3D CGの世界ではフォトリアリスティックレンダリングと呼ばれます。
カメラに映る現実の世界を追求するグラフィクスで、CGの基本です。

残念ながらDIVAアーケードはまだまだフォトリアルには程遠い品質ですが、限られた基板の性能と1/60秒の描画時間の中で、「まるで本当にそこにいるかのようなミクさん」を、アートワークを担当するデザイナー共々追い求めました。
それは感謝祭のステージで少し実現されたかな、と思っています。

※最後のミクの日感謝祭写真(クリックで拡大)
daikanshasai.jpg

ステージと同じミクさんには、いつでも全国のゲームセンターで会うことができます。
時には鑑賞モード、あるいは4月13日からの「ミクの日大感謝祭記念コンテスト」(*7)で、あなたの隣にいるミクさんたちをぜひ感じてみてください。

■少し詳しい補足説明
(*1) アルカディア掲載のインタビュー記事[文献1]と内容やサンプル写真が被りますがご了承ください。

(*2) 3240×1080と言う高解像度向けにハイパワーマシンが組まれました。Linux PCは通常開発用のため、RINGEDGEのビデオカードに近い仕様のGeForce 9600GTが挿されています。ちなみに感謝祭の映像はメインプログラマのTが土日返上でレンダリングしました。

(*3) OpenGLの仕様や拡張は[文献2]のページにまとめられています。
GL_NV_xxxはNVIDIA社の、GL_APPLE_xxxはアップル社の、ように各社固有の拡張仕様が公開されています。これらがARB(策定委員会)の話し合いで取捨選択されてGL_EXT_xxxやGL_ARB_xxxになり、最終的に標準仕様へ取り込まれます。

(*4) Exponential Shadow Maps[文献3]
ロバストなシャドウマップ技法。現行コンソール機でよく使われるVSMに比べライト漏れが発生しません(もちろんアーティファクトの軽減にはひと工夫必要です)。

(*5) Sub-surface Scattering[文献4]
表面下散乱。人肌や大理石、牛乳など半透明物質の表現に使います。DIVAアーケードでは散乱プロファイルを誇張することで、人間と創造物の中間のような質感にしています。

(*6) Ray Tracing(光線追跡法)。通常のラスタライズに比べ、反射屈折の表現が容易で綺麗にできます。これも人形の目(グラスアイ)を参考にして、人間と創造物の中間のような質感にしています。

(*7) 開催期間、2012/4/13~2012/4/24。難易度控えめで、はじめてDIVAアーケードに触れる方にお勧めです。衣装が買えるVPもたくさんもらえます。カード/携帯を用意して気軽にチャレンジ!

参考文献
[1] エンターブレイン. “月刊アルカディア8月号[No.123]”,
特集初音ミクProject DIVA Arcade “3Dモデリング開発者突撃Q&A!”, p.26, 2010.

[2] OpenGL ARB. “The OpenGL Registry”, http://www.opengl.org/registry/

[3] Marco Salvi. “Rendering Filtered Shadows with Exponentioal Shadow Maps”,
In SHADER X6, pp.257-274, 2008.

[4] Eugene d’Eon, David Luebke. “Advanced Techniques for Realistic Real-Time Skin Rendering”,
In GPU Gems 3, Chapter 14, 2007.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
久々の技術部ネタ、いかがでしたでしょうか?
恐らく近い内に、Yはもう1回記事を書いてくれるに違いない!?

さてここからは、2012/4/17(火)に交換開始となる
DIVAチケット交換アイテムのご紹介♪

・デコレーション称号追加

「ルーキー」「さん」の2ルートを新たに追加!
追加された称号を交換することで「ボーイ」「ガール」など、新たな称号と交換できるようになります。

・ゲーム画面用スキン追加

今回は以下の9種類のスキンを追加!
それぞれチケット16枚と交換になります。
今までのシリーズと異なりオリジナルのポーズ&笑顔です!

★セガ製デザイン:JEWELシリーズ
skin_264.jpg skin_269.jpg
skin_274.jpg skin_279.jpg
skin_284.jpg skin_289.jpg
skin_294.jpg skin_299.jpg
skin_304.jpg

今月末からはGWも始まりますし!コンテストも開催中ですし!
毎日ちょっとずつのプレイでも、いつのまにか貯まるDIVAチケットもお忘れ無く!

(2号)

カテゴリ Project DIVA Arcade

pjd技術部:第二回「カメラモーションブラー」


みなさん、こんにちは。2号です。

本日公開されたDIVAレコード第二弾ですが、今回ちょっと新趣向です。学校/会社帰りなどにお試しください!
あ、そうそう。DIVAレコードを楽しむ為にはDIVA.NETへの加入が必要です。
こちらのページを参考にして、是非とも加入してみましょう。

さて、週刊ディーヴァ・ステーションのティーブレイク的記事「pjd技術部」の2回目の記事が上がってきました。
またも弊部の映像担当プログラマーのYが記事を書いてくれたみたい。

ふむふむ…明日の配信曲にも関係有り?
それでは本編スタートです!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ご無沙汰しております。プログラマのYです。
 気がつけば夏真っ盛り、「初音ミク Project DIVA Arcade」もver.A Rev.2が稼働中。ロケに行くと水着が華やかで素敵です。

 そんな中、技術カテゴリ記事をマイペースでのんびりお届けします。いつものゲーム情報の合間に楽しんで頂ければ幸いです。今回はリリースしたてのver.A Rev.2で地味に導入した、カメラのブラーについてお話しします。

 ブラー(blur)とは、ボケやにじみのことです。
 試しに夜の駅でカメラを振り回しながら撮影しますと…

miku_blur0.jpg
●夜のプラットフォーム。シャッタースピード1/20秒

こうなります。にじんで糸を引いたようになっていますね。
 写真撮影で「ぶれ」と呼ばれます。シャッターが開いている時間分の光が、カメラのセンサーにずれながら累積されて発生します。

 ぶれは通常好ましい効果ではありませんが、高速で動いているものを表現するのには向いています。走る電車を撮ってみましょう。

miku_blur1.jpg
●駅を走り抜ける電車。シャッタースピード1/20秒

電車の絵が流れて、走ってるんだ!と言う感じが出ますね。

 ver.A Rev.2での追加曲「初めての恋が終わる時」のイントロでは、プラットフォームをカメラが疾走するカットがあります。

miku_blur2.jpg
●「初めての恋が終わる時」by ryo (supercell) イントロ、通常描画

カメラの高速移動でも全くぶれない、ぴたっとした絵ですね。シャッタースピードゼロの世界です。動画で見るとプラットフォームをカメラが逆行してるように感じてしまいます。

 これを解消するため意図的にカメラのぶれを追加します。

miku_blur3.jpg
●同カット、カメラブラー付き。疑似シャッタースピード1/120秒

進行方向のぶれが出て、走りが感じられる絵になりました。動画で見てももう逆行には見えません。めでたしめでたし。
 処理速度と品質の都合上、すべてのシーンでブラーを付加できる状態ではありませんが、今後のバージョンアップでおいおい改善していきたいと思います。

 ちょっとだけゲームのお話を。
 このシーンの後、MAX HOLD BONUSと絡めて格好良くタイトルロゴが出るよう、HARDとEXTREMEではノーツを配置してあります。
特にEXTREMEでは気持ちよく決まりますので、ぜひMAX HOLDに挑戦してみてください。

 さて次回は一番最初に書く予定だった「初音ミク Project DIVA Arcadeの開発基礎技術」についてお届けする予定です。

■少し詳しい補足説明
1. 撮影時にカメラをしっかり支えていないと出るぶれは「手ぶれ」と呼ばれます。
この頃のデジタルカメラはセンサーの高画素化に対応して、何らかの手ぶれ補正機構がついていることが多いです。

2. 逆走やタイヤの逆回転のような、時間軸のサンプリング不足によるエイリアシングを“temporal aliasing”と呼びます。

3. ゲームが60fpsのため、疑似シャッタースピードをその半分程度の1/120秒にしています。
実際、暗い駅でシャッタースピード1/120秒はかなり厳しい速度ですが、それが簡単に出来るのはCGのいいところです。

4. カメラブラーの実装は、第一回「アンチエイリアシング」の補足説明3で書いた「再射影」そのものです。ピクセル単位に前フレームの位置を求め、現フレームの位置との間を補間してブラーをかけます。

5. その第一回補足説明で「バーチャファイター5の時に実験しましたが、処理の重さと絵が不完全になる場合があるのとで、再射影の実装は見送りました。」と書きましたが、「初音ミク Project DIVA Arcade」の基板であるRINGEDGEのビデオカードで試すと思いの他処理が軽くなっていました。
ハードウェアの世代が変わったら昔使えなかった技術を検証し直しなさい、と言う見本です。本文のとおり更に改善して製品投入を目指していきます。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
以上、映像担当プログラマーのYでした。
実はL.A.のライブ映像がミクの日感謝祭より綺麗になったのはこの人のおかげ。今後も処理落ちしない程度に色々頼む。(笑)

ということで、明日配信楽曲解禁ですが、カメラの高速移動シーンにも是非注目をしてみてくださいね。それでは、次回のpjd技術部記事にご期待ください!
(2号)

カテゴリ Project DIVA Arcade

「pjd技術部」タグ誕生! :第一回「アンチエイリアシング」


「初音ミク Project DIVA Arcade」のお知らせでおなじみ、2号より

「今度『pjd技術部』のタグ作るから記事を書くように」

との命が発動---

ディーヴァ・ステーションの読者のみなさま初めまして。
プログラマーのYと申します。主にアーケードの描画周りを担当。
美しいミクさんをより美しく、可愛いリンちゃんをより可愛く描き出すために日々精進しております。

さてこのタグでは、Project DIVAを支える色々な技術についてご紹介していきたいと思います。今回はグラフィクスプログラミングですが、デザインやサウンド、ネットワーク担当からも記事が寄せられるかも知れません。
いつものゲーム情報の合間に記事を楽しんで頂ければ幸いです。

では第一回のお題。
2号のリクエストで「アンチエイリアシング」について。
「初音ミク Project DIVA Arcade」ver.A Rev.1 で、改善したてほやほやのトピックです。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
大半のコンピュータグラフィクスは「ピクセル」と呼ばれる枡目状の四角い箱に色を乗せて、絵を表現しています。方眼紙に色塗りする感じです。

 ですので、特に工夫せずにミクさんを描いてみると…

miku_aa0.png
★素のミクさん
画像クリックで大きい画像に
注:以下画像全てゲーム中のシーンをこの記事用に拡大したものです。

枡目に沿った「がたがた」が見えますね。
ゲーム中の動く画面では更に「ちらちら」も加わります。
これら「がたがた」「ちらちら」「エイリアシング」と呼ばれます。
画像のノイズの一種です。

 ノイズはできるだけ除去したい。
 この除去/軽減操作を「アンチエイリアシング」と呼びます。

ver.A までは「temporal Antialiasing(略称temporal AA)」と言う手法で、エイリアシングを軽減しています。バーチャファイター5で導入したもので、DIVAアーケードでもそのまま採用しました。これをかけたのが次の画像です。

miku_aa1.png
★temporal AA 適用のミクさん
画像クリックで大きい画像に

がたがたが軽減されているのが判ります。
ポリゴン形状の部分だけでなく、テクスチャで表現されているフリルも再現されるようになりました。

temporal AAは過去フレームとの合成で行います。静止している場合は綺麗なのですが、絵が動く(特にカメラが動く)と効果はほとんどなくなってしまいます。
バーチャファイター5に比べ、DIVAシリーズはカメラのパンやズームが多用されており、アンチエイリアシングの効果は限定的なものになっていました。

そこで、ver.A Rev.1で追加導入したのが
「Morphological Antialiasing(略称MLAA)」
と呼ばれる手法です[文献1]。
画像の「がたがた」になっている部分を検出し、中間の色で埋めて行きます。

miku_aa3.png
★MLAAによるがたがたの検出と中間色での塗りつぶしのロジック
“Morphological Antialiasing”
http://visual-computing.intel-research.net/publications/pape… より

 ではミクさんの絵に適用してみます。

miku_aa2.png
★temporal AA + MLAA を適用したミクさん
画像クリックで大きい画像に

髮や輪郭が綺麗になりました。
他の部分のがたがたもほとんど目立たなくなっています。
MLAAは一枚の絵から処理を行いますので、カメラが動いても適用されます。
ゲーム中のパンやズームでのちらつきが軽減しました。
ver.A Rev.1 が稼働したらチェックしてみてください。

とは言え、アンチエイリアシングはピクセルサイズの処理で、なかなかゲーム中では確認しづらいです。
観賞モードや外付けのモニタを設置しているお店で、より美しくなったミクさんたちを眺めてみてくださいね。
今でしたらロケテスト店舗に出かけられる方は、ver.A と ver.A Rev.1 の見比べをしてみるのも楽しいかと思います。

■少し詳しい補足説明
1. アンチエイリアシングによって、画像は幾分ボケ気味になります。
製品ではこれにシャープフィルタをかけて画像をくっきりとさせています。

2. アンチエイリアシングの基本は、射影行列にジッタを入れて累積バッファに何度も描画して行くことです[文献2]。
リアルタイムゲームで 1フレーム中に何度も描画するのは処理が重いため、過去フレームを累積することでアンチエイリアシングを実現します。
これを temporal Antialiasing と呼ぶのは誤用かと思いますが、既に一般的に使用されているのでこの表記としました。

3. temporal AA も再射影と言う方法で、カメラの動きに追従できます。
バーチャファイター5の時に実験しましたが、処理の重さと絵が不完全になる場合があるのとで、再射影の実装は見送りました。
レースゲームには適しているかなと考えています。

4. ビデオカードにはMulti Sampling Antialiasing(略称MSAA)と言う、専用の機能があります。
かなりのメモリと性能を要求されますが、それが許される場合は MLAA より MSAA を使った方が簡単に美しい画面を実現できます。
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/pape…

[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)では実装しないものですが、「常にミクさんを始めとしたキャラクターは美しく表現」をモットーに頑張っておりますので、目処が立った今回実装してみました。

twitterでフォロワーの皆様にお聞きしたところ中々の反響もいただきました。
そういう訳でスタートいたしました「pjd技術部」コラムはいかがだったでしょうか?

「難しいからもっと簡単に」
「いやいや、もっとマニアックに」
「アレとかコレが知りたい」

…など、御要望/読まれた感想等ございましたら、twitterの公式アカウントに返信していただければと思います。
明日も何かあるとか?
(2号)

カテゴリ Project DIVA Arcade

初音ミク Project DIVA Arcade:5月度追加楽曲のご紹介


みなさん、またお会いしましたね。2号です。

今回はみなさんの予想通り…

5月度追加楽曲のお知らせです!

気になる追加日は

2012/05/15(火)!

来週火曜日です!

気になる楽曲は…
「初音ミク -Project DIVA- extend」からの2曲

ACオリジナル追加PV楽曲の1曲

計3曲です!

さあ、どの楽曲が追加されたのかは…こちらをどうぞ↓!
~~~~~~~~~~~~~~~~~~~~~~~~~~
diva_may_new_song_uraomotelovers.jpg
☆裏表ラバーズ
Music, Lyrics and Jacket picture designed by wowaka

とうとう「裏表ラバーズ」がDIVAアーケードにも登場!
3/9に行われた「最後のミクの日感謝祭」でも披露されたミクさんのキレッキレのダンスと畳みかける譜面、そしてPSPでも衝撃だったモーショングラフィックス的背景のテイストに合わせるべく開発された新レンダリング手法(NPR)にご注目ください!
追記:モジュール設定ルールはいわゆる「そまっちルール」(同キャラモジュールのみ設定可)です)

diva_may_new_song_puzzle.jpg
☆パズル
Music & Lyrics by クワガタP
Illustration by りょーの

「ミクうた、おかわり」と「初音ミク -Project DIVA- extend」での採用。さらには2010/2012年のライブでも演奏された、DIVAファンにはおなじみの珠玉のバラードが満を持しての登場です。
HDクオリティで表現された路上ライブシーンと「最後のミクの日感謝祭」でも披露されたギター演奏シーンは必見です。

diva_may_new_song_leia.jpg
☆Leia
Music & Lyrics by ゆよゆっぺ
Movie & Illustration by meola

昨年2011年に登場した巡音ルカオリジナル楽曲の中でも最高峰に属し、今なお高い人気を誇る楽曲の登場です!インパクトのあるドラムとギターのイントロ、ルカさんのせつなく艶っぽい歌声、オリジナルPV作者のmeolaさんによってHDリマスター化された美麗映像が紡ぎ伝える世界観…そして独特の変拍子を活かした譜面を是非ご体験ください!

~~~~~~~~~~~~~~~~~~~~~~~~~~
と言う事で恒例の楽曲紹介動画です。是非ご覧ください!
 ↓

※Youtube版紹介動画はこちら!

※「裏表ラバーズ」紹介記事で登場した謎のキーワード「NPR」に関しては、明日投稿の「pjd技術部」コラムにてご紹介予定♪こちらも御期待くださいね。

引き続き、「初音ミク Project DIVA Arcade」の動きにご注目ください!
稼働二周年も近いですし!
それでは!

(2号)