WebARはじめてみませんか？〜第5回 8th Wall Webの画像認識機能の使い方〜

2019年4月26日

こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。

※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1

前回は決められたマーカーではなく、完全オリジナルのマーカーを作成して、認識させる技術をどう実装するかをご紹介しました。

WebARはじめてみませんか？〜第4回 tracking.jsで完全オリジナルのマーカーを実現 / 画像認識編〜

その記事を公開して数日後の2019年4月17日、なんと8th Wall Webが画像認識に対応したとのニュースが発表されました！

8th Wall Web登場以前は、iOS12以降に実装されたARの「クイックビュー」、決められた規定の中で作成したマークを読み取る「マーカー型AR」の2種類が主流だったWebAR。
画像認識機能の発表により、WebARの可能性が大きく広がったと感じています。

今日は、最新の技術であるWebARの画像認識機能を実際に利用するための方法をご説明します。

今日の記事を最後まで学ぶと、こんなものが作れるようになります。

サンプルコードのダウンロード

まずはサンプルコードをダウンロードしましょう。
GitHubから8th Wall Webのデータを落としてきます。

https://github.com/8thwall/web

サンプルコードは以下の場所に用意されています。
/examples/aframe/

今回は「flyer」というフォルダに入ったサンプルコードを使用します。
その中に「flyer.jpg」というファイルを開いてみましょう。

この画像の左上のクラゲの絵から3Dオブジェクトが、右下からは動画が再生されるようなサンプルコードが提供されています。

ソースコードの確認

次に、index.htmlを開いて実際のソースコードをみてみましょう。

<!doctype html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>8th Wall Web: Flyer</title>

  <script src="//cdn.8thwall.com/web/aframe/8frame-0.9.0.min.js"></script>

  <!-- XR Extras - provides utilities like load screen, almost there, and error handling.
         See github.com/8thwall/web/xrextras -->
  <script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>

  <!-- 8thWall Web - Replace the app key here with your own app key -->
  <script src="//apps.8thwall.com/xrweb?appKey=XXXXXXXXX"></script>

</head>

<body>

  <a-scene
    xrweb="disableWorldTracking: true"
    xrextras-gesture-detector
    xrextras-almost-there
    xrextras-loading
    xrextras-runtime-error>

    <a-assets>
      <!-- Credit to Poly by Google for the model: https://poly.google.com/view/dA5osnS0Rzj -->
      <a-asset-item id="jelly-glb" src="jellyfish-model.glb"></a-asset-item>
      <img id="jelly-thumb" src="targets/video-target.jpg">
      <video
        id="jelly-video"
        autoplay
        muted
        crossorigin="anonymous"
        loop="true"
        src="jellyfish-video.mp4">
      </video>
    </a-assets>

    <a-camera
      position="0 4 10"
      raycaster="objects: .cantap"
      cursor="fuse: false; rayOrigin: mouse;">
    </a-camera>

    <a-light type="directional" intensity="0.5" position="1 1 1"></a-light>

    <a-light type="ambient" intensity="1"></a-light>

    <a-entity
      xrextras-named-image-target="name: video-target"
      xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
      geometry="primitive: plane; height: 1; width: 0.79;">
    </a-entity>

    <a-entity xrextras-named-image-target="name: model-target">
      <!-- Add a child entity that can be rotated independently of the image target. -->
      <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
    </a-entity>

  </a-scene>

</body>
</html>

細かいところをみていきます。

まずは表示させるオブジェクトを、<a-assets>の中に記述します。

<a-assets>
 <!-- Credit to Poly by Google for the model: https://poly.google.com/view/dA5osnS0Rzj -->
 <a-asset-item id="jelly-glb" src="jellyfish-model.glb"></a-asset-item>
 <img id="jelly-thumb" src="targets/video-target.jpg">
 <video
 id="jelly-video"
 autoplay
 muted
 crossorigin="anonymous"
 loop="true"
 src="jellyfish-video.mp4">
 </video>
</a-assets>

上からクラゲの3Dオブジェクト、クラゲの動画のサムネイル、動画の本体の3つを記述しています。

表示させるオブジェクトを用意したら、認識する画像と紐づける作業をします。

<a-entity
 xrextras-named-image-target="name: video-target"
 xrextras-play-video="video: #jelly-video; thumb: #jelly-thumb; canstop: true"
 geometry="primitive: plane; height: 1; width: 0.79;">
</a-entity>
<a-entity xrextras-named-image-target="name: model-target">
 <!-- Add a child entity that can be rotated independently of the image target. -->
 <a-entity xrextras-one-finger-rotate gltf-model="#jelly-glb"></a-entity>
</a-entity>

ここで注目したいのは、「xrextras-named-image-target」という属性です。
この属性で、対応する画像を変数で指定します。

肝心の認識する画像は、ソースコード内に置くのではなく、8th Wall Webの管理画面上で管理します。