VITALIFY.ASIA logo

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

Zapparを使用し、Web開発経験のないUnityエンジニアでも手軽にWeb ARコンテンツを制作する検証を行いました。

Unity + ZapparでWeb ARコンテンツを作ってみた
目次

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

Zapparを使用することで、ウェブ開発経験のないUnityエンジニアでも気軽にWeb ARのコンテンツを制作することが出来ました。

Unityで培った知見をそのままWeb ARに活かすことができるのは、非常に大きな強みになりそうです。

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

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

Zappar: World-leading Augmented Reality solutions since 2011
Since 2011 we’ve been helping brands, businesses and AR creators leverage augmented reality through our in-house creative studio and award-winning platform and hardware solutions.

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での経験を存分に活かしてウェブコンテンツを制作できることが分かりました。

今後の我々の成長分野として多いに期待しています。

1,000社以上の事業成長を支えた圧倒的な『スピードと柔軟性』で、御社のアイデアを最短で形にします。まずは無料で壁打ちしませんか?

ブログに戻る

関連記事

3DGSを理解する 第3回:3DGSと2DGSは何が違うのか? ―「2D」の意味を正しく理解する3D

3DGSを理解する 第3回:3DGSと2DGSは何が違うのか? ―「2D」の意味を正しく理解する

3DGSと2DGSは、どちらも3次元空間のシーンを表現するGaussian Splatting技術ですが、使うGaussianの形状と重視する点が異なります。本記事では、3次元Gaussianを使う3DGSと、平面状Gaussianで表面形状の整合性を高める2DGSの違いを整理し、2D画像を表現するGaussianImageとの違いも解説します。

Toshihiko Nagaoka
3DGSを理解する 第2回:3DGSはフォトグラメトリと何が違うのか?3D

3DGSを理解する 第2回:3DGSはフォトグラメトリと何が違うのか?

3DGSとフォトグラメトリは、どちらも複数の写真から3D空間を再構成する技術です。本記事では、SfMによるカメラ位置・姿勢推定やSparse Point Cloudまでの共通点と、その後にフォトグラメトリがMVS・Dense Point Cloud・メッシュ生成へ進み、3DGSがGaussianの初期化・最適化へ進む違いを整理して解説します。

Toshihiko Nagaoka
3DGSを理解する 第1回:3DGSは従来の3D制作と何が違うのか?3D

3DGSを理解する 第1回:3DGSは従来の3D制作と何が違うのか?

3DGSは、従来のメッシュとは異なり、大量のGaussianを空間に配置して現実の見た目を再現する3D表現技術です。本記事では、メッシュとの違い、写真から3D空間を生成する仕組み、不動産・建築・文化財・映像・XRへの活用例、そして3DGSが従来の3D制作を置き換えるのかまで、初心者向けに整理して解説します。

Toshihiko Nagaoka
ぼくはデューパー、なんでもきいてね!