最近のAR技術調査

# 概要
ARについての調査結果&知見をまとめていきます。

## ARとは
**AR**(拡張現実)とは、現実世界に3Dモデルなど仮想のオブジェクトを重ね合わせたもののことを指します。
他にも似たようなものに**VR**(仮想現実),**MR**(複合現実),**SR**(代替現実)などがあり、全て合わせて**XR**と呼ばれたりします。
参考：[VR・AR・MR・SRの違いとは？それぞれの活用方法を紹介 - エレコム](https://www.elecom.co.jp/pickup/column/vr_column/00003/)

## ARの種類①
ARには、主に**ビジョンベース型**と**ロケーションベース型**の2つの方法があります。
さらに、ビジョンベース型は、**マーカー型**と**マーカーレス型**があります。

- **ビジョンベース型**：カメラを通した画像で空間を特定し、仮想の物体を表示する。
   - **マーカー型**：特定の図形をカメラで認識させる方法。
   - **マーカーレス型**：カメラに映る平面などを認識する方法。
- **ロケーションベース型**：GPSで位置情報を取得することで空間を特定し、仮想の物体を表示する。

参考：[【誰でも分かる】AR(拡張現実)の仕組み・技術 | TECH::NOTE](https://tech-camp.in/note/technology/18791/#AR-2)

## ARの種類②
ARは大別すると、**モバイルAR**と**WebAR**があります。
ARは技術的に**デバイスやブラウザなどへの依存**が大きいため、特定のデバイスに特化したフレームワークで開発されることになります。

- **モバイルAR** : iOSアプリ、Androidアプリで動くAR
- **WebAR** : Webアプリで動くAR

今回は、**WebAR**について取り上げます。

## WebAR
**WebAR**とは、WebアプリでARを利用できるようにした技術のことです。
モバイルアプリの場合はユーザが使い始めるためにアプリをダウンロードしなければなりませんが、ブラウザ上で動くWebアプリであれば、手軽にVRを楽しむことができます。
欠点としては、どうしてもARはデバイスやブラウザに依るところが大きいため、モバイルよりWebのフレームワークの発達が遅く、機能が制限されがちです。

## フレームワーク
WebARのフレームワークについて調査したところ、以下のようなものがありました。

| フレームワーク | 種類 | 対応デバイス/ブラウザ | 備考 | メーカー |
|:---:|:---:|:---:|:---:|:---:|:---:|
| [A-Frame](https://aframe.io/) | ビジョンベース/マーカー型 | ブラウザ |  | Mozilla |
| [ARkit](https://developer.apple.com/jp/augmented-reality/arkit/) | ビジョンベース/マーカーレス型 | iOSブラウザ(safari)対応 |  | Apple |
| [ARcore](https://developers.google.com/ar/?hl=ja) | ビジョンベース/マーカーレス型 | Androidブラウザ(chrome)対応 |  | Google |
| [8th Wall Web](https://www.8thwall.com/) |  ビジョンベース/マーカーレス型 | iOS/Android/ブラウザ対応 | 1000view/月までのローカル開発は無料 | 8th Wall |

#### [A-Frame](https://aframe.io/)
2019年時点では**A-Frame**+[AR.js](https://github.com/jeromeetienne/AR.js)の記事が多く、主流であるようです。
A-Frameはビジョンベース型でマーカー型のフレームワークで、手軽に試すことができます。
参考：[WebARでVroid(3Dモデル)を出現させてみる](https://qiita.com/mgmgOmO/items/352b7e07782023487e9f)

#### [ARkit](https://developer.apple.com/jp/augmented-reality/arkit/)/[ARcore](https://developers.google.com/ar/?hl=ja)
**ARkit**はiOSアプリ専用、**ARcore**はAndroidアプリ専用のフレームワークでしたが、最近になってWebARに対応してきたようです。
ただ、新しい技術のためかあまり情報がありません。
参考：[ChromeとARCoreでのWebARを試してみた - tks_yoshinagaの日記](http://tks-yoshinaga.hatenablog.com/entry/webar_arcore)
[ブラウザから簡単にAR体験を！ARkit2を利用したWebAR](https://alaki.co.jp/blog/?p=2967)

####  [8th Wall Web](https://www.8thwall.com/)
**8th Wall Web**はフレームワークというよりプラットフォームに近い感じで、有償のものです。
その分、対応デバイスが多かったり、実装が簡単に行えることが利点として挙げられます。
参考：[8thWallWebで始めるWebAR - Speaker Deck](https://speakerdeck.com/sgidon/webar-getting-started-with-8th-wall-web)


## 補足１：ブラウザ上で気軽に使える新しい3D規格の登場
嬉しい知らせで、iOS12において**[USDZ](https://developer.apple.com/jp/augmented-reality/quick-look/)**という新しいファイル規格が作られ、アプリを作ることなく簡単に3Dオブジェクトが表示できるようになったそうです。

参考：[ARKit 2.0 でAR経験を共有できるようになりました。あと、アプリを実装しなくてもARできます。 - Toyship.org](https://www.toyship.org/2018/06/05/193435)

この辺もまだあまりチュートリアル系の記事がないので、英語の公式ドキュメントをがっつり見ながらきっと @macbook さんが実現してくれることでしょう。。期待してます！

## 補足２：ロケーションベース型WebARについて
~~ロケーションベース型で作るWebARの事例が全く見つからず、そのようなフレームワークが発達してない印象です。
作るとしたらモバイルアプリで開発するのが良いと思います。~~

**追記**
AR.jsのv2.0.0にて、ロケーションベースの機能が追加されたそうです。
[Location Based (GPS) Augmented Reality on the Web - Chialab Open Source - Medium](https://medium.com/chialab-open-source/location-based-gps-augmented-reality-on-the-web-7a540c515b3c)

# 最後に
記事に間違いや不明な点があれば遠慮なくご指摘ください。
編集リクエストも大歓迎です！

追記：掲載ありがとうございます！
[【Programming News】Qiitaまとめ記事 Weekly August 2nd week, 2019 Vol.4 - Qiita](https://qiita.com/promari/items/a6699c0420da9e741513#_reference-13f69a97804897463d05)