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.
@2017.01.14 比留間 和也
WebVR
コンテンツ制作入門
自己紹介
比留間 和也
@edo_m18 @edom18
WebVRについての記事書きました
制作したVRコンテンツ
マックスむらいのVRホラーダンジョン
https://www.youtube.com/watch?v=PhwSsKcZthU
Another Planets
https://youtu.be/yKwo-_hDrpI
Dragon Breaker Z
今日のゴール
WebVRで
コンテンツ作ってみよ
!
って思う人が増えること
WebVRとは?
俺の考える
昨年はVR元年と呼ばれた
様々なHMDが発表、
発売されまさにVR戦国時代
やがてその流れはWebにも
WebVRの概要についてはMoziilaの清水さんの
話しの通りなので仕様などの詳細は割愛
今後、VRは流行るのか?
VRの成功・活性化は
Webが鍵
あくまで個人的考えですが
ガチVRに比べて、少しだけ
VRを使うこともできる
ちょこっとVR
例えば
ECサイトの
商品紹介をVRにする
https://shopifyvr.myshopify.com/pages/virtual-reality
Shopify
とか
さらには
「経験」を検索して
「体験」する
記事: グーグルのVR注力から予測する、「経験」を検索できる未来
WebにもVR活用の
ネタはたくさんある
むしろ、VRは
Webでこそ活きる
さらに最近では
WebVRコンテンツ同士を
HyperLinkでつなぐなんて話も
https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/
WebVRとネイティブVRは
対立関係ではなく補完関係にある
と思ってます
そろそろ興味出てきたでしょ?
簡単に作るための
フレームワークも色々出てき
た
https://github.com/borismus/webvr-boilerplate
WebVR Boilerplate
https://aframe.io/
A-Frame
http://vizor.io/
Vizor
WebでVRをやろう!
基本はWebGLでレンダリング
WebVR APIの出番はあまり多くない
VRコントローラは
Gamepad APIを使う
WebVR制作入門
基本はWebGL
今回はThree.jsでやってみます
let width = window.innerWidth;
let height = window.innerHeight;
let renderer =
new THREE.WebGLRenderer({antialias: true});...
let aspect = width / height;
let camera =
new THREE.PerspectiveCamera(75, aspect, 0.1, 100);
let scene = new THREE.Scene();
let skysphereLoader = new THREE.TextureLoader();
skysphereLoader.load('img/bg_skyplane.png', (texture)
texture.wrapS = THR...
let earth = new THREE.Object3D();
let earthLoader = new THREE.TextureLoader();
earthLoader.load(‘img/earth.jpg',
(texture)...
let light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
let lastRender = 0;
const animate = (timestamp) => {
var delta = Math.min(timestamp - lastRender, 500);
lastRender = times...
animate(performance ? performance.now() : Date.now())
document.getElementById(‘VRBtn').addEventListener('cl
(e) => {
vreff...
シーンセットアップ完了
Three.jsによるHello World
VR関連どこいった?
Three.jsの場合はプラグインで対応
WebVR対応するための
コードを足してみる
let width = window.innerWidth;
let height = window.innerHeight;
let renderer =
new THREE.WebGLRenderer({antialias: true});...
let aspect = width / height;
let camera =
new THREE.PerspectiveCamera(75, aspect, 0.1, 100);
let vrcontrols = new THREE.VR...
Three.jsの場合はたったこれだけ
さぁ、WebでVRをやろう!
ご清聴ありがとうございました
WebVRコンテンツ制作入門
Upcoming SlideShare
Loading in …5
×

WebVRコンテンツ制作入門

1,996 views

Published on

シン・WebVRとか文化祭での登壇資料です。

Published in: Technology
  • Be the first to comment

WebVRコンテンツ制作入門

  1. 1. @2017.01.14 比留間 和也 WebVR コンテンツ制作入門
  2. 2. 自己紹介
  3. 3. 比留間 和也 @edo_m18 @edom18
  4. 4. WebVRについての記事書きました
  5. 5. 制作したVRコンテンツ
  6. 6. マックスむらいのVRホラーダンジョン
  7. 7. https://www.youtube.com/watch?v=PhwSsKcZthU Another Planets
  8. 8. https://youtu.be/yKwo-_hDrpI Dragon Breaker Z
  9. 9. 今日のゴール
  10. 10. WebVRで コンテンツ作ってみよ !
  11. 11. って思う人が増えること
  12. 12. WebVRとは? 俺の考える
  13. 13. 昨年はVR元年と呼ばれた
  14. 14. 様々なHMDが発表、 発売されまさにVR戦国時代
  15. 15. やがてその流れはWebにも WebVRの概要についてはMoziilaの清水さんの 話しの通りなので仕様などの詳細は割愛
  16. 16. 今後、VRは流行るのか?
  17. 17. VRの成功・活性化は Webが鍵 あくまで個人的考えですが
  18. 18. ガチVRに比べて、少しだけ VRを使うこともできる ちょこっとVR
  19. 19. 例えば
  20. 20. ECサイトの 商品紹介をVRにする
  21. 21. https://shopifyvr.myshopify.com/pages/virtual-reality Shopify
  22. 22. とか
  23. 23. さらには
  24. 24. 「経験」を検索して 「体験」する
  25. 25. 記事: グーグルのVR注力から予測する、「経験」を検索できる未来
  26. 26. WebにもVR活用の ネタはたくさんある
  27. 27. むしろ、VRは Webでこそ活きる
  28. 28. さらに最近では
  29. 29. WebVRコンテンツ同士を HyperLinkでつなぐなんて話も
  30. 30. https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/
  31. 31. WebVRとネイティブVRは 対立関係ではなく補完関係にある と思ってます
  32. 32. そろそろ興味出てきたでしょ?
  33. 33. 簡単に作るための フレームワークも色々出てき た
  34. 34. https://github.com/borismus/webvr-boilerplate WebVR Boilerplate
  35. 35. https://aframe.io/ A-Frame
  36. 36. http://vizor.io/ Vizor
  37. 37. WebでVRをやろう!
  38. 38. 基本はWebGLでレンダリング
  39. 39. WebVR APIの出番はあまり多くない
  40. 40. VRコントローラは Gamepad APIを使う
  41. 41. WebVR制作入門
  42. 42. 基本はWebGL
  43. 43. 今回はThree.jsでやってみます
  44. 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. 45. let aspect = width / height; let camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100); let scene = new THREE.Scene();
  46. 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. 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. 48. let light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light);
  49. 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. 50. animate(performance ? performance.now() : Date.now()) document.getElementById(‘VRBtn').addEventListener('cl (e) => { vreffect.requestPresent( [{source: renderer.domElement}] ); }, false);
  51. 51. シーンセットアップ完了
  52. 52. Three.jsによるHello World
  53. 53. VR関連どこいった?
  54. 54. Three.jsの場合はプラグインで対応
  55. 55. WebVR対応するための コードを足してみる
  56. 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. 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. 58. Three.jsの場合はたったこれだけ
  59. 59. さぁ、WebでVRをやろう!
  60. 60. ご清聴ありがとうございました

×