人工現実 (AR) および仮想現実 (VR) テクノロジーは、テクノロジーの世界にとって新しいものではありません。
どちらの商用アプリケーションも 2008 年から 2012 年頃に登場し始めました。はい、10 年以上経ちましたが、テクノロジーは予想通りに爆発しませんでした。
しかし、AR のトレンドを見ると、テクノロジーの影響は大きいです。たとえば、VR はメディアとのコミュニケーションや対話の方法を変え、仮想世界へのゲートウェイなど、他のさまざまなユースケース向けに進化しています。
同様に、AR はデジタル世界と現実世界を統合し、Google マップのライブビューや Pokémon GO などのゲームなどのエキサイティングなインタラクションを実現しました。
忘れてはいけないのが、 Microsoft HoloLens は 、VR と AR で何ができるかを示す原始的な例です。
そういったことを考えると、WebARとは何でしょうか?新しい用語ですか?それはどういう意味ですか?この記事では、それを詳しく説明します。
WebARとは何ですか?
WebARとは、Web-based Augmented Realityの略で、Webブラウザを通じてAR体験を提供する技術です。これはモバイルをターゲットとしていますが、デスクトップ ブラウザでも同じことを体験できます。
WebAR テクノロジーを使用した AR 体験には、特別なハードウェアやソフトウェアは必要ありません。
必要なのは、Web ベースの AR 体験を提供するように設計された Web ページへのリンクだけです。アプリをダウンロードしたり、特別なハードウェアを購入したりする必要はありません。 Android デバイスでも iOS デバイスでも、ほぼすべてのまともなスマートフォンで動作するはずです。
高速で信頼性の高いインターネット接続は、インタラクションの種類に応じて優れた WebAR エクスペリエンスを提供するのに役立ちます。そのため、VR や AR と比較して最もアクセスしやすいテクノロジーになります。
コンセプトは同じですが、Google などの一部の企業はこれを「WebXR」と呼んでいます。これにより、Chrome などのブラウザがブラウザを通じて没入型の AR および VR 体験を提供できるようになります。
WebAR テクノロジーの仕組み

名前が示すように、これは Web ベースのテクノロジーです。 Web ページの操作を開始すると、Web ページの背後ですべての魔法が起こります。
ただし、それを機能させるには、いくつかの要件があります。必需品には次のようなものがあります。
- ジャイロスコープ加速度計
- カメラセンサー
コンピューター ビジョンと組み合わせることで、Web ベースの AR が可能になります。
ほとんどのユーザーは、要件を満たすスマートフォンを持っています。しかし、Web ページの裏側では何が起こっているのでしょうか?
簡単に言うと次のようなことが起こります。
1. Web 上の AR エクスペリエンスとのインタラクションを開始するには、トリガーが必要です。 WebAR では、カードやポスターなどにある Web リンクまたは QR コードが使用されます。
2 .カメラ ストリーム アクセスは、仮想世界と現実世界が出会い、同期する場所で機能します。これは、Web ページをロードした後にカメラ フィードへのアクセスを許可するときです。
3 .ユーザーがカメラ ストリームを開始すると、Web ページ内の 3D シーンがアクティブになり、カメラの位置と同期するはずです。
この 3D 環境には AR 要素が含まれています。
4 .次のプロセスには、カメラからの現実世界の画像と正しくブレンドするために必要な位置/角度を追跡する方向付けが含まれます。技術的には、これは「6 自由度 (6DoF)」と呼ばれ、WebAR が画像上のオブジェクトを追跡し、その上に AR 要素を配置/レンダリングできるようになります。
5 .最後に、Web ページとのインタラクションに基づいて、現実世界のビュー上に AR 要素を描画するシーンがレンダリングされます。これらは、クラウドベースのコンテンツ管理システムまたは AR Cloud によって処理/保存されます。
全体として、多くの機能は HTML Web ページの背後で実行されます。繰り返しますが、エンドユーザーはすべてを心配する必要はありません。

開発者の場合は、Web ブラウザーでアクセスする WebAR アプリケーションを構築するために使用する API またはフレームワークのドキュメントを参照する必要があります。
たとえば、Google の ARCore ドキュメントは出発点として最適であり、以下を含む Web ベースの AR エクスペリエンスの作成について学びます。
- デバッグ
- デバイスのカメラを使用する
- テスト
- AR要素のレンダリング
- 配置
- 深さ
- 雷の推定
- 顔/画像/クラウドアンカー
これらの概念に慣れていない場合は、拡張現実と仮想現実の違いを学ぶとよいでしょう。
WebAR とアプリベースの AR
WebAR とアプリベースの AR (またはネイティブ AR) の明らかな違いは、その可用性またはアクセシビリティです。
WebAR は、追加のソフトウェアを必要とせずに、Web ブラウザから直接動作します。ただし、ブラウザが WebAR エクスペリエンスをサポートしていることを確認する必要があります。これについては、この記事の後のセクションで説明します。
これに対し、アプリベースの AR は App Store または Play ストアからインストールする必要があります。
それに加えて、その他の違いとしては次のようなものがあります。
ウェブAR | アプリベースのAR |
機能制限による最小限のコンテンツ | より多くの機能によりリッチコンテンツの実装が可能 |
導入や学習がより迅速に | 導入には長い時間がかかり、より多くの学習曲線が必要です |
簡単にアクセスできる | アプリの可用性によって異なります |
WebAR エクスペリエンスはどのように作成されるのか?

WebAR エクスペリエンスの構築に役立つさまざまなプラットフォーム、API、フレームワークがあります。
簡単な方法を提供するコード不要のクラウド プラットフォームが見つかるかもしれません。また、Google または Apple の公式ドキュメントを調べて、スマートフォンのブラウザと互換性のある WebAR アプリケーションの作成を開始することもできます。
WebAR エクスペリエンスを作成する開発プロセスがどのようなものかを理解するために、いくつかのヒントを次に示します。
#1. ターゲットブラウザとユースケースの選択
WebAR エクスペリエンスの作成を開始する前に、対象となるユーザーの種類、ユーザーが使用する可能性のある Web ブラウザー、およびそれを使って何をしたいかを評価する必要があります。
たとえば、人々をマーケティング キャンペーンに簡単にリダイレクトしたい場合は、あらゆる種類のブラウザのサポートと、ほとんどの人にとって簡単にアクセスできるものを考慮する必要があります。
逆に、特定のユーザー セット (大画面タブレット ユーザーなど、特定の種類のデバイスを使用) に豊かなエクスペリエンスを提供したい場合は、それに応じて AR 要素を選択できます。
#2. フレームワークまたはプラットフォームの選択
上でも述べたように、開発要件の容易さに応じて、さまざまなオプションを選択して開発を進めることができます。
たとえば、ブラウザでサポートされているフレームワークに従い、指示に従って作成する最初からビルドする方法を選択できます。 AR.js や JSARToolKit などのオープンソース WebAR フレームワークは、使いやすいオプションとなるはずです。
または、 XR+ などのノーコード プラットフォームを選択して開始することもできます。さまざまなプラットフォームが独自の機能を提供します。したがって、最初に選択肢を検討してみるとよいでしょう。
全部やってくれれば、それほど費用はかからないかもしれません。ただし、プラットフォームを選択する場合は、要件を満たすためにそのプレミアム プランを選択する必要があります。
#3. 追加ツールをスキャンする
何をしたいかに応じて、WebAR エクスペリエンスにエフェクトやその他のさまざまなものを追加するための特殊なツールを試すことができます。
たとえば、優れた顔追跡機能として Banuba の WebAR SDK を 使用すると、没入型の製品試着エクスペリエンスを提供できます。
#4. アセットの作成
選択したプラットフォームでは、この組み込みがすでに提供されている場合があります。ただし、WebAR エクスペリエンスに独自の 3D アセットを追加したい場合は、それも行うことができます。
X3dom は、 AR アプリケーション用の 3D オブジェクトの作成を始めるのに最適な場所です。
#5. 最適化する
すべてをまとめるときは、高速インターネット アクセスがなくても、ほとんどのユーザーがアクセスできるように最大限に最適化されていることを確認する必要があります。
最適化が多すぎると思われる場合は、アセットを選択するか、エクスペリエンスを簡素化することができます。
#6. テストと配布
準備ができたら、必ずテストして体験を直接確認する必要があります。さまざまなデバイスやネットワーク条件を使用する可能性があります。
次に、使用しているプラットフォームを使用して配布を続けることができます。または、カスタム Web ページを作成し、サーバー上でホストしてエクスペリエンスを共有することによって、自分で行うこともできます。
人気の WebAR フレームワーク
Web ベースの拡張現実エクスペリエンスの作成に役立つ、人気のある WebAR フレームワークをいくつか紹介します。
#1. 畏怖の念
AWE は、 Web ベースの拡張現実エクスペリエンスを簡単に作成できるノーコード プラットフォームです。いくつかの技術的な知識がある場合は、JavaScript と CSS を使用して機能を拡張できます。
アプリを作成し、Web ブラウザーでリンクを開くだけです。それはとても簡単です。
さらに、分析を追跡してアプリのパフォーマンスを監視できるようになります。
#2. ARツールキットX
ARToolKit は、マルチプラットフォームの拡張現実の構築に役立つオープンソース プロジェクトです。 iOS、Android、macOS、Windows、Linux をサポートします。
ソフトウェア開発キット (SDK) を使用したい場合は、その GitHub ページ にアクセスして、その提供内容を調べてください。
#3. ヴフォリア

Vuforia は 、さまざまなユースケース向けの AR ソリューションを提供するエンタープライズ中心の企業であり、これには WebAR も含まれます。
すべての人に当てはまるわけではないかもしれません。ただし、企業向けのスケーラブルなソリューションを探している場合は、検討してみるとよいでしょう。
#4. WebXR
WebXR は 、互換性のある Web ブラウザで VR および AR へのアクセスを提供する Google のソリューションです。 ARCore を使用して、Android のデフォルトの Google Chrome ブラウザーで AR エクスペリエンスを強化します。
これは、Samsung が Galaxy スマートフォンで没入型エクスペリエンスを提供するために使用する計画の中核部分でもあります。
#5. ARKit と AR クイックルック
Apple のソリューションである ARKit は 、iOS デバイスのカメラとその機能を統合して AR エクスペリエンスを生み出すのに役立ちます。
これはアプリに適しているかもしれません。ただし、ブラウザに拡張現実を追加できる AR Quick Look ドキュメント と併せて参照するとよいでしょう。
WebAR を実行するためにサポートされているブラウザ

WebAR エクスペリエンスのサポートは、その構築に何が使用されたかによって異なります。ただし、Google Chrome (Android/iOS の場合) や Safari (iOS の場合) などのデフォルトの Web ブラウザを使用する場合は問題ありません。
機能することが知られている他の一般的なオプションは次のとおりです。
- Firefox
- マイクロソフトエッジ
- サムスンインターネット
理論的には、モバイル ブラウザでもデスクトップ ブラウザでも、どの Web ブラウザでも試すことができます。
ただし、すべてのツールで一貫したエクスペリエンスが得られるわけではありません。したがって、1 つのブラウザーで障害が発生した場合は、他のオプションを試してみることをお勧めします。
WebARのメリット

WebAR は、ファッション、ジュエリー、時計、家具、観光、エンターテイメントなどの業界のさまざまなユースケースやカテゴリで人気があります。人気の理由はその特典にあります。
利点は次のとおりです。
- WebAR エクスペリエンスのデプロイは非常に高速です。
- WebAR ページは、アプリベースの AR に比べて簡単に構築できます。
- WebAR は、製品ベースの企業がマーケティング目的で使用できる手頃な価格です。
- WebAR は、ほとんどの人が既に WebAR に対応したスマートフォンを持っているため、当然アクセスできます。
- さまざまなブラウザと簡単に互換性があります。
- コーディングの知識がなくても WebAR エクスペリエンスを作成できます。
WebAR の課題

WebAR には多くの利点がありますが、いくつかの欠点もあり、そのためテクノロジーを使用できない人もいるかもしれません。
主な課題は次のとおりです。
- WebAR エクスペリエンスにはリッチ コンテンツは含まれません。通常は単純です。
- WebAR テクノロジーのパフォーマンスは、ネイティブ/アプリベースの AR と比較してその動作方法により劣ります。
- WebAR エクスペリエンスはブラウザー間で一貫していないため、たとえ導入がより速くて簡単であっても、検討することが困難になります。
たとえその課題が風変わりに聞こえるとしても、WebAR はマーケティングやその他の応用分野で非常にうまくいっている。
学習リソース
先ほど述べたように、WebAR はエンドユーザーにとってシンプルで効果的なエクスペリエンスです。ただし、ノーコード プラットフォームの助けを借りずにゼロから何かを作成する場合は、それを実現するための技術的な知識が必要です。
Udemy は、それに関連するコースに関して堅実な取引を提供しています。これについて詳しく調べるのに最適なコースは次のとおりです。
#1. Web AR開発入門

この高評価の Udemy コースには、WebXR、mindAR、および Web AR アプリケーションの構築に必要なその他のテクノロジーに関する洞察が含まれています。
学ぶだけでなく、実践的な経験も得て、自分で始めるためのポートフォリオを構築することもできます。
#2. ウェブ上の拡張現実の紹介

Udemy のこのコースは、WebXR と Three.js に焦点を当てています。基本を正しく理解したい、最小限のものを構築したい場合は、このコースを選択できます。
まとめ
WebAR は爆発的ですが、限界があります。拡張現実の進歩が続くにつれて、最終的にはあらゆる種類の AR 体験が進化します。
スマートフォン メーカーが徐々にこれまで以上に受け入れ、推進し始めていることを考えると、WebAR がすぐになくなるわけではありません。
拡張インテリジェンスと拡張分析を検討することもできます。