Embed Size (px)
Citation preview
React VRことはじめBUILD VR WEBSITES AND INTERACTIVE 360 EXPERIENCES WITH REACT
2017/4/7Okachi.js vol.4
第0回
出演
{:company “Greative.GK” :name “Kazuhiro Hara” :twitter “@kara_d” :interest “SPA, WebVR, Clojure, Design research”}
Clojure / ClojureScript で
Electronアプリケーションを
作るためのスタートキット / プラットホーム
● オープンソースにてGitHubにて公開
● MITライセンス
● 現在のスター数 : 280http://descjop.org/
以前したWeb VR関係の資料
● Re-frame and A-Frame ○ https://www.slideshare.net/karadweb/reframe-and-aframe
本日のトピック
React VRで遊んでみようhttps://facebook.github.io/react-vr/
もくじ
1. React VRとは
2. Carmelについて
3. デモ
4. React VRを成り立たせているテクノロジー
React VRとは
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.
React VR
（意訳）React VRを使用すると、JavaScriptのみを使用してVRアプリケーションを構築できます。 これはReactと同じデザインを使用しており、
宣言的なコンポーネントから豊かなVR世界とUIを構成することができます。
React VRポイント
● JavaScriptのみで書ける
● JSXでUIコンポーネント(3Dオブジェクト)を書ける
● 既存のnpmライブラリと組み合わせてReactアプリケーションのように
作成が可能
● ビルドのスタイルは特殊
● サンプルは、Web VR対応ブラウザ or Oculus Rift / GearVRで
Carmel
Carmelhttps://developer.oculus.com/blog/carmel-developer-preview-launches-today/
Oculusが作成中のブラウザ
GearVRでうごく!!
デモ
React VRのサンプルを起動してみる
サンプルをダウンロード
解凍してpreviewディレクトリへ移動し、依存関係を解決
起動して、ブラウザで見よう
$ wget https://s3.amazonaws.com/static.oculus.com/reactvr/React_VR_Prerelease.zip
$ npm install
$ npm start
Carmelで試してみます
React VRを成り立たせているテクノロジー
React VRを成り立たせているテクノロジー
● npm-script
● React
● React VR
● React Native
● Three.js
● OVRUI
● OVR-Audio
● OVR-Video
React VRを成り立たせているテクノロジー
こんな構成
https://developer.oculus.com/blog/introducing-the-react-vr-pre-release/
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.
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.
ovr-audio, ovr-video
● OVR用のビデオ、オーディオ用のパッケージ(?)○ www.npmjs.com/package/ovr-video
○ www.npmjs.com/package/ovr-audio
● リポジトリはまだ非公開な模様
- END -ありがとうございました
2017/4/7Okachi.js vol.4
