未経験からVRChat用の衣装を作成、販売するまで Season2
maruこのスクラップは?
未経験の私がBlenderを使ってVRChat用の衣装を作成し、販売するまでの過程を残すためのスクラップです。アウトプットのためにZennを利用します。
Season2とタイトルにあるように、前回のスクラップで試行錯誤しながらBoothでの販売までこぎつけました。
(前回) → https://zenn.dev/maru_vrc/scraps/797d827dcbfa32
続編を書くつもりはなかったのですが、前回スクラップを見て「自分もVRC向けの衣装をつくってみたい」とコメントしてくださった方がいたので、ちょっとでも役に立てばと思い続編を書くことにしました。
maru商品リンクです。良かったらどんな感じに完成したか見てみてください。
maru反省点
箇条書きしていきます
- 衣装が普通すぎる
- コンセプトなどがないので既に色んなお洋服を持っている人には刺さらない、新鮮味がない
- PRが下手
- Xでプレゼント企画したらPRが適当でも商品が良ければ100RTくらいはいくかな～と思ってた
- 対応アバターが三名(2025/06/09時点)と少ない、売り出す段階で8名くらいはいた方がいいと思った
- 商品を発売する時間帯、Xでプレゼント企画を発表する時間帯をよく考えるべきだった
- 衣装を着用している動画・こだわりポイント・カラーバリエーションの画像、などをプレゼント企画を行っている間、毎日Xに投稿してリマインドするべきだった
総評
衣装のクオリティは初めてにしては頑張ったと思うので良いとして、特に問題があったのはPRだと思います。
しかし、購入者側にとって私がつくる衣装が初めてだということは一切関係ないので、単純に衣装のクオリティ、PRの仕方を向上させることが最優先だと思います。
maruがんばるぞ～
maru
絵が下手なのでぇ、恥ずかしいんですけどぉ、今回のコンセプトこんな感じでいこうと思います。
絵アナログでごめんね、てかデジタルでもアナログでも練習したことないから書き方分からん
ジャージをベースにライトストーンを全体的に散らしたキラキラ系の可愛い衣装
ペンライト持たせてkpopアイドル系の衣装みたいにしたい
maru一旦ラフで作ってみた
スカルプトでシワつけてみて、リトポする方向性でいく
maruタンクトップは前回の反省点生かして胸回りを画像みたいなトポロジーにしてみた
円ふたつを左右に置くトポロジーだと調整も難しいし、シェーディングもおかしくなりやすいかも
maruパンツはこんな感じで作ってみた
タンクトップは大きいシワだけメッシュで作って小さなシワはSubstancePainterでテクスチャ作るときにノーマルマップで表現する
maruオブジェクトは正直左右対称で問題ないと思うので、一旦パンツをリトポロジーしていく
maru
リトポロジーしたけど、トポロジーが気にくわない
左二つ：リトポ後 右二つ：リトポ前ハイポリ
もともとのトポロジーが直線的というか、簡易的すぎる感じだから違和感があるのかな
全部作り直してみる
maru△10,000 → △3,518 です
5000 くらいまでを想定してもう一回やる
maru靴にかかる感じのオーバーサイズっぽい感じでパンツをつくりたいから靴からつくることにした
maru靴むずかしい
maruSolidyfyモディファイア込みで約△8,800
いらない面とか削除したら両足で15000ポリゴン以内には納められそう
maru靴はこの動画を基本にアレンジするとうまく作れると思うよ
海外の動画もたくさん見たけど、これが一番簡潔で分かりやすかった。
maruトポロジーこんな感じ
靴ひものトポロジーとか調整する
maru
Solidyfyモディファイアの内側部分のメッシュを削除したり、仮でUV展開したりした
△8,800 → △5,100
maru
めーーーーっちゃ仮でテクスチャ書いてみた
こういう夢かわふわふわコンセプトでいきたい
羽は白で書いてるけど、服と合わせる感じでライトストーンみたいな感じで実現したいな～
maru
シワのトポロジーの作り方完全に理解した。
これを参考にこんな感じに作り始めた↓
maruこのくらいのシンプルなトポロジーを用意して
maruこういう風にトポロジーを作ればシワになる
maru注意点
サブディビジョンモディファイアを使うので、四角形のみのメッシュにしたい
こういう風にしたら全部四角ポリゴンにできると思う
ポリゴン数が増えすぎたら、サブディビジョンを適用したあとに、必要なさそうな頂点を消せば良いと思う
maru
ハイポリを作り直した
こんな風にシワになる部分をマスクにしてシワを作ると良い感じになる気がする
maru
これだけでも、ポリゴン数を増やさずに、ちょっとだけシワなどの情報量を増やせる
大きいシワは、シワに応じたトポロジーに変更してあげるとなお良いと思う
maru
こんな感じにシワに沿ってトポロジー変えるとシュリンクラップの変形が効果的に反映されると思う
maru今のトポロジーこんな感じ
ズボンのトポロジー単体で見ると正しいと思う
ウェイトを塗ってみたときに、又とか膝の部分の変形がおかしくなるから、曲げたときに上手に変形するように割りを増やしたり、トポロジーを変えたりしていくー
maru
またの部分のトポロジー修正したけど、そんなに効果ないかも
結局ウェイトペイントをいかに上手にやるかな気がしてる
maru話変わるけど、衣装のPRのツイートはお昼休憩の時間や、仕事終わりの時間を狙ったほうが良さそう
そしてBoothの販売日は金曜日の夜、連休の始まる日かその前の日、給料日の近くとかが良さそう
こういうこと今まで考えてなかったからメモしとく～
maru
感覚でパーカーのモデリング始めたけど、意外と上手にできてるかもしれない
ズボンのシワのところで培ったサブディビジョンと、シワのトポロジーの作り方が生きてる！
maru
あとBlender内でやるべきこと
・ズボンのポケット作る
・ズボンの紐作り直す
・ズボンの下にリボンつくる（デザイン気に入らなかったら削除）
・小物つくる
・ウェイト転送用のローポリ用意する
・UV展開する
・チャックつくる
maru
リボンつけてみた
リボン一つにつき、5つのカーブからできてる
こうしたら形調整しやすそう
UV展開とかの段階でメッシュに変換しないといけない
maru
サブディビジョン適用する前だからずれてるところあるけど、一旦仮でジッパーつくった
maruアクセサリーは作るの楽しいけどポリゴン数増えすぎるから塩梅が難しい
maru
X軸上に並べるようにモデリング、カーブモディファイアでネックレスとして配置する、という形式
maru
イヤリングも同じように作った！両耳合わせて△3040
maruサブディビジョン適用したくないよー><
maru
ポケットつくってる
ズボンとは別にポケットのオブジェクト作って、シュリンクラップ→法線で投影
モディファイア適用したあとに、オブジェクト同士を結合してトポロジー整えてあげるとうまくできそう
maru
後ろポケットの造形完成！！！！
結構良くできた！前ポケットもやる
もうちょっと微調整するかも
maru
画像みたいにシワの元となるトポロジー作ったあと、スカルプトのクロスブラシで強さ0.2くらいにして左右になぞってあげるとシワがちょっとだけいい感じになった
BeforeとAfterの左右逆でごめん
maru氣付いてしまった。この世はトポロジーだということに。
maru
紐追加したり、細かいところ仕上げたり、ジッパーの調整したりした！
maru
こういう絞り？みたいなのの表現が難しくて、いろいろ試行錯誤したんだけどローポリ（といっても△10000）でもスカルプトでうまく頂点動かせれば表現できた
maru
この画像を読み込んで、スカルプト→ドロー→テクスチャに割り当て→ストローク方法をアンカー
にすると良い感じ
シワが深くなりすぎたらスカルプトでShift押しながら滑らかにするか、編集モードでループツール使うかすると良くなります
maru私が力になれるか分からないけど、分からないこととか気になることあったらXのDMとか気軽にきてね
maru
なるべくモディファイアつかったり、カーブつかって非破壊で作ろうとしたらすごいことになっちゃった
maru
Solidyfyモディファイアなしで計△75,000、ありだと△100,000
適用して、不要な面を削除したら△80,000くらいには抑えれるかな
ちょっとポリゴン多い気もするけど、小物ありでこれなので問題ないかなー？
maru背景とカメラ設置して、Blenderデフォルトで用意されてるマットキャップ適用して、ビューで画像をレンダリングしたら良い感じの画像とれた
時間帯考えてX投稿しよー
maruテクスチャ仮なのにこのクオリティなの成長を感じる
maru
曲げたときに自然に変形できるように画像みたいにトポロジーを変えたほうがいいのかもしれないけど、それする難易度と労力やばい
maruウェイトうまくいかなくてきれそう、てかキレてる
衣装用のボーンを別に用意して、それをConstraintとか使ってArmatureボーンに結び付けて動かすようがうまく動かせる気がする
でもやってる人見たことないし技術的にできるか分からない
maru
曲がる場所が違うのに
maruトポロジーが悪い気がしてきた
作り直します
maru
こうやってトポロジーつくればもう少し良く変形できる気がする
サブディビジョン適用した後だから大変だけどやってみよう
maruサブディビジョン適用前のデータ持ってきてトポロジー変えて、ってやってみたけどウェイトが難しそうだった
素体の股部分とズボンの股部分に距離があるのが原因だと思う
これはボーンの構造上仕方ないことに思うけど、股上が深いデザインは変えたくないので、下の画像みたいに一度内側に曲げて外側に広がるような構造に変えて試してにみようとおもう。
ハイポリも作り直しになるけど、仕方ない。。
がんばる
maru写真分かりにくすぎてうける
maru初心者がウェイトペイントで挫折する理由って初心者故にうまく変形できるトポロジーになってないからだと思う
maru私も初心者だから、トポロジーがあまり良くない
素材や繊維の向きを考えてズボンのトポロジーを作ったから、変形がうまくできなかった
手元にあるズボン系のトポロジー全部みて研究する
maru大まかな流れをメッシュで作って細かいシワはノーマルマップでがんばる
曲がる部分のトポロジーを特に意識する
曲がる内側の頂点数を減らす。（内側は曲げたときに圧縮されるから頂点が多いと変な線がつく）
maruこの動画を参考に、変形を意識したトポロジーに
maru
あたまおかしくなる
作り直して、作り直して、つくりなおして、、😢😢😢😢
maru
股上は少し浅め、
おしり側より正面側のループを少なくする(サブディビジョン適用後)
maru
ここら変のループが変形するときに重要
maru
メッシュ作る前にシワのつき方を確認する
英語だけどこの動画が詳しくて分かりやすいかも
maru
つ、つ、作り直してる
maruここのトポロジーがおきにいり
marualt+s でシワ調整してこんなかんじ
maru影が汚くン見えるからデータ転送モディファイアを使って奇麗に見えるようにしてみた
maruUV展開した～！！
以前は4kで2枚とかでまとめるのが良いと思ってたんだけど、2kや1kでオブジェクトごとに用意するのが良い気がする
修正とかもしやすいから！
追加したいメッシュあったらタンクトップの所に追加する
ペンライトを追加したい
maruミラーで重ねてもいいパーツとダメなパーツもいまいち分からない
靴とか完全に左右対称だし良い気がする
シワとかを左右非対称でいれるズボンとかタンクトップは重ねたらだめだとおもう
ネックレスのチェーン部分は配列モディファイアで複製してるから重ねる
金属は単色塗り＋マットキャップの設定で十分liltoonで奇麗に見える
maru絶対に大体で良いからウェイトペイントしてからUV展開したほうが良い
ウェイト塗るのが難しくてメッシュの形状を変えたり、作り直したりすることがあるから
maru頂点ペイントしてSubstance Painterで色を塗りやすくする
maruSubstancePainterでテクスチャ作り始めたけどどうだろう
股の部分の法線が気に入らないような、別に良いような
maru
こういうイメージで
こんな風に作ってみたけど、悪くないけどもっとうまく表現できそう
maruPhotoShopでこういう画像作って
SubstancePainterにアルファ画像としてインポートして、マスクとしてインポートした画像を使う
maru
Mask Outlineフィルターを使ってマスクの縁取りをして、ストーンに高さの差を出すのがポイント
Mask OutlineのMaskPositionをInsideにするのも大切です
自力で考えたものだからこれが適切な方法なのか分からない
このくらいの高さの差をHeightチャンネルに書き込んで(出力時にはNormalマップに焼き付ける)、liltoonで宝石っぽいマットキャップを使ったらいい感じになる気がする
maru靴のテクスチャを作ってたんだけど、パスに沿ってペイントをして、その内側を手書きで埋めるようにしたら奇麗に書けた
maru羽のとことか一歩間違えるとすぐダサくなる気がする
第三者の意見が欲しい
VRChatならこのくらいやってもいい気もするんだけど。。。
maruSubstancePainterで大事なのは、BaseColorとNormal＋Height＋Meshのチャンネルの見た目だからそこの段階で情報量増やせるように頑張ってる
maru自分の作っている作品の批評をしてほしいけど、指示されるのは嫌なこの気持ち対処がむずかしい
maru沢山素材作って
こんな感じにマスクにして作ってる
maruSubstancePainterのパスがX軸対象とかにできるようになってほしい
maruシームの切れ目が目立つからUV展開やり直してるけど、この余白沢山な感じが気に入らない
ペンライト作ったら隙間にパーツ入れていい感じにできるかな
maruSubstancePainterで軽く設定してあげるだけでもこのくらい見た目よくなる
maruSubstancePainter内で直線、曲線を奇麗に書きたいなら
・UVに書く時
Shift＋左クリック で直線
Shift＋Ctrl＋左クリック で直線(角度が15°ごとに変わる)
これらをするならUV自体をなるべく奇麗に展開してあげる必要がある
・3Dモデルに直接書く時
パスに沿ってペイント(Zを押しながらだとパスの制御点が頂点にスナップされる)
これをするならモデルのトポロジーが奇麗だとやりやすい(スナップ機能が格段に使いやすくなる！)
maruメモとして残してるから情報が断片的で体系的じゃなくてごめんね
分かんないことあったらXのDMください
なんでも気軽に聞いてね
なんなら恋愛相談とかでも大丈夫
maru
これ参考にBaseColorに影とかハイライト焼きこんだ
手書きで影を書き込む技術ないので簡単でありがたい
maruこういう感じでマスク作るときにジェネレータやレベルの使い方がうまくなってきた
マスクを手書きじゃなくてもうまく作れるのはSubstancePainterの良いところだね～
UVだけじゃなくて3Dにグラデーションかけられるのもイイ！！！
maru一旦透過で書き出し
maruリムライトとかの設定をあんまり頑張らなくても影感が出てるのは、影をBaseColorに書き込んだおかげだと思う
でも影が強すぎて色が汚く見えるからそこらへんをもう一回SPで修正する
maru今まで小手先だけのテクニックで手作業での色塗りから逃げてきたけど、もう逃げない
ここら辺参考にがんばる
maruUnityでliltoonとかの設定を軽くして、現状こんな感じ
悪くはないんだ、悪くはないんだ
むしろタンクトップとかはかなり良い
maruタンクトップのシワは良い感じだからメモしとく
レイヤーはこんな感じ、繊維の模様まではちょっと前の参考にしてください
大まかにはHeightを塗る→塗ったHeightをBakedLightingEnviromentでカラーマップに焼きこむ感じ
maru引っ張ってできるシワは直線だから簡単にできるかも
タンクトップが白なのも影が見やすい理由かも
maru
ちょっとやってみたけど、ぼんやりすぎかも
maruちょっと変わったかな？
これはなかなか慣れが必要そう
maru
この動画の7分くらいのところの考え方が参考になりました
光の方向を考えて、ハイライトが鋭く入る場所を考えて、
そこにワンダさんのように影色と、ハイライトを入れてから、ちょうど良く見えるようにレイヤーの値やぼかしの値を調節する
この方法が一番イメージしやすかった
あとは、シワは大きいものから書くと次に入るシワがイメージしやすい
maru何回でも貼るけど、このツイートの2枚目みたいに白と黒を塗るイメージ
これを書く場所が、上の動画のように鋭くハイライトが入る部分
maru自分、今回、手応えあります。できます。やらせてください。
maru私はもっとできる気がする、やり直す
maru鬱からの復活
NAGISAに行って服のフィードバックをもらうということをたまにしてるんだけど
フードが小さいという意見があったので大きさの調節中
←Before After→
maruあとやること
・ウェイトが自動転送のみなので、手動で奇麗に変形するように調整する
・フード、リボン、アクセサリーなどの揺れものの追加
・書き込んでいる影で服が濁って見えるときがあるからカラーマップの調整
・liltoonのラメ機能を使っているところの調整
・カラバリの作成(5色ほど？＋ストーンがないバージョン)
maru来週忙しいから18日に販売できるようにがんばる
あと2週間でクオリティあげる
maru右と左のどっちのボーンが良いのか分からない
maru揺れもののウェイト分かんなすぎてPSで商品のロゴつくった
maruからばりつくったり
maru疲れたので寝る
あと9日で販売したいけど、サムネ撮影とか、アバター対応にも時間かかるからもう一週間追加するかもしれない
maruやること
・関節部分の細かいウェイトの調整
・SubstanceのデータをPSDにまとめる
・キラキラがないバージョンのマテリアル、テクスチャの作成
・ネックレスの揺れの最適化（縦方向の揺れがよくない）
・複数アバター、シェイプキーの対応
10日で終わるわけなくてくさ～
maru改変用PSD作りました
maru
このサイトを参考にして、レイヤー用の画像を用意して、全部手動で合成しました。
結構たいへんだった
maru
こんな感じで用意した
maruタンクトップ部分のUVが余ってるのと、裸足で靴はくのが嫌だから靴下つくった
maruSubstanceでテクスチャ作ってUnityに持ってきた
maru
衣装作るために作ったマットキャップが衣装より拡散されてこの気持ちに名前を付けてほしい
理屈はわかるけど。。。。。。。。
maruみんな使っていいよマットキャップ
40分くらいでできたし、、
40分のマットキャップ ＞ 一か月の衣装
maruこういう動画の撮り方書いときます↓
maruアバターのControllerに自作したAnimatorControllderを入れる（自分の場合はWalkingと命名）
ApplyRootMotionのチェックを外してください（外さないとその場で歩かず、前に進んでしまう）
maru
maruこちらのアニメーションを利用させてもらってます！
maruここまで設定したらアバターがその場で歩いているはずです
maru※補足（ここまででちゃんと動いてる人は無視しても大丈夫）
しなの、愛莉の場合は大丈夫だったのですが、マヌカのときだけ座標が飛んでしまうバグがあったので、強制的に座標を原点にするスクリプトをChatGPTに書かせました。
これをアバターにAddComponentで追加すると、非破壊でスクリプトを実行できます。
maru次に、マテリアルを一定速度で切り替えるためのスクリプトを用意します。
ChataGPTに書かせました
maruカラーバリエーションの数だけPrefabを用意して、Elementsにそれぞれの要素を入れたら勝手に切り替えてくれます
maruあとはUnityRecorderで動画撮るだけ！
よく分からなかったらChatGPTか私のDMに聞いてください！
maru胸の大きいアバターとか、シェイプキーとかが服のシルエット崩れるからむずかしい
maru
いい感じのマテリアル設定できたので共有します↓
maru
マットキャップ①には宝石っぽいもの、マットキャップ②にはノイズっぽいマットキャップを割り当てて光沢にランダム感を追加します
反射が強すぎるときは透明度を下げたり、別のマットキャップ使うといいと思います
maruアニメーションを左右反転するツール作ったので、衣装販売のあと落ち着いたら公開できる形に整えてBoothに出すかも
右がもともとのアニメーションで、左がそれを反転させたもの
maruアニメーション反転するツールくらいあると思ったんだけど見つけられなかったのでつくった
maruYoutubeで参考になるチュートリアル、生配信のアーカイブやタイムラプス動画をまとめて貼っておきます
maru売れるか分からないのにアバター対応数増やす作業するのこわい
楽しくてやってるはずで、現段階ではお金が目的な訳ではないけれど。。。
プレゼント企画とかしても100RT行けば御の字な気がしてる
maru衣装を安価で売るのも良くないと思う
消費者思いではあるけど、自分の価値を下げてる行動に私は考えてしまう
失敗したら次頑張ればいいの～
maruサムネイル作ったりしてるけど、ワカンナイ！！！！！！！
maru販売まであと少ししか時間ないのになんか体調良くなくて沢山寝てしまう
体が重くて作業できない
maruアバター毎のサムネイルもこんな感じで作ってる
締め切り効果ぱわー
maruサムネイルは透過画像をUnityで撮ってから、PhotoShopで合成してます
maruwipwipiwip
maru服の色に合わせて目や髪の色をなんとなく変えてるんだけど、まぬかの目が暗すぎる気がするから修正する
maru何かの間違いでプレゼント企画100RTいってほしい
お願いします
Booth出品こわい
maru100RTいった！！！泣泣泣泣
maru今回の衣装作成の良かったところ、改善点
前回の衣装の、見てもらえない状態から見てもらえる状態まで成長できた
しかし、可愛いと思っても「欲しい！」と具体的に思える何かが足りないと感じた
私はセクシーなのは作らないつもりなので、この何かを取り入れるのがなかなか難しいと思う
制作面の改善点としては
ズボンをもっと布感のあるシルエットにできた気がする
単色の衣装なので、テクスチャだけで情報量を増やすのが難しい
maru次はプレゼント企画で1000RT行きます
あと、サブスタのハイポリベイクを試してみたい
今回のスクラップはほぼ進捗を書いてるだけで、あまり参考にならない気がしたので、次のスクラップはVRC向けのサブスタの使い方をエクスポート設定などの細かいところまで網羅しつつ書いてみたい
maruあと、SubstanceDesignerも使ってみたい
maru人生で初めてフルセットを購入してくれた方がいて泣きそう
maruギフトでフルパックを買ってくれる人が出てきて涙でる
お友達に私が作ったお洋服をプレゼントしたいと思ってくれたことがとても嬉しい
私もっとがんばるからね
