Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebARで作るDukeが飛び出すカード

198 views

Published on

JJUG CCC 2018 Fall #CCC_m6b

https://github.com/hfujikawa77/webar-duke

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebARで作るDukeが飛び出すカード

  1. 1. WebARで作るDukeが 飛び出すカード JJUG CCC 2018 Fall #ccc_m6b 1 Hideyuki Fujikawa Twitter @hfujikawa77
  2. 2. 自己紹介 金融 SIer テクニカルアーキテクト Java17年選手 (Java EE, Spring, Angular…) 趣味 …ドローン, 360度カメラ, デジタル玩具 2 Hideyuki Fujikawa @hfujikawa77
  3. 3. 当セッションは • Javaユーザーが3Dモデリング、モバイルアプリ開発、ゲームエン ジン使用なしにWeb技術のみでARコンテンツを作ってみた話 • しない話 • 有識者による最新技術動向 • Java/JVM言語の使われどころ 3
  4. 4. VR/AR 市場規模予測
  5. 5. VR/AR これから来ます! しかし、超えるべき課題も見えてきた 5
  6. 6. VR/AR の課題 • ハードウェア • HMDが… 重い, 操作性が低い, 画像が荒い, VR酔い, セットアップが大変, 高価 • 高性能PCが必要 • スマホをずっとかざす疲れ • ソフトウェア(開発) • ライブラリ/SDKがデバイス固有 … Win UWP, ARkit, ARCore • ビルド・デプロイが大変 • 使用技術が独特 … Unity, UE4等のゲームエンジン, Blender等 6
  7. 7. VR/AR の課題 • ハードウェア • HMDが… 重い, 操作性が低い, 画像が荒い, VR酔い, セットアップが大変, 高価 • 高性能PCが必要 • スマホをずっとかざす疲れ • ソフトウェア(開発) • ライブラリ/SDKがデバイス固有 … Win UWP, ARkit, ARCore • ビルド・デプロイが大変 • 使用技術が独特 … Unity, UE4等のゲームエンジン, Blender等 7
  8. 8. 8
  9. 9. A-Frame + AR.js https://aframe.io/blog/arjs/ 9
  10. 10. A-Frame + AR.js 10 • A-Frame • MozillaのWebVRライブラリ • PC、モバイルの他、HMDでも利用可 • モデルの表示やアニメーションを制御 • AR.js • ARToolkitのJavaScript実装 • カメラ制御、マーカー認識
  11. 11. 完成イメージ • マーカーにスマホをかざすとDukeが出てくる 11
  12. 12. 起動方法 • QRコードをスマホのカメラで認識 • ブラウザを起動するのでカメラ利用を許可 • 起動したカメラでマーカー全体を映す ※ 動作環境 : PC Chrome, iOS11+ Safari, Android Chrome 12
  13. 13. 起動方法 13
  14. 14. つくりかた 14
  15. 15. 3Dモデルの準備 マーカーの作成 コーディング 15
  16. 16. モデリングしない ありものの3Dモデルを探す 16
  17. 17. DUKEモデル @OpenJDKリポジトリ 17 OpenJDKリポジトリではDukeの3Dモデルを配布 http://hg.openjdk.java.net/duke/duke/
  18. 18. フォーマット変換(OBJ -> GLTF) 18 http://52.4.31.236/convertmodel.html A-Frame で扱うために変換サービスを利用してGLTFフォーマット(glb)に変換
  19. 19. 3Dモデルの準備 マーカーの作成 コーディング 19
  20. 20. ARの種類 20 • ロケーション型 … 位置座標に情報を配置 • ビジョン型 • マーカー型 … 特定画像(マーカー)上に情報を配置 • マーカーレス型 … 平面や奥行きを検知して情報を配置 ※今回作成するARコンテンツはマーカー型
  21. 21. マーカーにQRコードを含める 21
  22. 22. サイトとQRコード作成 22 • GitHub Pages等で静的サイトを予め作成 • QRコード生成サービスでURLのQRコード作成 ※ 一般的な手順のため詳細は割愛
  23. 23. カスタムマーカーを作成 23 https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html 画像をアップロードすると生成されるマーカー画像、パターンファイルを取得
  24. 24. 3Dモデルの準備 マーカーの作成 コーディング 24
  25. 25. ディレクトリ構成 25 モデルファイル マーカーの パターンファイル
  26. 26. コーディング(HTML) 26 https://github.com/hfujikawa77/webar-duke
  27. 27. 起動方法 • QRコードをスマホのカメラで認識 • ブラウザを起動 • カメラの利用を許可 • 起動したカメラでマーカー全体を映す 27
  28. 28. まとめ 28
  29. 29. まとめ • ARコンテンツは結果がわかりやすく自他ともに反応大 • WebARで開発・体験ともによりお手軽に • Web技術だけでもAR結構イケる • バックエンドから見るとVR/ARは新しいエンドポイント ---> Javaユーザーとしても仕組みやできる事を知っとくと吉 29
  30. 30. ご清聴ありがとうございました ぜひやってみましょう 30

×