2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

OBJからgLTFとUSDZを生成してmodel-viewerで遊ぶ

Last updated at Posted at 2021-06-20

model-viewerを使うとAndroidとiOSの双方で手軽にARを遊べます。
当初はBlenderでgLTF、UnityでUSDZを書き出していましたが、処理する数が多いので自動化したくなりました。

環境:Windows10 Pro(gLTF化まで)、MacOS 10.15(USDZ化)

承前: 私はWindowsメインのユーザーであり、あまりMacに詳しくないので、そのあたりの記述が曖昧です。大変申し訳ありません。確実さを増す情報がありましたらお知らせいただければ幸いです。

#まずOBJを作ります
OBJ(と、そのマテリアルを表現するMTLファイル)は中身は単純なテキストデータなので、PHPでチョロチョロと書きました。簡単です。OBJが作れればなんでもよいです。

##Node.jsが必要かもしれない
次で使用するobj2gltfを使用するのにNode.jsが必要です。
まだだったらインストールしておいてください。

#OBJからgLTFを作ります
gLTF生成にはobj2gltfを使いました。
私の案件ではDBから読み込んだ情報で連続的に生成したかったので、OBJ生成からの流れでAR Quick Lookで使える3Dモデル動的生成と同様に、PHPからexec()でコマンドをたたきます。

exec('obj2gltf -i XX.obj -o XX.gltf');

gLTFファイルができました。glb(バイナリ形式)でなくてgltf(テキスト形式)にしたのは意味があります。

##一部マテリアルを書き換えます
生成元のMTL内マテリアルに透過度テクスチャマップmap_dがある場合、gLTF化したときにそのマテリアル全体が半透明になってしまっています。
それでは困る場合、gLTFを書き出した直後に読み込んで無理やりそこを書き換えます。

// "alphaMode": "BLEND"を"MASK"に書き換える
// もうちょっと慎重に置換した方がいいかもしれません
$gltf_str = str_replace('BLEND', 'MASK', $gltf_str);

gLTF化する時にオプション指定できればこんなことをしなくても万事解決なのですが、今のところよくわかっていません。

#USDZを作らなくてもよくなっています
6/22追記:
model-viewer 1.7.0より、ios-srcをオンザフライで生成するようになっているようです。素晴らしい……!! ここから下は、1.7.0以前を使わざるを得ない場合や、自動生成でうまく行かない場合に参照ください。

#gLTFからUSDZを作ります
ここからはMacOSでの作業になります。私のMacは9年前のやつでバリバリ3Dモデル案件をこなすには無理があるのでここだけの出番としていますが、最初からメインがMacOSの方は同様にexec()で流れでできると思います。

MacOSを10.15にする

このあとインストールするアプリの導入条件なので、OSを10.15(Catalina)以上にします。

もしかしたらXcodeが必要かもしれない

すでにインストールしていたので必須要件なのかわからないのですが、もし必要そうだったらインストールしてください。

Reality ConverterとUSDZツールを入れる

ARツール - 拡張現実 - Apple Developerに行き、Reality ConverterとUSDZツールを入れます。
Reality Converterはもしかしたら要らないかもしれません。
USDZツールをインストールしたら、usdconvertへのパスを設定します。
ここのベストアンサーを見ながらそのままやりました。
How to create USDZ file using Xcode converter?

コマンド実行

gLTFを書き出すついでに以下を連続で処理するスクリプトを書き出して、一緒にMacに持っていって一括処理しました。

usdconvert XX.gltf XX.usdz -metersPerUnit 1;

gLTFとUSDZでは1Unitあたりの長さが違うようで、そのまま変換するとgLTFに比べてとてもとても小さいモデル(1/100スケールくらい)ができあがってしまいます。そこで-metersPerUnitオプションで指定してサイズを合わせています。

#できました
これでgLTFとUSDZができたので、model-viewerに入れてARで見ることができます。
どんどん遊びましょう!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?