パッケージ
アイドルマスター2公式サイトへ
読者の評価
72
投稿数:16
レビューを投稿する
準備中
お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2010/09/03 15:41

イベント

[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 CEDEC 2010最終日,3日間行われた開発者イベントでメインホール最後の講演に登壇したのはバンダイナムコゲームスの二人。演題は「次期アイドルマスター グラフィックス&アニメーション プログラミングプレビュー」だ。題名どおり,次世代アイドルマスター(以下,アイマス2)で使用されるグラフィックス処理とアニメーション処理に関するプログラムの話である。前半のグラフィックス部分をバンダイナムコゲームス 第1スタジオ プログラムディビジョン プログラム2部 プログラム6課前澤圭一氏,後半のアニメーション部分をバンダイナムコゲームス スタジオ統括 第1スタジオ プログラムディビジョン プログラム2部 プログラム6課 チーフプログラマ竹内大五郎氏が解説した。
 部署名のどこを取ってもプログラム畑の二人なのだが,セッション自体はプログラミングではなくビジュアルアーツに分類されてしまって,少し当惑していた様子。ただ,講演内容自体はプログラミング寄りというわけでもなく,ビジュアルアーツ中心にまとめてきていた。

画像集#001のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
 
 おそらく,この記事を見ている人のほぼ100%が私よりよっぽどアイマスに詳しいはずなので,アイマスってなにかなどの説明は不要だろうが,今回のセッションで解説される内容を確認するうえでも,一応,講演の最初に示されたアイマス2のプロモーションビデオ2(PV2)を再掲載しておこう。非常に反響を呼んだムービーなので,すでに目にしている人も多いはずだが,これを見たときには「リアルタイムのトゥーンシェーディングもここまできたか」と感慨深く思ったことを思い出す。このような映像を作るためにどんなことが行われているのかを早速紹介していきたい。


トゥーンシェーディングの歴史を変える「センシティブトゥーン」とは


 講演では,まず,アイマス2では従来の「アイドルマスター」(以下,アイマス1)からなにが変わったのかが,グラフィックス表現を中心に解説された。
 具体的になにが変わったのだろうか? 絵を比較したスライドを見てみよう。

画像集#002のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 高槻やよい13歳は高槻やよい14歳になった(なぜかこのキャラだけ,必ず「フルネーム+年齢」で呼ばれていた。そういうものなのか?)。これだけだと,レンダリング品質が上がっていると,断言するにはちょっと材料が足りないように思える。
 アイマス2では,いうまでもなく3Dモデリングされたキャラクターが使用されているのだが,描画時にアニメのセル画調の絵にする処理,いわゆるトゥーンシェーディングが行われている。その部分が大きく変わっているのだという。

 一般的なトゥーンシェーディングがどんな感じなのかという例として,トーンマップの様子で示されたのが以下の図だ。

画像集#003のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 「面の法線ベクトルから光源方向の成分を抜き出す」というシェーディング手法は見慣れない感じなのだが,まあ光源と面の向きの関係で明るさを指定すると思っておけば間違いない。で,ある程度の明るさを基準に色を使い分けると1段シャドウの塗りのセル画ぽい仕上がりになるわけだ。
 これが,アイマス1ではハイライト成分でも色を変えることで,表現の幅を広げていた。いわゆる2段シャドウのセル画ぽい感じではないので,本当にハイライト部分,つまり明るい部分での塗り分けだけを行うものなのだろう。実際の絵を見てもそれっぽい感じだ。

画像集#004のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#005のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 さて,これがアイマス2ではどう変わったのか? 新しく追加/変更された要素は次の3種類であるという。

画像集#006のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
  • 髪の毛のハイライト成分
  • 照り返し
  • グラデーション

 実際になにをやっているのかは,アイマス2の模式的なトーンマップとして示された図を見ればだいたい分かるだろう。


画像集#007のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 すると,全体は大きく4階調となり,階調間は滑らかにつながれ,いちばん暗くなるはずの部分がむしろ明るくなるように設定されていることが見て取れる。この「照り返し」という部分の解釈が微妙なのだが,光が十分に回っているはずの場所(要するにステージ上か)での光の回り方を1ライトの指定で済ますものだと考えるのが正しそうだ。簡単にいうと,「こっちからメインライト当てたら,当然,逆側でレフ当ててるだろ」というプロの現場である。バックライトは必ず使うというものではないだろうが,使う人は使うし,なんやかんやいってよく使われているのも確かではある。
 前澤氏は,会社の先輩から「これって単に照り返しのパレット割り当てただけじゃないの?」といわれたらしいのだが(図を見る限りはそんな感じ),実際には視線方向や法線などから苦労して作り出しているのだという。

画像集#008のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 そして,アイマス2のトゥーンシェーディングが大きく進化したのは,基本的に淡色塗りつぶしという感じが強かったトゥーン処理に,微妙な表情を与えたことだ。
 とにかく写真を見ていただきたい。この「センシティブトゥーン」と名付けられた処理は,デザイナーからの「静止画でも可愛くして」という要望があって開発されたものだという。トゥーンシェーディングは,どうしても情報量が少なくなるため,動いているとごまかしが効く部分も大きいのだが,静止画だと物足りなく感じられる場面も少なくない。それで微かな陰影が追加されたもののようだ。

画像集#009のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#010のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 しかし「凄いでしょ」「これを見ると,もう後戻りできない」と大いにアピールされたものの,詳しい説明はなかったので,実際のところなにをしているのかがよく分からない。
 最初はトーンマップ全域にグラデーションがかかっているだけかとも思ったのだが,右の絵を見ると,上着の下の陰影の付き方が明らかにセルフシャドウとは違うように思える。なんとなく前述の新型トゥーン処理に,アンビエントオクルージョン処理を薄く重ねているのかなという雰囲気はあるのだが,シェーダに与えるパラメータを変化させるだけで実現しているとのことなので,そこまで重い処理ではないはず。効果としては,アニメ調の全体的な質感は維持したまま,ほんのりとした立体感が加わっている。セル画でいうと,塗りだけじゃなくエアブラシ仕上げも重ねた感じだ。セルフシャドウだけでは陰影が付かない部分の処理内容は気になるが,たまたま法線がそうなってただけだろうか? まあ,とりあえず,かなりいい感じの仕上がりになっているのは間違いないのだが。

画像集#012のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#013のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは


顔をキレイに見せる工夫


画像集#014のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 ゲームに限らずトゥーンシェーディングは,日本では非常に多用されるレンダリング手法となっている。多くのトゥーンシェーディングの作品を見て,いちばんがっかりするのは,顔に不自然な陰影がつくシーンではないだろうか。光学的には,もちろん影が落ちるのが正しいわけだが,それは決して自然には見えない。アイマス2(1もかな?)では,顔のライティングは全身とは別処理にして不自然な影が落ちないように工夫されているという。横向きなどでは影を入れるものの,正面向きの構図などでは,決して濃い影は落ちない。
 こういう恣意的な操作はいかがなものかと思う人もいるかもしれないが,これは普段目にする映像作品,ドラマでも映画でも当たり前のように行われている操作である。ピーカンの屋外で撮影していても,女優の顔にきつい影が落ちることはまずない。カメラには写っていなくても,その後ろで必ずアシスタントがレフ版を抱えてる。世の中,そういうものだ。映像作品と考えるなら,ライティングに気を遣わずに絵作りをするなどということは考えられないはずなのだ。
 アイマス2のPV2を見ると,アニメーション中の顔の角度が変わるあたりの切り替えがやや唐突な場面もあるのだが,このあたりの処理はPV2を作ったあとにどんどん改善されているそうなので,最終的な仕上がりに期待したいところだ。

画像集#015のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

ステージもパワーアップ


画像集#016のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#017のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 「キャラだけいても,ステージがなければ踊れない」と,アイマスにおけるステージの重要性を強調していた。

画像集#018のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
 アイマス1ではステージ(ステージ部そのもの)を重視し,中央に点光源を置いて周辺部に行くと暗くなるなどすべてがステージ部分主体の構成になっていたようだ。周辺部にはフォグ処理なども入れているようだが,遠く離れてもステージ上のアイドルは必ずはっきり見えるようにするなど,こだわりのあるものとなっている。
 アイマス2ではいくつかの追加要素が用意されている。波,オモチャの汽車といった動きモノや,椰子の木などの揺れモノが追加されたほか,背景部にノーマルマップが使用され,全体的な質感が向上しているという。
 ステージ上ではスモークや花火(?)のようなパーティクルエフェクトも使われるのだが,アイマス2では,同社のアーケードゲーム「デッドストームパイレーツ」で使われたパーティクルエンジンが採用され,とくにアーティストに好評だという。

画像集#019のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#020のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#021のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#022のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは


キャラクターと背景の重ね合わせ


画像集#023のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

アイマス1でのキャラクターの表示例。キャラクターをベタっと置いただけなのが気に入らないらしい
画像集#024のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
 アイマス1では,背景の絵の上にキャラ画像を合成するといった,いわば当たり前な感じの表示が行われていたようだが,アイマス2では,

  • ソフトフォーカスでキャラの輪郭を背景となじませる
  • 被写界深度処理(背景をぼかしているだけのようだが)を加える

といった処理が加えられている。これはアイマス1の発表後に専門雑誌で発表していた処理だそうだ。

画像集#025のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 ちなみに,ぼかせばよいというものでもないという話は,別のセッションの記事でやっていたわけだが,これを見ると,キャラとカメラの位置がこんなに近くて,後ろのキャラまでピンが合ってて,背景は遠いところから比較的近くにあるものまで均一にぼけて……と,まったく光学的に正確ではないのだが,正直,気にする人は少ないとは思う。まあ,被写体が女の子の場合は背景をぼかすと相場が決まっているのと,アニメ絵の場合,背景は2次元的にぼけるもののほうが見慣れている人が多いだろうし。

画像集#026のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#027のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 それはともかく,前澤氏はソフトフォーカスと被写界深度処理の両方を入れないと満足できなくなっているようだ。このあたりは完全に好みの問題だとは思うが,キャラのエッジをなじませることを非常に重視していたのが印象的だった。

 そのほか,ブルーム処理やフレア処理(内容はよく分からなかったが,床あたりが光るのと関係してるらしい)が加わっている。これらは実はアイマス1にもあったようだが,ステージが限定されていたものが,広く公開された形になるようだ。アイマス1では,白っぽい部分をなんとなくぼかして重ねるみたいな感じで処理していたようだが,ソフトフィルタがかかっていることになっているので,実はそんなに間違ってないように思われるのだが,アイマス2では,もっとHDRぽい表現になっているという。

 基本画像を4xのMSAAでレンダリングしつつ,ソフトフォーカス,被写界深度調整,ブルーム,フレアなどの処理を加えて処理をしている。もちろん,60fpsでぬるぬる動くという部分は絶対に譲れない。でもステージには最大5人も登場する……ということで,パフォーマンスアップのためには少々の改良ではダメで,基本エンジンや使用するミドルウェアは当然として,データフォーマットとかアセットの管理法などを含めたすべての部分をイチから作り直しているという。「新しいから2であって,新しくなければ2ではない」と前澤氏は語っていた。 

画像集#028のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#029のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#030のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#031のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 そのほか,アップ時だけでなく,ミドルカメラのときもエフェクトを有効にしたり,コミュ部分が改善されたり,オパーイ(社内の専門用語だそうだ)の質感がアップしたりとさまざまな改善が行われているという。とにかく,「センシティブトゥーン」だけ覚えて帰ってくれと語る前澤氏は,全編にわたり,キャラ愛にあふれたプレゼンテーションを披露していた(嫁は響だそうだ)。そういったスタッフのこだわりが,これだけのクオリティのものとして結実したのだろう。次の新情報は東京ゲームショウで公開されるということなので,楽しみにしていたい。

画像集#032のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#033のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#034のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

画像集#035のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは


アイマス2のアニメーションはどのように作られているのか


画像集#036のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 続いて,竹内氏によって,アイマス2で使われているアニメーションの作り方が示された。題目は三つで,

  • おさげ髪を作る
  • ロングヘアを作る
  • 身体などとの干渉をなくす

画像集#037のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
高槻やよい14歳のおさげ髪(標準状態)
画像集#038のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
移動要素を入れたもの。髪が宙に浮いていて,動きがちゃんと伝わらない

 まず,高槻やよい14歳のおさげ髪をどう作るかが示された。
 髪には骨(ボーン)が入っており,力を受けると骨が移動する。どこに動くかを算出するために,どんな力をかければいいのかと実例を示しながら解説していた。
 まず,髪のボーンは,髪の根元に引っ張られて根元に近いものから順に移動するものとする。その運動に慣性運動と運動の減衰を組み入れてみる。
 デモの結果は……,髪全体が動くわけではないという感じ。頭の動きが髪の毛の先端にまで伝わってこない。
 では,ということで「重力」を導入。
 しかし,今度は全体に髪のボリューム感がなくなってしまう。
 そこで,元の位置に戻ろうとする力を追加。
 物理的には正しいのかどうかは不明だが,この操作でかなりいい感じのおさげ髪が実現できる。ということで完成。加えられたパラメータは3つとなる。竹内氏は,あまり多くのパラメータを用意してもアーティストが困るだけなので,増やしすぎないことを推奨していた。

画像集#039のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#040のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#041のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#042のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#043のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#044のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

画像集#045のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
 これがロングヘアであるとどうだろう?
 まず,おさげ髪をベースにロングヘアを何本かの束にする。
 これだと,全体にばらけすぎるので,それぞれの束を横方向をバネをつなぐ。
 早々と,いい感じになったので完成。


 次に,こういったユレモノが,身体にめり込んだりしないようにする処理が解説された。
 髪や体の各部を球(や円柱)のようなシンプルな物体で組み立て,髪の移動処理で,髪の次の移動先がほかの物体に食い込んでいたら,そのときは,食い込まないように位置をずらしていく。
  完成。たったこれだけだったが,ちゃんとそれっぽい挙動になる。


画像集#046のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 ユレモノ系は,アイマス1の髪の毛などで導入したものだが,非常に評判がよかったという。そのおかげか,アイマス2では非常に多くのものが用意されている。ユーザーの作った動画などで,さらさらの髪の毛ができていると,作ってよかったと実感するとのこと。今回は,非常に簡単な例だが,物理運動に従っているようないないような処理で,それっぽい動きを作っていった。本当に正確かどうかはともかく,目的は十分に果たしてる。こういったアプローチをいろいろと模索するのもよいかもしれない。

画像集#047のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#048のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#049のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#050のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#051のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#052のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#053のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

 以上のように,リアルタイムのアニメーションシステムとしてはかなり完成度を上げているアイマス2だが,まだまだ開発スタッフのアイドル表現の追求は続いている(現在もどんどん改良されているという)。最後に,今後のアイマスでの課題などをまとめて挙げていたのでざっと紹介しておこう。スタッフのモチベーションは異様に高そうなので,今後のアイマスでは,さらなる表現方法を開発して驚かせてくれるに違いない。アイマス2の完成版とその後の進展に期待したい。

画像集#054のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#055のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは
画像集#056のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは 画像集#057のサムネイル/[CEDEC 2010]「次世代アイドルマスター」はこうして作られている! トゥーンシェーディングの概念を覆す最新処理とは

「アイドルマスター2」公式サイト

  • 関連タイトル:

    アイドルマスター2

  • 関連タイトル:

    アイドルマスター

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:11月05日〜11月06日