VStitcher × AIで靴下デザイン！【VStitcherで靴下シミュレーション！3Dで試着イメージを作る②】
- 3D担当
- 4月16日
- 読了時間: 7分
はじめに
こんにちは！前回に引き続き、AIとVStitcherを使って靴下をデザインしていきますよ～
今回は、前回AIを使って作った靴下の柄を実際に履いたらどうなるのか？？VStitcherを使って、3Dで靴下のシミュレーションをして確認していきます！
今回の目標
Illustratorで作ったAIデザインの柄をVStitcherに取り込む
VStitcherで靴下に柄を載せて、3Dでシミュレーション
3D上で靴下をくるくる回して、360度チェック！
目次
VStitcherにデザインを取り込む（SVG or AIデータ）
靴下データの準備（クラウドライブラリからダウンロード）
Tシャツの回と同様に、靴下の3Dデータもクラウドライブラリーからダウンロードしましょう。
「Men」カテゴリーからダウンロードしたので、最初は男性アバターが履いています。今回は女性アバターに履き替えて、ちょっとサイズ調整します。
「スライド」という機能を使って、丈を短く調整します。履き口の線をドラッグして、3Dと2Dを見ながら短くしていきます。
これで準備完了です。次に行きましょう！
柄データを取り込む
前回書き出した柄データを取り込みます！書き出しの手順については前回の記事で解説しているので、そちらをご参照ください。
画面左端をマテリアルタブに切り替えて、生地のハンバーガーアイコンから「追加生地」をクリックして、前回書き出したSVGファイルを選択します。
次に追加した柄データのアイコンを、一番左のアイコンにドラッグして、「グループ」でドロップします。
柄が載りました～
かかと部分がまだ白いので、ここにも柄を載せましょう。
さっき作ったグループをドラッグして、かかとの生地の上で「置換」にドロップします。
かかとにも柄が載って、靴下全体が水玉模様になりました！
デザインの調整
靴下にデザインを取り込めたので、次は調整作業をやっていきます。
実際に履いたときに、柄が出てほしい部分や色や位置を3Dで確認しながら調整していきましょう。
質感を調整する
柄を載っけただけだと、なんだかのっぺりして見えませんか？？
下地の靴下の生地の編み目を強調して、よりリアルな見た目にしていきます。
まずは、さっき作った靴下生地グループを選択します。画面左のアイコンから選択しましょう。
プロパティの上の方に「生地グループ」が表示されます。
これはグループの中身で、上のアセット1が柄で、下の白いのが靴下生地データです。この2つをグループとして1つの生地として表示している状態です。上にあるものが表示されて、下のものは隠れてはいますがちゃんと存在しています。
下の靴下生地のアイコンのオレンジの丸は、生地の物理データを使用していることを示しています。つまり柄データは見た目だけで、靴下の伸び具合は靴下生地（ニット生地）を使っているということです。
今回はその靴下生地の質感も強調したいので、一旦柄データのお目々アイコンをクリックして柄を非表示にします。
柄が見えなくなって、下の靴下生地がまた見えるようになりました。
次に下の靴下生地を選んで、ディフューズのアイコンをクリックします。すると、生地の見た目画像（テクスチャ）が表示されるので、サイズを200％にしてしょう。
そうしたら、また柄を選択してお目々アイコンから再度表示させます。
赤枠部分の「下の生地のテクスチャーマップを使用」のチェックを入れると、さっき大きくした編み目が柄を貫通して表示されますよ。
柄サイズと位置の調整
次に柄サイズの調整をやっていきましょう。
画面上のツールを「テクスチャ」に切り替えます。
さらに少し下のツールバーから「Gizmo」を表示させて、適当に2D画面のパーツをクリックするとGizmoツールが表示されます。
このGizmoの右上の白っぽい四角を、ぐーっと外側に向かってドラッグしてみます。
すると柄が大きくなります！ちなみに内側にドラッグすると小さくなります。
お好みのサイズ感に調整してみましょう。
大きさが調整できたら、柄の位置を調整しましょう。（柄合わせ）
そのままテクスチャーツールで柄をドラッグすると、柄を動かせます。2Dでも3Dでも、動かせますよ～
色の調整
VStitcherではベクターデータの色を変更することもできます！今回はSVGデータを使用しているので、色の変更が可能です。
SVGやAIデータのようなベクターデータは、プロパティに使用している色がズラーッと表示されます。
カラーチップをクリックして、色を変更できます。
水玉の背景色を選んで変更してみます。
生成された柄にもよりますが、好きなように調整してみてください～
もし元の色に戻したい場合は、カラーチップの横のくるくる矢印をクリックすればリセットできますよ。
3Dチェック
ここまでできたら、360度いろんな角度から確認をしていきます。
足を動かしてみる（ポーズを変更）
今の状態は、普通に立っているだけなので左右対称な位置に足がありますね。
アバターのポーズを変更して、足の位置を動かしてみます。3D画面上側の、「A-Pose」から「Casual」に変更します。
さっきよりも少し動きのあるポーズになりましたね。
ここから片足は少しつま先を立たせたように調整します。
また画面上側のポーズ変更ボタンから、「ポーズ追加」をクリックします。
するとアバターの骨（リグ）が透けて見えます。
関節に当たる部分が赤い球になっているので、この赤い球をクリックして片足だけつま先立ちにします。
赤い球をクリックすると、3DGizmo（地球儀みたいなやつ）が表示されるので、動かしたい輪っかをドラッグすると関連する部分が動きます。画像のように膝なら、赤い輪っかを動かすと膝を曲げたり伸ばしたり、青い輪っかなら膝をひねるように動かせますよ。
ポーズ調整ができたら、画面右側のポーズに名前を付けて保存して閉じましょう。
靴下を履いていない状態になってしまったので、画面上中央のスナップショットから、Casualポーズのスナップショットを呼び出します。
呼び出せたら、またポーズ変更ボタンからさっき保存したポーズを選びましょう。
ポーズ変更できました！
回転アニメーションを書き出してみる（360度チェック）
VStitcherでぐりぐり3D画面を回転させて、360度チェックすることもできますが、せっかくなので簡単な回転アニメーションにして気軽に確認できるようにしましょう。
まずは画面右上のカメラアイコン「レンダリング」をクリックします。
レンダリング設定画面が開きます。ここから今回は、ターンテーブルアニメーション（GIF）を書き出してみましょう。
アバターなしにして、靴下のみのアニメーションにします。
画像を参考に、ターンテーブル→アニメーションGIF→アバター含む（チェックを外す）→ファイルサイズ大にします。
仕上げにプレビュー画面の真ん中に靴下が来るようにカメラを調整したら、レンダリング！！
しばらく待つとレンダリングが終了します。
GIF形式なのでここにも載せてみましょう～
GIFであれば、このようにnoteなどWEBページにも気軽に載せられるので、簡単に確認するときにとても便利ですよ。
まとめ
今回はVStitcherを使って、靴下のデザインを3Dで確認してみました。
2Dと3Dの両方を確認しながら、柄の大きさや位置を調整できるので、サンプルがなくても見え方が確認できて便利ですね。
次回は、このデザインを量産化して、色展開（カラバリ）や別パターンを作ってみようと思います！
それでは次回もお楽しみに～
Comments