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.

そしてWebVR

3,599 views

Published on

HTML5 Conference 2016で発表した資料です。

Published in: Technology
  • Be the first to comment

そしてWebVR

  1. 1. そしてWebVR @2016.09.03 比留間 和也 HTML5 Conference 2016
  2. 2. 自己紹介
  3. 3. 比留間 和也 @edo_m18 @edom18
  4. 4. WebVRについての記事書きました
  5. 5. VRとは?
  6. 6. 今年は
  7. 7. VR元年
  8. 8. VR元年?
  9. 9. 実はVRの登場は 1960年代
  10. 10. 画像元
  11. 11. 当時はデパートの アトラクション
  12. 12. 時は流れて2016年
  13. 13. Googleトレンドで急上昇!
  14. 14. この流れの立役者は
  15. 15. Oculus Rift
  16. 16. DK1は2012年8月に登場 画像元
  17. 17. 翌々年、2014年3月にDK2が発表 画像元
  18. 18. そして様々なHMDが
  19. 19. 改めて
  20. 20. WebVRとは?
  21. 21. VRをWebで 実現する技術
  22. 22. ではない
  23. 23. WebVRは
  24. 24. APIの名称
  25. 25. 仕様はW3CのGitHub上に ホストされている https://w3c.github.io/webvr/
  26. 26. 仕様一覧
  27. 27. 1 Introduction 2 DOM Interfaces 2.1 VRDisplay 2.2 VRLayer 2.3 VRDisplayCapabilities 2.4 VREye 2.5 VRFieldOfView 2.6 VRPose 2.7 VREyeParameters 2.8 VRStageParameters 2.9 Navigator Interface extension Table of contents 2.10 VRDisplayEventReason 2.11 VRDisplayEvent 2.12 Window Interface extension 2.13 Gamepad Interface extension 3 Security Considerations 4 Acknowledgements
  28. 28. 1 Introduction 2 DOM Interfaces 2.1 VRDisplay 2.2 VRLayer 2.3 VRDisplayCapabilities 2.4 VREye 2.5 VRFieldOfView 2.6 VRPose 2.7 VREyeParameters 2.8 VRStageParameters 2.9 Navigator Interface extension Table of contents 2.10 VRDisplayEventReason 2.11 VRDisplayEvent 2.12 Window Interface extension 2.13 Gamepad Interface extension 3 Security Considerations 4 Acknowledgements たったこれだけ
  29. 29. VR体験のための要素
  30. 30. https://hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/
  31. 31. https://hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/
  32. 32. つまり
  33. 33. APIはデバイスやセンサーからの 情報取得が主なお仕事
  34. 34. 3D部分は WebGLで作る
  35. 35. あくまで3Dコンテンツ制作の 延長線上にVRがある
  36. 36. セットアップ方法
  37. 37. 基本的に
  38. 38. センサーからの値を取り出し て 画面を更新するだけ
  39. 39. セットアップコード
  40. 40. function fieldOfViewToProjectionMatrix (fov, zNear, zFar) { var upTan = Math.tan(fov.upDegrees * Math.PI / 180.0); var downTan = Math.tan(fov.downDegrees * Math.PI / 180.0); var leftTan = Math.tan(fov.leftDegrees * Math.PI / 180.0); var rightTan = Math.tan(fov.rightDegrees * Math.PI / 180.0); var xScale = 2.0 / (leftTan + rightTan); var yScale = 2.0 / (upTan + downTan); var out = new Float32Array(16); out[0] = xScale; out[1] = 0.0; out[2] = 0.0; out[3] = 0.0; out[4] = 0.0; out[5] = yScale; out[6] = 0.0; out[7] = 0.0; out[8] = -((leftTan - rightTan) * xScale * 0.5); out[9] = ((upTan - downTan) * yScale * 0.5); out[10] = -(zNear + zFar) / (zFar - zNear); out[11] = -1.0; out[12] = 0.0; out[13] = 0.0; out[14] = -(2.0 * zFar * zNear) / (zFar - zNear); out[15] = 0.0; return out; } 引用: https://w3c.github.io/webvr/#interface-interface-vrfieldofview
  41. 41. 3Dコンテンツの制作および 画面の更新は 自分で作らないとならない
  42. 42. Three.jsを使えば手軽
  43. 43. 対応ブラウザ
  44. 44. 参考: Is WebVR Ready?
  45. 45. まだ 安定版ビルドでサポートした ブラウザはない (特定のビルドやプラグインを必要とする)
  46. 46. VRの成功・活性化は Webが鍵
  47. 47. ガチVRに比べて、少しだけ VRを使うこともできる
  48. 48. 例えば
  49. 49. ECサイトの 商品紹介をVRにする http://getnews.jp/archives/1515661
  50. 50. 例えば
  51. 51. 不動産サイトで物件の 閲覧をVRで
  52. 52. WebにもVR活用の ネタはたくさんある
  53. 53. まとめ
  54. 54. • WebVRはAPIの名称 • WebVR APIがやってくれるのはセンサーの値を取る などの最低限の処理のみ • Three.jsを使えば手軽にVRコンテンツの制作が可能 • とはいえまだサポートブラウザが(ほぼ)ない • しかし、Webでの活用はまだまだ(いい意味で)未 知数
  55. 55. • アンケートにご協力を。 WebGLやWebVRについて、もっと深く聞きたい とか、こういう内容でやってほしい、などあり ましたらアンケートにてその旨をお伝え下さい 。
  56. 56. ご清聴ありがとうございました

×