こんにちは。ソフトウェアエンジニアの大和田です！
またまたARの技術調査ですが、といっても今回はただのARじゃありません…！
今回のテーマは「WebAR」です！！
弊社でもAR開発のお問い合わせをよくいただくのですが、最近増えてきているのが
「アプリインストール無しでARを体験したい」
というものです。
特にイベント利用などでの一時的なAR体験や、ECサイトなどARがメインコンテンツではないものなど…
このようなケースでわざわざストアからアプリをインストールしてもらうのはユーザーからすると手軽さに欠けるところがあるんですね…
そして最近注目が集まっているのが、アプリ無しでブラウザからAR体験ができる「WebAR」です。
この技術自体は比較的前から存在しているのですが、センサーやOS独自の処理を利用したネイティブARに比べてできることは少なく、せいぜい白黒マーカーに3Dモデルを１つ表示する…ぐらいのイメージしかありませんでした。
しかし、最近はWebARの技術やライブラリも進歩し、画像認識や空間検知を使った今までできなかったハイクオリティなAR体験がWebARでも実現できるようになってきています。
そこで今回、最新ARSDKを使用した開発デモをいくつか作成してみました！
そもそもWebAR技術がどういったものか？というWebARの技術解説も踏まえつつ、AR技術の開発依頼をお考えの方にも参考にしていただけるような内容で紹介していきたいと思います！
もくじ
WebARとは？〜概説と動く仕組みを解説〜
そもそもWebARって何？という方のためのお話から…
WebARとは、Webブラウザ上で動作するARコンテンツ です！
通常のARアプリ開発は ARKitやARCoreなどの専用SDKが必要で、Unity等のゲームエンジンやSwift, Kotlin, Javaなどによるコーディングで専用アプリを開発し、ユーザーにアプリをインストールしていただくことで初めて体験できるコンテンツでした。
ARコンテンツを体験していただくためにStoreからアプリをインストール、という一手間が必要だったわけですね。
対してWebARは、ホームページ等を提供しているサーバー上にJavaScriptコードを実装しておき、アクセスしてきたユーザーのブラウザアプリ内でこのJavaScriptを実行することでARコンテンツを提供します。
つまり従来のARアプリと異なり、AR体験するための専用アプリが必要ありません！
iOS SafariやGoogle Chromeなど、普段インターネット検索に使うブラウザアプリだけでARコンテンツを体験することができます。
QRコードからアクセスしていただいたり、ホームページに埋め込んだりすることで、通常のARアプリより手軽に体験していただくことが可能です！
AR技術の種類について
一口にAR、といっても実はいくつか種類があり、用途によって最適なものが違ってきます。
一番大きな方式の分類としては以下の2種に分類できます。
・ロケーションベース方式（GPSの位置情報をもとに情報やオブジェクトを表示）
ARというと一般的にはビジョンベース方式のものを指すことが多いようです。
ビジョンベース方式にはさらにマーカー型（白黒の固定画像）やマーカーレス型（画像認識や空間認識など）といった分類もあります。
現在のWebARではこれら全てのタイプのARに対応可能なのですが、今回はお問い合わせでもご相談いただくことが多いビジョンベース方式について、最新のWebAR技術で実際に開発したデモアプリを紹介していきたいと思います！
最新WebAR開発SDKの紹介
国内で今回事例として紹介するようなタイプのWebARを取り扱うサービスを調べてみたところ、ModelViewer(OS標準機能)、8thWall(有償WebAR SDK)などを使用しているケースが多いようです。
特に8thWallは実装できる機能が非常に多く、ハイクオリティなものを開発できるSDKとして国内でも有名なのですが、ライセンス料金が高額なため開発費が上がりやすく、なかなか導入に踏み切れるケースは少ないです。
そこで今回目をつけたのは同様の機能性を持ちながら比較的低コストで導入が可能な「zapworks Universal AR SDK」という最新WebAR SDKです。
画像認識、平面認識、顔認識といったビジョンベース方式のハイクオリティなARコンテンツを開発することができますが、昨年リリースされたばかりで国内での利用事例はまだほとんどありません。
WebARでは３次元情報を扱うため、Webアプリ開発時に専用ライブラリが必要となるのですが、A-Frame、Three.js、Babylon.js、React+Three.js、UnityWebGL、PlayCanvasと多くのライブラリや開発環境に対応しています。
特に空間認識が可能なものでUnityWebGLに対応しているWebAR SDKは現状zapworksのみのようです。
（モバイル端末でのWebGL実行は非推奨のため実験的な試みにはなるのですが、従来の3Dライブラリでは実現が難しかった3D表現をUnityで手軽に実装できるため、WebARの最新SDKとしては非常に強力です）
これから実際のWebAR開発デモを紹介していきますが、OS標準搭載機能を利用したModel Viewer以外は全てzapworksで開発したものです。
最新のWebARで一体どこまでのことができるのか？
WebARの最新テクノロジーを利用したデモをご紹介します！
WebAR実例紹介〜画像認識AR〜
まずは平面画像を利用したARの実例です！
画像認識のARというとマーカー型と呼ばれる白黒の味気ない画像のイメージが強いですが、最近の画像認識ARは写真やポスターなどもターゲットとして設定することができ、既存の展示物やサービスにARを導入しやすくなりました。
今回はビジネスで利用できそうなデモを２つほどWebARで作ってみました。
こちらは軽量化重視でReact+Three.js+TypeScriptにより実装したものになります。
AR名刺
カメラに名刺を映すと、実際には描かれていないはずの文字やボタンが！
画面上でそのボタンをタップすれば登録しているURLにそのままジャンプするようになっているので、自社ホームページに誘導したりSNSに繋げたりすることができます。
ブラウザ上で動作しているので、他のWebサービスにシームレスに繋げる、というのはWebARの大きな特徴です。
裏面にQRコード等を印字しておけばすぐに体験が可能ですね〜
ポスターAR
イベントや展示会場でも使えそうなこちらの事例。
ポスターにカメラを向けると動画がAR表示されるというものです。
動画以外にも静止画や文字、3Dモデルを表示することも可能です！
手近にあったポスターでデモを作ってみましたが、絵画や新聞などもターゲット画像として認識できます。
紙面内の写真が動く新聞や、絵画の中身が動き出す…など、色々活用できそうですね〜！
WebAR実例紹介〜空間認識AR〜
続いては画像などの特定ターゲットを使わず、カメラ映像から地面などの空間をリアルタイムに認識して3Dコンテンツを表示するWebARの実装事例です。
以前のWebARではほぼ実現できなかったことなのですが、OSの標準搭載機能やzapworksによるUnityWebGLを利用することで、ネイティブAR並のクオリティの高いAR体験ができるようになってきています。
家具シミュレーション（ModelViewer）
こちらはOS標準搭載機能（AndroidではModelViewer, iOSではAR Quick Lookという名称で提供)を利用した3Dモデルビューワーです。
国内のサービスでマーカーレスWebARを提供している、というケースは基本的にこの機能を使っていることが多いため、既にこの画面を見たことがある人も多いかもしれませんね。
登録されている3Dモデルを表示するだけ、という非常にシンプルなもので、AR表示中のUI操作などのカスタマイズはほぼできないのですが、有償SDKが不要な分開発コストは非常に低く抑えることができます。
動画内で使用しているiPhone12 ProのようにLiDARセンサーを搭載した端末を使用すると手や障害物との前後関係も自動で計算して描画されるため、よりリアルな存在感を体験することができるようになりました。
”3Dモデルをその場にあるかのように表示する”ことに特化したものであるため、インテリアや雑貨、家具などを扱うECサイトに組み込む、といった用途が活用しやすそうです。
アクアリウムAR
こちらはUnityWebGLでの開発例です。
これまでWebアプリでは扱えなかったパーティクル（泡やエフェクト）やシェーダーアニメーション（環境植物が発光、明滅する）なども使えるということで、現状の技術でどこまでできるか？という実験的なものです。
ネイティブと同様の開発方法なので演出面でハイクオリティなものも実現できるようになりました。
ただしここまでの描画クオリティでストレスなく動かそうとすると、iPhone12 Proのような高スペック端末が必要になってくるようです。
（Pixcel3などでも試してみましたがFPSがかなり低下する印象でした。）
AR的当て
こちらもUnityWebGLでの開発事例です。
オブジェクト生成（発射時に新たな矢のモデルを出現させる）や物理衝突（的に矢が刺さる）などの実現ができるか、ということで実装してみたものですが、こちらも基本的なUnityの機能を使ってシンプルに実装することができました。
流石にセンサーを利用するようなネイティブARには精度面で劣る部分がありますが、WebARでこんなこともできる！という最新技術を体験することができました。
WebARの推奨利用ケース〜ネイティブARとの比較〜
ARに限らずWebアプリ全般に言える特徴なのですが、例えば以下のようなメリットがあります。
・内容変更等の際、アプリ更新が必要ないため、メンテナンス性が良い。
・既存Webサービスとシームレスに連携することができ、ビジネスに繋げやすい。
・基本的にクロスプラットフォーム対応なので、OS問わず利用してもらいやすい。
一方で以下のような欠点もあります。
・アプリ開発のほかに、サーバー契約（場合によってはサーバー保守）が必要になる。
・ハンドトラッキング操作などの非常に高度な機能はまだ実現できない。
これらを踏まえつつ、WebAR、ネイティブARそれぞれに向いている利用ケースを考えてみました！
（あくまで想定される一例で、詳しい利用ケースによっては違うものをご提案させていただくこともあります）
・美術館や博物館の展示パネルをターゲットにして動画をAR表示させたい
・インテリア小物を販売するECサイトで実寸大の3DモデルをAR表示させたい
・小規模なイベントスペースでその場でしか体験できないちょっとした3D演出を体験してもらいたい
・ライブ会場のような大規模なイベントで本格的なAR演出を取り入れたい
・カーテンやタイヤホイールなど、現実の物体に重ね合わせて高精度なARシミュレーションを実現したい
・学校の貸し出し端末で利用できる教育向けARコンテンツを作りたい
AR技術の導入をお考えの方はぜひ参考にしてみてください！
まとめ
最新SDKを利用したデモ開発事例をもとに、WebARとはどういったものなのか？どんなことができるのか？といった”WebARの今”を紹介してきました。
弊社では他にも様々な最新技術を駆使したXR開発を行っています。
実現させたい内容に合わせて最適な方法をご提案いたしますので、ARコンテンツにご興味をお持ちの方、AR技術の導入をお考えの方はぜひ弊社にご相談下さい！
▼ネクストシステムの開発事例はこちら
