Unity+ZapperでWeb ARコンテンツを作ってみた

Zapperを使えばUnityエンジニアでも手軽にWeb ARが作れる

Zapparを使用することで、ウェブ開発経験のないUnityエンジニアでも気軽にWeb ARのコンテンツを制作することが出来ました。
Unityで培った知見をそのままWeb ARに活かすことができるのは、非常に大きな強みになりそうです。

今回制作したWeb ARの動画は下記からご覧いただけます。

Zapperの公式サイトはこちらです。

Web ARとは

Web AR（Web拡張現実）は、ブラウザを介してアクセスできる拡張現実（Augmented Reality、AR）体験を指します。従来のARアプリケーションは専用のアプリをダウンロードして使用する必要がありましたが、Web ARはアプリをインストールすることなく、スマートフォンやタブレットのウェブブラウザを通じてAR体験を提供します。

Web ARの主な特徴は以下の通りです：

アクセシビリティ

ユーザーは特別なアプリをダウンロードする必要がなく、ウェブリンクにアクセスするだけでAR体験を楽しむことができます。

クロスプラットフォーム対応

多くのWeb AR体験は、さまざまなタイプのデバイスやブラウザで動作するように設計されています。

インタラクティブ性

Web ARは通常、カメラを使用してリアルタイムでユーザーの環境にデジタル情報やオブジェクトを重ね合わせ、インタラクティブな体験を提供します。

Web ARは、教育、エンターテインメント、小売、マーケティングなど、多様な分野での応用が拡がっています。

イメージトラッキング

今回のデモでは、ビール缶のロゴをマーカーとしてWebアプリに認識させて、位置や角度を推定させるという手法をとっています。
この方法を使用すると、カメラ ビュー内で動き回る物理画像にデジタルコンテンツを追随させることができます。
通常の画像追跡では、平面上にあるマーカーを検出して追跡できますが、
今回はCurved Image Tracking（曲面画像追跡）を使用しました。
その名の通り、ビールの缶などの曲面にあるマーカー検出して追跡できます。

精度の高いイメージトラッキングを得るコツ

細部まで細かく描かれた画像を選ぶ

大量の空白を含む画像は複雑なグラフィック データとして登録されないため、使用しないでください。

画像のすべての部分が高コントラストであること

Zapperはスキャンの際、コンテンツをグレースケール認識します。 画像追跡のパフォーマンスを向上させるには、画像をグレースケールで表示してみて、画像のさまざまな部分間のコントラストの量を確認することを検討してください。

反復的なパターンの使用を避ける

テキストの段落やチェッカーボード パターンなどの繰り返しパターンは、追跡パフォーマンスを妨げる可能性があります。

アスペクト比

幅と高さのアスペクト比を 4:1 から 1:4 の間で維持してください。

平らでマットな表面に描かれた画像を選ぶ

円形や反射している面にコンテンツを配置すると、トラッキングが不安定になる可能性があります。

まとめ

Web ARについてのお問い合わせはこれまで多く頂いていましたが、Unityエンジニアたちはウェブという分野にどこか苦手意識を感じていました。Zipperという便利なサービスのおかげで、これまでのUnityでの経験を存分に活かしてウェブコンテンツを制作できることが分かりました。
今後の我々の成長分野として多いに期待しています。