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.

Babylon.jsでOculus Quest向けWebVRアプリを作るときのメリットとデメリット

2,085 views

Published on

20190818 xR Tech Tokyo#17での発表資料です。イベントURLは下記です。
https://vrtokyo.connpass.com/event/137007/

Published in: Technology
  • Hello! I can recommend a site that has helped me. It's called ⇒ www.HelpWriting.net ⇐ They helped me for writing my quality research paper.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Babylon.jsでOculus Quest向けWebVRアプリを作るときのメリットとデメリット

  1. 1. Babylon.jsでOculus Quest 向けWebVRアプリを作るときの メリットとデメリット 2019/8/18 Limes (@WheetTweet)
  2. 2. 自己紹介 ・XR関係あれこれをやっている社会人大学院生 ・OcuFes#0-3参加、2014年頃より、子育てで外向き 活動削減。 落ち着いてきたので、少しずつ活動再開 ・Microsoft MVP (Unity :2016/10-2018/7) (Windows Mixed Reality :2018/7-) ・Blog : Cross Road https://www.crossroad-tech.com/
  3. 3. xR Tech Tokyoとわたし ・1回目のxR Tech Tokyoで発表 ・14,15(+英語版),16回目のブログ記事公開
  4. 4. 本日の発表内容 今日は、Unity以外でVRアプリを開発する方法例の 1つとして、Babylon.jsを紹介します。 また、Babylon.jsを使って開発するときのメリット、デメリット をお話しします。 https://unity.com/ https://www.unrealengine.com/ https://www.youtube.com/channel/UCm1ec-SgYpZO_4dCE_7h48g/featured https://aframe.io/ https://facebook.github.io/react-360/ https://threejs.org/ https://developers.google.com/vr/develop/web/vrview-web https://blogs.windows.com/windowsdeveloper/2019/04/30/babylon-js-4-0-is-here/#zTvCK8y8mgMsDQHv.97
  5. 5. 本日の議題 1. Babylon.jsとは? 2. Oculus Questとは? 3. Babylon.jsでOculus Questアプリを作る手順 4. VRアプリ開発にBabylon.jsを使うメリットとデメリット 5. おわりに
  6. 6. 1.Babylon.jsとは? ・Webブラウザで3DCGを描画するためのフレームワーク ・PBRが使えるなど、表現力が高い ・WebVRにも標準対応している (1) https://campusalbano.se/view/2rU8PVbbXWgeQ0sko0yOQA/open (2)https://www.babylonjs.com/ (3) https://www.davrous.com/2017/07/07/from-zero-to-hero-creating- webvr-experiences-with-babylon-js-on-all-platforms/ (1) (2) (3)
  7. 7. 2. Oculus Questとは? ・オールインワン型のVRヘッドセット。2019/5/21発売 https://blog.hubspot.com/news-trends/oculus-quest-changing-vr https://youtu.be/Rh-DO0Cb0Ms
  8. 8. 3. Babylon.jsでOculus Quest アプリを作る手順 1. 環境準備 https://code.visualstudio.com/ https://atom.io/ https://www.google.com/intl/ja_ALL/chrome/ https://www.mozilla.org/en-US/firefox/new/ Text Editor or Browser or others othersor or
  9. 9. 3. Babylon.jsでOculus Quest アプリを作る手順 2. コードを書く
  10. 10. 3. Babylon.jsでOculus Quest アプリを作る手順 3. サーバ環境を作る ・ローカル環境の場合:ExpressやWebsock (node.jsのパッケージ)だと簡単 ・インターネット環境の場合:Playground,Github Pages, etc.. Playgound:Babylon.jsコミュニティが準備したサーバ。 コードが公開されるが最小限のコードで動作確認可能。 Github Pages:Github上にサイトを作るサービス。 [簡単な例] https://github.com/flushpot1125/babylonjs-oculus-quest-controller-input [Playgroundの例] https://www.babylonjs-playground.com/#B4C2AH
  11. 11. 3. Babylon.jsでOculus Quest アプリを作る手順 4. Oculus Questのブラウザからサイトにアクセス
  12. 12. 4. VRアプリ開発にBabylon.jsを 使うメリットとデメリット
  13. 13. 4-1. メリット ・VRヘッドセット別のSDK準備が不要 (Oculus Quest/Go/Rift S, HTC VIVE, WinMR) ・Javascriptなのでビルド時間がない (アプリによってロード時間はある)
  14. 14. 4-1. メリット ・プロジェクト全体の容量が少ないので管理しやすい (下記は例) Unity:766MB Babylon.js:2.5MB
  15. 15. 4-2. デメリット ・Javascriptに慣れていないとやりづらい ・GUIによる開発環境は発展途上 ・VR向けの開発Tipsが少ない ・日本語の情報が少ない(VRはとくに) 2019/8/16 8:00時点 1.公式 2.老舗Web 技術紹介 メディア 3.Limes (2018/8)
  16. 16. ある程度解決できるので、紹介します
  17. 17. 4-3. デメリットへの対応方法 ・Javascriptに慣れていないとやりづらい ES5のJavascriptでも動くので、まずは慣れてみる https://qiita.com/rana_kualu/items/422ba6b328c55a9e8edf 2015~2017年のECMAScript コンプリートガイド 参考 https://mizchi.hatenablog.com/entry/2018/10/03/195854 TypeScript入門以前ガイド
  18. 18. 4-3. デメリットへの対応方法 ・GUIによる開発環境は発展途上 "scene.debugLayer.show()"で対応
  19. 19. 4-3. デメリットへの対応方法 ・VR向けの開発Tipsが少ない Gaze、Teleport、Grab、ボタン入力はあるので工夫次第 Teleport Grab(なかったので追加しました)
  20. 20. 4-3. デメリットへの対応方法 ・日本語の情報が少ない(VRはとくに) 下記の例のように増えてるので、今後期待できる? Babylon.js で Oculus Quest で気軽に入れる VRクラブを作る (1) https://qiita.com/nuhs/items/e3697cbc2cf76b0f4899 Babylon.js で Oculus Quest で気軽に入れる VRクラブを作る (2) https://qiita.com/nuhs/items/e36a5a8fe31cdd9d7043 Babylon.js で 360度動画を再生する (WebVR 及び立体視対応) https://qiita.com/nuhs/items/419dedf2bf7254463b0d babylon.js で Material を自作する方法 https://qiita.com/il-m-yamagishi/items/364bd8dc1e56ea79eaad Babylon.jsに関するブログ記事 (Cross Road) https://www.crossroad-tech.com/archive/category/babylonjs contributionの チャンス!
  21. 21. 5. おわりに ・Babylon.jsを使ったVRアプリ開発の方法を紹介 ・現状はメリットよりデメリットの方が多いが、対応方法が増え つつある ・今だとソースコードやドキュメントのプルリクが受け入れられや すくモチベーションにもあるので、気になる人はぜひ!

×