精細レンダリングをオーディオ再生付きで組み込むなど現実世界の「補足したい」情報を補います
iPhone や iPad のユーザーなら、AR コンテンツを使ったアプリや Web サイトを見たことがある人も多いかもしれません。
「AR Quick Look」を使えば、Web サイトに AR コンテンツを簡単に組み込むことができます。
「AR Quick Look」では、Pixar USDZ 形式の 3D データを読み込むことができるので、USDZ 形式のファイルを作成するには「Reality Composer」や「Reality Converter」が便利です。
レンダリングされたオブジェクトをARで体験できます。
→ Huracán EVO RWD Spyder
3D データとサムネイル画像1枚をサーバーにアップロードしたら、HTMLを書いていきます。
「img 要素」でサムネイル画像を配置したら、それを「aタグ」で囲みます。「href」属性に 3D データのパスを記述し「rel=ar」という属性を追加します。
Web サイトを iPhone で見てみると、サムネイル画像に AR アイコンが表示され、AR コンテンツが使用できるはずです。
3Dデータのパスの後「#」に続けて様々なオプションを追加できます。複数のオプションは「&」で区切ります。
例えば、次のようなコードでバナーを追加できます。
カスタムボタンタップ時の動作は、JavaScript で作れます。
他にも、Apple Pay ボタン付きのバナーを作成したり、カスタム HTML のバナー(HTTPSのみ)を追加することもできます。
Apple Developer の Web サイトではサンプルをたくさん公開しているので、チェックしてみてください。
出典:Apple AR Quick Look