Successfully reported this slideshow.
Your SlideShare is downloading. ×

React VR ことはじめ

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Re-frame and A-Frame
Re-frame and A-Frame
Loading in …3
×

Check these out next

1 of 24 Ad

More Related Content

Slideshows for you (20)

Similar to React VR ことはじめ (20)

Advertisement

More from Kazuhiro Hara (20)

Recently uploaded (20)

Advertisement

React VR ことはじめ

  1. 1. React VRことはじめ BUILD VR WEBSITES AND INTERACTIVE 360 EXPERIENCES WITH REACT 2017/4/7 Okachi.js vol.4 第0回
  2. 2. 出演 {:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
  3. 3. Clojure / ClojureScript で Electronアプリケーションを 作るためのスタートキット / プラットホーム ● オープンソースにてGitHubにて公開 ● MITライセンス ● 現在のスター数 : 280 http://descjop.org/
  4. 4. 以前したWeb VR関係の資料 ● Re-frame and A-Frame ○ https://www.slideshare.net/karadweb/reframe-and-aframe
  5. 5. 本日のトピック
  6. 6. React VRで遊んでみよう https://facebook.github.io/react-vr/
  7. 7. もくじ 1. React VRとは 2. Carmelについて 3. デモ 4. React VRを成り立たせているテクノロジー
  8. 8. React VRとは
  9. 9. React VR React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.
  10. 10. React VR (意訳)React VRを使用すると、JavaScriptのみを使用してVRアプリケーションを構築できます。 これはReactと同じデザインを使用しており、 宣言的なコンポーネントから豊かなVR世界とUIを構成することができます。
  11. 11. React VRポイント ● JavaScriptのみで書ける ● JSXでUIコンポーネント(3Dオブジェクト)を書ける ● 既存のnpmライブラリと組み合わせてReactアプリケーションのように 作成が可能 ● ビルドのスタイルは特殊 ● サンプルは、Web VR対応ブラウザ or Oculus Rift / GearVRで
  12. 12. Carmel
  13. 13. Carmel https://developer.oculus.com/blog/carmel-developer-preview-launches-today/ Oculusが作成中のブラウザ
  14. 14. GearVRでうごく!!
  15. 15. デモ
  16. 16. React VRのサンプルを起動してみる サンプルをダウンロード 解凍してpreviewディレクトリへ移動し、依存関係を解決 起動して、ブラウザで見よう $ wget https://s3.amazonaws.com/static.oculus.com/reactvr/React_VR _Prerelease.zip $ npm install $ npm start
  17. 17. Carmelで試してみます
  18. 18. React VRを成り立たせている テクノロジー
  19. 19. React VRを成り立たせているテクノロジー ● npm-script ● React ● React VR ● React Native ● Three.js ● OVRUI ● OVR-Audio ● OVR-Video
  20. 20. React VRを成り立たせているテクノロジー こんな構成 https://developer.oculus.com/blog/introducing-the-react-vr-pre-release/
  21. 21. ReactとReact Native ● React VRで作成されたプロジェクトをバンドルするために使っている ○ React JavaScript code is preprocessed before it is run by the browser. This pre-processing is performed by the React Native packager. It is a project similar in scope to Browserify and Webpack, and provides a CommonJS-like module system, JavaScript compilation (ES6, Flow, JSX), bundling, and asset loading.
  22. 22. OVRUI ● Three.jsベースで動くVR用のUIライブラリ ● OculusVR/ovrui ○ An issue-only repo for OVRUI - a set of UI helpers which are built currently built on top of three.js ○ https://github.com/OculusVR/ovrui ■ OVRUI is a user interface library that provides a set of geometry types for Three.js, helping you build UIs in VR. Geometry objects describe text, buttons and other content that can be displayed within a 3D scene. For the pre-release, this is written primarily to support the requirements of React VR, but we’ll be developing this and placing it separately on GitHub so that this library can be used in its own right. More documentation on the direct use of OVRUI will follow.
  23. 23. ovr-audio, ovr-video ● OVR用のビデオ、オーディオ用のパッケージ(?) ○ www.npmjs.com/package/ovr-video ○ www.npmjs.com/package/ovr-audio ● リポジトリはまだ非公開な模様
  24. 24. - END - ありがとうございました 2017/4/7 Okachi.js vol.4

×