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.

Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~

355 views

Published on

MonacaUG#3のLT資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Manacaの常識を覆せ!!~monacaで試す3d/vr/arの可能性~

  1. 1. 2017年11月27日 Monacaの常識を覆せ!! ~Monacaで試す3D/VR/ARの可能性~
  2. 2. 自己紹介 2 バルテス・モバイルテクノロジー ってどんな会社? https://www.valtes-mt.co.jp/ ↑詳しくはググって下さい。 ↑
  3. 3. 自己紹介 3 名前:山下大輔 横浜生まれ、大阪育ち https://www.facebook.com/longjumper.daisuke 気軽に友達申請して下さい。 家族構成:妻1人、子3人
  4. 4. 4 Monaca UG #1のおさらい Monaca UG #1 のおさらい。
  5. 5. 5 Monacaあるある~ でした。 私歌いました。(上を向いて歩こう) 皆さん手拍子ありがとうございました。 Monaca UG #1のおさらい
  6. 6. 6 あるあるは Localkitのアップデートは多め~ でした。 Monaca UG #1のおさらい
  7. 7. 7 Monacaの常識を覆せ! 今回のお題
  8. 8. 8 それがどうして常識なのか 僕には分からない。そんな 常識をつくる人が非常識だ と思います。 Monacaの常識を覆せ! ※イチロー語録より
  9. 9. 9 どうしてLTで歌わないのが 常識なのか僕には分からない。 そんな常識をつくる人が非常 識だと思います Monacaの常識を覆せ! ※もちろん山下語録より
  10. 10. 10 どうしてMonacaで グラフィックスが苦手 と言うのが常識なのか僕には 分からない。そんな常識をつ くる人が非常識だと思います Monacaの常識を覆せ!(本題)
  11. 11. 11 Monacaの常識を覆せ!(本題) つまり Monacaで3Dは出来ます。
  12. 12. 12 Monacaで3Dは出来ます! Three.js を使えば出来ます。
  13. 13. 13 Monacaで3Dは出来ます! Three.js はWebGLをラッピングした JavaScriptのライブラリです。
  14. 14. 14 Monacaで3Dは出来ます! 使い方は簡単です。 –Three.jsをダウンロード •MITライセンスなので、無償です。 –Monacaでプロジェクト作成 •No FrameWorkを選択 –使いたいクラスをアップロードして、宣言するだけ
  15. 15. 15 百聞は一見に如かず デモを見てみよう! Monacaで3Dは出来ます!
  16. 16. 16 - 3D空間を作る - モデルを読込む(3D形状を作る) - 光源を設定する - 影を設定する - 描画(アンチエリアス)する Monacaで3Dは出来ます! 何がすごいって、この命令をたった1ファイル (195行)のJavaScriptで出来てしまいます。
  17. 17. 17 Monacaで3Dは出来ます! Three.jsをMonacaで 楽しむポイント!
  18. 18. 18 - 汎用3Dデータが扱える! - Collada(*.dae)←今回はこれを使った。 - Wavefront(*.obj) - 3DS(*.3ds) - FBX(*.fbx) - STL(*.stl) Monacaで3Dは出来ます! 今回、Collada形式を選択した理由は、私が調べた中で 一番質が良かったから。
  19. 19. 19 - データは誰でもタダで作れる! - Blender(高性能) -完全無料!おすすめです! - Metasequoia(メタセコイア) -※一部有料 - 有料でも比較的安価なソフト -Shade(純国産) -六角大王 Monacaで3Dは出来ます!
  20. 20. 20 ◇楽しみ方 -3Dデータを作って -Monacaのプロジェクトにインポート -自分の作ったデータを表示 Monacaで3Dは出来ます! データがどうしてもうまく作れなくても、 フリーもしくは有料でも入手は可能。 https://free3d.com/
  21. 21. 21 Monacaでもっと3Dは出来ます! Monacaでもっと 3Dは出来ます!!
  22. 22. 22 百聞は一見に如かず デモを見てみよう!Part2 Monacaでもっと3Dは出来ます!
  23. 23. 23 - シェーダー(GLSL)が使える。 - メリットは多彩な表現が出来る。 - デメリットは学習コストがハンパない・・・ - 更に高度なレンダリング技術が使える。 - レイトレーシング - GI(グローバルイルミネーション) -詳細はググるか、後で聞いてください。 Monacaでもっと3Dは出来ます!
  24. 24. 24 Monacaで実は・・・ Monacaで実は・・・ VRも出来ます!!
  25. 25. 25 百聞は一見に如かず デモを見てみよう!Part3 Monacaで実はVRも出来ます!
  26. 26. 26 Monacaでもっと3Dは出来ます! 使い方は簡単です。 –Three.jsのStereoEffectクラスを宣言 •もちろんJSファイルもプロジェクトにインポート •StereoEffectクラスを初期化する。 –初期化って言うても、newするだけ •描画のメソッドをWebGLRendererではなく、 StereoEffectクラスのrenderメソッドに変えるだけ。
  27. 27. 27 Monacaで実は・・・ Monacaで次は・・・ 物理演算も出来ます!??
  28. 28. 28 百聞は一見に如かず デモを見てみよう!Part4 Monacaで物理演算に挑戦!
  29. 29. 29 Monacaで物理演算に挑戦! さすがに無理でした・・・。
  30. 30. 30 Monacaで実は・・・ Monacaで次は・・・ ARも出来る!!! ようになるはず・・・。
  31. 31. 31 ARと言っても種類があります。 ロケーションベース マーカー型 マーカーレス型 MonacaでARも出来る!? ↑↑↑↑↑↑↑↑ このマーカレスに注目です。
  32. 32. 32 最近、巷でよく耳にする ネイティブのARライブラリ ARKit、ARCore はマーカーレスARです。 MonacaでARも出来る!?
  33. 33. 33 リンゴさんの方の デモ動画あります。 MonacaでARも出来る!?
  34. 34. 34 実はThree.jsの開発者が 「AR.js」と言うものを 今年3月に発表しています。 MonacaでARも出来る!?
  35. 35. 35 だから、やろうっと思ったら もうできるのです。 ただ、AR.jsはマーカ型で マーカレスではないので もう少し待つとします。 MonacaでARも出来る!?
  36. 36. 36 まとめ(最後に) - 3Dが出来る! - 多彩は表現がリアルタイムに出来る! - VRも出来る! Monacaで・・・ - 物理演算は無理! - マーカレスARは近い将来できる・・・はず!
  37. 37. 37 まとめ(最後に) このような高度な技術・検証を すぐに実践できる Monacaはすごい! ※俺もすごい!
  38. 38. ご清聴ありがとうございました。 38

×