8th Wall Web新機能「Curved Image Targets（曲面画像認識）」を試してみる

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay10です！

昨日は「屋外でのxRアトラクション事例『~XR Wonder Park~』」という記事でした！

屋外でのxRアトラクション事例「~XR Wonder Park~」

本記事では8th Wall Webの新機能 「Curved Image Targets」を使ってWebARを作ってみようと思います。

8th Wallとは

8th Wallは、8th Wall社が提供するクロスプラットフォームの開発ライブラリで、
ネイティブアプリARとWebARを開発することができます。

8th Wall Web入門！【これからはじめるWebAR】

今回はWebARを実現する 8th Wall Webにフォーカスして紹介していきます。
8th Wall WebではこのようなARが実現可能です。（2020年12月時点）

6DoFFace TrackingImage TrackingCurved Image Targets

今回は一番下に挙げたCurved Image Targets（曲面画像認識）を試してみようと思います。

Curved Image Targetsについて

では、Curved Image Targetsとはどのようなものか？
8thwallがこの機能をリリースした際の動画を見るとお分かりいただけます。

ドリンクカップやワインの瓶の湾曲に沿ってARマーカーが付けられており、
その湾曲面と現実の整合性が合うようにARオブジェクトが表示されます。

シンプルに考えれば、以下のような、画像をARマーカーとしたImage Trackingではあるのですが

画像引用 AR.js medium

曲面の表現が一体どのようになっているのかは未知…！
ということで今回は実際に触っていき、どのように曲面の表現を実現しているのか見ていきたいと思います。

実際に試してみる

1. 8thwall登録

8thwallの利用が初めての人は登録しましょう。
※初回14日間無料、その後は課金が必要となりますのでご注意ください。

2. プロジェクトを作成する

早速ワークスペースを選択して、プロジェクトを作成していきます。

3. テンプレートを選択する

プロジェクトを作成するとテンプレートが選択できるので、今回Curved Image Targetsを選びます。
ちなみにCurved Image TargetsにはA-Frame版とThree.js版が選べるようになっていました。

このようにテンプレートが充実していると「ちょっとこれ試してみよう」とか「アレンジして何か作ってみよう」という気持ちが湧きやすく、アクションへの障壁が少なくていいですね…！

テンプレートを選択すると、8thwallのクラウドエディターが開きました。
こちらのクラウドエディターは、チームのメンバー複数人で同時編集ができたり、その場でARをデバッグできる「インスタントプレビュー」などの機能がある独自のテキストエディターです。

もちろんこのエディターを使わずPCのテキストエディターで開発することもできますが、今回はこれを使ってみます。

4. テンプレートを体験してみる

まずはインスタントプレビュー機能を使って、テンプレートのCurved Image Targetを体験してみましょう！

クラウドエディタの上部にある「Preview」をクリックして、表示されるQR
コードをスマホで読み取ります。

併せてPC側ではARマーカーを表示しておきましょう。
左側のアイコンメニューの4つ目を開くと「IMAGE TARGETS」のページが表れ、ここで登録されたマーカーの確認ができます。
（新たなマーカーの登録などもここから行えます）

左のcoffee-sleeve型のマーカーを見てみます。

クリックするとこのようなモーダルが開きました。

このモーダルではマーカーを貼り付けるコーヒーカップ or 筒状の太さを調整できたり、マーカーのシミュレーションができます。

このシミュレーターでグリグリすることでARの見え方も確認できます…！
これはデバッグが楽で便利ですね。

先ほどスマホで開いたページで、こちらのシミュレーションのマーカーを読み取ってみます。

ARが表示されました！

面に対しての湾曲や、回り込みの表現が現実に忠実でかなり見応えがあります。
また、猫のラベルの奥で回ってるコーヒー豆は3Dモデルで、ラベルの外側では表示されないマスクのようになっているので
ポータル表現*のように不思議な効果をもたらしていますね。

*ポータル…現実世界に仮想空間の穴を開けたように見せる表現のこと。
奥行きのある仮想空間と面を用意して、面の内側からのみ仮想空間を見ることができ、
面の外側では仮想空間を表示しないマスクをかけることで、どこでもドアのような表現が実現できる。

これは8thwallのデモでも見られましたね。

画像引用：https://medium.com/8th-wall/introducing-8th-wall-curved-image-targets-f7793c31201e

ちなみにコーヒーカップのテンプレートでは、3Dのテキストが周囲を回るオクルージョンのような表現もありますが
おそらく実際のオクルージョンではなく、事前に曲面の太さを登録しておけるため、それに合わせてマスクが設定されているようです。

5. 編集する

これを編集してカスタムしてみます。

A-Frame版Curved Image Targetで使うタグ

1. xrextras-named-image-target

<xrextras-named-image-target name="coffee-sleeve"></xrextras-named-image-target>

Image Targetのマーカータグです。
マーカーを認識したとき、このタグの子要素で入れたものがARとして表示されます。
name="" には先ほどのマーカー登録タブで登録した名称を入れます。
AR.jsの場合でいう<a-marger>タグの役割ですね。

2. xrextras-curved-target-container

<xrextras-curved-target-container color="#000"></xrextras-curved-target-container>

マーカーを認識した時に、ポータルの奥に見える空間の背景色を指定できます。

3. xrextras-target-mesh

<xrextras-target-mesh width="0.8" material="src: #logo; transparent: true;"></xrextras-target-mesh>
<!-- ビデオの場合 -->
<xrextras-target-video-fade video="#wine-label-video"></xrextras-target-video-fade>

マーカーの曲面に沿って画像を貼る時に使用します。
通常の<a-image>タグでは曲面に沿わず、真っ直ぐの状態の画像が配置されてしまいます。

---

今回カスタムにはgoogle poly公式のモデルを使おうと思います。
モデル1
モデル2

アセットの追加は、左下のスペースにドラッグ＆ドロップします。

エディター上でモデルの確認ができるのもいいですね。

ただエディターを触ってみる感じ、オートセーブの機能があるので
若干デスクトップアプリのテキストエディタほどのサクサク感がないように思えました。
ほんのわずかな違和感ですので慣れれば問題ないかもしれません。

また、マーカーもオリジナルのものに差し替えてみました。

かわいいですね。

<a-scene xrextras-almost-there="" xrextras-loading="" xrextras-runtime-error="" renderer="colorManagement: true; physicallyBasedRendering: true;" xrweb="disableWorldTracking: true">
  <a-assets>
    <a-asset-item id="house-gltf" src="./assets/Models/Schoolhouse_01.gltf"></a-asset-item>
    <a-asset-item id="star-gltf" src="./assets/Models/Star_01.gltf"></a-asset-item>
  </a-assets>

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

  <a-light type="directional" intensity="0.4" position="0 1 0"></a-light>
  <a-light type="ambient" intensity="1.2"></a-light>

  <xrextras-named-image-target name="marker-kuma">
    <xrextras-curved-target-container color="gray"></xrextras-curved-target-container>
    <a-entity gltf-model="#house-gltf" position="0 -0.7 0" rotation="0 -90 0" scale="0.05 0.05 0.05"></a-entity>
    <a-entity xrextras-spin="speed: 5000; direction: reverse;" rotation="0 0 40">
      <a-entity gltf-model="#star-gltf" position="0 0 0.9" rotation="0 0 0" scale="0.001 0.001 0.001" animation="property: rotation; from: 0 0 0; to: 0 360 360; dur: 3000; loop: true; easing: linear"></a-entity>
    </a-entity>
  </xrextras-named-image-target>
</a-scene>

これを動かしてみるとこんな感じ。

ポータル表現のある、幻想的なARができました！
星が周囲をくるくる回ることで擬似オクルージョンもアピール。

平面の画像認識ではできないような、曲面ならではの表現ができました。

まとめ

今回は8th wall webのCurved Image Targetsを試してみました。

8th wallはWebAR開発に優れた機能をリリースしていますが、有料なので個人の開発者にとって手が出しづらいのが正直なところ…。

さくっと無料でWebARを作るなら「palanAR」というWebAR作成ツールがおすすめです。
曲面はできませんが、平面の画像認識ならコードを書かずに作れちゃいます。（宣伝）

8th wallは名だたる企業、ファッションブランド、映画などのプロモーションとして活用されているため
WebARを企画して作っていく上での知見も世界トップレベルに持っている企業。
今後の新機能や動向も要チェックです。