はじめに
Unityでゲームエフェクトを作っていると、いつも似たようなメッシュを作っていると感じることがあります。MayaやBlenderなどを開いて毎回作成するのは少し面倒です。
プロジェクトによって使えるツールが違ったり、作業環境によってはすぐ開けなかったりすることもあります。
そこで、エフェクト用メッシュをブラウザ上で作成して、OBJ形式でUnityに持ち込める無料ツールを作りました。
Effect Mesh Generator
https://big615big615.github.io/EffectMeshGenerator/
どんなツールか
Effect Mesh Generatorは、ゲーム向けのエフェクト用メッシュをブラウザだけで作れるツールです。
- メッシュタイプを選びます
- 幅、長さ、曲がり方、細くなり方、ねじれなどを調整します
- UVやテクスチャの見え方を確認します
- OBJ形式でダウンロードできます
- 生成したメッシュは個人・商用問わず自由に使えます
使用例
Effect Mesh Generatorで生成したメッシュを使用して作成したサンプルです。
スラッシュとカーブのメッシュをOBJ出力し使用しています
メッシュタイプ
現在は以下のメッシュを選べます。
作成頻度の高い、斬撃、衝撃波、竜巻、などを気軽に試せます。
主な機能
形状を見ながらスライダーで調整
スライダーを動かすと見た目が更新され、用途に合わせて形状をカスタマイズできます。
ワイヤーフレーム表示とポリゴン数表示、ピボットの位置調整が可能です。
見た目だけでなく、Unityに持ち込んだときの扱いやすさも重視しています。
UVとテクスチャの確認
ツール上ではUV表示をオンにできます。UV回転やUVスクロールの見え方も確認できます。
テクスチャを読み込んで表示できます。実際のエフェクト素材を当てながら形を調整できます。
選択した画像はブラウザ内でプレビューに使うだけで、アプリ側のサーバーには保存・送信しません。
OBJ書き出し
現在の公開版では、OBJ形式での書き出しに対応しています。
まずはUnityに持ち込みやすく、動作を確認しやすいOBJを優先しました。
使い方
-
Webアプリを開く
-
「メッシュタイプ」から作りたい形を選ぶ
-
幅、長さ、カーブ、テーパー、ねじれ、分割数などを調整する
-
必要に応じてUV表示、テクスチャ表示、ピボットの位置調整
-
OBJダウンロード
-
Unityにインポートして、エフェクト作成
スライダーで形状をすぐ変化させられ、書き出しのハードルが低いため、プロトタイプ用途にも使いやすいと思います。
実装について
ここからは内部の話です。
構成はReact + Vite + Three.jsです。
GitHubリポジトリはこちらです。
https://github.com/big615big615/EffectMeshGenerator
- UI: React
- 3Dプレビュー: Three.js
- ビルド: Vite
- メッシュ生成: TypeScriptで独自実装
- 出力: OBJ
メッシュ生成では、各メッシュタイプごとに頂点、UV、インデックスを組み立てて、Three.jsのBufferGeometryとして扱っています。
特に気をつけたのは、ツール上のUVプレビューと、OBJとして書き出した後にUnityで見えるUVの向きを揃えることです。標準のOBJExporterをそのまま使うと、ツール上の表示とインポート後の見え方が合わないケースがあったため、OBJ出力は専用の書き出し処理にしています。
また、Unity側のカリングや法線の向きに影響するため、三角形の winding order もツール側の見た目だけで決めないようにしています。
ローカルで動かす場合
リポジトリをcloneした後、以下で起動できます。
npm install
npm run dev
Windows PowerShellでnpm run devが実行ポリシーに引っかかる場合は、以下のようにnpm.cmdを使ってください。
npm.cmd run dev
ビルドは以下です。
npm.cmd run build
利用条件
このツールで生成・エクスポートしたメッシュは、個人制作、商用作品、ゲーム、映像、アセット制作などで自由に利用できます。
生成メッシュの利用にあたって、クレジット表記は不要です。可能であれば、Effect Mesh Generatorの名前やリンクを添えてもらえると嬉しいです。
アプリ本体のソースコードはMIT Licenseです。
今後やりたいこと
現時点ではOBJ出力を中心にしていますが、今後は以下も検討しています。
- Unityのエフェクトメッシュの定番のFBX出力
- 使いやすいプリセットの追加
- エフェクト用途別のテンプレート追加
- UV確認まわりの改善
- 作成例やUnityでの使用例の追加
おわりに
エフェクト用の小さなメッシュは、作業中に何度も必要になるわりに、毎回DCCツールで作るのは少し手間がかかります。
Effect Mesh Generatorは、その「ちょっと形を作って、UVを見て、Unityに持っていく」までを軽くするためのツールです。
VFX制作やUnity向けエフェクト制作で役に立ちそうであれば、ぜひブラウザで触ってみてください。