VRエンジン作成日記

ひたすらVRエンジンを作っていきます

FBXファイルの読み込み機能を作り始めた

FBXファイルの読み込み機能を作り始めた。次のページを参考にさせてもらっている。

qiita.com

今のところ、バイナリ形式のFBXファイルのパースだけはできた。まだメッシュを読み込んで画面に表示する機能は作っていない。

あと、DAEファイルのパーサを修正した。簡単なファイルであれば、メッシュにして画面に表示することはできた。ただ、昨日も書いたような感じで、DAEファイルもOBJファイルと同じように、頂点に紐づいていて欲しいデータがインデックス値の方に紐づいているようだった。もしかすると、その形式の方が3Dのメッシュデータの形式として一般的なのかもしれない。

・関連するコミット

add: fbx reader class · hikipuro/tea.js@94c43dc · GitHub

 

OBJファイルを画面に表示する機能を追加

プロジェクトビューからOBJファイルを画面に追加できるようにした。また、OBJファイル読み込み機能を使って複雑なメッシュを読み込んだ時に、UIスレッドが止まらないようにした。具体的には、OBJファイルの各行を文字列として読み込むメソッドの実行時に、引数で指定した行数を読み込む度にsetTimeoutで待ち時間を入れるようにした。こうすることで、UIスレッドが停止してしまう問題を解消できる。この構造を使う場合はメソッドの実行完了を通知するために、引数でコールバック関数を一緒に指定する必要が出てくる。

今のところOBJファイルのフォーマットで気になることがある。WebGLのシェーダでは頂点情報に紐づける形で、法線、テクスチャ座標等の追加の情報を持つ構造になっている。頂点ごとに紐づいた情報のかたまりが、それぞれ1つずつ頂点シェーダに渡されるような仕組みになっている。しかしOBJファイルのフォーマットでは、法線、テクスチャ座標等の情報を紐づける先が頂点ではなく、インデックス値になっている。この情報の持ち方を考慮せずに、インデックス値に紐づいた2つ目以降の情報を雑に削ってしまっても、多くの場合、破綻なく画面に表示されるようだ。ただ、今のところの実装では、UnityのOBJファイルのインポート後のメッシュデータと見比べると差がある。うまく違いを吸収するにはどうしたら良いかという部分で悩みがある。

・関連するコミット

add: obj file to scene feature · hikipuro/tea.js@3e166ee · GitHub

 

ファイルのインスペクタを修正した

今まではテキストファイルだけインスペクタに表示していたけど、画像ファイルのインスペクタを追加した。フォルダやその他のファイルもとりあえず概要だけ表示するようにした。

・関連するコミット

add: image file inspector · hikipuro/tea.js@9cffb23 · GitHub

 

細かい不具合を修正

いくつか細かい不具合を修正した。

・アプリの終了時に各UIパネルのサイズを保存

・シーンビューのドラッグで視点を移動する機能を追加

・新規ファイルを追加する時に名前を設定できるように修正

・インスペクタビューのコンポーネントタイトル部分のアイコンにフォーカスが当たるように修正

・停止ボタンを押した後にヒエラルキービューの選択状態を復元するように修正

ヒエラルキービューで選択されたオブジェクトに子オブジェクトを追加するように修正

・プロジェクトビューのフォルダ一覧でリネームできるように修正

ヒエラルキービューでリネームできるように修正

 

プロジェクトビューの修正

プロジェクトビューの機能をいくつか修正した。また、インスペクタビューも少し修正した。

・ファイルリストのコンテキストメニューにCreate等を追加

・リネーム後にファイルを並び替えるように修正

・並び替えの順番が名前順になっていない問題を修正

・インスペクタビューでコンポーネントを上下に入れ替える機能を追加

・インスペクタビューの値をリアルタイムに更新する機能を編集時は停止するように修正

 

ファイルを削除する機能を追加

プロジェクトビューでファイルを削除する機能を追加した。あと、シーンのロード処理を修正した。今まではシーンがロードできたら、すぐさま実行を開始していたけど、非同期に読み込まれるスクリプト等のロード完了を待ってから実行するように変更した。

その他の変更点

・ファイル関連のコードをリファクタリング

 

プロジェクトビューでファイルをドラッグできるようにした

プロジェクトビューで、ファイルを別のフォルダへドラッグできるようにした。当たり前のようにある機能を実装しただけだけど、いろんな場所の違ったUI要素にドラッグできるようにするのは、思いのほか作る手間がかかった。

プロジェクトビュー関連での今後の修正点としては、JavaScriptファイル等の画面上のオブジェクトにアタッチ可能なファイル以外のものをヒエラルキービューにドラッグできなくしたり、画面上のオブジェクトに関連付けられたファイルの、ファイル名やパスが変更された時に参照先を変えたりとか、その辺りの機能を追加する必要がある。

・関連するコミット

add: file drag feature to project view · hikipuro/tea.js@1b3ea8b · GitHub