Prototyping in aframe

1. Prototyping for Virtual Reality (VR)

2. since 2008 ...

3. Interior Designer

4. Am an entrepreneur now bit selfish “2018 - Investing in talking to people”

5. VR | AR | MR | XR Understand the difference or similarities Virtual | Augmented | Mixed | Extended Virtual Augmented Mixed Extended

6. Virtual Immersive Block the real world 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

7. VR Concepts

8. FOV - Field of view

11. Latency / Video lag Expected: 7 ms Current: 50 ms Oculus: 30-40 ms Mobile VR: 40-90 ms Vive: 8-10 ms

12. Degree of Freedom - DOF 3 DOF 6 DOF Extended reality

13. Input - Interaction Headset Gaze Controller - 3 DoF Controller - 6 DoF

14. VR Design fundas

15. Context Users Goals Design Process Experience Immersion Learning Explore Media Gamers Enterprise Entertainment Gaming Healthcare Automotive Manufacturing Design user personas, conceptual flows, wireframes, an interaction model

16. Digital Designer for Real Space

17. Skybox

18. Skybox and placement of information

19. Googles’ design guidelines for 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

20. In the age of digital tools for design and prototyping We are going to use paper wireframing

21. Paper wireframing

22. Warm up A typical stop sign is 1.82 meters tall (around 6 feet). A traffic light is 4.57 meters tall (around 15 feet).

23. Tools for VR prototype and development

24. Aframe

25. Setup the system ● ●

26. Let’s get started 1 2 3...

27. First scene

28. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html>

29. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-box color="red"></a-box> </a-scene> </body> </html>

30. Right hand co-ordinate system Units are in meter

31. <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

32. Basic Geometry Do share screenshots and link @infivr

33. <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>

34. <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

35. <html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <a-img id=’’ 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>

36. Lights <a-light type="ambient" color="#445451"></a-light> <a-light type="point" intensity="2" position="2 4 4"></a-light>

37. Animation <a-animation attribute="position" from="0 0 0" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"> </a-animation>

38. Let’s tickle them...

39. Interactivity

40. Move around

41. Build your own VR Experience

42. My co-ordinates

43. VR design resources

Prototyping in aframe

Kumar Ahir

Prototyping in aframe