🚀

Blenderによるアクセサリーアイテム制作

2022/12/09に公開

こんにちは!okaくまです。


Quick Q&A
Q.この記事の概略
A.Cluster向けアイテムをモデリングしながら、Blenderの具体的な操作方法の解説
Q.誰向け?
A.Unity/Blenderインストールはわかるけれどモデリングの具体的なやり方を知りたい人向け
Q.okaくまって誰?
A.Blenderで色々なものを作っているアマチュアくまです(Blender歴10か月)


~前提~
・クラスター(株)のメタバースサービス、Clusterとは何か理解している
・アクセサリーアイテムとは何か/Unityでのアップロード方法を理解している(参照:https://creator.cluster.mu/2022/12/07/accessoryitem/)
・Blenderのよく使うショートカットキーが少しわかる(参照:https://creator.cluster.mu/2022/08/05/blender-shortcut/)


それでは、画像と一緒に最初から順に作業を追体験していきましょう。

Blenderの起動画面ですね。Verは2022年12月現在、3.1.2です。※アップデートによる仕様変更で記事内容が陳腐化する可能性があります※

デフォルトキューブを使って、今回はアイテムを作っていこうと思います。

>CameraとLightをshift+クリックで選択
>xで「削除」
カメラとライトはアイテム制作に不必要なので消します。

今回は、このような「傘」を作っていきたいと思います。

>S
>Z
青い線が縦に出た状態で、
>マウスカーソルを原点(真ん中オレンジ色のぽちー)に近づける
(!)ぐるりん!と変に回るな・・・?すごくピーキーな操作が求められるぞという人は、この動作をする前にマウスカーソルを真ん中より離してから行ってください。カーソル移動値は中心にむけて計算されるので

まずは傘地(布部分)を作っていきます。キューブをZ方向にぺちゃんこにしましょう

>Tab
>辺選択モード
>四つ角の短辺をshift押しながらクリック

>Ctrl+B
>マウスを動かして正八角形くらいになるようにベベル


>面選択モード
>八角形面の表裏二枚を選択
>面→扇状に分離
(!)面選択の場合は、透過表示を切り替え で透過モードにしておくと便利です。面の中心に・が表示されるので、一緒に選択するときに楽!


>I
>だいたい中心点と真ん中くらいに辺を作るイメージで


>G
>Z
上に持ち上げます


>点選択モード
>中心点表裏2点を選択

>G
>Z
三角コーンにならないように、さっきのZ軸移動量の半分くらいを目途に少し上げます


>Tab
>Ctrl+A
>メニュー内「スケール」をクリック
ベベルする際に均等にベベる為の下準備(終わったらTabで編集モードに戻っておくこと


>Shift+Alt+クリック2回
(!)ひとつなぎの点/辺/面を自動で選択してくれる便利機能ですが、クリックする位置によって選ばれる辺が変わります。だいたい辺の中心をクリックすると外周ぐるりとやってくれます


>Ctrl+B
>マウススクロールちょっと
ベベルの辺の細かさを、マウスのスクロールでちょちょいと3本くらいに増やします。
(!)大きくしすぎると傘の石突きや露先を飛び出てしまうので、飛び出ない範囲で
(!)こんなにうまくいかねぇ!って人は、①石突きの部分の表裏2点の高さを低くする②ベベルするために選択している辺がそもそも大きくずれている のどちらかです。

真横から見た図ですが、この天辺と底辺を結ぶ直線から飛び出た真ん中の点を、スムーズに分配して点を増やしながら直線に近づけていくのがベベルです。

こういった形だと分配するための角度が足りず広がりません。

これだと、ベベルで両方向に分配していったときに先に露先にくっついてしまい、石突のほうに不自然な直線が残ってしまいます。
(!)完璧に均等な位置だと球を輪切りにしたような傘になるので、参考画像をググりながらいい塩梅を見つけましょう。お勧めはPCの手前に画像検索したスマホを置いておき、視点移動のみで参照できるようにすることです(ディスプレイが3枚以上ある人はTwitterやDiscordよりChromeで画像を出しておきましょうね


>頂点表裏2点を選択
>Ctrl+Shift+B
>マウススクロールで分割点を減らし、八角形にして大きさを整える
辺だけではなく、点もベベルできます。今回は傘の柄と石突を作る為に、頂点の裏表2点をベベルしましょう

>表面の頂点八角形を選択

>E
(!)もしこのようにぐにゃる時は、>Z で青い軸が見える状態で動かすとZ軸のみ上下します


>I


>E


>S

頂点三角形から菊座を押し出し、そこからさらに石突を押し出し、先端を小さくしてそれっぽくしました。


>辺選択モード
>Alt+クリック二回
形状が複雑になる前に、布部分と菊座の間/菊座と石突の間 を辺選択します


>辺→シームをマーク
(!)右クリックでも同様のメニューが出ます
シームというのは、UV展開するときに「お前の展開場所ここじゃねーから!」と境界線を引ける機能です。今回は布部分の色が菊座ににじむのを防ぐ目的のために設定しました(ここら辺は私もよく分かっていないので有識者の方による突っ込みが入る場所かもしれません)


>面選択モード
>裏側の頂点八角形面を選択
>E
>I
>E
石突を作る要領で、裏側(傘の内側から見上げる方)から柄を押し出し成型していきます。


>1
テンキーの1で表示方法を正面図に切り替えます。柄の長さはなんとなくパッションとニュアンスとイメージで決めますが、アクセサリーとして使う場合は雨から両肩を守るというよりはファッション性のある「お前絶対それ普通に使ったら頭と肩しか守れなくてカバン濡れて後悔するでしょ」的小ささ&持ち手をちょっとデフォルメして大きくした感じでいいと思います。


>E
>S
押し出し機能Eは、普通は伸ばす為に使いますがサイズ変更のSを押すと面の表裏以外の2軸方向に拡縮します(この傘の柄の場合、Z軸が変わらずXY方向に拡大しています)


>E
これが持ち手部分の太さになります。


>1
>カーソル位置(左側のツールボックス上から二番目のガンサイトみたいなアイコン)
>持ち手の選択面の左、ちょっと離した画像のようなところをクリック
>カーソルがそこに移動したら成功


>スピン(一個だけ食べられたアメリカ色のケーキみたいなアイコン)


>スピン軸をYに変更(画面左上)


>緑色の+カーブをクリックしながら移動
これで、円形に押し出しが簡単にできます。工業製品はスピン機能で一気にそれっぽく見栄えするのでおすすめです。


>ビュー→視点を揃える→3Dカーソルのリセットと全表示
先ほどずらした3Dカーソルを、初期位置に戻します。間違ってずらしてしまった時などにも重宝します。


>G
>Z
少し持ち手がZ軸に短いので、長さを調整します。


オブジェクトモードで見た外観がこれです。かなり傘になってきましたね。


右下の表示に、三角面:508とあります。これがポリゴン数で、アクセサリーストア向けは2000以下に抑える必要があります。まだポリゴン数に余裕がありますから、ここからは少しずつ形をブラッシュアップしていく工程になります。


>Alt+クリック
>S
傘の端っこ(露先)がスパッと垂直に切れているのは変なので、それっぽくします。


>透過表示
>1
>表面の点を全て選択


>G
>Z
傘にしては厚みがありすぎるので、表面を下にずらします。


破綻しないように端の方をずらして微調整します。


>辺選択モード
>画像の位置の辺を8か所全て選択

>Ctrl+B
ベベルして露先のための下地を作ります


押し出す面だけを8か所選択

>面→個々の面で押し出し


>画面中央上、「中点」となっているアイコンを「それぞれの原点」に
>S

「なんで原点に寄って変形するんじゃい!その場で縮こまらんかい!!!」という憤りはこの機能で収まると思います。
(!)これをしないと、下の画像のように中心部(この場合は傘の柄)に向かって強く変形しながら縮小します


>傘の裏側(内側から見える面の方)の骨部分を選択
>Ctrl+B
内側から見たときに骨がしっかりあるリアルっぽさを出すためにベベルしておきます


>ベベルしたそれぞれの小さい辺を選択
>Ctrl+B

>E
>Z

>S
(!)画面中央上の「それぞれの原点」を「中点」に変更してSを押すと、このように中心部分に向かって均等によってくれます。


これだと、少し細くなりすぎなので

縦に長くしました。


>Ctrl+R
露先の間のメッシュを二分割する


>G
>Z(ちょい上に
>S


>Ctrl+B
これで傘のモデリングは終わりです。


>面→面の三角化
(!)これをしないとUnityでメッシュが表示されない不具合に見舞われます。


<<UV展開&テクスチャ作成>>



>画像の部分を辺選択
>辺→シームをマーク


ポイントは、「布部分」と「金属部分」を分ける事です。


>画面最上部にあるLayoutをUV Editingタブに切り替え

>画像→新規

>画像を新規作成します

>画像→保存

>赤い球のようなアイコンをクリックしてマテリアル設定タブにする

>ベースカラー●←この黄色い丸をクリックして、メニュー真ん中あたりの「画像テクスチャ」を選択

>開く→さきほど保存した画像を選択して開く


>編集モードであることを確認
>A
(!)マウスカーソルの位置が画面右のモデリングが存在しているエリアに無いと画像のようにならないので注意


>UV→展開
これでシームを元にハサミで切ったような形にUVが分かれました。
今回は柄をつけず、Blender内のTexturePaintで簡単な色塗りをするだけなのでこのような形で問題ありません。


>TexturePaintタブ


>7
(!)真上から見た図です


>TexDrawのすぐ右側にある白いエリアが「今塗る色」です。クリックすると選択できます
(!)色を塗っても反応が無い!黒いままだ!という時はこの部分を右から二番目に変更しましょう
(!)色を塗っているのに塗られない・・・?という時は、UVの法面が逆になっている可能性があります。

この「面の向き」をクリックして、表(青)と裏(赤)の色分けをONにします

このように真っ赤ということは、「UV表面が内側にひっくり返っている」ということを示しています。


>メッシュ→ノーマル→面の向きを外側に揃える

これで、TexturePaintを正しく使うことができます。



>全体を塗った後、7で真上から白い色を落とすことでグラデーションを作ります

>左側ウインドウの上メニュー、画像→保存
(!)Blenderの保存とは別に、画像を保存しないと反映されませんので注意!


>面選択モード
>持ち手をクリック
>L
Lを押すことで、シークで分かれている部分のみを一括選択することができます。


>左側に表示されたUVを全部選択
>適当な空きスペースに移設

>TexturePaintタブ
>左の画像を塗って持ち手部分を好きな色にする(今回は白)


>非金属部分を選択
>H
(!)Hは選択したメッシュを非表示にする機能。Alt+Hで復帰させることができます


>持ち手部分
>L
>H
金属部分のみにすることができました。


>A
>マテリアルタブの右、ピンアイコンの下にある+ボタンをクリック

>+新規 というボタンを押す
>割り当て/選択/選択解除 の、割り当て を押す
これで、Aで選択した金属部分に二個目のマテリアル(カナカナでマテリアルという名前になっているはずなので、適当な名前に改名しましょう)が割り当てられました。
アクセサリーストア向けアイテムはマテリアル数2個までなので、
1.布や持ち手等を画像テクスチャで表現
2.金属部分をmatcapなど別の手段で質感を表現
の2個に分けます。UVスクロールなどをしない場合は、基本的には質感で分ければ問題ないと思います。


>Alt+H
これで、色分け・マテリアル分けまで終わりました。



>N
Layout右側にトランスフォーム等のパラメータ表記が出てきます。注目する点は「寸法」です


>S
だいたい0.5m~0.6mになるように調整します


>Ctrl+A
>全トランスフォーム を押す
Nの寸法の上、スケール:が1.00に整列されたことを確認します


>1
>G
>持ち手部分が赤線と青線の交点に来るように移動
>オブジェクト→原点を設定→原点を3Dカーソルに設定
オレンジ色の球が画像のように来たら成功です
(!)3Dカーソルが行方不明の場合は
ビュー→視点を揃える→3Dカーソルのリセットと全表示



>画像のような設定(右側)でFBX出力

~~~以上でBlenderでの作業終了~~~
ここからは、私なりのUnityへのインポートとアクセサリーに変更する手順を書きます。
一番効率的なやり方ではないかもしれませんが、慣れ親しんだ方法ということでご容赦いただければ(何かあったらご指摘くださると助かります)


UnityVerは2021.3.4f1です。


FBXと画像を一緒にUnityのProjectに放り込みます


>EXtractMaterialsを押してマテリアルを出力


マテリアルをクリックすると沢山並んでいるファイルの中からショートカットして選んでくれるので時短になります


マテリアルをクリックして、ShaderをStandardからVRM→MToon に変更します


同じ要領で金属部分に割り当てたマテリアルも、このように変更します
・ShaderをMtoonに
・Colorを控えめな灰色に
・Matcapに金属光沢画像


非金属部分については、こういう設定になりました。
・ShaderをMtoonに
・RendaringTypeをTransparentに
・TextureのAlpha値を少し下げる(これで半透明のビニール傘ができます)
(!)本当は「これじゃ持ち手部分も若干透ける!」といったこともあるので、テクスチャ一括で変えるのではなくそもそものpng画像の段階でalpha値を下げてビニール部分を作ればよいのですが、今回は完成を目的にしましたのでこのまま行きます。


Unity上ではこのように表示されています。ここで注目しなければいけないのが、
・メッシュは通常通り表示されているか
・画像テクスチャ・マテリアルの抜けはないか
といった所です。ワールドクラフトアイテムと違って、アクセサリーは使用者によって拡縮と回転・移動ができるので大きすぎたり小さすぎたりしなければ、特段気にする必要はないと思います。


>AddItemからAccessoruItemを追加

このような設定値にします
・ItemNameに必ず記入
・Defaul tattach bone nameにRifhtHandを選択


>Projectから先ほどインポートしたFBXをSceneにドラッグ&ドロップ
>Hierarchyに封をした段ボールのようなアイコン付きのFBXと同名のものがあるのを確認
>それを元のFBXがあったProfect内ディレクトリに入れる
>このようなポップが出たら「OrifinalPrefab」を選択


>Cluster→アクセサリーアップロード
出てきた窓に、先ほどProjectに投げ込んだPrefab(動画再生マークがついていない方のアイコン)をドラッグアンドドロップ

この画像右側がPrefab

>アップロード

お疲れさまでした。あとはClusterを起動して、確かめてみてください。


今回作成した傘アクセサリーは、私のBooth(https://okfarm.booth.pm/items/4378903)
にて頒布しています。実際のFBXモデルを見て参考になさってください。

もしこの記事が役に立ったな、次も何か読みたいな、という方がいましたら「応援プラン」を押していただけると励みになります!


如何でしたか?
かなり画像が多く、なるべくすべての行動を網羅しようと思ったので読みにくい部分もあったかもしれません。
しかしこれを見て、「意外とやってる事簡単じゃん!」とか「俺ならもっとちゃんとしたアイテム作れるな…」と思っていただけたら、ぜひBlender沼においでなさってください。
私は今年の2月からBlenderを初めて、最初はUnityへの抵抗感もありました。しかし、パッと作ったモデルがClusterにアップし、人の目に触れることで褒められるというのは素晴らしいフィードバックで満足感があります。

また、私はアクセサリー機能がOpenする前はずっとワールドクラフト向けアイテムを製作してCluster内でアップロード/販売をしてきました。そこで、決して安くない額を稼げているというのもモチベーションに繋がっています。同人即売会のサークル参加に近いやりがいがありますねこれは…

Clusterって、もちろんお金が稼げる、経済圏的要素があるとか、話題のメタバースだからだとか色々目立つ部分が沢山あると思うんですけど、根源的には「コミュニケーションの為のツール」なんですよね。

なので、アイテムを作るのも、アバターを作るのも、
「おっ!新作ですか、いいですね~!」
「そのアバターかわいいですね」
といった会話のネタになるから作ってる面が大きくあります。
作る喜び、見せる喜びは自己肯定感に効くので、お勧めですよ...!

それでは、ここまでお読みいただきありがとうございました。
こういったことを書いてほしい!という要望やご意見などありましたら、
Twitter@oka_3d_01までお願いします。

Discussion