シン・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. 「経験」を検索して
「体験」する

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

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

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

29. さらに最近では

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

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

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

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

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

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

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

37. http://vizor.io/
Vizor

38. WebでVRをやろう！

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

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

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

42. WebVR制作入門

43. 基本はWebGL

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

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

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

47. 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);
});

48. 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);
});

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

50. 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);
};

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

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

53. Three.jsによるHello World

54. VR関連どこいった？

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

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

57. 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);

58. 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();

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

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

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