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

デモ

今回は冒頭の写真のように3D モデルを利用したデモです。一番やっかいなのは3D モデルで、単純に表示するだ
けなら、以下の2つのライブラリを読み込み、簡単なHTMLとhttps通信可能なサーバーがあれば実現できます。
AR.js/README.md at master · jeromeetienne/AR.js · GitHub
A-Frame – Make WebVR
3D モデルはGoogle Polyでも探せます。
https://poly.google.com
動作環境はiOS の11以上のSafariもしくはChrome、Android4.4.2.以上のChromeです。

手順
  1. 動作環境を満たすスマートフォンのブラウザでhttps://sm1021.skr.u-ryukyu.ac.jp/ar/index.htmlにアクセス。以下のQRコードからでも。

f:id:otani0083:20181204225952p:plain

  1. ブラウザで開くとカメラへのアクセスが求められるので許可
  2. 以下のマーカーへカメラをかざす

f:id:otani0083:20181204230010p:plain

冒頭のような3Dモデルが表示されるはずです。
ソースコードは本当に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


図書館では、ゲームのギミックや島根大学附属図書館さんのように展示に使えそうですね。
3Dモデルさえ準備できれば簡単なのでお試しください。

参考URL
あのARをブラウザで体験できる!「AR.js」で遊んでみた | 東京上野のWeb制作会社LIG

qiita.com

簡単に無料でつくれるWebARアプリ - Qiita

*1:引用元挿入機能がChromeでもつかえて便利ですね。2009年にはAR収録されていたのですね。