Downloaded 13 times
Prototyping in aframe
- 1.
- 2.
- 4.
- 5. Am an entrepreneurnow bit selfish “2018 - Investing in talking to people”
- 6. VR | AR| MR | XR Understand the difference or similarities Virtual | Augmented | Mixed | Extended Virtual Augmented Mixed Extended
- 7. Virtual Immersive Block the realworld Teleport to a new world and time Part of simulation Augmented Overlay information View the real world Present in time and space Part of real world
- 8.
- 9. FOV - Fieldof view
- 10. FOV - Fieldof view
- 11. FOV - Fieldof view
- 12. Latency / Videolag Expected: 7 ms Current: 50 ms Oculus: 30-40 ms Mobile VR: 40-90 ms Vive: 8-10 ms
- 13. Degree of Freedom- DOF 3 DOF 6 DOF Extended reality
- 14. Input - Interaction Headset Gaze Controller- 3 DoF Controller - 6 DoF
- 15.
- 16. Context Users Goals DesignProcess Experience Immersion Learning Explore Media Gamers Enterprise Entertainment Gaming Healthcare Automotive Manufacturing Design user personas, conceptual flows, wireframes, an interaction model
- 17.
- 18.
- 20.
- 21. Googles’ design guidelinesfor VR 1. Using a Reticle 2. UI Depth & Eye Strain 3. Using Constant Velocity 4. Keeping the User Grounded 5. Maintaining Head Tracking 6. Guiding with Light 7. Leveraging Scale 8. Spatial Audio 9. Gaze Cues 10. Make it Beautiful
- 22. In the ageof digital tools for design and prototyping We are going to use paper wireframing
- 23.
- 26. Warm up A typicalstop sign is 1.82 meters tall (around 6 feet). A traffic light is 4.57 meters tall (around 15 feet).
- 27. Tools for VRprototype and development
- 28.
- 29.
- 30. Let’s get started 12 3...
- 31.
- 32.
- 33.
- 34. Right hand co-ordinatesystem Units are in meter
- 35. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="red"position=”0 10 -10” rotation=”0 90 15” scale=”1.2 1.2 1.2”></a-box> </a-scene> </body> </html> Position Rotation Scale
- 36. Basic Geometry Do share screenshots andlink @infivr
- 37. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="red"position=”0 10 -10” rotation=”0 90 15” scale=”1.2 1.2 1.2”></a-box> <a-sky color="#222"></a-sky> </a-scene> </body> </html> Setting up environment <a-sky>
- 38. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="red"position=”0 10 -10” rotation=”0 90 15” scale=”1.2 1.2 1.2”></a-box> <a-sky color="#222" src=”abc.jpg”></a-sky> </a-scene> </body> </html> Setting up environment <a-sky> of your own
- 39. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <a-imgid=’’ src=’’/> </a-assets> <a-box color="red" position=”0 10 -10” rotation=”0 90 15” scale=”1.2 1.2 1.2”></a-box> <a-sky color="#222" src=”abc.jpg”></a-sky> </a-scene> </body> </html> Asset management <a-assets> <a-img>
- 40. Lights <a-light type="ambient" color="#445451"></a-light> <a-light type="point" intensity="2"position="2 4 4"></a-light>
- 41. Animation <a-animation attribute="position" from="0 0 0" to="02.2 -5" direction="alternate" dur="2000" repeat="indefinite"> </a-animation>
- 42.
- 43.
- 44.
- 45. Build your own VRExperience
- 46.
- 47.