ReactVR - a quick glance

download: http://tinyurl.com/jxvr88

Transcript

1. About
   Jeremy Lu
   Consultant - team building | training | development
   jeremy@pubulous.com
   WebVR ฎՋ讕牫
   a new web browser feature, based on existing browser technologies
   a set of Javascript API for creating VR content which renders into headsets and browsers
   provides access to input and output capabilities of VR devices
   no download/installs required, no app stores
   navigating between sites in VR
   ݢ犥藯Ո扖㻟牫
   疰ฎ虏֦አ web browser ፗ矑፡ VR 獉਻ࠩ
   猟匍ࣁጱ fullscreen 衔牧ೲӥ盅ܨ䨝蝱獈 VR 薪搕秇ୗ牧獉਻褰毣旉㵕ᘒ硬虋牧綍ᛗ磪蒅硈ಋݢ膏
   獉਻԰㵕
   ፓ秂ฎ褔犵䟖አጱᴥ繸(friction)
   傶֜ᥝ磪憒໒牫
   ݱ疑皜珶䋿֢碻಍磪秂伛ݢ狅盌牧嘦狒Ӟ犩獉਻胼ྋ嘦ጱࣁಅ磪 browsers Ӥ珊匍
   ֕䋿率Ӥ牧֦睞ጱ !
   অ檺磪 polyfill
   https://github.com/spite/WebVR-Extension
   憒໒ਧ嬝ߺ犚Ԫ牫
   WebVR API
   sensors
   head-mounted displays
   Hand Position API
   pointer event with points in 3D frame
   ই֜蘷獨ಋ玊犋ࣁ種 spec 憒塅ֺ(ݢአ 3D camera ౲㻌奈೭ಋ಩牧ݝᥝ胼叨ኞፘ䛑ጱ pointer
   event ܨݢ)
   ߺ犚皜珶ࣁ䋿֢種憒໒牫
   Microsoft Edge
   Mozilla Firefox, Servo
   Google Crhome, Chromium
   Oculus Carmel
   Samsung Internet
   https://webvr.rocks/
   ፓ獮ଉ憎ጱ VR 蕕ᗝ
   HTC Vive
   Oculus Rift
   Google Daydream, Tango
   Samsung GearVR
   Microsoft Hololens (Mixed Reality headset)
   ெ讕樄咳 WebVR 獉਻牫
   AFrame by Mozilla
   ReactVR by Facebook
   react-aframe ➡ AFrame ➡ { ThreeJS | WebGL | WebVR }
   ReactVR ➡ OVRUI ➡ { ThreeJS | WebGL | WebVR }
   و蝢ԏ蒂
   AFrame ፘ吚ෝ OVRUI牧Ԇᥝฎ੗蕕皈䍅ݱ圵ۑ胼(ֺই Threejs 膏 WebVR )
   React-Aframe 膏 ReactVR 㳷ฎๅӤ䍅ጱ declarative API ො׎盠蝧樄咳纷ୗ
   ፘ吖ԏ蒂
   https://goo.gl/6VRRfA
   ℂ mental model 㬵፡牧ReactVR ฎ穉斃猻纨ጱ
   ReactVR ጱ猻玊
   ᆧ盿ጱ樄咳秇ୗ牧ই૪䨝䌃 react ౲ react-native牧ݢ篷ዳ缏ܨ樄咳 ReactVR 獉਻
   FB ๜蛪磪敟Ꮭ誢ଘݣ牧קԆ疩叨禂憒໒膏ොݻጱ胼ێ
   䌘獍ݪ㬵藯ತՈ਻ฃ牧䌘ૡ纷䒍㬵藯缛ෝ篷ዳے讨Ӟ毼ದ胼䰽
   墋㻌拻疰ฎ瓟䌌ٌӤጱ觓檺斃犵
   https://github.com/facebook/react-vr
   ReactVR 塅ֺ
   class WelcomeToVR extends React.Component {
   render() {
   // Displays "hello" text on top of a loaded 360 panorama image.
   // Text is 0.8 meters in size and is centered three meters in front of you.
   return (
   
   
   style={{
   fontSize: 0.8,
   layoutOrigin: [0.5, 0.5],
   transform: [{translate: [0, 0, -3]}],
   }}>
   hello
   
   
   );
   }
   };
   AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
   // ౮ຎ: https://facebook.github.io/react-vr/docs/getting-started.html#hello
   VR ጱ᯿讨
   immersive experience
   VR ጱ匍丆
   櫚膏ᢓ㺔氂櫞薹
   ䷱獉਻牧疰䷱አ䜛氎఺揮戔猋(oculus/vive 搚犋ധ)
   ䷱አ䜛牧皜珶䓄讔ᥝ樄咳 VR 獉਻牫
   FB మض薹究櫚ጱ㺔氂
   വ 360 video ො׎盠蝧叨ኞ獉਻
   വ Oculus VR Browser 疥碪磪翕殷ᣟ獈 VR 眐ह獉ֵአ
   ፗጮ拻 VR ᛗ੝螭襑 2- 5 ଙ಍౮ᆧ
   

   View Slide