Empfohlen
Weitere ähnliche Inhalte
Ăhnlich wie Byte Conf React Native 2018
Ăhnlich wie Byte Conf React Native 2018 (20)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
Byte Conf React Native 2018
- 1. Developing AR & VR Applications using React-Native
- 2. Pulkit Kakkar Organizing Team Facebook Developer Circle: Delhi-NCR Independent Developer @pulkitkkr0 www.linkedin.com/in/pulkitkkr pulkitkkr@gmail.com &
- 3. Agenda WhenHowWhyWhat All About the XR *X â { A, V, M }
- 4. History of UI & UX Punch Cards Key Boards Mouse
- 5. History of UI & UX Touch Based UIs Voice Controlled UIs
- 6. âThe Future is XR â
- 8. Is it all about just Entertainment ? Medical Army Training
- 9. AR and itâs Applications
- 10. Types of AR Systems Marker-Based Marker-Free
- 11. Available AR Libraries 2) Unity-3D / Unreal ⢠Need to learn C# scripting ⢠Available ArCore & ArKit Binding ⢠Really powerful, best if developing a game ⢠Not much powerful for Uis when compared to React 1) React-Native ARKit / ARCore ⢠Experimental ⢠Wrapper around Native Code 3) React-360 ⢠Only for VR ⢠Limited 3D Models Support
- 12. Cross Platform Development ⢠Write once, run anywhere across all mobile AR (ARKit, ARCore) and VR (Cardboard iOS/Android, GearVR, Daydream) React Native Framework ⢠Create apps using React Native, making it easy for web developers to get started. Powerful Renderer ⢠Create stunning scenes with PBR, HDR, Realtime Lighting, Physics, Particles, and more. Rapid iteration ⢠Use the free Viro Testbed app to view your app and see your changes quickly. No need to wait for recompile. It's like refreshing a browser. Docs ⢠Extensive developer support and documentation.
- 13. Getting Started with Viro 1) react-native init ViroSample --version=0.55.1 2) cd ViroSample 3) npm install -S -E react-viro 4) Get your API Keys from https://viromedia.com/ 5) Modify App.js to add your API Keys OR 1) npm i âg react-viro-cli 2) react-viro âProjectNameâ
- 15. Basic Componential Layout <ViroScene> - React-Native View - Node(s) to ViroNavigators - contains UI controls, 3D objects, lights, and more <ViroText> - Adds Text Like <Text> or <h1> - <h6> - Styled Like React-Native in general
- 16. Positioning Systems Right Handed System - Negative Z inside - axis direction changed with rotation prop - to determine +ve rotation use thumb rule Left handed System - positive Z-axis Inside
- 17. 3-D Objects ⢠Viro have a really powerful 3-D Rendering Engine which runs on native thread and uses graphical hardware chip of device ⢠Itâs Lag free but need to use optimized 3-d Files and preferably low-poly files for mobile devices
- 18. Supported 3-D File Formats .obj Files - No animations - No Conversion script required - need .mtl materials or list of textures .fbx Files - transformed to .vrx using script at ./bin/ViroFBX - supports skeletal animations - use <ViroDirectionalLight> .gltf Files - new format - JSON >> BIN >> PNG
- 19. Sources for 3-D models Files Unity Assets Store - https://assetstore.unity.com/ - hundreds of thousands of paid and free models abailable Mixamo - Great project for making avatars - Animate them with hudreds of free and premium animations - https://www.mixamo.com SketchFab - a great place to search for free models - https://www.sketchfab.com Self Modeling - for Basics use MS Paint 3d - Blender with textures - Advanced Modeling MAYA 3d Google Low-Poly - A great open initiative by google - Free low poly models - Best suited models for low grade HMDs & Mobile AR Devices Turbo Squid - Another great place for free 3d Models - https://www.turbosquid.com
- 20. 3-D Objects Code Demonstration
- 21. Lightnings and itâs types You illuminate scenes in Viro by adding lights to your ViroNode(s) object. Ambient Light - illuminate all objects - illuminate from all directions - use <ViroAmbientLight> Directional Light - illuminates all objects in range - specified direction - use <ViroDirectionalLight> Spot Light - illuminate all objects in range - illuminated in cone specified by inner & outer angle - use <ViroSpotLight> Point Light - emitted from object - diverging sphere - use <ViroOmniLight>
- 22. Lightnings Demonstration Point Light Spot Light
- 25. Particle Effects Viro's particle system enables developers to create and configure quad emitters for building complex and intricate particle effects. Some examples are smoke, rain, confetti, and fireworks. Image Source representing the particles to emit State the rate at which the particle emits and lives for Start the emitter
- 26. When to use ViroReact ? 1) ARCore and ARKit Limitation are not an issue 2) Not a Graphic Intensive UI 3) Not building a full fledged Game 4) Not targeting High End HMDs (VR) or standalone AR HMDs 5) Targeting Both AR & VR and maximizing cross-platform code sharing
- 27. Thank You Letâs build the future of UI/UX Together @pulkitkkr0 www.linkedin.com/ in/pulkitkkr pulkitkkr@gmail.com
Hinweis der Redaktion
- 1.) Greetings 2.) 3 - Key Terms Here a) Immersive Experience b) AR â VR â MR â XR (Common Reality) c) React-Native
- From India Started at the age of 16 Have Seen the web transitioning from ASP.Net to Jquery to React Worked on BlackBerry 10 , Nokia (PUN Intended) Finally chose Android Development and got Introduced to React Native
- ViroScene Vs ViroARScene VIroARSceneNavigator Vs ViroSceneNavigator 3) Generic : ViroSound, ViroText
- 1) Applications in ViroReact consist of Scenes, represented either by ViroScene or ViroARScene components. Scenes are the 3D equivalent of the Views found in most 2D application frameworks. They contain all the content that ViroReact renders in AR/VR: UI controls, 3D objects, lights, and more.
- By default, the camera is positioned at [0, 0, 0] and looks in the direction [0, 0, -1]. In frameworks with only 3DOF (3 degrees of freedom) support (like mobile VR), the camera stays at [0,0,0] until moved by the developer with the end user only able to control the rotation of the camera. On the other hand, 6DOF (6 degrees of freedom) supported frameworks allow the end user to move about their world and move the camera in the Viro Scene in response (like in AR)
- FBX models support skeletal animation. Skeletal animation is a hierarchical technique for animating complex geometries like humanoids. Viro supports these animations through its standard animation system. To run a skeletal animation, simply set the animation's name to the name given to the animation in the FBX file. For example, if the FBX file had an animation called "Take 001", you would run the animation like this: 2) GLTF a) A JSON-formatted file (.gltf) containing a full scene description: node hierarchy, materials, cameras, as well as descriptor information for meshes, animations, and other constructs b) Binary files (.bin) containing geometry and animation data, and other buffer-based data c) Image files (.jpg, .png) for textures