CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。Blenderでロボットにボーンとモーションをつけて、Babylon.jsで再生させる方法2018-08-27Blenderでロボットにボーンとモーションをつけて、Babylon.jsで再生させる方法babylonjs今回はBabylon.jsで3Dモデルにアニメーションをつけて再生させてみました。Babylon.jsだけでもオブジェクトの移動(UnityでiTweenを使うようなイメージ)はできますが、ボーンを埋め込んだモーションの実現をソースコードだけで作るのは大変そうです。Babylon.jsの公式HPをみると、Blenderの使用が紹介されていました。手順はこのようになります。試したところ、(2),(3)の情報があまりなく詰まったので、一通りの手順やTIpsを整理しました。終わりになお、以下の環境で動作を確認しています。Blenderを準備する(ここはBlenderを使ったことがある方には不要です)今回、初めてBlenderを使ったので、インストールから基本的な使い方を残しておきます。インストールですがWindows、Macのどちらでも動きました。動作未確認ですが、Linuxでも動くとのことです。Blenderインストーラのダウンロード場所インストールは画面の指示に沿って進めるだけなので、説明を省略します。私はMacで使っており、基本設定や操作方法はこちらの記事を参考にさせていただきました。Unknownいきなり全部を覚えるのは大変なので、まずは記事の中の「テンキーの模倣」の設定を済ませ、「視点操作」を確認しておくと最低限動かせるようになります。viewの画面で異なるモードを実行できます。概念的ですが、今回は3つのModeを以下のように使いました。モデルの結合まずはモデルを準備します。ロボットを動かしてみたかったので、下記のサイトより取得しました。ライセンス規約を確認し、個人での使用は問題ないと判断しました。中にはBlenderのプロジェクトファイル(.blend)が入っているので、Blenderで開きます。開くとこのようになります。このロボットは、boxとclylinderが多数分かれた状態で格納されています。このままだとボーンを入れるのも、位置や大きさの調整も大変なので、選択して結合します。joinを選択します。最終的に結合してこのようにしました。下層にも配置していますが、ここでは表示していません。ボーンの埋め込みこのロボットにボーンを入れていきます。ボーンの入れ方については下記がとてもわかりやすく、基本的にこの通りに進めました。おもちゃラボまずはボーンを埋め込みます。このときボーンの位置や大きさを変えたり、先端を基準に次のボーンを出す必要があります。マウスクリックだけでは先端が選択できなかったので、ctlを押しながら先端を囲むことで実現できました。埋め込んだら、メッシュ、Armatuarの順番に選択します。上の記事でも言及されており、Blender全般に言えますが、何かを複数選択した時は、最後に選択したものの要素を基準に指定します。今回はArmaturarの機能を使うのでArmatuarを最後に選択しました。Weightsを選択します。上の記事でも書いてありますが、ボーンを埋め込んでも意図した通りに動きませんでした。Paintモードになります。Paintでは、そのボーンと関連の強いメッシュが赤く表示され、関連が薄いと青くなります。マウスで動かすと上のgifのように赤くなります。それぞれのボーンについて、関連の強いメッシュを赤く塗っていくと、メッシュが意図した動きになります。Paintがうまく使えていないか、一部のメッシュがくっついてしまいました。この辺りはBlenderの慣れの問題なので、もう少し慣れたらまた試してみたいと思います。scaleを調整します。すると、それぞれの値が0になります。これを全てのオブジェクトに適用します。これはBlenderのチュートリアルや関連記事、Babylon.jsの公式HPでも記載がなく、下記の投稿で見つけました。Overflowもしこの手順を実行しないと、後でBabylon.js向けに出力してもこのようなエラーが出て失敗します。Sheetという機能を使います。Sheetはこのように出します。Editorでアニメーション用のファイルを定義したら、Fボタンで保存する必要があります。(こうしないと、アニメーションが保存されないようです)アニメーションの基本的な考え方ですが、モデルをあるポーズにしてから記録、別のポーズにしてから記録、を繰り返し、ポーズとポーズの間の動きをコンピュータで補完することで実現しています。ポーズ間の動きを補完してくれるように記録したものをキーフレームと呼びます。キーフレームの打ち方はこちらを参考にさせていただきました。日本VTR実験室キーフレームを打ったあとalt+Aを押すと、作ったアニメーションを再生できます。メッシュの連携がおかしくて足の一部のメッシュが動いてませんが、歩行モーションらしきものができました。(なお、ここでは見やすいようにロボットの盾を非表示にしています)次に、作ったアニメーションをbakeします。このように、対象のメッシュとボーンをshiftキーで選択してからspaceキーを押します。Actionとタイプします。ConstraintsにチェックをつけてからOKします。Weightsを実行しています。Weightsはここで初めて実行しても良いのかもしれません。再確認して必要あれば修正します。Bakeしないと、後のBabylon.jsでアニメーションが実行できず、Babylon.js公式HPではその手順が書いていませんでした。こちらの記事を参考にさせていただきました。exporterをインストールする次はBabylon.js向けに3Dモデルとアニメーションデータを出力します。exporter(以下、Exporter)を使います。これはBlenderのプラグインでGithubで公開されています。GitHubGithubからダウンロードしたら、Blender/Blender2Babylon-5.6.zipを取り出し、任意の場所に置きます。exporterの概要説明のInstallationに記載の通りですので省略します。クリックすることでインストールできますが、「インストールに成功しました」のような表示は出ず、見た目では何も変化しません。exporterの概要説明に機能紹介は書いてありますが、どこから使うかがわかりづらかったので補足します。viewで何らかのオブジェクトを選択して、Sceneを意味するオプション?を選択して下にスクロールすると出てきます。今回はExportの対象をAllにすることで、ロボットの3Dモデルとアニメーションを出力できました。Fileは不要でした。その他、色々と設定がありそうですが、まだ確認できていません。確認できたら追記するか、別の記事でまとめたいと思います。Babylon.jsのコードを書く先ほど出力したのは.baylon形式のファイルとテクスチャです。Babylon.jsの公式HPには書いておらず、Babylon.jsのHPやフォーラムの投稿を参考にして作ることで、アニメーションを再生できました。最終的にこのようなコードを書きました。gist952f21c40346b2894658043f31d930f0BABYLON.SceneLoader.ImportMesh()によって、.babylonからメッシュ情報、スケルトン情報を取り出します。beginAnimation()によってアニメーションを実行しています。ソースコード中のコメントに記載の通り、beginAnimation()の第一引数はrobotSkeltonにすると動きましたが、サンプルコードに記載のskeltons[0]では動きませんでした。動作を確認する.babylonファイル、テクスチャ、先ほど書いたhtmlファイルを同じディレクトリに入れてからChromeでhtmlを開きます。Blender側で再生したのと同じ状態で再生されています。胴体部のテクスチャがおかしいですが、これはBlender側のオブジェクト結合処理に問題がある可能性が高いので、後日直す予定です。Originエラーが原因です。https.このようなときは、Webサーバにデータをアップロードするか、Macの場合は/Library/WebServer/Documentsの中にデータを置いて、http:////.htmlとアクセスしてください。追記)Node.jsを使うと、プロジェクトが複数になっても簡単にWebサーバを作ることができます。終わりにExporterの結果を取り込んで再生する、というだけなのですが、情報が点在していて解決に時間がかかりました。これでCGに動きをつけられるようになったので、次回はもう少し複雑なことをしてみようと思います。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。