Go to Top

iPhoneのWebサイトで簡単AR『AR Quick Look』


精細レンダリングをオーディオ再生付きで組み込むなど現実世界の「補足したい」情報を補います

iPhone や iPad のユーザーなら、AR コンテンツを使ったアプリや Web サイトを見たことがある人も多いかもしれません。
「AR Quick Look」を使えば、Web サイトに AR コンテンツを簡単に組み込むことができます。

AR Quick Lookでは、Pixar USDZ 形式の 3D データを読み込むことができるので、USDZ 形式のファイルを作成するには「Reality Composer」や「Reality Converter」が便利です。

5066

レンダリングされたオブジェクトをARで体験できます。
 →  Huracán EVO RWD Spyder

 

3D データとサムネイル画像1枚をサーバーにアップロードしたら、HTMLを書いていきます。
「img 要素」でサムネイル画像を配置したら、それを「aタグ」で囲みます。「href」属性に 3D データのパスを記述し「rel=ar」という属性を追加します。
Web サイトを iPhone で見てみると、サムネイル画像に AR アイコンが表示され、AR コンテンツが使用できるはずです。

5088

3Dデータのパスの後「#」に続けて様々なオプションを追加できます。複数のオプションは「&」で区切ります。
例えば、次のようなコードでバナーを追加できます。

5099

カスタムボタンタップ時の動作は、JavaScript で作れます。

他にも、Apple Pay ボタン付きのバナーを作成したり、カスタム HTML のバナー(HTTPSのみ)を追加することもできます。
Apple Developer の Web サイトではサンプルをたくさん公開しているので、チェックしてみてください。

 

5022

 

出典:Apple AR Quick Look