2020年12月10日

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

目次

  1. はじめに
  2. 8th Wallとは
  3. Curved Image Targetsについて
  4. 実際に試してみる
  5. まとめ

はじめに

新しい技術にチャレンジし続ける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ではあるのですが

1_0s6p4ZmYJoMsfcV_zshNGQ.png (263.0 kB)

画像引用 AR.js medium

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

余談

ARは大きく分けて
・ARグラス
・スマホアプリAR
・WebAR
の3つのプラットフォームが存在し、それぞれに開発を補助するライブラリが存在します。
通常の平面の画像認識は数あれど、曲面の画像認識を提供しているのはどのプラットフォームにおいても例が無く8thwallが世界初。(著者調べ)

8thwallは国を跨いで多くの会社とタッグを組み、WebARプロモーションを展開する中で、WebARと曲面の画像認識の相性の良さに着目したのだと思われます。目の付け所がシャープです。

実際に試してみる

1. 8thwall登録

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

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

早速ワークスペースを選択して、プロジェクトを作成していきます。
スクリーンショット 2020-11-25 18.48.03.png (196.5 kB)

スクリーンショット 2020-11-25 18.49.41.png (250.2 kB)

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

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

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

スクリーンショット 2020-11-25 18.59.34.png (1.4 MB)

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

スクリーンショット 2020-11-25 19.01.47.png (658.3 kB)

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

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

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

クラウドエディタの上部にある「Preview」をクリックして、表示されるQR
コードをスマホで読み取ります。
スクリーンショット 2020-11-27 14.50.46.png (391.2 kB)

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

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

クリックするとこのようなモーダルが開きました。
ダウンロード (1).png (523.1 kB)
このモーダルではマーカーを貼り付けるコーヒーカップ or 筒状の太さを調整できたり、マーカーのシミュレーションができます。

このシミュレーターでグリグリすることでARの見え方も確認できます…!
これはデバッグが楽で便利ですね。
giphy.gif (2.0 MB)
先ほどスマホで開いたページで、こちらのシミュレーションのマーカーを読み取ってみます。

gif.gif (6.5 MB)

ARが表示されました!

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

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

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

1_PKEF0JVmR3V_ssaVy_R0xg.gif (5.7 MB)

画像引用: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

アセットの追加は、左下のスペースにドラッグ&ドロップします。
スクリーンショット 2020-11-27 16.25.18.png (358.6 kB)

エディター上でモデルの確認ができるのもいいですね。
スクリーンショット 2020-11-27 18.26.54.png (237.2 kB)

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

また、マーカーもオリジナルのものに差し替えてみました。
スクリーンショット 2020-11-27 18.30.07.png (243.1 kB)

かわいいですね。

<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>

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

giphy-(3).gif (8.7 MB)

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

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

まとめ

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

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

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

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

WebAR/VRのお仕事に関するご相談

Bageleeの運営会社、palanではWebAR/VRに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP