Grodno is a city-museum of the Republic of Belarus, as well as one of the oldest cities in the country. GrodnoVR provides a unique opportunity to explore the sights in the virtual reality mode. The ability to trace the history of attractions through the old photos of the city. GrodnoVR - an open source demo based on the ReactVR library. https://grodno-vr.github.io/

1. GrodnoVR:
Artur Basak
My first and last experience
with ReactVR

2. 2
Few words about me
Grodno, 2018
/artur.basak /arturbasak /@arturbasak
Artur Basak
*instinctools EE Labs, Lead UI Developer
Developing, implementing and testing user interfaces more than 8 years

3. 3Grodno, 2018
GrodnoVR demo app - https://grodno-vr.github.io

4. Terms

5. 5
VR-headset - Head-mounted Device
Grodno, 2018
• Oculus Rift
• Oculus Go
• HTC Vive
• Google Daydream
• Google Cardboard
• Samsung Gear VR
• PlayStation VR
Frame from film «Jhonny Mnemonik»
Frame from film «Jhonny Mnemonik»

6. 6
VR vs AR vs AV vs MR/XR
Grodno, 2018
• VR - Virtual Reality
• AR - Augmented Reality
• AV - Augmented Virtuality
• MR / XR - Mixed / Extended Reality
Picture from uxplanet.org

7. 7
Degrees of Freedom
Grodno, 2018
Picture from ichip.ru, source: Unity

8. 8Grodno, 2018
GrodnoVR demo app - https://grodno-vr.github.io

9. Idea & Motivation

10. 10Grodno, 2018
The future of UI - VR & VUI
Picture from mixedreality.mozilla.org Picture from developer.amazon.com/alexa-skills-kit/vui

11. 11Grodno, 2018
Why ReactVR?
https://immersive-web.github.io/webvr/spec/1.1
Platform compatibility:
https://webvr.rocks
https://webvr.info

12. 12Grodno, 2018
Why ReactVR?

13. 13Grodno, 2018
Idea & Motivation
THE BRITISH MUSEUM (BY OCULUS) - HTTP://VR.BRITISHMUSEUM.ORG

14. 14Grodno, 2018
React VR is Built on React Native
React Native
React VR
OVRUI
Three.js
WebGL / WebVR
React
Application Code
Web WorkerBrowser Main Thread
…

15. 15Grodno, 2018
React Components

16. New
Tools

17. 17
Tools
Grodno, 2018
360-DEGREE PHOTO
• Google Street View
• Photoshop

18. 18Grodno, 2018
Place Component

19. 19Grodno, 2018
Tools
PHOTOGRAMMETRY
• Agisoft PhotoScan Pro (MacOS)
• Autodesk ReCap Photo (Win)

20. 20Grodno, 2018
Model Component

21. 21Grodno, 2018
Tools
PHOTOGRAMMETRY
FAILS

22. VR UI: Controls

23. 23Grodno, 2018
VR UI: Panels

24. 24
VR UI: Cylindrical Panels
Grodno, 2018
Frame from «Designing Screen Interfaces for VR (Google I/O ’17)» Chris McKenzie

25. 25
VR UI: Cylindrical Panels
Grodno, 2018

26. 26
VR UI: Swiveling Panels
Grodno, 2018
Frame from «Designing Screen Interfaces for VR (Google I/O '17)» Chris McKenzie

27. 27Grodno, 2018
VR UI: Swiveling Panels

28. 28
VR UI: Swiveling Panels
Grodno, 2018

29. 29Grodno, 2018
VR UI: Angles & Sizes

30. 30Grodno, 2018
VR UI: Angles & Sizes
Frame from «Designing Screen Interfaces for VR (Google I/O ’17)» Adam Glazier

31. 31Grodno, 2018
VR UI: Angles & Sizes

32. 32Grodno, 2018
VR UI: GazeButton

33. 33Grodno, 2018
VR UI: GazeButton

34. Cross-Platform

35. 35Grodno, 2018
VR & Web Components

36. 36Grodno, 2018
VR & Web Components

37. 37Grodno, 2018
Web vs VR

38. 38Grodno, 2018
RayCaster

39. Future of
ReactVR

40. 40Grodno, 2018
React 360 is Replacing React VR
Frame from film «Ready Player One»

41. 41Grodno, 2018
React360

42. 42Grodno, 2018
Other libraries
• A-Frame
• Babylon.js
• WebVR + Gamepad + Three.js

43. 43Grodno, 2018
WebXR is Replacing WebVR
Frame from film «Ready Player One»

44. 44Grodno, 2018
WebVR is deprecated
Frame from «The future of the web is immersive (Google I/O ’18)» Brandon Jones
https://immersive-web.github.io/webxr

45. 45Grodno, 2018
Captain
• VR works in web
• Immersive content + photogrammetry
• Guidelines: reuse, but not all rules
• Try to support all devices & platforms
• Expect changes and updates
• To be a pioneer
Picture from marvel.wikia.com

46. 46
Thank You
and Have fun!
GROCON 2018
Grodno, 2018
Picture from vrscout.com