スターティアラボ WebAR勉強会 part1
目次
第二回勉強会を開催しました
先日、スターティアラボ主催で第二回勉強会を開催しました。
https://startialab.connpass.com/event/184941/
前回テーマがWebVRでしたので、今回はWebARにしました。
今回はどーんと増えて30名もの方々にご参加いただきました。
段々参加者が増えてきて嬉しい限りです。
今回のblogは、その勉強会の内容をご紹介いたします。
A-Frameの紹介や、開発環境の使い方など、第一回で説明した内容は割愛しております。
第一回の勉強会内容についてもblogにアップしていますので、参考にされてください。
https://dev.startialab.blog/WebVR/a84
https://dev.startialab.blog/WebVR/a85
作成したもの
WebARでモグラたたきを作ります。
ARマーカーの周りにランダムでBOXを表示してそれを叩いていきます。
画面の真ん中の◉と白いBOXを重ねて画面を叩くとBOXが赤くなります。
隠れている時には叩くことはできません。
文章で書くと説明が難しいですね。動作している動画はこちらになります。
https://drive.google.com/file/d/13OA74cakHI9GL3-knAuRlcwSUJw-DWul/view?usp=sharing
動かすにはARマーカーが必要となります。
こちらからダウンロードして表示しましょう。
印刷して利用すると認識しやすく便利です。
https://github.com/AR-js-org/AR.js/blob/master/three.js/examples/marker-training/examples/pattern-images/pattern-hiro.png
マーカーの用意ができましたら、以下のQRコードをスマートフォンで読み込んでください。
https://startialab-webar-mogura-handson.glitch.me/
マーカーにかざすとモグラたたきがスタートします。
カメラ権限の問題でエラーが出る場合があります。
以下のように対応しましょう。
サンプルコードを読み込む
前回同様、glitch.com上にA-FrameのサンプルコードをRemixします。
https://aframe.io/docs にアクセスし、以下のようにRemixします。
AR.js
AR.jsの説明と、実装ソースコードを記載します。
AR.jsとは？
AR.jsとは、マーカー型のWebARライブラリです。
A-Frameと組み合わせることで、簡単に実装できます。
iOS、Android、PCなど、カメラの動作するほとんどの端末・ブラウザで利用可能です。
マーカー型WebARの他に、GeoLocation WebARや、画像をマーカーとするWebARにも対応しています。
詳しい仕様は以下を参照ください。
https://github.com/AR-js-org/AR.js
https://ar-js-org.github.io/AR.js-Docs/
実装内容
AR.jsライブラリを読み込み、不要なオブジェクトを削除しています。
次に、AR.jsの設定を行います。スタイルシートによる見栄えの修正と、3D空間を表すa-sceneにAR.jsの属性を設定します。
最後に読み込むマーカーとマーカー上に表示するオブジェクトを追加し、カメラオブジェクトを追加します。
A-Frameでは特に記述していなくても標準でカメラを用意しています。しかしVR用の設定が入っているためARで利用できません。そのため、素のカメラオブジェクトを追加しています。
動作確認
実装が完了しましたら、スマートフォンで確認用のURLにアクセスし、ARマーカーにかざしてください。
うまく実装できていれば、マーカー上に白いBOXが表示されています。
Raycaster
Raycasterの説明と、実装ソースコードを記載します。
Raycasterとは？
Raycasterとは、ある地点から透明な線を特定の方向に引いて、オブジェクトがその線とぶつかったか検知する仕組みです。
3D空間のオブジェクトに対してアクションを起こす場合に使います。
カメラの向き（自分がみている視線の方向）にRaycasterを設置し、視線の先にあるオブジェクトを検知するのは、よくやる方法です。
Raycasterは突き抜けたその先のオブジェクトも対象として複数検知します。
また、Raycasterは、オブジェクトとぶつかった場合と離れた場合にイベントを発火します。
オブジェクトとぶつかった状態でマウスクリック、もしくは画面をタッチを行うと、一番手前のオブジェクトに対してクリックイベントを発火します。
詳しい仕様は以下を参照ください。
https://aframe.io/docs/1.0.0/components/raycaster.html
実装内容
カメラタグ内にa-cursorタグを追加します。これは画面の真ん中にあった◉になります。
a-cursorの属性としてRaycasterを設定することによって、画面の真ん中からまっすぐRaycasterの線を引く形となります。
また、Raycasterの負荷を下げるために対象とするオブジェクトを限定しています。ここではクラス名に「clickable」と設定されているオブジェクトを対象とします。そのため、マーカー上に表示したBOXにクラス名を追加しています。
Raycasterの設定が完了しましたが、これだけではRaycasterがぶつかったり、離れたり、クリックが発生した際に何をするか定義がないため何も反応しません。
Raycasterのイベントに対して処理を行うための新しい属性を追加します。
新しい属性定義の初期処理（init）に対して、イベント検知処理（EventListener）を設定します。
- click: Raycasterから発火されたクリックイベント
- raycaster-intersected: Raycasterとぶつかったイベント
- raycaster-intersected-cleared: Raycasterから離れたイベント
属性定義を追加しただけでは動きません。
属性定義をRaycasterの対象となるオブジェクトに追加します。
動作確認
実装が完了しましたら、画面の真ん中に◉が表示されます。マーカー上のBOXに当てると青色になり、離すと白に変わります。
青色の状態で画面タップするとクリックが発生し、赤色に変わります。
Part2に続きます
長くなりましたので、一旦切ります。
次回は複数のBOXを配置してアニメーションさせていきます。