イケメンを感じさせるには?2Dイラストを3D化する為に工夫した技術

王子様のささやき朗読VR

はじめに

イケメンテックラボ でクリエイティブのディレクションをしております、三木と申します。
コンシューマゲーム開発会社を経て2009年に中途入社し、アバターサービス「ポケットランド」「@games」や「夢王国と眠れる100人の王子様」等に参加。 現在はイケメンテックラボ と新規開発に関わっています。

今回の記事は、 クリエイター視点から「王子様のささやき朗読VR」(以下「朗読VR」)の開発工程やクリエイティブでこだわった点などをご紹介します。
2Dのイケメンキャラクターイラストをクオリティはそのままに3Dに落としこむための工夫など、キャラクターのビジュアルや世界観を守った制作を心がけました。

3D初心者のグラフィックデザイナーの方などでも理解ができる内容となっておりますので、ぜひお気軽にご覧くださいませ。

「王子様のささやき朗読VR」をつくった理由

イケメンテックラボ は、「キャラクターの魅力を引き出し、イケメンに見せるための表現技術の研究」を行う事を目的に設立されました。なぜVRを開発したかというと、開発期間、技術レベルが適切だったということもありますが、普段行っているゲームアプリ開発では挑戦できなかった分野だったことや、女性に喜んでもらえそうな手応えのあるコンテンツだったことが理由です。

次に、弊社サービスの「夢王国と眠れる100人の王子様」(以下「夢100」)を題材にすることを決めた後は、どんなシチュエーションで王子様と触れ合えたら嬉しいと思うか、と言う観点から案をいくつか出して行き、最終的に「ひたすら読み聞かせをしてくれる王子様を眺めたい!」と言う企画メンバーの熱い案により内容が決まりました。

そこから実際にVRにする際の3Dモデルをつくることになり、3Dでどんな見た目にするかを決めていきました。

3D化するために制作した三面図

3D化するにあたり決めたアウトプットの方針

3Dモデルは「イラストの雰囲気を優先する」部分と、「人間らしくリアルに表現する」部分を分けて考えて制作しました。

    ・イラストの雰囲気を優先した部分→3Dモデルの見た目(主に顔まわり)
   ・人間らしくリアルに表現した部分→歩き方などのモーション   
そのほか、開発していく中で喋っているときの口パク、服の質感、体つき、髪の質感などはイラストかリアルかどちらに寄せるか非常に悩みました。

そこで「朗読VR」では、以下の理由でそれぞれ方針を決めていきました。

3Dモデルの見た目(主に顔回り)

普段「夢100」を遊んでくださる方は、「イラストの王子様」と触れ合う機会がほとんどです。3D化しても、すんなり受け入れられるよう顔まわりは「イラスト」を優先に、どこまで再現できるかに気をつけました。

モーション

イラストの王子様は動く事がありません。動いた仕草が説得力のある、現実に居そうな立ち居振る舞いをしてくれたら、嬉しいはず!

今まで見せられなかった新しい王子様の魅力を伝えられるだろうと思い、モーションは「リアル」を優先に表現していきました。

モーションキャプチャでリアルなモーションを表現(協力:ソリッド・キューブ)

細かな部分は迷いがあり、開発を進めながら決めていきました。
具体的なものをいくつか紹介します。

口パク

「夢100」のゲーム内では「開ける」「閉じる」の2パターンで口パクします。リアルなモーションを方針として置いたものの、口パクもリアルなのが正しいのか・・・?いや、厚塗りでもない顔立ちの王子様がヌルヌル口が動いたらきっと違和感あるな・・・。

実際にユーザーから見る距離感も確認したところ、今回はリップシンクを用いたリアルな表現で朗読する方が適していると判断し、口パクはリアルな表現となりました。

キャラクターの口の動き(音声はありません)

服の質感

イラストを優先にしつつ、臨場感を表現するために、ボタンなどの細かなパーツの質感はキラリと光るような、リアルなマテリアル設定にしました。

光沢の強弱を制御するためのスペキュラマップを控えめな調整にすることで、キャラクター全体のトゥーンテイストから浮かないようにしています。

金属質感など、光沢を付けたい箇所の強弱をコントロールするスペキュラマップ(右)

体つき

「夢100」の王子様は、現実世界の男性より細身に描かれおり、3D化したときに女性よりも華奢になってしまう可能性がありました。自分より華奢な男性をイケメンと感じてくれるでしょうか。
かといって、現実世界に合わせてリアリティのある体付きにするのも・・・違う。と言う事で、イラストの印象を優先しつつも、細すぎる印象の部分は少し肉付きを良くしてバランスを整えました。

3Dモデルデータ

髪の質感や口まわりのアウトライン

一番悩んだのが髪の質感です。イラストを優先すると不思議な質感になってしまい、リアリティに欠けてしまう。リアルな3DCGの髪表現にするとどうしても繊細になりすぎてしまう。

髪の質感は、イラストよりの印象を優先しつつ、アウトラインの強さをマスクや設定で制御し、調整を行いました。

アウトラインの制御については、口回りにも調整を行っています。そのままアウトラインを適用してしまうと口回りなど、出て欲しくない部分にアウトラインが付いてしまい、イラストの印象と変わってしまいます。髪の質感以外も、こういった部分はマスクやアウトラインの太さ、色でその都度調整を行っていきました。

アウトラインの有り無しをコントロールする Outline Sampler 用マップ(右:黒い部分はアウトラインが表示されない)
Outline Sampler 適用後(左)適用前(右)

開発中のこだわりポイントや工夫、苦労したエピソード

上記のように方針を決めたところで実際の開発に入ります。 こだわった所や苦労したエピソードを紹介します。

こだわった点

ポリゴン数とテクスチャサイズは最大限に

夢100のクリエイティブのコンセプトに「ロイヤル感」と言うワードがあります。 王子様を題材にしたサービスなので、王子様がまとっている服やポーズには王子らしい高級感、気品を表現したいと思っています。

そこで、最初の関門のポリゴン数を決める段では、実現可能な、最大限のポリゴン数をエンジニアに相談しました。 当時の他アプリで1キャラ2万と言う数値を参考に、その3倍の6万(リッチ!)と決め、顔には約3万もポリゴン数を割いています。

(のちに知ったのですが、VRなので右目用・左目用の2回レンダリングをするため、実際には12万ポリゴン分の負荷がかかっていました。)

顔のモデル

CGっぽさやチープな印象が出ないよう、ポリゴン数とテクスチャサイズはキャラモデルに最大限割り振ったおかげで、服の立体感など、きちんとモデリングで表現し、細部までリアリティのある表現ができました。

体・服のモデル

その分、ポリゴン数やテクスチャサイズは背景でバランスを取っていくことが求められました。

そうは言っても重要な背景

ポリゴン数は少なめに設定した背景ですが、朗読してもらう空間として、どんな背景にするかはもちろんこだわりました。

じっくり落ち着いて王子様を眺められる場所。王子様のいる場所なのだから、狭すぎるのは違うな・・・かと言って、広すぎると落ち着かないな・・・ そんな思考で部屋のサイズは決めていきました。ろうそくや暖炉の光がチラチラと揺らぐような、少し暗い空間や家具の配置など、「二人きり」「朗読してもらう空間」と言うテーマから必要な設定を詰めていきました。

背景モデル

ユーザー(私)の身長は??

キャラクターの設定身長はあるのですが、ユーザーの身長はまちまち。それでもカメラ位置をどの高さに設定するか決める必要があります。
ここはユーザー(私)とキャラとの身長の印象が、「優しくて見下ろされるくらい」を想定して、決めました。

ユーザーの位置を設定し、目線を合わせる

このような形で、 「夢100」のゲーム内 で大切にしてきた世界観を軸に、細部を詰めていきました。

苦労した点

髪型と顔の印象

3D制作では良くある事ですが、イラストに合わせて3Dモデルを作ってみると、成り立たないところが・・・・。 見る角度によっては髪型が違和感のある方向にボリューミーになったり、3面図を用意したものの、それ通り作り込んでも顔が似ない・・・。 

顔の作りこみはイラストの印象を第一優先に、3面図よりもイラストの印象を優先させて調整していきました。

再現するのが難しかった角度

眉毛・目が見えない・・・!

角度によっては前髪に隠れて肝心な目が見えなかったり、眉毛が隠れてキャラに似ない印象になってしまったり・・・。
イラストでは一番重要な目周りは必ず見えるように前髪を透けさせて描かれています。

キャラクターイラスト(前髪が透けて眉と目が見える)

リアルな人間では成り立たないこの部分は、イラストの見え方を優先して、unity上のシェーダーを設定する事で、目と眉を髪の手前に表示するよう、調整しました。

今回使用したユニティちゃんトゥーンシェーダー(© UTJ/UCL)にて、Toon_DoubleShadeWithFeather_StencilMaskを設定します。

目と眉を髪の手前に表示(左)目と眉を髪の奥に表示(右)

尺が長い!

実はこの開発、台本を先に仕上げてしまっており、モーションを作っていく段階になって改めて見直してみると…

尺が長すぎる!と言う事に気づきました。当初の狙い通り、ひたすら朗読してくれるのですが、朗読が3分ほど。朗読以外のセリフは一切無し。

おまけに座って朗読する部分しか考えていなかったので、改めて導入から終わりまでの流れをこのタイミングでシミュレーションしました。

さすがに飽きるな・・・と言う事になり、キャラクターは動き回るように変更しました。臨場感を出すために導入した立体音響を生かすため、ボタンを押してプレイヤー(私)が移動できる仕様も考えてみました。

しかし、この仕様は、朗読してくれるキャラクターに浸るには、システマチックな移動が世界観を損なうと考え、採用しない事にしました。

物足りないかもしれないですが、自分自身は動かないと改めて仕様を決め、キャラクターをいかに動かすか、に専念しました。

以下が決定した全体の流れです。

導入は後ろから、ちらっと私を見て、少し離れた場所にある椅子に座り、朗読開始。このタイミングでは距離が離れすぎていて、ちょっと物足りないなと感じる距離。全身を眺めつつ、落ち着いてキャラクターを見守ることができます。

そのままずっと読んでいるだけだと飽きてきてしまうので、時折朗読を止め、私の方を向いて微笑んでくれる。ここは実はセリフが無いので微笑むしか無い・・・と言う事情もありました。

タイミングを見て、再び朗読をやめたかと思うと、近づいてくる。目の前に来ると頭をポンと優しく撫でて、今度は隣に。

ここでグッと近づいてくるので、ドキドキと落ち着かなくなります。 至近距離でキャラクターを眺めることができ、しばらく見ていると…

さらにもう一歩近くに座り直して朗読再開。

この最後の一歩がかなり効いてきます。

このように距離感の変化を付ける事で、長すぎる尺が程よい満足感を得られるメリハリのついたものになりました。

開発後の反応を振り返って気づいたイケメンを表現する技術とは

開発後、マチ★アソビ vol.21と言うイベントで体験会を行ったところ、良い反応が得られました。

プレイ中、嬉しいはずなのに、なぜか後ずさりしたり、喜びの「近すぎる!」の声が出たり、朗読の内容が頭に入ってこない程キャラクターを見入ってしまった、など。

反応をもらい感じたこととして、圧倒的な没入感によってキャラクターの出来がとても良い印象になっていたという事です。キャラクター性や世界観をブラさず、表現を積み重ねていくと言うシンプルな事が、この没入感を生んでいたと感じました。 キャラクターモデルの見た目、動き、ストーリーの流れなど。想定外のトラブルがあっても、キャラクター性や世界観をブラさなければ、自ずと着地点も見えてくるものです。

これはあらゆる物作りでも共通するシンプルな答えだと思います。

難しい技術にチャレンジしても、キャラクター性、世界観に共感してもらえなければユーザーの求めるクオリティを満たすことは出来ません。

今回は、髪の質感はリアルでは無かったり、モーションはどちらかと言うと地味でした。

ですが、リアルでは無い髪の質感を追求したり、控えめなモーションの細かい仕草を追求するのも一つの技術なのです。 コンセプトを明確に持って、ブラさず制作することで、結果的には目標としたクオリティまで持って行く事が出来たと感じています。

おわりに

今回の開発を通して、技術的なチャレンジはもちろんですが、世界観作りやキャラクター性の出し方でしっかりバランスを取る事が大切だと改めて感じました。 そのバランスをしっかり取る事で、世の中の人に今までと一味違うイケメン体験を提供できるよう、活動を続けていきたいです。