WebARのすゝめ

WebARでの開発を進めるための一歩目を踏み出しやすくなるための手法を簡潔にまとめました。
スライド内で紹介したムービーは下記からご覧になれます。
実際に作ったもの：https://drive.google.com/file/d/1AxVFTaKCe4sskCmcVj-IFyDPD2t8KtAq/view?usp=sharing
DEMO①：https://drive.google.com/file/d/1FW_SPCeYLfvc5mPrtum3I1Qn_Szbs9OT/view?usp=sharing
DEMO②：https://drive.google.com/file/d/1AxVFTaKCe4sskCmcVj-IFyDPD2t8KtAq/view?usp=sharing

Transcript

1. WebARのすゝめ
2. このたび 仙台セントジョージ教会で 結婚式を挙げました！
3. その際に 披露宴会場でARギャラリーを 展示しました！
4. 実際に作ったもの
6. 目的：AR開発を身近に感じてもらう
7. 拡張現実（かくちょうげんじつ、英: Augmented Reality、オーグメン テッド・リアリティ、AR）とは、現実世界に仮想世界を重ね合わせて表 示する技術を指す言葉[1][2]。エクステンデッド・リアリティ（XR）と呼ば れる先端技術の一つである[3]。 出典: https://ja.wikipedia.org/wiki/%E6%8B%A1%E5%BC%B5%E7%8F%BE%E5%AE%9F ARとは？
8. ARとは？ • ポケモンGO • ドラクエウォーク • Googleレンズ
9. ARを楽しむための環境 スマホ ・Web ・アプリ AR端末 ・Googleレンズ ・Nreal ・Mojo Lens
10. ARを楽しむための環境 スマホ ・Web <- 今回はココ ・アプリ AR端末 ・Googleレンズ ・Nreal ・Mojo Lens
11. WebARを実装するには • AR.js → マーカーを認識して3Dモデルを表示 • model-viewer（ARギャラリーではこちらを使用） → 床や壁を認識して3Dモデルを表示
12. AR.js
13. AR.jsとは 画像検知, 緯度経度検知, マーカー検知の３種類のAR機能を 提供しており、three.jsまたはA-Frameを併用して使うことが多い ※画像とマーカーは似ていますが、Markerタイプは安定性がImageタイプに比べて高いです。た だ、マーカーなどの形状などに制限があります。 公式ドキュメント: https://ar-js-org.github.io/AR.js-Docs/
14. AR.jsの実装手順 1. A-FrameとAR.jsのライブラリを読み込む 2. 3Dモデルを準備する（gltf, glbなど） 3. マーカーを準備する 4. マーカーと3Dモデルを紐づける
15. A-FrameとAR.jsのライブラリを読み込む 1. A-FrameとAR.jsのライブラリをCDN経由で読み込む
16. 3Dモデルを準備する 1. 3Dモデルを`.glb`形式で用意 a. Free3Dで3Dモデルをダウンロード -> Blenderで`.glb`形式にエ クスポート b. Vectaryで3Dモデルを作成 -> `.glb`形式にエクスポート 2. `<a-assets>`で作成したglbをidに紐づける
17. 1. AR.js Marker Trainingを使って特定画像を`.patt`に変換する 2. `<a-marker>`に1で作成した`.patt`ファイルを紐付ける マーカーを準備する
18. 1. `<a-marker>`配下に`<a-entity>`で3Dモデルを紐づける 大きさや回転などのマーカーからの相対オブジェクト情報を設定する マーカーと3Dモデルを紐づける
19. Demo
20. 下の画像を読み込むことで オブジェクトが表示されます
21. • マーカー検知のためにオブジェクト配置などの計算が行われるた め、少しパフォーマンスが不安定 • マーカーからの相対位置にオブジェクトが配置できる • 全てJSで制御されているため、オブジェクトに関してイベントを受 け取りやすい（クリック、マーカー検知など） AR.jsのポイント
22. model-viewer
23. model-viewerとは ネイティブ機能のSceneViewer(Android)、 QuickLook(iOS)をブラウザ上で表示するライ ブラリです 右の画像のようなマークが表示 されているものはARで3Dオブジェクトが閲 覧できます 公式ドキュメント: https://modelviewer.dev/ Safari Safari Chrome
24. model-viewerの実装手順 1. model-viewerのライブラリを読み込む 2. 3Dモデルを準備する（android: glb, ios: usdz） 3. `<model-viewer>`タグに3Dモデルを紐づける
25. model-viewerのライブラリを読み込む 1. model-viewer関連のライブラリをCDN経由で読み込む
26. 3Dモデルを準備する（android: glb, ios: usdz） 1. Android用に`.glb` or `.glTF`形式のオブジェクト 2. iOS用に`.usdz`形式のオブジェクトを用意 → Reality Converterを使えば、`.obj`形式などの 3Dオブジェクトを`.usdz`形式に変換することができます
27. `<model-viewer>`タグに3Dモデルを紐づける 1. srcにAndroid用の`.glb`、ios-srcにiOS用の`usdz`オブジェクトを紐 付ける ← ARを壁に配置したい場合は指定します
28. Demo
30. • AR表示部分はネイティブ機能で動作しているため、 パフォーマンスが安定している • 決まったポイントに描写することはできない。 （最初に検出された床や壁に配置されてしまう） • glbとusdz形式の２つの3Dオブジェクトを用意する必要がある model-viewerのポイント
31. まとめ AR.js → 特定の場所に表示させたい場合に有効（招待状など） → パフォーマンスが不安定 model-viewer → パフォーマンスは安定している → 特定の場所に固定表示はできないため、空間への配置に有効（披 露宴会場など）
32. もっと知りたい方は公式ドキュメントにサンプ ルが豊富にあるため、 実際に触って確かめてみてください！ model-viewer https://modelviewer.dev/examples/augmentedreality/index.html AR.js https://stemkoski.github.io/AR-Examples/
33. ARの将来性について • 2028年には全世界で46兆円規模の市場になると予想されている • 成長率に関してはVRよりもARの領域の方が高く予想されている • 平均して66%の人が商品を購入前にARで体験した場合、購入意 欲が高まると答えた 出典: https://xtech.nikkei.com/atcl/nxt/column/18/00736/00035/ 　　 https://www.vons.co.jp/digital/05/
34. 良いARライフを！
35. 出典 • https://ja.wikipedia.org/wiki/%E6%8B%A1%E5%BC%B5%E7%8F%BE%E5%AE%9F • https://ar-js-org.github.io/AR.js-Docs/ • https://modelviewer.dev/ • https://modelviewer.dev/examples/augmentedreality/index.html • https://stemkoski.github.io/AR-Examples/ • https://xtech.nikkei.com/atcl/nxt/column/18/00736/00035/ • https://www.vons.co.jp/digital/05/ 実装時に参考にしたサイト • https://www.code-mogu.com/2021/09/10/a-frame-animation/ • https://ar-js-org.github.io/AR.js-Docs/#tutorials • https://ar-js-org.github.io/AR.js-Docs/ui-events/