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 ( <View> <Pano source={asset('chess-world.jpg')}/> <Text style={{ fontSize: 0.8, layoutOrigin: [0.5, 0.5], transform: [{translate: [0, 0, -3]}], }}> hello </Text> </View> ); } }; 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 ଙ಍౮ᆧ