WebGLを使って3D犬服のシミュレーション

3D Marvelous Designerで犬服

Marvelous Designerで作ったものをどうやってお客さんに見せるのか。というところでちょっといろいろ追及してみました。
今回は犬服です。サンプルでざっくり作ってみました。その名も犬リーマン。

MD6で犬服のモデリング

アバターの入れ替えは簡単にできるので、犬の3DデータをMarvelous Designerに取り込んで表示させます。

Marvelous Designerで犬服

犬リーマン完成。

リーマンにしては色が派手だけどオレンジが見やすかったので。着せ付けるのってうまくいったら楽しいけどなかなか工夫がいりますね。
脱げちゃったり落ちちゃったり、耳にひっかかったり。。。
バージョン6からボタンが留められるようになったのでおなか周りでボタンを留めてみました。

読み込んできたアバターも配置仮想円柱の設定ができるので、特に犬の場合は首周りに円柱設定しておくとやりやすいと思います。

OBJ書き出し

モデリングができたら、OBJで書き出しします。ネクタイの部分にテクスチャを貼っているので、「テクスチャファイルと一緒に保存」でZIP形式で書き出されます。

ここまではいいのよ。ここまでは。

3Dをブラウザで表示させるのってどうやるの?

そう、この疑問にぶちあたりますが、いろいろあるみたいだけれどメジャーどころはThree.jsかAway3Dあたりのようで、ちょっぴり勉強しようとやってみました。
どちらかというとThree.jsを先に勉強しようかなと思ってます。

だけどちょっと急いでいたのとちょっとつまずいたので、別の方法を探ることにしました。これもまたいろいろあるみたいだけれど、日本語の情報が少なかったけどなんか使いやすそうだったので、

p3d.inていうサービスです。

とりあえずアカウントを作って、ログイン。
p3d.in
New Modelで新しいモデルを作ったらこの画面がでてくるので、先ほど書き出したOBJファイルをドラッグ&ドロップ。

3D犬
ワンコ登場!って、簡単やん。真っ白やけど。

テクスチャの設定
服も真っ白けの状態で取り込まれるので、Marvelous Designerで凝った色の付け方してもあんまり意味ないっぽい。

左側のパネルでMaterialsを順番に選択していくと選択されたところが微妙に反応します。
で、下のMaterial Settingsで細かい色の設定なんかをしていくわけですね。左側の白い四角をクリックすると色の設定ができて、右側のTをクリックするとテクスチャの設定ができます。

3Dマテリアル設定
ネクタイだけ水玉のテクスチャを貼りたいのだけれど、結論から言うとうまくいきませんでした。。。
ちょっとこの件は保留です。
Material OptionのところにRepeatがあるけどリピートされません。

iframeでこうやって埋め込みもできるんですね。これでブラウザでお客さんにも3Dで作ったものを見せることができました。くるくる回せるんです。

テカテカ感すごいけど。

お仕事の話がきました!

コツコツと自分のやりたいことをやってみて地味でも継続して発信していれば、たまにはいいこともあるもので、犬服関連のデザインと型紙制作のお仕事の話をいただきました。このサンプルの犬リーマンではありませんよ。もちろん。

作りたいもののイメージや生地の雰囲気をお伺いして制作にはいるわけですが、WEBやデジタルで納品するお仕事と違い、リアルのものづくりって失敗した時の損失って大きいから同じデザインの仕事と言ってもドキドキ感が違います。違ったドキドキ感ていうのかな。

だからこそ打ち合わせの段階でクライアントさんが欲しいモノのイメージと、制作するモノのイメージをしっかりとすり合わせていなければならないと思うのです。

アパレル畑の人間ではないのでそこらへんのルールや仕事の進め方については素人だし、オリジナルで道を探っていかなければならないけれど、私なりにデジタルの力でそこらへんを埋めていければいいなと思っています。

2017年も新しいことにチャレンジしていきたいなと思います。

広告