前回は、ダイアログウィンドウみたいな大きい絵を作るのに、メッシュを使うとテクスチャ用のメモリを効率よく使えるよ。という内容で書きました。
今回は矩形（四角）で描画すると透明部分の描画処理がもったいないから、メッシュでいらない部分をカットする方法について書こうと思います。
使ったことはないのですが Anima2D 面白そうですよね。SpriteMeshEditor使えばオートでメッシュ化してくれるし。今回の記事で取り上げる操作も、いずれ自動化のアドオンやプラグインが出てきそうです。
さてさて
引き続き Blender を使います。
この記事で紹介している操作方法に関しては、なるべくショートカットに頼らない操作で進めています。Blenderにおいてもほぼインストール直後に近い状態ですので、不慣れな方でも特に迷わずに試していただけるかと思います。
まずはこんな絵を用意しました。
白色の部分は基本的に透明になるようにテクスチャを作るのですが、
シンプルに矩形で描くとものすごくもったいない気がしてきます。
表示範囲全てが、しっかり計算されるので ■色 のところをうまく削りたいなと。
見える見えないは、ピクセルごとのアルファ値で決まるので描こうとするすべてのピクセルでアルファ値の計算が必要です。
例えば表示サイズが 1024 x 1024 の場合 1,048,576ピクセル分の処理が行われます。
4Kモニタ解像度だと 8,294,400 のピクセルが存在します。
重ねれば重ねるほど、また解像度が大きければ大きいほど、計算するピクセル量が増えるので描画処理の負荷を見過ごせなくなってゆきます。
ポリゴンにテクスチャを貼って描画すると、画面に対してポリゴンのある所しか計算しないので、明らかに透明で不要な部分の計算をカットすることができます。
ただ、ピクセルの計算が減ったからといって素直に喜べないというのも事実で、UIでは光源計算など陰影処理とは縁遠いとはいえ、ジオメトリの計算やらバッファへの書き込みやらなんやらで、それなりには計算処理が必要になります。グラフィックチップの性能によるところも大きかったりしますが、精密なキャラクターモデルや、情報量の多いエンバイロメント系モデルをいかに高速に美しく描画するか、またPBRというところに重点を置かれて進化してきているので、UIで扱う頂点数なんて雀の涙にすら足りてないような状態。3DでのUI表現においては心配の種は小さくなっていくと思います。逆に、4Kや8Kとった高解像度方向へ進化が続くと、2Dをメインに扱うUIにとっては、まだまだ気が抜けないのです。
前置きが長くなってしまいました
さっそくテクスチャを斬っていきます
Blenderを使います バージョンは 2.93.5
流れとしては
- テクスチャを用意
- 四角のメッシュを用意
- マテリアルを用意
- テクスチャを読み込む
- メッシュを分割
となります。
起動したら、作業する面に切り替えます。
そこで平面メッシュを追加します。
Object Mode > Add > Mesh > Plane
XY面で Z軸のプラス方向を向いた状態で生成されます。
利用するゲームエンジンや開発環境に合わせて最適な面で作業することになると思いますので、作用しやすいように適宜回転させます。
下図は作業面が XZの場合。（テンキーの [ 1 ] ）
正面を向かせるために X軸に 90度回転させて適用(Apply)。
3Dでのモデルやメッシュといったオブジェクトは、形状を決める頂点の位置情報とは別に、オブジェクトの位置(Location)や回転(Rotation)、拡縮率(Scale)というの情報を持ちます。適用(Apply)するということは、位置や向き、大きさを固定してしまうことです。見た目の状態のままに数値を初期状態にします。
たとえば上図のように 90度回した状態で適用しないままで扱うと、『常に90度回った』状態なので、0度にすると向きが変わってしまいます。Blender上ではそれほど大きな問題になりませんが、開発環境に持っていった時にいちいち90度回った前提で扱うことになると手間が増えることになるので、この角度でOKとなったら、迷わず適用してしまいましょう。
適用する前なら、位置や向き、大きさをいくら変えても元の形状は維持されます。
Photoshopでいうところのスマートオブジェクトに少し似ている気がしないでもない。
適用（Apply）は、
Object Mode > Object > Apply > Rotation
次にサイズを調整します。
画面に表示したい大きさ、もしくはテクスチャサイズ にメッシュを合わせます。
Object Mode でメッシュを選んだ状態で、アイテムパネルを表示します。
[ N ]キーで開閉できます。
アイテムパネルを開くと、Transformカテゴリの一番下に、寸法(Dimensions) という項目があります。
ｍ は単位です。初期値ではメートル(Meters) に設定されています。
プレイヤーのすぐ近くに表示される場合は、しっかり合わせる必要が出てきますが、たいていの場合 UI はカメラの距離依存なので、気にしなくても大丈夫です。
ひとまず、ｍ を ピクセルとみなして扱うことにします。
テクスチャが 1024x1024 なので、 1024ｍ と入力します。すべて半角英数です。
1024cm とするとセンチメートルに、 mm とつければミリメートルになります。
作業している面に合わせて入力します。
メートルだと、めちゃくちゃでかくなるので、[ . ] キー（テンキーのピリオド）を押して、ビューポートに収まるようにカメラを引きます。
この状態で大きさを適用しておきます。
Object Mode > Object > Apply > Scale
前回の記事では UVマッピングしてから、テクスチャを読み込んでましたが、今回は先にマテリアルをアサインすることにします。どちらが先でも問題はありません。
+Newボタンの左にある ｖプルダウンリストを開くと、
デフォルトのマテリアルが用意されているので、それを選択します。
Material をリストから選択すると、パネルが一気に賑やかになります。
上の方にある、Surface のところを変更します。PrincipleBSDF をクリックすると、そのほかのシェーダーを選ぶことができるので、 Emission を選択します。
カラーを触れればなんでもOKなんですが、ひとまずテクスチャの色味がしっかりでるのでEmissionにします。
Surface を Emission に変えたら、Color のところにある、黄色い小さな●の部分をクリック→⑥
ポップアップリストから Image Texture を選択します→⑦
現れた Open ボタンで テクスチャ用の画像ファイルを読み込みます→⑧
↓今回テクスチャとして保存した画像
シェーディングタイプを切り替えます。
この時点でUVも当たっています。便利 Blender。
テクスチャに他のパーツも一緒に置いている場合は、このタイミングで、UVの範囲を調整しておきます。
さっそくナイフツールで斬ってみましょう。
EditModeに切り替えます。
ツールメバーから ナイフツールを探してアクティブにします。
クリックして青くしたら、マウスカーソルの形状が変化します。
この状態で左クリック（ドラッグではない）すると、そこを始点にしてマウスカーソルの位置までカッティングラインを引くことができます。左クリックするたびに、クリックした位置が次の始点となります。
Photoshop の多角形選択ツールと同じ操作感覚です。
操作のキャンセルは 右クリック。
確定は [ Enter ] キー
コツは、メッシュの外から初めて、外で確定させると斬りやすいです。
あとで微調整できるので、まずはおおざっぱに斬っていっても大丈夫。
削れてしまっても問題ないです。
とりあえずぐるりと斬ってみたところ。
ナイフモードを終了するには、ツールバーから選択ツールをクリック。
あー削れちゃったなー
というわけで、頂点を動かしてしまいましょう。
イメージはこう
動かしたい頂点だけを選んで、[ G ] キーを押してマウス移動（ドラッグじゃない）。
OMG!! まさかの斬り直し!?
ここで落ち着いて 右クリック で 移動をキャンセルします。
Optionで設定を変更します。
ビューポート右上にある Options をクリックしてトランスフォームのところにある Correct Face Attributes （面の属性を修正）を 有効にします。
このオプションを有効にしてから頂点を動かすと、
斬り直さずに済みます。
他の頂点も少し整えたら、ここでいったん 4隅の ポリゴン を削ります。
選択モードを Face（面）に変えます。
削りたい ポリゴン を選択します。
選び終わったら [ Del ]キーを押すと、ポップアップメニューがでるので、 Faces（面） を選択します。
この要領でどんどん斬っていきます。
エッジの途中を斬ると、当然頂点が増えます。
そこで、すでにある頂点から斬り始めるにはどうするか。
例えば下図のような場合。
マウスを動かしているときに、目的の頂点に近づくと、マグネット的に吸い付く瞬間があります。新しく生成される頂点を表す緑の ■ が大きくなってさらに赤いフチドリがつくので、そのタイミングで左クリックすると狙った頂点を経由することができます。
この調子で続けます。
やっぱこの頂点いらんなー
となったら、
不要な頂点を選択して、[ Del ]キーを押します。
ポップアップメニューで Dissolve Vertices（頂点を溶解）を選択します。
Vertices（頂点） の方を選ぶと、ポリゴンが成立しなくなって Face（面） が消失してしまうので注意。
さらにこの調子で続けます。
やっぱ ここ頂点いるよなー
となったら、
エッジ選択モードに切り替えて、
増やしたい区間のエッジを選択します。
ヘッダーメニューから Edge> Subdivide
見た目に変化がないので、頂点選択モードに切り替えてみます。
どんどんこの調子で続けます。
いい加減、テクスチャの黒い部分がなー
え？今更？となったら、
テクスチャのPSDに一時的な細工をして更新します。
Blenderで再度読み込みなおします。
ちなみにBlenderを再起動しても更新されます。
Blender は一度読み込むとリアルタイムにテクスチャの更新状況を監視しているわけではないのです。
黒い点が見やすくなった！
できた！
あまりぴちぴちにすると、テクスチャの変更調整に耐えられないし、頂点が増えるので、ほどほどのところで止めます。
これで完成にしてもいいのですが、メッシュで UI を作る場合に大事なことがあります。
それは、「中心」です。
Pivot（ピボット） とも言ったりしますが、そのメッシュの基準点のことです。
画面に表示する際に、頂点ひとつひとつに座表を指定するようなことはしません。メッシュのデータには、中心から頂点がどれだけ離れているか、という情報が格納されています。頂点の位置はあくまでも中心からの相対的な位置なので、中心を移動したり回転しても、形状を保ったまま動かすことができるのです。
表示するだけだったらそれほど問題にはならないんだけど、中心の場所によっては、回転や、拡大縮小したときにおかしな見た目になったり、逆に面白い演出ができたりします。
その中心位置の設定方法ですが、Blenderにはいくつも方法があります。
ペラペラメッシュならではの簡単な方法を紹介しようと思います。
まずObjectModeにして、アイテムパネルから今の表示位置を確認します。
ポジションチェックします。
Location のところに今配置されている座標が表示されます。
メッシュをエクスポート（FBX等での書き出し）の直前にここで値の確認をするのは大事です。
おっと、Dimensions（寸法）のところにアヤシイ値が。
XZ面で作業しているので、Y軸方向にブレが出るのはオカシイ。
Edit Mode で作業していると割と起こりうるので、スケールの Y に ゼロを入れて、Object > Apply > Scale することで、キレイな平面になります。
XYZの各軸線が交差するところが原点です。
Object Mode のままで、ここを中心となるように、メッシュを移動させます。
オレンジの小さな点が、メッシュの中心です。
これを Object > Apply > Location すると
できあがり！おつかれ！
あとは、エクスポートして、ゲームエンジンや開発環境に持っていって、そこでテクスチャを合わせてあげます。
これで、テクスチャを自由に切り出して画面作りができます。手数が多いのは、スプライトとは比べものにならないですが、表現の幅が広がる可能性と、パフォーマンスとクオリティの向上に貢献できるので、ぜひ初めてみてはいかがでしょうか。
Blenderのショートカットを覚えると、さらにサクサクと作業できるようになるので、慣れれば手軽さもアップします。
今回はこの辺で。
ではでは
素敵な 3DUI ライフを！
