![](\"https:\/\/habrastorage.org\/files\/48f\/49b\/b85\/48f49bb858d44ed2bcc96eb33389a76a.jpg\")
<\/p>\n<\/p>\n
\u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0430\u0432\u0430 \u043d\u0430 \u0437\u0430\u0445\u0432\u0430\u0442 \u043c\u0438\u0440\u0430. \u041f\u0440\u0438\u0447\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0438 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0433\u0440\u0430\u043c\u0438. \u0410 \u0441 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 VR\/AR \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0432\u043e\u0437\u0440\u043e\u0441 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c MVP(Minimum Viable Product) \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0442\u0430\u043a \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u2014 WebVR. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0438 \u043a\u0430\u043a \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0418 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u0430\u043c\u043e\u0433\u043e WebVR API? \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u043e\u0441\u0438\u0442 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440, \u0438 \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e WebVR API \u0438 Web AR \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e. \u0415\u0441\u043b\u0438 \u0442\u0435\u043c\u0430 \u0437\u0430\u0439\u0434\u0435\u0442, \u0442\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0435\u0435, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u0438\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432. \u042f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043b\u0438\u0447\u043d\u044b\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438 \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 WebVR, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c Web AR, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 iOS, \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.<\/p>\n \u0412 \u0422\u0443\u0442\u0443.\u0440\u0443 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0432 \u0434\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f Frontend. \u0417\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 RnD (Research and Development ) \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438. \u0422\u0435\u043c\u0430 VR\/AR \u2014 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441 \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u043e\u0439, \u043d\u043e \u043c\u044b \u0443\u0436\u0435 \u0434\u0443\u043c\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043d\u0430\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0442\u0443\u0440\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0431\u0438\u0437\u043d\u0435\u0441\u0430. \u041c\u0435\u043d\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u0430\u043d\u044f\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u0438 \u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f Frontend \u0441\u0442\u0435\u043a. \u0421\u043a\u043e\u0440\u0435\u0435 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441\u0430\u043c\u0430 \u0438\u0434\u0435\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u0443\u0441\u0442\u044c \u043f\u043e\u043a\u0430 \u044d\u0442\u043e \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u043e\u043d\u0438 \u0432\u0441\u0435 \u0440\u0435\u0448\u0430\u0435\u043c\u044b, \u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0438 \u0432\u043e\u0432\u0441\u0435 \u043d\u0438\u0432\u0435\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n \u0421\u0430\u043c\u0443 \u0441\u043f\u0435\u043a\u0443 \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0449\u0435 \u0432 2014 \u0433\u043e\u0434\u0443, \u043d\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0431\u044b\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 2016 \u0433\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0435\u0439 Mozilla. \u0422\u043e\u0433\u0434\u0430 \u0431\u044b\u043b\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u0435\u0440\u0432\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0447\u0435\u0440\u043d\u043e\u0432\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f WebVR API. \u042d\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 VR \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0442\u0438\u043f\u0430 Oculus Rift \u0438 \u0438\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c (\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u043f\u0435\u043a\u0430 \u0438 \u043f\u0438\u0441\u0430\u043b\u0430\u0441\u044c \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434 \u043e\u043a\u0443\u043b\u0443\u0441). \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u0430 \u043f\u0440\u0438 \u0443\u0447\u0430\u0441\u0442\u0438\u0438 \u0411\u0440\u044d\u043d\u0434\u043e\u043d\u0430 \u0414\u0436\u043e\u043d\u0441\u0430 (Brandon Jones) \u0438\u0437 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Google \u0438 \u0414\u0436\u0430\u0441\u0442\u0438\u043d\u0430 \u0420\u043e\u0434\u0436\u0435\u0440\u0441\u0430 (Justin Rogers) \u0438\u0437 Microsoft.<\/p>\n \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 WebVR \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 Firefox \u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c Chrome (\u0442\u043e\u0447\u043d\u0435\u0435 \u043f\u0440\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u044e\u0430\u043d\u0441\u044b \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0434\u0430\u043b\u0435\u0435). \u0410 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u0437\u0430\u0432\u0442\u0440\u0430\u0448\u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0442\u0430\u0440, \u0441\u0442\u0440\u0430\u043d\u0435\u043d \u0438\u043b\u0438 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u2014 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b.<\/p>\n WebVR API \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438. \u041e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043f\u0440\u043e 3D \u0433\u0440\u0430\u0444\u0438\u043a\u0443. \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u0446\u0435\u043d\u044b, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0441\u0432\u0435\u0442\u0430 \u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0447\u0435\u0435 \u043b\u0435\u0436\u0438\u0442 \u043d\u0430 \u0441\u0443\u0440\u043e\u0432\u044b\u0445 \u043f\u043b\u0435\u0447\u0430\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432. WebVR API \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c. \u0414\u0430\u043d\u043d\u043e\u0435 API \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u0445, \u043d\u043e \u0441\u0430\u043c\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 3D \u043c\u0438\u0440 \u043d\u0443\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u0436\u0435 \u0441\u0442\u0430\u0432\u0448\u0438\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c\u0438 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a: HTML, CSS, WebGL, Canvas, etc\u2026<\/p>\n WebVR API \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b: <\/p>\n \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u0445: <\/p>\n \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u0434 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 VR \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043d\u0430 JavaScript \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a: <\/p>\n \u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c WebVR API. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435, \u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u0440\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n \u041a\u043e\u0433\u0434\u0430 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u043f\u0440\u043e VR, \u0442\u043e \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442 Oculus Rift \u0438 \u0438\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e WebVR, \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u043e\u0434 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/p>\n \u0421\u0430\u043c\u044b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u2014 \u044d\u0442\u043e \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 Cardboard \u0434\u0435\u0432\u0430\u0439\u0441\u044b (\u0438\u043b\u0438 \u0435\u0449\u0435 \u0438\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 VRBox\u2019\u044b). \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 VR \u0441\u043f\u0438\u0441\u043e\u043a \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u043e \u043f\u0430\u043b\u044c\u0446\u0430\u043c: <\/p>\n \u041f\u0440\u043e\u0441\u0442\u043e \u0431\u043e\u043a\u0441 \u0441 \u043b\u0438\u043d\u0437\u0430\u043c\u0438. \u0411\u044b\u0432\u0430\u044e\u0442 \u0432 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\u0445, \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u043a\u043e\u043f\u0438\u0439 Samsung GR VR, \u043d\u043e \u0441 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0447\u0435\u0440\u0435\u0437 Bluetooth \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430. \u0414\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f\u0445. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u043a\u0443\u043f\u0438\u0442\u044c Bluetooth \u0434\u0436\u043e\u0439\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043b\u044e\u0431\u044b\u043c \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u043c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u041e\u0421. \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0435, \u043a \u043b\u0438\u043d\u0437\u0430\u043c \u043d\u0435\u0442 \u043f\u0440\u0435\u0442\u0435\u043d\u0437\u0438\u0439. \u0412\u0441\u044f \u0441\u043e\u043b\u044c \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0435, \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438: \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438-\u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0442\u043e\u0440\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0439 \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u0441\u0442\u0438\u043b\u0443\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043f\u0430\u0435\u0442 \u0432 \u201c\u0441\u043b\u0435\u043f\u0443\u044e \u0437\u043e\u043d\u0443\u201d \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0446\u044b (\u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b \u0436\u0433\u0443\u0442 :)). \u0417\u0430\u0441\u0442\u0435\u0436\u043a\u0430 \u043d\u0430 \u043c\u043e\u043b\u043d\u0438\u0438.<\/p>\n \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438: \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0431\u043e\u043a\u0441\u0443 \u0447\u0435\u0440\u0435\u0437 USB, \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0441\u0435\u043d\u0441\u043e\u0440\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u043d\u0430 \u0448\u043b\u0435\u043c\u0435. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b Oculus, \u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043f\u0440\u0438\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f Oculus-\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c.<\/p>\n \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438: \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u043b\u043e\u0433\u043e \u043c\u0430\u0433\u043d\u0438\u0442\u0430. \u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u0433\u043d\u0438\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0433\u043d\u0438\u0442\u043e\u043c\u0435\u0442\u0440\u043e\u043c, \u0438 \u0434\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435 \u0432 Cardboard-\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Cardboard \u2014 \u0431\u043e\u043b\u0435\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0445\u0435\u0430\u0434\u0441\u0435\u0442 \u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0433\u0435\u0439\u043c\u043f\u0430\u0434\u0430. \u042d\u0442\u043e \u0443\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 VRBox, \u043d\u0435 \u0438\u0437 \u043a\u0430\u0440\u0442\u043e\u043d\u0430 \ud83d\ude42<\/p>\n \u0412\u043e\u0442 \u043f\u0440\u043e \u043d\u0438\u0445 \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c Chrome \u0438 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f VRBox\u2019a, \u0442\u043e \u0432\u044b \u0443\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 WebVR. \u041b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 Chrome Canary \u0438\u043b\u0438 Samsung Internet. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0430\u0434\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e iOS. \u041d\u043e \u0442\u0430\u043c VR \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u043c\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438 \u0441 iOS \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 (\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438). \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e WebVR API \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e 3D \u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c WebVR \u043c\u0438\u0440 \u043c\u043e\u0436\u043d\u043e \u0438 \u043f\u043e\u0434 iOS \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0430\u043c\u043e\u0433\u043e VR API (\u043d\u0443 \u0438\u043b\u0438 \u0441 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u0430\u043c\u0438).<\/p>\n \u0412\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 VR \u043c\u0438\u0440 \u043c\u043e\u0436\u043d\u043e \u0438 \u0447\u0435\u0440\u0435\u0437 \u043e\u043a\u043d\u043e \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u0438\u0440 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0431\u0435\u0437 \u0448\u043b\u0435\u043c\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u043e\u0434 \u043e\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0430\u0440\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043b\u0438\u0431\u043e Firefox Nightly, \u043b\u0438\u0431\u043e Chrome \u0432\u043e\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c \u0432\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c: WebVR API Emulation. \u041b\u0438\u0431\u043e Chrome Canary \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u043b\u0438\u0431\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 Chromium\u2026 \u041d\u0443 \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \ud83d\ude42<\/p>\n \u0418\u0442\u0430\u043a, \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f WebVR API \u0432 \u0442\u043e\u0439 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: <\/p>\n \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u043c\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 webvr.rocks<\/a><\/p>\n \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebVR API, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043b\u0438\u0431\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u043e\u043b\u0438\u0444\u0438\u043b: github.com\/googlevr\/webvr-polyfill<\/a><\/p>\n \u041f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u0441\u0441\u043b\u044b\u043b\u043a\u0435: chrome.google.com\/webstore\/detail\/webvr-api-emulation\/gbdnpaebafagioggnhkacnaaahpiefil<\/a><\/p>\n \u041f\u0440\u043e \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u0442\u043e\u0438\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u0441\u043b\u043e\u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041e\u043d \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u043c\u0443\u043b\u044f\u0446\u0438\u044e WebVR API, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 DevTools.<\/p>\n \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f VR \u0434\u0435\u0432\u0430\u0439\u0441\u043e\u043c (\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0435 \u2014 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440), \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0442\u044c VR \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0436\u0438\u043c \u0445\u0435\u0434\u0441\u0435\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 webvr-ui. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 UI \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 VR \u0440\u0435\u0436\u0438\u043c. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442: github.com\/googlevr\/webvr-ui<\/a><\/p>\n \u0414\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430: <\/p>\n \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e WebVR \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n \u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c A-Frame, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u043e. \u0412\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0432 \u0432\u0430\u0448 \u043a\u043e\u0434:<\/p>\n \u0418 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0443\u0434\u043e\u0431\u043d\u044b\u0439 VR \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d WebVR, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 VR \u0440\u0435\u0436\u0438\u043c, \u0438\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 VR \u0440\u0435\u0436\u0438\u043c\u0430.<\/p>\n \u0414\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u0430\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n \u0427\u0442\u043e\u0431\u044b \u0432\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u043c\u0438\u0440 VR, \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439. \u042d\u0442\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0441\u0432\u0430\u0438\u0432\u0430\u0442\u044c WebGL \u0441 \u043d\u0443\u043b\u044f. \u041d\u043e \u043f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u0437\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Threejs, D3.js \u0438\u043b\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 VR (\u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a A-Frame \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Mozilla). \u0423\u0436\u0435 \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e \u0440\u0435\u043b\u0438\u0437 React VR \u0434\u043b\u044f \u043f\u043e\u043a\u043b\u043e\u043d\u043d\u0438\u043a\u043e\u0432 React \u0438 \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u043d\u0435\u0434\u0440 FB. \u041d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a A-Frame, \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c VR \u043c\u0438\u0440 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438. A-Frame \u2014 \u044d\u0442\u043e HTML-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438 \u0441\u0430\u0439\u0442\u043e\u0432 \u043f\u043e\u0434 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0442\u043e \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 3D- \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. \u0412\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 WebGL, \u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u2014 \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u044b\u0439 \u043c\u0438\u0440 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043d\u0430 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u0421\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0431\u0430\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 Threejs \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0439 \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439.<\/p>\n \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a A-Frame \u0441\u043e\u0437\u0434\u0430\u0435\u0442 3D-\u0441\u0446\u0435\u043d\u0443 \u0447\u0435\u0440\u0435\u0437 \u043d\u0430\u0431\u043e\u0440 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0434\u0430\u0436\u0435 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438, \u0435\u0441\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0432\u0430\u043c \u0443\u0436\u0435 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442. \u0414\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a: \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043c\u0435\u0440 \u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0441\u0432\u0435\u0442\u0430.<\/p>\n \u0423 A-Frame \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 3D \u043c\u0438\u0440\u0430.<\/p>\n \u041c\u043d\u043e\u0433\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435: aframe.io\/examples<\/a><\/p>\n \u041e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u044b \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438, \u0438\u0437\u0443\u0447\u0438\u0432 \u0438\u0445, \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u00abHello VR world\u00bb. A-Frame \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043b\u044f AR \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0415\u0441\u043b\u0438 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 A-Frame, \u0442\u043e \u0442\u0443\u0442 \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043d\u0430 \u0446\u0435\u043b\u0443\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u043a \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0435).<\/p>\n ReactVR \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0431\u0430\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 Reactjs. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0438 \u043f\u043e\u0441\u0442 \u043d\u0430\u0431\u0435\u0440\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433, \u0441\u0434\u0435\u043b\u0430\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u044d\u0442\u043e\u2026 \u041f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0443: developer.oculus.com\/blog\/introducing-the-react-vr-pre-release<\/a><\/p>\n \u0415\u0441\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0431\u0435\u0440\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0432 \u0447\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u044d\u0442\u0430 \u0442\u0435\u043c\u0430, \u0442\u043e \u044f \u0441\u0434\u0435\u043b\u0430\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u044d\u0442\u043e.<\/p>\n \u041a\u0430\u043a \u0443\u0436\u0435 \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435, \u0441\u0430\u043c WebVR API \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 VR \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a \u043e \u0434\u0438\u0441\u043f\u043b\u0435\u044f\u0445 \u0438 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e Mobile VR, \u0442\u043e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 1\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0435\u0440\u0435\u043e\u043f\u0430\u0440\u0443, \u0438 WebVR API \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043a\u0430\u043a \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0432\u0443\u043c\u044f \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0434\u0438\u0441\u043f\u043b\u0435\u044f\u043c\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u043c, \u0438 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0448\u0435 WebVR \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u0430 Oculus \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Carmel, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443.<\/p>\n \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0436\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u043e\u043c, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c WebVR \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0435\u0434\u0443\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0414\u0430\u0436\u0435 \u0432 iOS.<\/p>\n \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u0434\u0435\u043c\u043e: webvr.majorov.su\/sample1<\/a><\/p>\n \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043c\u043e\u0436\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 WebVR. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431 \u0441 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u043e\u043c github.com\/borismus\/webvr-boilerplate<\/a><\/p>\n Web AR(Augmented Reality) \u2014 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041d\u043e \u00abWebAR API\u00bb \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445.<\/p>\n \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 WebVR, \u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a \u0441 \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f WebRTC. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0438\u0448\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u043a\u0430\u0434\u0440\u043e\u0432\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u043d\u0443\u0436\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0410 \u0434\u0430\u043b\u0435\u0435, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 WebVR \u2014 \u0443\u0436\u0435 \u0440\u0438\u0441\u0443\u0435\u0442\u0435 3D \u0441\u0446\u0435\u043d\u0443 \u043d\u0430 \u0444\u043e\u043d\u0435 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430. \u0418, \u043d\u0430\u0434\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e AR \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0445\u0435\u0430\u0434\u0441\u0435\u0442\u0430. \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u201cPockemon GO!\u201d \u2014 \u044d\u0442\u043e AR \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u043e \u0431\u0435\u0437 VR \u0448\u043b\u0435\u043c\u0430. \u041e\u0442\u0441\u044e\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442, \u0447\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c AR \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c VR \u0448\u043b\u0435\u043c. \u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c VR \u0438 AR \u043f\u043e\u043d\u044f\u0442\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c.<\/p>\n \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u0443\u043f\u0438\u0440\u0430\u0435\u0442\u0441\u044f, \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 WebRTC. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Web AR \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0432\u0441\u0435\u0445 Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u0412 iOS \u2014 \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0442\u043e\u2026<\/p>\n \u0415\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e WebVR \u2014 \u0442\u043e \u0432 iOS \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0432\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u044b (\u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 WebVR API, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0430\u043a\u0441\u0435\u043b\u0435\u0440\u043e\u043c\u0435\u0442\u0440 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0434\u0430\u0442\u0447\u0438\u043a\u0438, \u0441\u0430\u043c\u043e\u043c\u0443 \u0431\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u044d\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u0434\u0438\u0441\u043f\u043b\u0435\u044f). \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e AR, \u0442\u0443\u0442 \u0432\u0441\u0435 \u043f\u043b\u043e\u0445\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 WebRTC. \u041d\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a Argonjs. \u042d\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0431\u0430\u0437\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043d\u0430 A-Frame, \u0438, \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 argonjs.io<\/a> \u0421\u0443\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u043e\u0441\u0442\u0430: \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043b\u043e\u044f. \u041e\u0434\u0438\u043d \u0441\u043b\u043e\u0439 \u2014 \u044d\u0442\u043e Webkit \u0434\u0432\u0438\u0436\u043e\u043a, \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439 (\u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0430) \u2014 \u044d\u0442\u043e \u0432\u044b\u0432\u043e\u0434 \u0432\u0438\u0434\u0435\u043e\u043f\u043e\u0442\u043e\u043a\u0430 \u0441 \u043a\u0430\u043c\u0435\u0440\u044b. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 API, \u0447\u0435\u043c-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0432\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 PhoneGap (\u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u043d\u0430 \u0437\u0430\u0440\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0433\u043e\u0434\u0443 \u044d\u0434\u0430\u043a \u0432 2008, \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u044b\u043b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434 iPhone \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u043c JS API).<\/p>\n \u041f\u0440\u0438 \u044d\u0442\u043e\u043c Argonjs \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043b\u044f VR \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 iOS. \u0422\u043e\u0447\u043d\u0435\u0435 \u0434\u043b\u044f \u043e\u0431\u043a\u0430\u0442\u043a\u0438 MVP. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434 VR\/AR \u043d\u0430 JS, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 React Native \u0432\u043a\u0443\u043f\u0435 \u0441 React VR \u043b\u0438\u0431\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432 PhoneGap.<\/p>\n
<\/a><\/p>\n![](\"https:\/\/habrastorage.org\/files\/5d8\/fdb\/32f\/5d8fdb32f4c1406ca01d4d5ae93bf311.png\")
<\/p>\n\u041e\u0442\u043a\u0443\u0434\u0430 \u043d\u043e\u0433\u0438 \u0440\u0430\u0441\u0442\u0443\u0442<\/h2>\n
\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d WebVR API?<\/h2>\n
\n
\n
Hello VR world<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/7c2\/8ee\/fc6\/7c28eefc66674a4f9555535972ef78e2.png\")
<\/p>\nnavigator.getVRDisplays().then(displays => { if (displays.length < 1) { return console.warn('No displays found!'); } displays.forEach(vrDisplay => { buildVRDisplay(vrDisplay) }) }); function buildVRDisplay(vrDisplay) { \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0434\u0438\u0441\u043f\u043b\u0435\u0435 const frameData = new VRFRameData; \/\/ \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0440\u043e\u0435\u0443\u0446\u0438\u0438 \u043b\u0435\u0432\u043e\u0433\u043e \u0438 \u043f\u0440\u0430\u0432\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430 vrDisplay.getFrameData(frameData); \/\/ \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430 const rightEye = vrDisplay.getEyeParameters('left'); const onAnimationFrame = () => { \/\/ \u0437\u0434\u0435\u0441\u044c \u0432\u0430\u0448\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 vrDisplay.requestAnimationFrame(onAnimationFrame); }; vrDisplay.requestAnimationFrame(onAnimationFrame); } <\/code><\/pre>\n\u0421 \u043a\u0430\u043a\u0438\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c?<\/h2>\n
![](\"https:\/\/habrastorage.org\/files\/51b\/c4f\/910\/51bc4f9102944a7097d0e56e072239b5.jpg\"\/)
<\/p>\n\n
Noname VRBox<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/c28\/668\/9ec\/c286689ec78144698c1e84ded6300f7f.jpg\"\/)
<\/p>\nXiaomi VRBox<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/40f\/e2f\/92b\/40fe2f92b2af464d84b23da17f94233b.jpg\"\/)
<\/p>\nSamsung GR VR<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/0fb\/37c\/0cb\/0fb37c0cb274494ab80f44616915d24a.jpg\"\/)
<\/p>\nGoogle Cardboard<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/c23\/b0d\/9b7\/c23b0d9b727a4d60b232d91cc92218d0.jpg\"\/)
<\/p>\nGoogle Daydream<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/78d\/bde\/3a7\/78dbde3a7f53453c8cafa1bb9729d06c.jpeg\"\/)
<\/p>\n\u0427\u0442\u043e \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445?<\/h2>\n
\n
![](\"https:\/\/habrastorage.org\/files\/bfa\/7a4\/162\/bfa7a416220b40eebca95cce6f7ab4b5.jpg\"\/)
\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 WebVR API.<\/i><\/p>\n\u041f\u043e\u043b\u0438\u0444\u0438\u043b\u044b \u0438 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h2>\n
![](\"https:\/\/habrastorage.org\/files\/167\/c5d\/8ea\/167c5d8ea7894044819083db61aa3e8d.jpg\")
<\/p>\nWebVR API Emulation for Chrome<\/h3>\n
WebVR-UI<\/h3>\n
var renderer = new THREE.WebGLRenderer(); var options = {}; var enterVR = new webvrui.EnterVRButton(renderer.domElement, options); document.body.appendChild(enterVR.domElement); <\/code><\/pre>\n<a-scene webvr-ui> ... <\/a-scene> <\/code><\/pre>\n![](\"https:\/\/habrastorage.org\/files\/22f\/91a\/87c\/22f91a87c30f4509bb39cf842f4303d2.jpg\"\/)
<\/p>\n![](\"https:\/\/habrastorage.org\/files\/19f\/29d\/a6b\/19f29da6b8e3414fa4895d439aae34d6.jpg\")
<\/p>\n\u0427\u0435\u043c \u043d\u0430\u043c \u043c\u0438\u0440 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c?<\/h2>\n
\u0412\u0435\u0440\u0441\u0442\u0430\u0435\u043c VR \u043c\u0438\u0440<\/h3>\n
![](\"https:\/\/habrastorage.org\/files\/e14\/e3d\/a17\/e14e3da1776e4676897d32c83b1d6f48.jpg\"\/)
<\/p>\nReactVR<\/h3>\n
\u041c\u043e\u0436\u0435\u043c \u043b\u0438 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 WebVR?<\/h2>\n
\u041f\u0440\u0438\u043c\u0435\u0440 3D \u043c\u0438\u0440\u0430 \u043d\u0430 Threejs \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c WebVR API<\/h2>\n
<!DOCTYPE html> <html lang="en"> <head> \t<title>Web VR boilerplate demo<\/title> \t<meta charset="utf-8"> \t<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> \t<meta name="mobile-web-app-capable" content="yes"> \t<meta name="apple-mobile-web-app-capable" content="yes"\/> \t<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"\/> \t<style> \t\tbody { \t\t\twidth: 100%; \t\t\theight: 100%; \t\t\tbackground-color: #000; \t\t\tcolor: #fff; \t\t\tmargin: 0px; \t\t\tpadding: 0; \t\t\toverflow: hidden; \t\t} \t\t\/* Position the button on the bottom of the page. *\/ \t\t#ui { \t\t\tposition: absolute; \t\t\tbottom: 10px; \t\t\tleft: 50%; \t\t\ttransform: translate(-50%, -50%); \t\t\ttext-align: center; \t\t\tfont-family: 'Karla', sans-serif; \t\t\tz-index: 1; \t\t} \t\ta { \t\t\tcolor: white; \t\t} \t<\/style> <\/head> <body> \t<div id="ui"> \t\t<div id="vr-button"><\/div> \t\t<a id="magic-window" href="#">Try it without a headset<\/a> \t<\/div> <\/body> <script>WebVRConfig = { BUFFER_SCALE: 0.5 }<\/script> <script src="node_modules\/es6-promise\/dist\/es6-promise.min.js"><\/script> <script src="node_modules\/three\/build\/three.min.js"><\/script> <script src="node_modules\/three\/examples\/js\/controls\/VRControls.js"><\/script> <script src="node_modules\/three\/examples\/js\/effects\/VREffect.js"><\/script> <script src="node_modules\/webvr-polyfill\/build\/webvr-polyfill.min.js"><\/script> <script src="node_modules\/webvr-ui\/build\/webvr-ui.min.js"><\/script> <script> \tvar lastRenderTime = 0; \t\/\/ \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 VRDisplay. \tvar vrDisplay; \tvar boxSize = 5; \t\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f THREE.Objects. \tvar scene; \tvar cube; \tvar controls; \tvar effect; \tvar camera; \t\/\/ VR UI \u041a\u043d\u043e\u043f\u043a\u0430 \tvar vrButton; \tfunction onLoad() { \t\t\/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 three.js WebGL \u0440\u0435\u043d\u0434\u0435\u0440\u0430. \t\tvar renderer = new THREE.WebGLRenderer({antialias: true}); \t\trenderer.setPixelRatio(window.devicePixelRatio); \t\t\/\/ \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448 \u0441\u043b\u043e\u0439 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0432 DOM \t\tdocument.body.appendChild(renderer.domElement); \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0446\u0435\u043d\u0443 \t\tscene = new THREE.Scene(); \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u0430\u043c\u0435\u0440\u0443 \t\tvar aspect = window.innerWidth \/ window.innerHeight; \t\tcamera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000); \t\tcontrols = new THREE.VRControls(camera); \t\tcontrols.standing = true; \t\tcamera.position.y = controls.userHeight; \t\t\/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c VR stereo \u0440\u0435\u043d\u0434\u0435\u0440 \t\teffect = new THREE.VREffect(renderer); \t\teffect.setSize(window.innerWidth, window.innerHeight); \t\tvar loader = new THREE.TextureLoader(); \t\tloader.load('img\/box.png', onTextureLoaded); \t\t\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c 3D \u043e\u0431\u044a\u0435\u043a\u0442\u044b \t\tvar geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); \t\tvar textureLoader = new THREE.TextureLoader(); \t\tvar texture0 = textureLoader.load('img\/1.jpg'); \t\tvar texture1 = textureLoader.load('img\/1.jpg'); \t\tvar texture2 = textureLoader.load('img\/0.jpg'); \t\tvar texture3 = textureLoader.load('img\/0.jpg'); \t\tvar texture4 = textureLoader.load('img\/2.jpg'); \t\tvar texture5 = textureLoader.load('img\/0.jpg'); \t\tvar materials = [ \t\t\tnew THREE.MeshBasicMaterial({map: texture0}), \t\t\tnew THREE.MeshBasicMaterial({map: texture1}), \t\t\tnew THREE.MeshBasicMaterial({map: texture2}), \t\t\tnew THREE.MeshBasicMaterial({map: texture3}), \t\t\tnew THREE.MeshBasicMaterial({map: texture4}), \t\t\tnew THREE.MeshBasicMaterial({map: texture5}) \t\t]; \t\tvar material = new THREE.MultiMaterial(materials); \t\tcube = new THREE.Mesh(geometry, material); \t\tcube.position.set(0, controls.userHeight, -1); \t\tscene.add(cube); \t\twindow.addEventListener('resize', onResize, true); \t\twindow.addEventListener('vrdisplaypresentchange', onResize, true); \t\t\/\/ Initialize the WebVR UI. \t\tvar uiOptions = { \t\t\tcolor: 'black', \t\t\tbackground: 'white', \t\t\tcorners: 'square' \t\t}; \t\tvrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions); \t\tvrButton.on('exit', function () { \t\t\tcamera.quaternion.set(0, 0, 0, 1); \t\t\tcamera.position.set(0, controls.userHeight, 0); \t\t}); \t\tvrButton.on('hide', function () { \t\t\tdocument.getElementById('ui').style.display = 'none'; \t\t}); \t\tvrButton.on('show', function () { \t\t\tdocument.getElementById('ui').style.display = 'inherit'; \t\t}); \t\tdocument.getElementById('vr-button').appendChild(vrButton.domElement); \t\tdocument.getElementById('magic-window').addEventListener('click', function () { \t\t\tvrButton.requestEnterFullscreen(); \t\t}); \t} \tfunction onTextureLoaded(texture) { \t\ttexture.wrapS = THREE.RepeatWrapping; \t\ttexture.wrapT = THREE.RepeatWrapping; \t\ttexture.repeat.set(boxSize, boxSize); \t\tvar geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize); \t\tvar material = new THREE.MeshBasicMaterial({ \t\t\tmap: texture, \t\t\tcolor: 0x01BE00, \t\t\tside: THREE.BackSide \t\t}); \t\tskybox = new THREE.Mesh(geometry, material); \t\tskybox.position.y = boxSize \/ 2; \t\tscene.add(skybox); \t\tsetupStage(); \t} \t\/\/ Request animation frame loop function \tfunction animate(timestamp) { \t\tvar delta = Math.min(timestamp - lastRenderTime, 500); \t\tlastRenderTime = timestamp; \t\tcube.rotation.y += delta * 0.0006; \t\tif (vrButton.isPresenting()) controls.update(); \t\teffect.render(scene, camera); \t\tvrDisplay.requestAnimationFrame(animate); \t} \tfunction onResize(e) { \t\teffect.setSize(window.innerWidth, window.innerHeight); \t\tcamera.aspect = window.innerWidth \/ window.innerHeight; \t\tcamera.updateProjectionMatrix(); \t} \tfunction setupStage() { \t\tnavigator.getVRDisplays().then(function (displays) { \t\t\tif (displays.length > 0) { \t\t\t\tvrDisplay = displays[0]; \t\t\t\tif (vrDisplay.stageParameters) { \t\t\t\t\tsetStageDimensions(vrDisplay.stageParameters); \t\t\t\t} \t\t\t\tvrDisplay.requestAnimationFrame(animate); \t\t\t} \t\t}); \t} \tfunction setStageDimensions(stage) { \t\tvar material = skybox.material; \t\tscene.remove(skybox); \t\tvar geometry = new THREE.BoxGeometry(stage.sizeX, boxSize, stage.sizeZ); \t\tskybox = new THREE.Mesh(geometry, material); \t\tskybox.position.y = boxSize \/ 2; \t\tscene.add(skybox); \t\tcube.position.set(0, controls.userHeight, 0); \t} \twindow.addEventListener('load', onLoad); <\/script> <\/html> <\/code><\/pre>\n\u0410 \u0447\u0442\u043e \u0442\u0430\u043c \u0441 Web AR ?<\/h2>\n
![](\"https:\/\/habrastorage.org\/files\/463\/1ea\/6f6\/4631ea6f664448bc92ff86dd42225711.jpg\")
<\/p>\n\u0427\u0442\u043e \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439?<\/h3>\n
\u041a\u0430\u043a \u0431\u044b\u0442\u044c \u0441 iOS \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438?<\/h2>\n
![](\"https:\/\/habrastorage.org\/files\/07d\/2e7\/528\/07d2e7528dce4a83a5e2bce8aae34385.jpg\")
<\/p>\nArgon 4 by Georgia Tech<\/h3>\n
\u0414\u0435\u043c\u043e argonjs.io\/samples<\/a><\/p>\n![](\"https:\/\/habrastorage.org\/files\/156\/7a8\/fc6\/1567a8fc6031426b84656dfba7bf8a2f.jpg\"\/)
<\/p>\n