07
5月

USDZを使ったWebARの作り方

今回はsafariとUSDZを使用したWebARを実装する記事になっています。また、USDZを書き出す際にSubstance Painterを使う方法をメインに書いていきます。

WebARとは?


AR(拡張現実)という、スマホやタブレットなどのモバイル機を通して現実世界の映像と3Dのオブジェクトを合成することで、画面越しにそこに3Dのオブジェクトがあるかのような映像を作る物です。「ポケモンGO」に現実に世界にポケモンを出すという機能が分かりやすいかと思います。
このようなARをアプリを使用せず、スマートフォンやタブレット等のモバイル機からsafariやchrome等のブラウザを通して見ることができるようにしたものです。

WebARを実装する方法


WebARをブラウザに実装する方法はいくつかやり方があります。

代表的な手法として、
・USDZというファイルを作り、これをhtmlのaタグを使い表示する(safariのみ)
・glTFというファイルを作り、A-FrameというJavaScriptのライブラリと組み合わせ表示する

の2つがあります。今回は1のUSDZを使った実装方法について書いていきます。

※USDZの方を選んだ理由は、glTFの方法は「ある程度プログラムについての経験が無いと大変そうだな…」と感じたからです。
※glTFを使った実装については、Qiita等のサイトに記事がいろいろあるので、そちらを参考にしていただければと思います。
※A-Frameは、オープンソースのフレームワークでWebGLを使い実現しているそうです。(詳しくは、各々で調べてください。。。)

USDZでやれることと制限について

【USDZとは?】
USDのZipにしたもです。

【できること】
・アニメーション

【制限】
ポリゴン数:10万ポリゴン以下
テクスチャ解像度:2048×2048以下
アニメーション時間:10秒以内

より詳しく知りたい場合は、以下のUSDZのドキュメントを見て頂ければと思います。
https://graphics.pixar.com/usd/docs/Usdz-File-Format-Specification.html

USDZファイルを用いたWebARの作り方


前置きが長くなりましたが、.usdzファイルの作り方と実装の流れを説明していきたいと思います。

【.usdzの作り方】
.usdzの作成には、
1.obj形式の3Dデータを用意する
2.以下ソフト・サービスのいずれか使って.usdzに変換する
・Substance Painterを使う(アニメーションデータには非対応)
・Webサービスを使う(VECTARY等)
・Appleが出しているReality Converterを使う(macのみ)
・コマンドプロンプト等で変換する
このような流れが一般的だと思われます
2の工程で使われるソフト等は、3Dソフトを触れる人なら上から順に学習コストが上がっていき、プログラムが触れる人だと、下から順に学習コストがかかるのかな?と個人的に考えています。
次に、各工程について説明していきます。
1つ目のobjのデータの用意に関しては、ここで説明すると長くなりすぎるので、割愛させてもらいます。
では、2の各変換方法の細かい工程と特徴に関して説明していきます。

【Substance Painterを使った書き出し】
Substance Painterを使った流れは通常のSubstance Painterと同じ使い方で、書き出しのプリセットをusdzに変更するだけで書き出せます。
※この方法はアニメーションのあるデータには対応していないので、テクスチャを書き出した後、別のソフトを使う必要があります。

通常の使い方については、各々で調べていただくとして、最後の書き出しのプリセットの変更についてだけ少しだけ説明しようと思います。

図1.マテリアルの設定が終わった状態

図1はSubstance Painter上でマテリアルの設定が完了した状態の画面です。
この状態で、ファイル>Export Textures…でテクスチャを書き出します。

図2.テクスチャのエクスポート設定

図2がExport Textures…を押したた出てき、赤枠で囲んでいconfigからUSD PBR Metal Roughnessを選択します。あとは、書き出し先と解像度を指定して書き出します。

図3.Substanceから書き出されたファイル一覧

書き出しが完了すると、このように各テクスチャ等が書き出されます

【WEBサービスを使う】
今回は、VECTARYというサイトを紹介しておきます。詳しい使い方や仕様等は、サイトで確認してもらえればと思います。
VECTARY : https://www.vectary.com/webar/

【コマンドプロンプトを使う】
プログラムは専門外で違いすぎることを書くのも良くないので、参考サイトをいくつか紹介しておきます。
https://lilea.net/lab/how-to-make-usdz/

USDZファイルの確認とsafariに実装する方法
次に、作成した.usdzを実際に確認するための方法とsafariに実装する方法を説明していきます。

【USDZの確認方法】
.usdzの確認には2パターンあり、現実に合成せずオブジェクトのみでの確認と実際にARをした状態で確認する事ができます。
オブジェクトのみでの確認は、Macで.usdzをクリックすると確認することができます。
実際にARをした状態での確認は、確認したい.usdzを確認したい端末にダウンロードし、そのファイルをタップするとカメラが自動で起動し確認できます。

【safariに実装する方法】
この記事の最初の方でも少し書きましたが、非常に簡単でhtmlを少しでも触ったことがある人なら一瞬で理解できると思います。
以下のコードを入れるだけで実装することが出来ます。

このコード中のsample.usdzに表示したい.usdzを指定し、sample_thum.jpgにサムネイル画像を指定することで実装することができます。