Cinema4DでWebAR用コンテンツを制作してみた
Cinema4Dを使用したARのコンテンツ制作で個人的に大変だったことやこうすればよかったみたいなことを書き連ねていこうと思います。
多分もっといい方法とかもあるんだろうなという気持ちと新しく方法を模索する時間もなかったためごり押し戦法ではありますがあしからず。
もくじ
- ARに使用するCGを制作する時に気を付けるべきポイント
- 制作フロー
- C4Dで作ったアニメーションをglbファイルとして書き出す方法
- webAR CG制作における留意点
- 実際に行ったcinema4dでのワークフロー
- まとめ
今回ARのコンテンツを制作するにあたり8thwallを使用することになりその時点でunityとかでARやるのとは違う立ち回りをする形になりました。
Powering the world's WebAR | 8th Wall
ARに使用するCGを制作する時に気を付けるべきポイント
まずどのツールを使用するにかかわらず最終納品データを作る時にこれだけは意識して制作してほしい。
- ポリゴン数(ハイポリはそもそもwebARで動かなくなる)
- テクスチャ数(テクスチャがでかい、多いとかだとそれだけでデータ重くなる)
- ドーローコール(オブジェクトの数が多いとそれだけで呼び出し回数が増えて動作が重くなる)
webARなのである程度のスペックのスマホはちゃんと動いて見えるようにしなければならない、つまりちょっとだけ古いスマホとかでも見れないといけないのでそもそものglbのデータが重いとARとして見れない。
秒数にもよるが上記三つは極力減らしていくことを心掛けてほしい。
今回やったフロー
- c4dでモデリング、アニメーション制作
- blenderにアニメーションデータ移行
- blenderでglb書き出し
上記について順を追って説明しつつどうやってアニメーションを移行したのかの手順まで説明したい。
C4Dで作ったアニメーションをglbファイルにする
今回の本題ですが、お察しの通りc4d特有の機能であるMoGraphはそのままだとglbには書き出せません。トランスフォームアニメーションにする必要があります。
さらに、c4dでglbを書き出そうとすると書き出すことはできるんですが謎にオブジェクトが表示されないとか動きがおかしいとかのエラーが出る。(ここ本当に知見のある方に聞きたい、あまりにも独学でわかっていない。)
MoGraphアニメーションだからなんじゃないかとかとかでもなくトランスフォームアニメーションにしてても思った通りの動きにならない。で、ここをもっと追及して原因を探ってもよかったんですが何分時間がない。どうしよう、一旦別のDCCツールに持っていってうまい事書き出せないか→MAYA,Blenderに持っていってみる。
結果、Blenderが一番バグなくアニメーションをglbとして書き出すことが出来た。
mayaでも出来ないこともないが一番簡単にglb書き出し、で特に何もせずに書き出せるのがblenderだったため今回はモデリングアニメーションをc4d→書き出しをblenderという流れで制作しました。
(そんなめんどくさいことをするなら最初からblenderで作ればいいんじゃないかという声も聞こえますが、私はblenderは開けないファイルとかを一旦開いて書き出しなおすことくらいにしか使用したことのない人間だという事を明記しておきたい。)
ここからはglbが、ARが、という事というよりはDCCツール間のデータをいかにそのまま持っていくことのできる形にするか、という話になってくる。
webAR CG制作における留意点
前提としてC4D特有のMoGraphという機能はc4d内以外ではそのまま再現できない為そのまんま外に持っていくには
- Alembic書き出し(つまり重いデータになる)
- fbx書き出し(ボーンアニメーションかトランスフォームアニメーション)
- obj書き出し(アニメーション付けないなら)
大体CGやってるとこの三つのどれかで書き出すことが多いと思う。
その上でwebARのコンテンツにするときに大事になってくる
- ポリゴン数
- テクスチャ数
- ドーローコール
を意識して極力データの軽いどのスマホでも早く読み込めるものにしなければならない。
となって来るとalembicはとても重いので極力使用は避けたい、objで連番書き出しも重くなる、なので「fbxでボーンアニメーションかトランスフォームアニメーションでまとめる」のが得策であることが伺える。
ここで上記三つを意識してMographアニメーションをトランスフォームアニメーションにまとめる際にやったやり方を紹介します。
実際に行ったワークフロー
XPressoを使用したMoGraphのトランスフォームアニメーション化
葉っぱが粉々になって消えていくアニメーション
この上記のLEAF以外の物は外部に持っていったときなにも表示されないのでこれをトランスフォームアニメーションにしていく
ボロノイ分割のレイヤーから複製してC(編集可能モード)
Mographでばらばらになってたやつが素材として分かれる
複製したボロノイ分割レイヤーに対してXPressoタグ(ノード繋げて色々出来る)を付与
こんな感じに元々のMographでついている動きを複製した後の動きのついていないオブジェクトたちにトランスフォームアニメーションとして数値を代入してあげる
そのまんまのものを複製しているのでインデックスが変わらない為動きそのままトランスフォームアニメーションとして持っていける
XPressoで動きがコピーできていることを確認したらタイムラインからファンクション→オブジェクトをベイクで動きをつけることが出来るのでベイクしたらXpressoタグは削除してもOK
極力rigを入れる
ごり押し戦法です。
トランスフォームアニメーションでもいいんですが、ドローコール数を減らすためにはオブジェクトの数自体を減らさないといけません。トランスフォームアニメーションで個別に動いていたものに対して一個のオブジェクトにまとめてボーンでいい感じに動いてもらいます。
元々ポリゴン数も減らしてぎりぎりまで削っている上にボーンアニメーションにすることでスムーズなAR体験が出来ます。これ、スケールアニメーションでもいいじゃん、みたいな部分もありますがオブジェクトの数はちりつもなのです。極力骨を入れることで救われる命もあります。
同じオブジェクトの変形はポーズモーフを使用する
同じオブジェクトの変形に関しては動きを細かく指定したかったのでポーズモーフを使用して一つのオブジェクトでアニメーションをつけていました。
その後ポイントキャッシュで状態を記録することでポイントごとのアニメーションにすることが出来ます。
まとめ
FBX最強
FBXで動くアニメーションにできればどこのDCCツールにも持っていけるのでどうにかしてFBXにしよう!ソフト特融のツールは外に出たら何もできないぞ!
Discussion