Насколько сложно создать виртуальный тур и добавить на сайт? Я расскажу как сделать это за 5 минут, мы добавим его на веб страницу, откроем в мобильном браузере и запустим в очках виртуальной реальности. Разберёмся как всё устроено, рассмотрим библиотеку THREE.js и технологию WebGL.

2. СОЗДАЁМ ВИРТУАЛЬНЫЙ ТУР
Еростенко Игорь

3. УМНЫИ БРАСЛЕТ
Браслет для выявления стрессовых ситуаций

4. УМНЫИ БРАСЛЕТ
Браслет для обнаружения стрессовых ситуаций

5. • Геопозиционирование
• Датчик температуры
• Пульсометр
УМНЫИ БРАСЛЕТ
Технические особенности
Запись звука Датчик кожно-гальванической
реакции
Датчик движения

6. ПРИМЕРОЧНАЯ
Сканирование

7. ПРИМЕРОЧНАЯ
Получение метрик
Отсканированная модель Результат Сегментация Распознание
рук и ног
Нарезка
и сглаживание

8. СОЗДАНИЕ
ОДЕЖДЫ

10. СОЗДАНИЕ
ОДЕЖДЫ

11. СОЗДАНИЕ
ОДЕЖДЫ

12. ГОЛОГРАММА

13. ГОЛОГРАММА
Техника "Призрак Пеппера"

14. ГОЛОГРАММА
Реконструкция человека
Карта глубины RGB текстура
Текстурированная полигональная сетка
KINECT

15. ГОЛОГРАММА
Реконструкция человека
Отсканированная модель Изображение с камеры

16. • Максимальное покрытие — работает из браузера
• Низкий порог вхождения — не требуется установка
дополнительных плагинов и приложений
ВИРТУАЛЬНЫИ ТУР
Постановка задачи

17. ANDROID & IOS EXTERNAL APP
Внешнее приложение

18. UNITY3D WEBGL
Высокий оверхед для мобильных
браузеров

19. • Работает в браузерах, в т.ч. мобильных
• Поддерживает panorama view, google cardboard
• Быстрое создание тура
- Не поддерживает Web VR
GOOGLE VR VIEW (JS LIB)
Углы Эйлера
https://github.com/googlevr/vrview.git

20. • Работает в браузерах, в т.ч. мобильных
• Поддерживает Web VR
- Требуется дополнительная разработка
A-FRAME, REACT VR (JS LIBS)
https://github.com/aframevr/aframe.git

21. • Мобильные браузеры, panorama
view,
Google cardboard
• Быстрая интеграция
• Мобильные браузеры, panorama view,
Google cardboard
• Требуется разработка виртуального
тура
• Samsung Gear VR — Samsung Internet
(только телефоны Galaxy)
• HTC Vive — Firefox Nightly
• Oculus Rift — Firefox Nightly
A-FRAME (JS LIB)GOOGLE VR VIEW (JS LIB)

22. HTC VIVE

23. HTC VIVE

24. HTC VIVE

25. • Мобильные браузеры, panorama
view,
Google cardboard
• Быстрая интеграция
• Мобильные браузеры, panorama view,
Google cardboard
• Требуется разработка виртуального
тура
• Samsung Gear VR — Samsung Internet
(только телефоны Galaxy)
• HTC Vive — Firefox Nightly
• Oculus Rift — Firefox Nightly
A-FRAME (JS LIB)GOOGLE VR VIEW (JS LIB)

26. • Формат png, jpeg или gif, рекомендуется jpeg для улучшенной компрессии
• Моно картинка должна иметь соотношение сторон 2:1 (например 4096 x 2048)
• Стерео картинка должна иметь соотношение сторон 1:1 (например 4096 x
4096)
GOOGLE VR VIEW (JS LIB)
Изображения:

27. GOOGLE VR VIEW (JS LIB)
Видео:
• Формат mp4 сжатие h264
• Моно видео должно иметь соотношение сторон 2:1
• Стерео видео должно иметь соотношение сторон 1:1
• Некоторые старые устройства не могут декодировать видео больше чем
1080p (1920x1080). Если максимальная совместимость и качество
являются приоритетными, рекомендуется предоставлять как моно видео с
разрешением 1920x1080, так и стерео видео
с разрешением 2048x2048 или выше.

28. ПАНОРАМНОЕ
ФОТО Nexus native
camera app
Panorama 360 Google Camera Cardboard
Ricoh theta
...

29. XMP METADATA

30. XMP METADATA
GImage:Data = “RTb2Z0d2FyZQBiZSBF5ccllPAAA…”

33. 3D ЭФФЕКТ
Cardboard camera converter
Cardboard camera toolkit

34. 3D ЭФФЕКТ
Left-Right Multiplexing (Side by Side)
Top-Bottom Multiplexing
TOP - LEFT SIDE
BOTTOM - RIGHT SIDE
LEFT SIDE RIGHT SIDE

35. GOOGLE VR VIEW (JS LIB) THREE.JS WEB GL

36. THREE.JS
SVG HTML5 CANVAS WEB GL
• Создаём сцену
• Создаём рендерер (визуализатор)
• Создаём камеру
• Создаём 3D объекты (с материалами)
Pipeline
https://github.com/mrdoob/three.js.git
Аналоги
• GLGE
• SceneJS
• PhiloGL

37. THREE.JS

38. THREE.JS

39. THREE.JS

40. THREE.JS

41. THREE.JS

42. WEB GL
Application Layer
Hardware

43. WEB GL
Application Layer
Hardware
WebGL
OpenGL, DirectX
HAL

44. WEB GL Application Layer
Hardware
WebGL
OpenGL, DirectX
HAL
Three.js
Browser
Angle

45. GOOGLE VR VIEW VREffect.render()
Three.js
AnaglyphEffect.render()
StereoEffect.render()
Embed.js

46. GOOGLE VR VIEW

47. EPAM GARAGE VR TOUR
epamvrtour.azurewebsites.net
Игорь Еростенко
Павел Гилетич
Евгений Чайка
Chrome: