WebVR: The Next Frontier

As new virtual reality headsets are quickly becoming available to the consumer, WebVR is opening up new frontiers of interaction for the web. Beyond gaming and entertainment, WebVR is creating whole new classes of immersive applications for the Web Platform in communication, education, shopping, and more. Let’s see how easy it is to get started developing for virtual reality in a browser by building a virtual reality experience using A-Frame, React, an Oculus Rift, and a Leap Motion controller.

Transcript

1. @alc277
   andrewcassell.com
   WebVR:

   The Next Frontier
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. VR Devices
    

    View Slide

15. View Slide

16. View Slide

17. Graz University of Technology
    Institute of Computer Graphics and Knowledge Visualization
    

    View Slide

18. freesoftwaremagazine.com
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. Augmented
    Reality
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. 
    
    
    
    
    

    View Slide

27. Frozen Sing-Along
    https://github.com/cassell/frozen-web-
    augmented-reality-demo
    

    View Slide

28. View Slide

29. View Slide

30. Frozen Sing-Along
    https://github.com/cassell/frozen-web-
    augmented-reality-demo
    

    View Slide

31. View Slide

32. Virtual
    Reality
    

    View Slide

33. View Slide

34. Gaming
    

    View Slide

35. View Slide

36. Business
    

    View Slide

37. Shopping Real Estate
    Education Medical
    

    View Slide

38. https://www.superdataresearch.com/market-data/virtual-reality-industry-report/
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. Virtual
    Reality
    Business
    Gaming &
    Entertainment
    

    View Slide

46. WebVR
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. http://mozvr.com/webvr-spec/
    

    View Slide

52. WebVR
    

    View Slide

53. WebVR
    No Installs
    Many Devices
    No Vendor Lock-in
    Many Browsers
    

    View Slide

54. mozvr.com
    

    View Slide

55. WebVR
    Breaking Changes
    Frame Rate
    Motion Sickness
    Mainstream Support
    

    View Slide

56. View Slide

57. DEAL WITH IT
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. aframe.io
    

    View Slide

62. A-Frame
    VR + Mobile + Desktop
    Entity Component System
    Uses three.js and WebGL
    Open Source
    Animations
    Events
    

    View Slide

63. IF YOU CAN WRITE HTML
    YOU CAN DEVELOP FOR VIRTUAL REALITY
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. x y z
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. https://github.com/cassell/webvr-soccer-stadium-multiplex
    

    View Slide

80. View Slide

81. https://github.com/cassell/webvr-soccer-stadium-multiplex
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. http://facebook.github.io/react
    

    View Slide

89. https://github.com/cassell/aframe-react-leapmotion-slot-machine
    

    View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. https://github.com/cassell/aframe-react-leapmotion-slot-machine
    

    View Slide

99. The Walking Dead
    

    View Slide

100. https://github.com/cassell/aframe-react-leapmotion-slot-machine
     

     View Slide

101. aframe.io
     

     View Slide

102. A-Frame
     v0.3.0
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. Device
     Device
     

     View Slide

111. Device
     Device
     

     View Slide

112. Device
     Device
     

     View Slide

113. https://amzn.com/B01770MBN4
     

     View Slide

114. View Slide

115. We always overestimate the
     change that will occur in the
     next two years and
     underestimate the change
     that will occur in the next ten.
     Don't let yourself be lulled
     into inaction.
     

     View Slide

116. View Slide

117. Thank You!
     @alc277
     andrewcassell.com
     

     View Slide