WebGL Tokyo Meetup #2で話した資料です。

1. WebVR
WebGL Tokyo Meetup #2

2. 自己紹介

3. 面白法人カヤック
技術部／比留間 和也

4. WebVRって
知ってますか？

5. そう

6. Oculus Rift

7. これが普通のWebサイト
で実現できちゃいます

8. ぶっちゃけ
やってることは

9. ふたつのカメラで
撮影して
（視差）
【1】

10. 画面分割して描画
【2】

11. レンズ補正用に
歪ませる
【3】

12. たったこれだけ

13. シェーダがいじれる
WebGLならもちろん可能

14. よく見るやつ

15. 右のを重ねるとちょっと違う

16. 右のを重ねるとちょっと違う

17. 仕組み

18. レンズ補正

19. レンズ補正
http://game.watch.impress.co.jp/docs/series/vrgaming/20150601_704716.html

20. 要はよく見るこういうやつのすごい版

21. How can I do it?

22. Use Three.js

24. Let s do it!

25. // Screen size
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
// Create a renderer
var renderer = new THREE.WebGLRenderer({antialias:
true});
// Create a camera
var fov = 75;
var near = 0.1;
var far = 1000;
var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
var camera = new THREE.PerspectiveCamera(fov, aspect,
near, far);
// Setting up VR controller and effect
var controls = new THREE.VRControls(camera);
var effect = new THREE.VREffect(renderer);
effect.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
セットアップはこれだけ

26. これが

27. こうなる
https://www.youtube.com/watch?v=sZvQ_RslvuE&feature=youtu.be

29. 実機DEMO

30. One More Thing

31. Oculus Rift製品版
2016年初旬 発売

32. http://www.4gamer.net/games/195/G019528/20150506001/

33. 推奨スペック

34. http://www.gizmodo.jp/2015/05/oculus_rift10.html

35. http://www.gizmodo.jp/2015/05/oculus_rift10.html
• NVIDIA GTX 970／AMD 290以上
• Corei5-4590以上
• RAM 8GB以上
• HDMI 1.3ビデオ端子対応
• USB 3.0ポート x2
• Windows 7 SP1、またはそれ以上

36. ちょっとお高い( ;́Д`)

37. でも少し希望が

38. http://game.watch.impress.co.jp/docs/series/vrgaming/20150601_704716.html

39. GameWorks VR

40. VR用にGPUのドライバ
レベルで最適化する手法

41. 多少安価なPCでも
動作するかも

42. 製品版Oculus Rift楽しみ！

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