tks_yoshinagaの日記

KinectやLeap motion, VRやARなどの技術を使ってやったことのメモとか

Structure Sensorでスキャンした3DデータをFacebookに投稿するまでの手順

0.はじめに

Structure SensorとはiPadiPhoneにアタッチできるデプスカメラで、3Dスキャンや端末の6DoFトラッキング(位置・姿勢追跡)などに利用することができます。

発売されたのは2014年頃でセンサの存在は知っていましたが、先日行われたAR Fukuokaの新年会で実物のデモを見せてもらい、研究で使えそうだと思い今更ながら購入しました。

そこで今回はStructure Sensorのデモアプリでスキャンしたデータの使い方を覚えるためにやってみた事として、3DデータをBlenderで調整してFacebookに投稿するまでの流れをまとめます。

 

1.準備

Scanner - Structure Sensor Sample
3Dスキャン用のiOSアプリ。

Scanner - Structure Sensor Sample on the App Store

Blender
アプリで出力されるデータが上下反対になっているので調整用に使用(後述)。

blender.org - Home of the Blender project - Free and Open 3D Creation Software

glTF-Blender-Exporter

Facebookに投稿するためのモデルフォーマット(glb)に変換。

[ダウンロード]

GitHub - KhronosGroup/glTF-Blender-Exporter: Blender glTF 2.0 exporter

[セットアップ]

①上記のscripts/addons内にあるio_scene_gltf2フォルダをBlenderaddonsフォルダに移動
(例:C:\Program Files\Blender Foundation\Blender\2.79\scripts\addons)

 ②続いてBlenderを立ち上げ、メニューから[File]→ [User Preferences]を開き、下図のように[Add-ons]→[Export-Import]をクリック

f:id:tks_yoshinaga:20190205095830j:plain

③右側に表示されたリストの中からImport-Export:glTF 2.0 formatを見つけ、チェックをオンにする

2.スキャン・調整・アップロード

(1) iPad等にStructure Sensorを装着
(2) Scannerを起動し対象オブジェクトをスキャン
(3) くまなくスキャンできたら画面右のボタンをタップして終了

f:id:tks_yoshinaga:20190205102800j:plain

(4) スキャン結果が表示されるので様々な角度から確認し、問題なければE-mailをタップ
注)Backをタップするとスキャンを最初からやり直しになります。

f:id:tks_yoshinaga:20190205103252j:plain

(5) 指定したアドレスに3Dモデルのデータ(obj,mtl,jpg)が送られてきているので、ダウンロード&解凍しておく
(6) Blenderを起動
(7) 画面中央に表示される立方体を右クリックで選択しDeleteキーで削除

f:id:tks_yoshinaga:20190205104120j:plain

(8) メニューから[File]→[Import]→[Wavefront(.obj)]をクリック
(9) 3Dデータのあるフォルダを開き、Model.objを選択したのちImport OBJをクリック

f:id:tks_yoshinaga:20190205104607j:plain

(10) 先ほどのスキャン結果が表示されますが、位置が原点からずれていたり上下が逆だったりするので修正します。
(11) 画面右側のAll Scenes内のModelをクリック 
(12) 画面下方のモード表示(初期はObject Mode)からEdit Modeを選択

f:id:tks_yoshinaga:20190205105407j:plain

(13) User Perspの右上に表示されている ボタンをクリック

f:id:tks_yoshinaga:20190205110020j:plain

(14) Medianのx,y,zを全て0に変更し中央に寄せる

f:id:tks_yoshinaga:20190205110541j:plain

(15) モードをObject Modeに戻し、Rotationの値を適宜調整(例えばx=-90)

f:id:tks_yoshinaga:20190205112046j:plain

(16) メニューから[File]→[Export]→[glTF 2.0(.glb)]をクリック 
(17) ファイルを保存する場所とファイル名を決めてウィンドウ右上の[Export glTF2.0 Binary]をクリック
(18) Facebookを開く
(19) 記事を記述するエリアにglbファイルをドラッグ&ドロップ

f:id:tks_yoshinaga:20190205112858j:plain

(20) しばらく待つとアプロードが終わるので最後にシェア

f:id:tks_yoshinaga:20190205113455j:plain

(21) 以上で自身でスキャンしたデータをFacebook上でシェアできます

3.まとめ

紹介した通り、Blenderを使えば位置調整や上下反転の処理ができるだけでなくglb形式に出力するところまで簡単に行えます。
また、A-Frame等を使えば以下のように簡単にwebサイトの中に組み込むことも可能です。ぜひお試しください。


キーボードの←や→で左右に移動、↑や↓前後移動ができます。またスマホの場合は画面右下のゴーグルマークをタップすることでVRモードにもなります。

4.参考

(1) GLBは合計3MB未満という制限があり、ファイルサイズの調整が必要な場合があります
GLBチュートリアル - シェア機能 - ドキュメンテーション - 開発者向けFacebook
(2) ポリゴン数を減らす場合はまず画面右側からModifierを開く
(3) Add ModifierからDecimateを選択

f:id:tks_yoshinaga:20190205121346j:plain

(4) Ratioの値を変えながら頂点数や見た目を確認し、最後にApplyをクリック。

f:id:tks_yoshinaga:20190205121839j:plain

 

以上、必要に応じてお試しください。