Unity + ZapparでWeb ARコンテンツを作ってみた
Zapperを使えばUnityエンジニアでも手軽にWeb ARが作れる
Zapparを使用することで、ウェブ開発経験のないUnityエンジニアでも気軽にWeb ARのコンテンツを制作することが出来ました。
Unityで培った知見をそのままWeb ARに活かすことができるのは、非常に大きな強みになりそうです。
今回制作したWeb ARの動画は下記からご覧いただけます。
Zapperの公式サイトはこちらです。
Zappar
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での経験を存分に活かしてウェブコンテンツを制作できることが分かりました。
今後の我々の成長分野として多いに期待しています。
関連記事
【2026年最新版】デジタルツインとは？仕組み・歴史・活用事例・メタバースやシミュレーションとの違いを徹底解説
デジタルツインとは、現実の対象やプロセスをデジタル空間に表現し、データを連携して監視・分析・予測・最適化に活用する仕組みです。本記事では、アポロ計画から現在までの歴史、IoT・AIを用いた構成、製造・都市・建設・医療・航空分野の事例、シミュレーション・メタバース・CPSとの違い、3Dを使わない実装や2D図面から始める方法を解説します。
3D Tilesとは何か？基本概念から最新トレンド、活用事例まで徹底解説
3D Tilesは、大規模な3D地理空間データをWebやモバイルへ効率的に配信するためのオープン規格です。HLOD、Bounding Volume、tileset.json、3D Tiles 1.0と1.1の違いを整理し、Project PLATEAU、Google Photorealistic 3D Tiles、BIM・点群での活用、CesiumJSによる複数タイルセットの重ね合わせとLOD制御まで解説します。
GLB Texture Editor：ブラウザ上で3Dモデルのテクスチャとマテリアルをリアルタイム編集
GLB Texture Editorは、GLB形式の3Dモデルをブラウザ上で編集できるWebツールです。テクスチャの差し替え、色や粗さ、金属感、透明度の変更、UV・Projection Mappingの調整をリアルタイムで確認できます。3D EC、建築、デジタルツイン、ゲーム・XR開発における確認・修正作業を効率化します。
