React 360

Desde que Facebook decidió propulsar la realidad virtual con la adquisición de Oculus. sus esfuerzos se volcaron al desarrollo del framework React VR. Al mismo tiempo, la comunidad de desarrolladores aunó esfuerzos que mejoraron las características y posibilidades que dicha librería permitía para la construcción de experiencias de realidad virtual. Sin embargo, el camino que esto tomó en el último año, hizo que el objetivo inicial para el que esta herramienta fue pensado se alejara de la versión que utilizaban internamente en Facebook para sus desarrollos nativos. Así pues, para evitar confusiones, el framework open source fue renombrado como React 360. que refleja mejor el objeto del mismo, que es la creación de experiencias 360 inmersivas para PC, movil y headsets VR. En esta nueva versión, se simplificaron algunos procesos, se agregaron novedosos elementos de UI en 2D y se optimizó el rendimiento para esos casos de uso. Adicionalmente, se introdujeron algunos conceptos como Runtime, Executors y Surfaces.

En esta charla, exploraremos estos nuevos conceptos introducidos en la librería y cómo, gracias a este nuevo enfoque, se ha evidenciado una diferencia clara entre React 360, A-Frame y Three.js.

Transcript

2. Realidad Virtual
4. Mainstream?
6. React VR
7. React 360 Cross Platform Immersive Media
8. Runtime
9. Surfaces https://bit.ly/2NRHad6
10. Locations https://bit.ly/2NRHad6
11. Componentes • View • Entity • Image • VR Button
12. Demo!
13. class Menu extends React.Component { render() { return ( <View style={styles.menu}> {characters.map((character, index) => { return ( <CharacterButton key={character.name} character={character} index={index} /> )}) } </View> ) } } Menu
14. render() { const { character, index } = this.props const hover = this.state.hover return ( <VrButton onEnter={this.handleEnter} onExit={this.handleExit} onClick={() => this.handleClick(index)} > <Image style={[styles.image, hover ? styles.imageHover : null]} source={asset(character.thumbnail)} /> </VrButton> ) } Menu
15. <View> <AmbientLight intensity={1.0} color={'#ffffff'} /> <PointLight intensity={1} style={{transform: [{translate: [0, 3, 3]}]}} /> <Animated.View style={{transform: [{scale}]}}> <Entity source={{gltf2: asset(characterDetails.modelPath)}} style={{ transform: [{rotateY: rotation}, ...characterDetails.scaleArray] }} /> </Animated.View> </View> Model
16. const rightPanel = new Surface(1000, 620, Surface.SurfaceShape.Cylinder); r360.renderToSurface( r360.createRoot('menu'), rightPanel, ); r360.renderToLocation( r360.createRoot('model'), new Location([3, -2, -10]), ); r360.compositor.setBackground(r360.getAssetURL('forest.png')); Client.js
17. ¿React-360 o A-Frame?
18. ¿Cómo empezar? • https://github.com/fcor/nintendo-360 • npm install -g react-360-cli react-360 init Hello360
19. Estamos creando el futuro!
20. Hagamos realidad la ciencia ficción