Learning through Art: An Introduction to Virtual Reality

Transcript

1. View Slide

2. Opendoor
   Work
   WaffleJS
   Meetup
   @billyroh
   Twitter
   

   View Slide

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

   View Slide

4. Social
   Media
   Games
   Videos
   

   View Slide

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

   View Slide

6. Virtual reality is
   uncharted territory.
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. You are the viewer,
    not the participant.
    

    View Slide

12. View Slide

13. Virtual reality, but
    make it personal.
    

    View Slide

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
    
    
    %
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. ✅ ✅
    

    View Slide

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

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. .obj
    Skeleton of the model.
    The physical shape.
    .mtl
    Skin of the model. The
    materials and colours.
    

    View Slide

25. View Slide

26. Caching is caring.
    It’s also better for performance.
    3D models Images Audio/Video
    
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. Coffee Table
    1 flower
    1
    4
    

    View Slide

31. View Slide

32. Create the surface
    

    View Slide

33. Create the legs
    

    View Slide

34. Wrap it in
    for clarity.
    

    View Slide

35. View Slide

36. Console
    1 TV
    1
    4
    

    View Slide

37. View Slide

38. No Lighting
    Low Contrast
    

    View Slide

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

    View Slide

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

    View Slide

41. Spot
    Only lights in a specific direction
    

    View Slide

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

    View Slide

43. Hemisphere
    Like ambient, but with two separate colours
    

    View Slide

44. View Slide

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
    

    View Slide

46. View Slide

47. View Slide

48. 12 lighting elements
    <20 fps
    3 lighting elements
    >30 fps
    
    

    View Slide

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

    View Slide

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

    View Slide

51. View Slide

52. View Slide

53. 1. Get Camera Coordinates
    
    

    View Slide

54. 2. Generate Cylinder
    ✨
    

    View Slide

55. 3. Set Position and Append
    
    

    View Slide

56. View Slide

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

    View Slide

58. View Slide

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

    View Slide

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

    View Slide

61. Create a mirror
    image when z < 0.
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. A Brief Lesson
    on Physics
    Integrating a physics
    engine to the scene
    

    View Slide

67. aframe-physics-system
    

    View Slide

68. Dynamic Body
    Reactive to collisions
    and gravity.
    Static Body
    Fixed position, or fixed
    animation, unreactive.
    

    View Slide

69. View Slide

70. Directly set the velocity.
    

    View Slide

71. View Slide

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

    View Slide

73. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. Create a box in
    its image.
    

    View Slide

78. Make it invisible
    then you’re done.
    

    View Slide

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

    View Slide

80. View Slide

81. View Slide

82. No one knows what they’re doing.
    Don’t be afraid to make something
    strange and beautiful.
    

    View Slide

83. Twitter
    @billyroh
    billyroh.com/obliteration
    Demo
    

    View Slide