Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping in aframe

69 views

Published on

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

Published in: Design
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×