Zenn
😀

大変なことはすべてまかせてオリジナル？3Dモデルをブラウザで動す

2024/01/27に公開
#
やってみた
#
生成 AI
tech

結果

すごい！！！！
生成AIは夢を広げてくれますね。
これからもAIを使っていろんな遊びをしてみたいです。

具体的には以下の作業を行いました。

  1. ChatGPTにイラストを描いてもらう
  2. CSMに3Dモデルを作ってもらう
  3. Mixamoでモーションをつけてもらう
  4. Three.jsでブラウザに表示

蛇足

以下は作業の詳細ですが、全然難しいことはしていません。
僕は文系出身で、普段はとあるスタートアップでフロントエンドエンジニアとして働いています。

前提となる知識については前職でThree.jsやBlenderを使って遊んだことがある程度です。
デザインやモデリングはかじった程度の素人ですし、モーションに至っては全く知りません。

そんな人間が勘でやれてしまったくらいなので割と誰でもできると思います。

なので正直以降の文章に価値はないんですが、以前より日々素晴らしい記事を書いているエンジニアの方々に対して尊敬と憧れの念を抱いていました。
新しい年、せっかくなら憧れに挑戦してみようという気持ちで筆をとってみた次第です。

お目汚し失礼いたしますが、もし最後までお付き合いいただけたらとても嬉しいです。

工程

準備

ざっくり全体像を予想してみる。
目標はモーションをつけたオリジナル3Dモデルをブラウザで動かすこと。

そのためには

  • デザイン
  • モデリング
  • モーション

などなど幅広い知識や経験が必要となることは素人にも明らかです。

そして、もちろんそんなもの僕にはありません。

一から勉強するのはステキですが一朝一夕に身につくわけがない。
となるとやはり生成AIに頼るのがよさそうです。

少し調べてみてCSM AIというのが引っ掛かりました。
一枚の画像から3Dモデルを生成できるみたいです。

入口のUIもChatGPTに似ていて親しみやすそうに感じました。
これを使ってみましょう。

モデルの原型になる画像はChatGPTに頼み込めば何とかなるか。。

モデルをブラウザ表示するのはむかし遊びで試したことがあります。
その時使ったThree.jsでよさそうです。

あれ、モーションをつけるにはどうすればいいんだ？
とりあえずChatGPTに聞いてみます。

> 3Dモデルにモーションをつけるにはどうすればいいですか
> リギング (Rigging): まず、3Dモデルに骨格（リグ）を作成します。リギングは、モデルの各部分を動かすために必要な骨格やジョイントを設定する作業です。このステップで、モデルの動きを制御するための基盤が作られます。

スキニング (Skinning): リギングが完了したら、モデルのメッシュ（皮膚）を骨格にバインドします。これにより、骨格の動きがメッシュに伝わり、自然な動きが可能になります。

モーションキャプチャーまたはキーフレームアニメーション: モデルに動きをつけるために、モーションキャプチャーを使用するか、または手動でキーフレームアニメーションを作成します。

モーションキャプチャー: 実際の動きをセンサーやカメラで記録し、そのデータを3Dモデルに適用する方法です。
キーフレームアニメーション: アニメーターが手動で各フレームごとにポーズを設定し、それらの間でソフトウェアが滑らかな動きを生成する方法です。
アニメーションの調整と微調整: アニメーションが完成したら、リアリズムや意図した動きを得るために調整や微調整を行います。これには、タイミングの調整や、特定の動きの強化、表情の追加などが含まれます。

これらのステップを完了するには、3Dアニメーションソフトウェア（例えば、Blender、Maya、3ds Maxなど）の知識が必要です。また、アニメーションやリギングの基本的な理解も重要です。プロジェクトの複雑さによっては、専門的なスキルやチームワークが求められる場合もあります。

？？？

過去の記憶を検索します。
たしか骨格みたいなものをつけて間接を動かしながらキーフレームを打ったことがあるような。。

それのことを言っているのか？

あれ、だとしてもCSMは骨格まで作ってくれるのか？
さすがにそこまではじゃない？

もし骨格をつけてくれなかったらどうしたらいいの。。

少し調べてみるとMixamoというAdobeのサービスが見つかりました。
骨格やモーションを自動でつけてくれるものみたいです。

これで活路が見いだせました。
Mixamoの対象は人型に限るみたいですが、今回特にこだわりはないので大丈夫でしょう。
キャラの原型も自然と人型に決まりました。

冒頭にも書きましたがここで以下の方針で進めることが決まりました。

  1. ChatGPTにイラストを描いてもらう
  2. CSMに3Dモデルを作ってもらう
  3. Mixamoでモーションをつけてもらう
  4. Three.jsでブラウザに表示

ChatGPTにイラストを描いてもらう

CSMに3Dモデルを作ってもらうため、まずはイラストを用意しましょう。

僕はChatGPT課金勢なので画像生成をしてもらえます。
その特権を使ってChatGPTにお願いしてみます。

まあ、結局一枚の画像があればいいので。
無料で使える他の画像生成AIを使ったり、どこかからダウンロードしたり、あるいは自分でイラストを描いてもいいでしょう。

> カートゥーンみたいなキャラクターをかいてください

えっっっ！！！？？？
めっちゃかわいくない？？？！！！（けど最初と全然違くない？）

実をいうとこの子は後の骨格を作る工程でうまくいかなかったのでボツになりました。
でもデザインがよすぎるのでどうしても人目に触れてほしくて載せてしまいました。

気を取り直してもう一度取り組みます。
さっきの子はポーズがついていて左右対称じゃなかったのがいけなかった気がします。
もうちょっと細かく指定してみましょう。

> キャラクターの立ち絵を作ってください
デザインはアニメスタイルでシンプルなものでお願いします
ポーズの指定は以下を参照してください
・両腕を肩まで上げて水平に伸ばす
・両脚は肩幅まで軽く開く
キャラクターの全身を一枚の画像に映す

試行錯誤の末このようなプロンプトになりました。

いい感じですね。なんかよさそうなのでこれで行きましょう。
それはそうと頭の上の数字は一体何なのでしょうか。とても意味深ですね。。

CSMに3Dモデルを作ってもらう

まずはCSMにログインします。

GoogleアカウントがなぜかダメだったのでAppleアカウントを使いました。
プランがいくつかありましたが無料のTinkerにします。所詮遊びです。

無料プランだと最新のモデルが使えなかったりGPUを優遇してもらえないとかがあるみたいです。
ただ僕の用途では特に不自由は感じませんでした。
むしろ無料なのにこんなにできていいの！？って感じで非常にありがたいです。

CSMに先ほどの画像をアップロードすると勝手に複数の角度からの画像を作ってくれます。
こんな楽でいいのかと思いつつGenerateして少しするとプレビューのモデルが生成されます。

プレビューのモデルはかなり粗いですがこの時点では問題ないらしいです。
さらにここからRefine Modelという工程を経てより洗練されたモデルが生成されるようです。

簡単すぎて驚きですが、お言葉に甘えてRefineしていきましょう。

生成を待つ間、「お茶でも汲んで待ってなよ」とか「多少粗くても気にすんな。もっと良くなるから待つ価値があるよ」みたいなことを言葉をかけてくれます。
ウィットにも富んでいるんですね。僕もこんなおしゃれなユーモアを持ちたいものです。

～～～約１時間後～～～

できました！

放置していて正確な時間はわかりませんがだいたい１時間くらいかかったみたいです。
ふれこみでは20分といわれていた気がしますが無料プランならこんなものでしょう。
むしろ意外と早く感じました。

では早速見ていきましょう。

えぇ。。こっわ。。。。
顔どうなってるの？ なんかムラサキだし。。

初見は面喰いましたが、なんかもう全然満足ですね。
むしろ等身とか脚のバランスとかめっちゃ好みです。

１枚の画像からこれだけ出来たら相当すごいと思います。しかも無料プランで。。
Maker以上のプランも気になってしまいます。新しいモデルだとどうなるんだろう。
これは楽しい。課金しちゃいそう。

ともあれ、これでモデルができました。

Mixamoでモーションをつけてもらう

まずはまたMixamoのログインからです。
Adobeアカウントはあったはずですが忘れたのでGoogleを使います。

無事ログインできました。
ここに先ほどのモデルをアップロードしたいのですが、何やら気になる文字が。。


FBX、OBJ、ZIP？？？

これはMixamoが扱うことのできるモデルの形式なのでしょうか？

CSMはこの形式に対応しているのか？
不安に感じつつ、CSMのExportボタンを押してみます。

あったーー！

OBJ、GLB、USDZ、FBXと広い形式でダウンロードできるみたいです。
それぞれの違いはよくわからないけどThree.jsは確かFBXもサポートしていたはず。

ということでCSMからFBX形式でモデルをダウンロードし、Mixamoにアップロードします。


アップロードが終わると間接を選択するモーダルが出るのでお手本通りに配置して次へ。

ちなみに最初の子はこの工程でエラーになって進めなくなりました。
左右非対称のポーズで片足が上がっていたので、うまく指定できなかったのが原因でしょう。

今回は抜かりなく指定しやすいポーズをとらせています。
うまくいってくれと願いながらNextボタンを連打します。


お、できたっぽい！
なんか埋まってるけどいいか。

ここから左側の画面でモーションをつけていきます。

踊っています。とても楽しそうですね。

ただなんかこの子はもっとダークな性格をイメージしていたので解釈違いです。

もう少しイメージに合ったものを探すとDrunk Walkというのがあったのでこれにしました。
最初に載せた動画がこのモーションになります。

これでようやくモデルに骨格とモーションをつけることができました。

Three.jsでブラウザに表示

CDNからThree.jsパッケージをimportしてモデルをcanvasにレンダリングしました。
この工程は解説しだすととても長くなる上、他に良質な記事がたくさんあるので割愛します。
万が一気になった方がいた場合に備えてGithubにモデルごとアップしました。
好きに使ってください。

以上

計5時間ほどですべての工程を終えることができました。
僕が全くの素人であることを考えると驚異的なスピードで、AIってすごいと改めて感じました。
本当に便利でおもしろい時代に生まれることができてよかったです。
これからもAIの成長に注視していきます。

Discussion