CodeIQ MAGAZINECodeIQ MAGAZINE

コンピュータゲーム制作集団「チームグリグリ」の小川幸作がアイドルで作った「3Dモデリング」解説! #5jcup #html5j

2014.07.31 Category:技術コラム Tag: , , ,

  • 28
  • このエントリーをはてなブックマークに追加

HTML5 Japan Cup 2014に応募した3DCGカタログ「きゃん家!」。実はこの3Dモデルは、大ヒットゲーム「コープスパーティ」の開発者としても知られるチームグリグリ代表の小川幸作さんによるもの。

納期ぎりぎりにも関わらず、快く引き受けてくれた小川さんの苦労話…じゃなくて、制作秘話をお楽しみください!
by 馬場美由紀 (CodeIQ中の人)

アイドルからの依頼だと!?

とある日、知り合いの方から「アイドルの喜屋武ちあき(きゃんち)さんが困っているらしい!」という一報をFacebookのチャットで受け取った。

モデリングができる人を紹介してくれとのことでしたが、締め切りも迫っているということだったで、「これはイカン、私も漢(おとこ)だっ!」とばかりに、依頼を受けることにしました。

短時間で実在人物のキャラクターを作るには──

もともとプレイステーション1時代から仕事をしているため、ローポリゴンのキャラクターを作ることに関しては得意でしたが、短期間できゃんちさん本人に「似せる」という前提で考えると、

  • 眼球ははめ込まず、テクスチャーで描く
  • 口パクも顎などの調整などもあり、似せるには時間がかかる。
  • フェイシャルやモーフもさせない
  • テクスチャーでの表情変えは仕様がわからないため控える。

という制約を自分で付け、とことん「似せる」ことにこだわりました。

また、フェイシャルと指のボーンは省くことで、すでにある仮のキャラクターとの微調整を少なくするように配慮しました。

まあ、とりあえず、作ってみる

とりあえず「似せる」ことに優先順位を置き、写真を参考にして、リアルな感じでモデリングしてみるものの──

きゃんち3Dモデル01
▲うーん、いま見ても不気味さが残ってる

コレがナカナカ似てくれず、しっくり来ない……。
「ガン○ム」のコスプレのイメージが強かったため、何度、頭に角をつけようと思ったか……。

かなりこのモデルを突き詰めてはみたのですが、この調子では、きゃんちさん本人に似せるには時間がかかると判断。

改めて紙の上でスケッチをし、コミック調にすれば似てくれるのではないかと本人の特徴をデフォルメし、かつ、可愛くなるようにモデリングを試みました。

きゃんち3Dモデル02
▲顔の流れはデフォルメになっても心がけています

きゃんち3Dモデル03
▲テクスチャーのラフはメタセコイアのペイントを使って

私の場合、メタセコイアを使用しており、ラインツールと面貼りを使って、輪郭を形作ります。

その後、メタセコイアのペイントツールを使ってグレーでテクスチャーを描きつつ、トライアンドエラーを繰り返します。

今回は特に実在の人物をモデリングするということで、テクスチャーを描いては消し、モデルの頂点をチマチマと調整する作業に
時間がかかってます。

きゃんち3Dモデル04
▲色味を付けて雰囲気を整えます

ラフができた時点で似てればOK!
フォトショップで色レイヤーを作り、オーバーレイ等で重ねて、色味を付けて仕上げれば頭部の完成です。

実は、きゃんちさん本人が喜んでくれるように頑張ったつもりですが、なかなか「きゃん家!」スタッフの皆さんやきゃんちさん本人に見せる勇気が出ませんでした。

意を決してスクリーンショットを送ったところ、きゃんちさん本人が喜んでくれたようなので、本当にホッとしました。ここが一番のヤマでした。

打ち合わせには行くべきでした

途中参加だった私はあまりこのコンテンツの設定等を知っておらず、衣装等もお任せということで、断片的に入っていた情報(商品を紹介する等)しかありませんでした。

その上、きゃんちさんの写真をネットで調べると、コスプレと水着がほとんど…

むむむっ!「モノを紹介するコスプレよりの衣装」ということで、ギャルソン風の衣装をデザインし、ある程度モデリングしていったのですが…

なんとそこに、タイトルが「きゃん家!」と決まったとの情報が!

きゃんちさんが家で花王の製品を使う設定ということにここで初めて気づき、これはマズイということで、散歩と称して女性の普段着をリサーチ(笑)。

どうも最近はボーダーを着ている人が多いということで、このデザインに落ち着きました。

色は最初に見せてもらったサンプルのキャラクターに合わせ、スタッフさんたちが見慣れている色味に落ち着かせることで、違和感がなるべくないように努めました。

ブーツとタイツはギャルソン風のデザインの名残です。

きゃんち3Dモデル05
▲上半身はよく見る部分なので、服の皺もモデリングしています。

きゃんち3Dモデル06
▲最近よく見るボーダー柄に家事をするということで腕まくり

きゃんちさんとの打ち合わせを設定してもらったのですが、作業期間がもったいなかったため、行けずじまいに。

結局、このように無駄に作業を増やしてしまいましたので、やっぱり、行くべきでしたね。

サンプルで頂いたのはセルシェーダーを施したモデルでしたが、シェーダーとすりあわせるには、実際に表示されている描画エンジンとのやりとりが必要となります。

トライアンドエラーを繰り返すには日数が足りないので、こちらでモデリングをする際に陰影を調整できるよう書き込みをし、手間になりますがが、なるべくシェーダーに頼らないようなテクスチャーにしました。

MMDの関連付け

モデルの仕様はニコニコ動画でPV等の投稿で使われている、MikuMikuDance(以下MMD)で使用されているモデルフォーマット「PMXファイル」ということでしたが、依頼を受けた時点では細かな仕様がわからずでした。

しかしながら、Unity等でのゲーム製作ではメタセコイアのプラグインである「keynote」を使い込んでいたので、戸惑わずに同じ作者が制作した[keynote」に対応した「ExportPMD」で出力が可能なことを把握していました。

きゃんち3Dモデル07
▲あにまさ式ミクから取り出したボーン

きゃんち3Dモデル08
▲ボーンに合わせて、keynoteに合わせたウェイトを指定する。

最初に、「ExportPMD」に付属されたリグをそのまま仕込んで、PMDに変換し、MikuMikuDanceに読み込ませ、MMD用のモーションファイル、VMDファイルをいただいて動かそてみました。

するとしっかり動いてくれたので、これで大丈夫かなと提出してみたのですが、ランタイム上では動かなかったとの報告が…。

そこで次に、メタセコ用PMDファイルインポータープラグイン「pmdimpMQ」を使って、MMDの標準モデルである「あにまさ式ミク」を読み込み、きゃんちモデルにボーンのみを適用し、ウェイトを関連付け。

作っていたモーションに合うように体型を調整、変更しました。

ただ、完全に合わせることは不可能なので、微調整はお願いすることにしました。

きゃんち3Dモデル09▲MMDに読み込んだきゃんちモデル

出力して提出したもののコレも動かなかったのですが、後にランタイムの問題だったことが判明。対応してもらえたので、無事ランタイムで動いてくれました。

まとめ

今回は「実在する人間に似せる」ということが、これほど大変なのかと改めて思わされた案件でした。

このモデルを寛大な心で許していただいた喜屋武ちあきさん、3Dモーション作成の微調整をしていただいた野尻澪勇さん、そして、3Dモデルの差し替えがなかなか上手くいかなかったのに、最後まで気持よくやりとりをしてくださった、jThreeの松田光秀さんには大変感謝しております。

チームグリグリ代表 小川幸作(オガワコウサク)氏
小川幸作(オガワコウサク)氏チームグリグリではプログラム・グラフィック・3Dデザインを担当。大阪芸術大学映像学科卒業後、ソニー・コンピュータエンタテインメント社などを経てフリーになる。大ヒットゲーム「コープスパーティ」シリーズをはじめ、TVCGやゲームのモデリング、雑誌や単行本執筆を手がけるゲーム業界の寵児。
チームグリグリ公式サイト

<<関連レポート>>

jThreeを活用した次世代型カタログ「きゃん家!」技術解説

(1)WebGLで3DCG描画!
(2)外部3Dデータの読み込み・描画処理

松田光秀さんからJavaScript問題が出題中!

今回記事を書いてくれたjThreeの松田光秀さんから、JavaScript問題を出題していただきました。
ぜひチャレンジしてくださいね!

受付締切:2014年8月18日 AM10:00まで
挑戦はこちらから

自分の書いたコードを誰かに評価されたいエンジニアは、けっこう多い?

ITエンジニアのための実務スキル評価サービス『CodeIQ』で出題されている「コード銀行」問題に挑戦すると、あなたのコードが評価されます。

評価(1)出題者からの評価  ⇒評価フィードバック例を見る

  • 企業ではたらくという観点からあなたのコードをチェックします
  • フィードバックされた観点をふまえてコードを書くと世の中の企業にとって「いいコード」が書けるようになります

評価(2)企業からの評価  ⇒評価フィードバック例を見る

  • 「あなたと一緒にはたらきたい」という企業からスカウトが届きます
  • あなたのコードが社会でどこまで通用するか、リアルな評価が得られます

興味を持った方はこちらからチャレンジを!

  • 28
  • このエントリーをはてなブックマークに追加

■関連記事

【アニメ用語続出】喜屋武ちあき、マイクロソフトでエバンジェリストと「Visual Studio」を学... エバンジェリストって何? きゃんち:お二人ともエバンジェリストという肩書きとなっていますが、これはどういうお仕事をする人ですか? 砂金:エバンジェリストという職種を説明する前に、まずは自己紹介から。勝手な思い込みなんだけど、僕はシャアの前世だと思っているんです。 ▲日本マイクロソフト株式会社 ...
【最終回】シュン君のゲームをChrome Web Storeで公開してみよう!#5jcup #htm... Chrome Appsとは何か? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)、アシアル生形可奈子氏(スマートフォン編)。 ラストを飾るGoogle Developer...
Monacaでenchant.jsで作ったHTML5ゲームを、シュン君とスマートフォンに移植してみよ... なぜ、スマートフォンアプリ化する必要があるの? 前回までの講師は、UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)、Mozilla Japanの清水智公氏(Firefox OS編)。 そして次なるターゲットは、スマートフォンアプリ移植。講師には、アシアル株...
実作業10分足らず!?Mozilla清水智公氏×シュン君「Firefox OSにゲームアプリを移植し... enchant.jsで作ったゲームを移植!次のターゲットは、Firefox UEI清水亮氏(前編・後編)、日本マイクロソフト物江修氏(Windowsストアアプリ編)に続いて登場したのは、Mozilla Japanの清水智公氏。まずは、本日の講座の目標の確認から。 清水:では、何をするかというと、...
シュン君とenchant.jsで作ったゲームを、Windowsストアアプリに移植してみよう#5jcu... enchant.jsで作ったゲームをいろいろなプラットフォームに移植! ユビキタスエンターテインメント(UEI)清水亮氏による特訓指導のもと、自動生成される障害物の壁をすり抜け、宇宙船を飛ばすゲームを作り上げることに成功したシュン君。(清水亮氏の講義・前編/後編)しかし、話はここで終わらない。 ...
小学生プログラマ・シュン君、UEI清水亮氏とenchant.jsでゲームを作る(後編)#5jcup ... 清水氏の説明で三角関数を理解するシュン君 前半までで、enchant.jsに関する基礎的な説明はひと通り終了。 「ここまで説明しただけでも、シュン君ならゲームが作れてしまうかもしれないけど、ほかにどこかわからないところはない?」と、清水氏が質問を促す。 さっそく、疑問をぶつけるシュン君。 ...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ