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

1. そしてWebVR
@2016.09.03 比留間 和也
HTML5 Conference 2016

2. 自己紹介

3. 比留間 和也
@edo_m18 @edom18

4. WebVRについての記事書きました

5. VRとは？

6. 今年は

7. VR元年

8. VR元年？

9. 実はVRの登場は
1960年代

10. 画像元

11. 当時はデパートの
アトラクション

12. 時は流れて2016年

13. Googleトレンドで急上昇！

14. この流れの立役者は

16. Oculus Rift

17. DK1は2012年8月に登場
画像元

18. 翌々年、2014年3月にDK2が発表
画像元

19. そして様々なHMDが

28. 改めて

29. WebVRとは？

30. VRをWebで
実現する技術

31. ではない

32. WebVRは

33. APIの名称

34. 仕様はW3CのGitHub上に
ホストされている
https://w3c.github.io/webvr/

35. 仕様一覧

36. 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

37. 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
たったこれだけ

38. VR体験のための要素

39. https://hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/

40. https://hacks.mozilla.org/2016/03/introducing-the-webvr-1-0-api-proposal/

41. つまり

42. APIはデバイスやセンサーからの
情報取得が主なお仕事

43. 3D部分は
WebGLで作る

44. あくまで3Dコンテンツ制作の
延長線上にVRがある

45. セットアップ方法

46. 基本的に

47. センサーからの値を取り出し
て
画面を更新するだけ

48. セットアップコード

55. 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

56. 3Dコンテンツの制作および
画面の更新は
自分で作らないとならない

57. Three.jsを使えば手軽

64. 対応ブラウザ

65. 参考: Is WebVR Ready?

66. まだ
安定版ビルドでサポートした
ブラウザはない
（特定のビルドやプラグインを必要とする）

67. VRの成功・活性化は
Webが鍵

68. ガチVRに比べて、少しだけ
VRを使うこともできる

69. 例えば

70. ECサイトの
商品紹介をVRにする
http://getnews.jp/archives/1515661

71. 例えば

72. 不動産サイトで物件の
閲覧をVRで

73. WebにもVR活用の
ネタはたくさんある

74. まとめ

75. • WebVRはAPIの名称
• WebVR APIがやってくれるのはセンサーの値を取る
などの最低限の処理のみ
• Three.jsを使えば手軽にVRコンテンツの制作が可能
• とはいえまだサポートブラウザが（ほぼ）ない
• しかし、Webでの活用はまだまだ（いい意味で）未
知数

76. • アンケートにご協力を。
WebGLやWebVRについて、もっと深く聞きたい
とか、こういう内容でやってほしい、などあり
ましたらアンケートにてその旨をお伝え下さい
。

77. ご清聴ありがとうございました