Successfully reported this slideshow.

Prototyping in aframe

1

Share

Loading in …3
×
1 of 47
1 of 47

Prototyping in aframe

1

Share

Download to read offline

A quick starter for prototyping in Aframe. Designers often find it difficult to communicate their VR design ideas to fellow developers. This is the presentation prepared for a VR design meetup in Bangalore wherein I gave hands on workshop to prototype in aframe for VR

A quick starter for prototyping in Aframe. Designers often find it difficult to communicate their VR design ideas to fellow developers. This is the presentation prepared for a VR design meetup in Bangalore wherein I gave hands on workshop to prototype in aframe for VR

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Prototyping in aframe

  1. 1. Prototyping for Virtual Reality (VR)
  2. 2. since 2008 ...
  3. 3. Interior Designer
  4. 4. Am an entrepreneur now bit selfish “2018 - Investing in talking to people”
  5. 5. VR | AR | MR | XR Understand the difference or similarities Virtual | Augmented | Mixed | Extended Virtual Augmented Mixed Extended
  6. 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. 7. VR Concepts
  8. 8. FOV - Field of view
  9. 9. FOV - Field of view
  10. 10. FOV - Field of view
  11. 11. Latency / Video lag Expected: 7 ms Current: 50 ms Oculus: 30-40 ms Mobile VR: 40-90 ms Vive: 8-10 ms
  12. 12. Degree of Freedom - DOF 3 DOF 6 DOF Extended reality
  13. 13. Input - Interaction Headset Gaze Controller - 3 DoF Controller - 6 DoF
  14. 14. VR Design fundas
  15. 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. 16. Digital Designer for Real Space
  17. 17. Skybox
  18. 18. Skybox and placement of information
  19. 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. 20. In the age of digital tools for design and prototyping We are going to use paper wireframing
  21. 21. Paper wireframing
  22. 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. 23. Tools for VR prototype and development
  24. 24. Aframe
  25. 25. Setup the system ● ●
  26. 26. Let’s get started 1 2 3...
  27. 27. First scene
  28. 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. 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. 30. Right hand co-ordinate system Units are in meter
  31. 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. 32. Basic Geometry Do share screenshots and link @infivr
  33. 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. 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. 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. 36. Lights <a-light type="ambient" color="#445451"></a-light> <a-light type="point" intensity="2" position="2 4 4"></a-light>
  37. 37. Animation <a-animation attribute="position" from="0 0 0" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"> </a-animation>
  38. 38. Let’s tickle them...
  39. 39. Interactivity
  40. 40. Move around
  41. 41. Build your own VR Experience
  42. 42. My co-ordinates
  43. 43. VR design resources

×