WebVRコンテンツ制作入門

1. @2017.01.14 比留間和也 WebVR コンテンツ制作入門

2. 自己紹介

3. 比留間和也 @edo_m18 @edom18

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

5. 制作したVRコンテンツ

6. マックスむらいのVRホラーダンジョン

7. https://www.youtube.com/watch?v=PhwSsKcZthU Another Planets

8. https://youtu.be/yKwo-_hDrpI Dragon Breaker Z

9. 今日のゴール

10. WebVRでコンテンツ作ってみよ！

11. って思う人が増えること

12. WebVRとは？俺の考える

13. 昨年はVR元年と呼ばれた

14. 様々なHMDが発表、発売されまさにVR戦国時代

15. やがてその流れはWebにも WebVRの概要についてはMoziilaの清水さんの話しの通りなので仕様などの詳細は割愛

16. 今後、VRは流行るのか？

17. VRの成功・活性化は Webが鍵あくまで個人的考えですが

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

19. 例えば

20. ECサイトの商品紹介をVRにする

21. https://shopifyvr.myshopify.com/pages/virtual-reality Shopify

22. とか

23. さらには

24. 「経験」を検索して「体験」する

25. 記事: グーグルのVR注力から予測する、「経験」を検索できる未来

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

27. むしろ、VRは Webでこそ活きる

28. さらに最近では

29. WebVRコンテンツ同士を HyperLinkでつなぐなんて話も

30. https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/

31. WebVRとネイティブVRは対立関係ではなく補完関係にあると思ってます

32. そろそろ興味出てきたでしょ？

33. 簡単に作るためのフレームワークも色々出てきた

34. https://github.com/borismus/webvr-boilerplate WebVR Boilerplate

35. https://aframe.io/ A-Frame

36. http://vizor.io/ Vizor

37. WebでVRをやろう！

38. 基本はWebGLでレンダリング

39. WebVR APIの出番はあまり多くない

40. VRコントローラは Gamepad APIを使う

41. WebVR制作入門

42. 基本はWebGL

43. 今回はThree.jsでやってみます

44. let width = window.innerWidth; let height = window.innerHeight; let renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement);

45. let aspect = width / height; let camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100); let scene = new THREE.Scene();

46. let skysphereLoader = new THREE.TextureLoader(); skysphereLoader.load('img/bg_skyplane.png', (texture) texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(4, 4); let geometry = new THREE.SphereGeometry(5000, 128, 128); let material = new THREE.MeshBasicMaterial({ map: texture, color: 0xffffff, side: THREE.BackSide }); let skysphere = new THREE.Mesh(geometry, material); skysphere.position.z = 0; scene.add(skysphere); });

47. let earth = new THREE.Object3D(); let earthLoader = new THREE.TextureLoader(); earthLoader.load(‘img/earth.jpg', (texture) => { texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; let geometry = new THREE.SphereGeometry(0.3, 32, 32); let material = new THREE.MeshLambertMaterial({ map: texture, color: 0xffffff }); earth = new THREE.Mesh(geometry, material); earth.position.z = -1; scene.add(earth); });

48. let light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light);

49. let lastRender = 0; const animate = (timestamp) => { var delta = Math.min(timestamp - lastRender, 500); lastRender = timestamp; earth.rotation.x += delta * 0.000015; earth.rotation.y += delta * 0.000025; renderer.render(scene, camera); requestAnimationFrame(animate); };

50. animate(performance ? performance.now() : Date.now()) document.getElementById(‘VRBtn').addEventListener('cl (e) => { vreffect.requestPresent( [{source: renderer.domElement}] ); }, false);

51. シーンセットアップ完了

52. Three.jsによるHello World

53. VR関連どこいった？

54. Three.jsの場合はプラグインで対応

55. WebVR対応するためのコードを足してみる

56. let width = window.innerWidth; let height = window.innerHeight; let renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); let vreffect = new THREE.VREffect(renderer); vreffect.setSize(width, height);

57. let aspect = width / height; let camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100); let vrcontrols = new THREE.VRControls(camera); let scene = new THREE.Scene();

58. Three.jsの場合はたったこれだけ

59. さぁ、WebでVRをやろう！

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

WebVRコンテンツ制作入門

Kazuya Hiruma

WebVRコンテンツ制作入門