こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
前回は決められたマーカーではなく、完全オリジナルのマーカーを作成して、認識させる技術をどう実装するかをご紹介しました。
WebARはじめてみませんか？〜第4回 tracking.jsで完全オリジナルのマーカーを実現 / 画像認識編〜
その記事を公開して数日後の2019年4月17日、なんと8th Wall Webが画像認識に対応したとのニュースが発表されました！
Release 11: Image Targets & More
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を開いて実際のソースコードをみてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!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>の中に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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つを記述しています。
表示させるオブジェクトを用意したら、認識する画像と紐づける作業をします。
|
1 2 3 4 5 6 7 8 9 |
<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の管理画面上で管理します。
画像のアップロード
認識する画像は、管理画面からアップロードします。
まずは8th Wall Webにアクセスし、管理画面にログインしましょう。
※アカウントの作成がまだの方は、下記の記事を参考に作成してください。
https://alaki.co.jp/blog/?p=3160
ログインした後、ダッシュボードのプロジェクトの詳細情報を確認してください。
右下の「IMAGE TARGETS」の項目から画像をアップロードすることができます。
「Manage image targets」と書かれたボタンをクリックしてください。
「Upload An Additional Image」のところから画像をアップロードします。
試しに、サンプルデータに入っていたクラゲの画像をアップロードしましょう。アップロードが完了すると、サイズや変数名を設定する画面になります。
ここで設定するオブジェクト名が、先ほどソースコードで紐づけを行なった変数と同じであれば、3Dオブジェクトを表示することができます。
ここまでの手順を正しく設定できていれば、
先ほどのソースコードをサーバーにアップして、
読み込ませておいたクラゲの画像にクラゲの3Dオブジェクトを表示させることが可能になります。
次の章で実際にデバイスで確認してみましょう。
実機で検証する
サーバーにアップしたhtmlファイルをPCで確認すると、QRコードをモバイル端末で読み取るようにという表示になります。
QRコードを読み取って、モバイル端末でサイトを表示させます。
サイトアクセス後にWebカメラが起動します。そのカメラで画像を読み込ませましょう。
正しく3Dオブジェクトを表示させることができました！！
まとめ
いかがだったでしょうか？
複雑な処理が必要な画像処理の機能が、簡単に実装できることを体感していただけたのではないでしょうか。
8th Wall Webのようなプラットフォームにより、WebAR開発のハードルは低くなっていくのを感じています。
アイディア次第では、すぐにでも実用的なものが作れるのではないかと思います。
皆さんもぜひ、8th Wall Webの画像認識機能をお試しください！
