Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning through Art: An Introduction to Virtual Reality

Learning through Art: An Introduction to Virtual Reality


Billy Roh

May 18, 2018

More Decks by Billy Roh

Other Decks in Technology


  1. None
  2. Opendoor Work WaffleJS Meetup @billyroh Twitter

  3. Low-end Phone-in-a-box, no dedicated anything High-end Dedicated machines, controllers, sensors

  4. Social Media Games Videos

  5. Not Infinitely Replicable One-Way Street Tight Guardrails Not Infinitely Replicable

    One-Way Street Tight Guardrails
  6. Virtual reality is uncharted territory.

  7. None
  8. None
  9. None
  10. None
  11. You are the viewer, not the participant.

  12. None
  13. Virtual reality, but make it personal.

  14. 1. Scene Layout 2. Dynamic Entities 3. Interaction & Physics

    Creating a scene and populating it Generating entities in the scene on the fly Having the stickers fly and stick as expected %
  15. None
  16. None
  17. None
  18. ✅ ✅

  19. Asset Management A-Frame’s asset loading and caching system

  20. None
  21. None
  22. None
  23. None
  24. .obj Skeleton of the model. The physical shape. .mtl Skin

    of the model. The materials and colours.
  25. None
  26. Caching is caring. It’s also better for performance. 3D models

    Images Audio/Video
  27. None
  28. None
  29. None
  30. Coffee Table 1 flower 1 <a-cylinder> 4 <a-box>

  31. None
  32. Create the surface

  33. Create the legs

  34. Wrap it in <a-entity> for clarity.

  35. None
  36. Console 1 TV 1 <a-box> 4 <a-cylinder>

  37. None
  38. No Lighting Low Contrast

  39. Lighting the Scene Adding lighting to the scene for better

  40. Ambient Position-agnostic, affects globally Point Position-dependent, affects locally

  41. Spot Only lights in a specific direction

  42. Directional Like ambient, but lights in a specific direction

  43. Hemisphere Like ambient, but with two separate colours

  44. None
  45. Type Ambient, directional, hemisphere, point, spot Distance How far the

    light should reach Intensity How bright the light should be Color What colour the light should emit
  46. None
  47. None
  48. 12 lighting elements <20 fps 3 lighting elements >30 fps

  49. Default lighting, low contrast. Custom lighting, higher contrast.

  50. Dynamic Generation Appending stickers to the scene on the fly

  51. None
  52. None
  53. 1. Get Camera Coordinates

  54. 2. Generate Cylinder ✨

  55. 3. Set Position and Append

  56. None
  57. Rotating around the y-axis. Rotating around the x-axis.

  58. None
  59. x-axis z-axis -1 -1 +1 +1

  60. Always facing the same way. Facing the direction of the

  61. Create a mirror image when z < 0.

  62. None
  63. None
  64. None
  65. None
  66. A Brief Lesson on Physics Integrating a physics engine to

    the scene
  67. aframe-physics-system

  68. Dynamic Body Reactive to collisions and gravity. Static Body Fixed

    position, or fixed animation, unreactive.
  69. None
  70. Directly set the velocity.

  71. None
  72. After a collision, make it a static-body.

  73. None
  74. The Two-Body Problem Altering the default physics body

  75. The model is complex. The body is simple.

  76. The engine makes its best guess. Sometimes it’s wrong.

  77. Create a box in its image.

  78. Make it invisible then you’re done.

  79. Closing Remarks A final demo and things to think about

  80. None
  81. None
  82. No one knows what they’re doing. Don’t be afraid to

    make something strange and beautiful.
  83. Twitter @billyroh billyroh.com/obliteration Demo