Web AR事始め
最近、Web AR（Augmented Reality）を使って遊んでいるので紹介を。
写真は上司が作成した某大学附属図書館の非公式キャラクターです。右側は同僚が作ってくれたモデルです。
ARとはJapan Knowledge収録のイミダスによると*1
カメラを通して見る現実の風景や建物などの映像に、リアルタイムで文字やイラストなどのデジタル情報を重ね合わせる技術。コンピューターなどの仮想空間で現実を再現するバーチャル・リアリティー（VR 仮想現実）に対して、情報を補足して現実を強化するという意味で「拡張現実」と呼ばれる。例えば、カメラでレストランを撮影すると、その映像に店名やメニューなどを重ねて映すことなどが可能。
"AR（拡張現実）[イミダス編 科学]", 情報・知識 imidas 2018, JapanKnowledge, https://japanknowledge.com , (参照 2018-11-28)
切っ掛けは島根大学附属図書館さんの取り組みからです。
www.asahi.com
www.facebook.com
このニュースが職場で話題になったとき、私はてっきりARの実装には専用アプリが必要と思っていたのですが、Web ARだとそれなりに最近のOSがインストールされたスマートフォンやタブレットからブラウザ経由で実現できることを知りました。（これも上司からの情報）
平面画像ならジェネレータ作成されている方もいます。画像に動きをつけたり、クリックした場合の動作なども設定できるみたいです。
WebARジェネレータ
web-ar-generator.firebaseapp.com
デモ
今回は冒頭の写真のように３D モデルを利用したデモです。一番やっかいなのは３D モデルで、単純に表示するだ
けなら、以下の２つのライブラリを読み込み、簡単なHTMLとhttps通信可能なサーバーがあれば実現できます。
AR.js/README.md at master · jeromeetienne/AR.js · GitHub
A-Frame – Make WebVR
３D モデルはGoogle Polyでも探せます。
Poly
動作環境はiOS の１１以上のSafariもしくはChrome、Android4.4.2.以上のChromeです。
手順
- 動作環境を満たすスマートフォンのブラウザでhttps://sm1021.skr.u-ryukyu.ac.jp/ar/index.htmlにアクセス。以下のQRコードからでも。
- ブラウザで開くとカメラへのアクセスが求められるので許可
- 以下のマーカーへカメラをかざす
冒頭のような３Dモデルが表示されるはずです。
ソースコードは本当にhtmlを記述するだけです。音を出したりとか、動きを出すにはプログラミングが必要ですが。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script> <title>WebARテスト</title> </head> <body style='margin : 0px; overflow: hidden; font-family: Monospace;'> <a-scene stats embedded arjs='debugUIEnabled: false; sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'> <a-assets> <a-asset-item id="kijimun" src="https://sm1021.skr.u-ryukyu.ac.jp/ar/3d/model/kijimun3a.glb"></a-asset-item> </a-assets> <a-marker preset="custom" type="pattern" url="https://sm1021.skr.u-ryukyu.ac.jp/ar/3d/marker/pattern-marker.patt"> <a-entity gltf-model="#kijimun" animation-mixer position="0 0 0" rotation="0 120 0" scale="1.5 1.5 1.5" visible="true" soundhandler> </a-entity> </a-marker> <a-camera-static /> </a-scene> </body> </html>
手順3.で利用した画像は以下のサービスを使って作成できます。
AR.js Marker Training
図書館では、ゲームのギミックや島根大学附属図書館さんのように展示に使えそうですね。
３Dモデルさえ準備できれば簡単なのでお試しください。
