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.

React VR ことはじめ

3,401 views

Published on

Okachi.js vol.4で話したReat VRに関する資料です

Published in: Technology
  • Dating direct: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×