{"id":445356,"date":"2025-01-17T15:04:39","date_gmt":"2025-01-17T15:04:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=445356"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2025-01-17T15:04:39","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=445356","title":{"rendered":"<span>\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 Web: \u043a\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b \u0432 2025?<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/971\/186\/b41\/971186b41939ee16f2861d9b8cb8bbb2.png\" width=\"2438\" height=\"1369\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/971\/186\/b41\/971186b41939ee16f2861d9b8cb8bbb2.png\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042f \u0421\u0432\u0435\u0442\u0430, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043e\u0442\u0434\u0435\u043b\u0435 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 <a href=\"https:\/\/kts.tech\/\"><u>KTS<\/u><\/a>.<\/p>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0437\u0430\u0434\u0430\u0447 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AR \u0432 \u0432\u0435\u0431\u0435. \u042f \u043f\u0440\u043e\u0432\u0435\u043b\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u043a\u043e\u043f\u0430\u043b\u0430\u0441\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043e\u0442\u044b\u0441\u043a\u0430\u043b\u0430 \u043a\u0443\u0447\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438 \u0440\u0435\u0448\u0438\u043b\u0430, \u0447\u0442\u043e \u044d\u0442\u0438\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0449\u0435\u0442\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c AR \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5%20%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%20%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D1%82%D1%8C\">\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D0%B1%D0%B7%D0%BE%D1%80%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA\">\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8%20%D0%B8%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebXR%20API%20%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebGL\">\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#Three.js\">Three.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#A-Frame\">A-Frame<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#AR.js\">AR.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Model-Viewer\">Model-Viewer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Babylon.js\">Babylon.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#MindAR\">MindAR<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#PlayCanvas\">PlayCanvas<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#JSARToolKit5\">JSARToolKit5<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BB%D0%B0%D1%82%D0%BD%D1%8B%D0%B5%20%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B,%20%D0%B8%D0%BC%D0%B8%D1%82%D0%B8%D1%80%D1%83%D1%8E%D1%89%D0%B8%D0%B5%20WebXR%20API\">\u041f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 WebXR API<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#8th%20Wall\">8th Wall<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0%20AR%20%D0%B2%20%D0%B2%D0%B5%D0%B1%D0%B5\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 AR \u0432 \u0432\u0435\u0431\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5%20%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%20%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D1%82%D1%8C\" id=\"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c\"><\/a><\/p>\n<h2>\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/h2>\n<p><strong>WebXR API<\/strong> \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e (AR), \u0442\u0430\u043a \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c (VR) \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 3D-\u0441\u0446\u0435\u043d\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0441\u0446\u0435\u043d\u044b. \u041e\u0434\u043d\u0430\u043a\u043e WebXR \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438, \u043a\u0430\u043a \u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p><strong>WebAR<\/strong> \u2014 \u044d\u0442\u043e \u043e\u0431\u0449\u0438\u0439 \u0442\u0435\u0440\u043c\u0438\u043d \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (AR) \u0432 \u0432\u0435\u0431\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 SDK \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p><strong>ARCore \u0438 ARKit<\/strong> \u2014 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 SDK \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Android \u0438 iOS \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0427\u0435\u0440\u0435\u0437 WebXR \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043a \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p><strong>WebGL<\/strong> \u2014 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0436\u0438\u0432\u043b\u044f\u0442\u044c \u0432\u0430\u0448\u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0432 AR; \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b, \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u044b.<\/p>\n<p><strong>WebRTC<\/strong> \u2014 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0435 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0438 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0425\u043e\u0442\u044f \u043e\u043d\u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f AR, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0435\u0435 API \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0430\u043c\u0435\u0440\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p><strong>\u0422\u0438\u043f\u044b AR:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>Marker-based (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u0430)<\/strong> \u2014 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u043a\u0435\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Hiro, Kanji, barcode) \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>Markerless (\u0431\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0440\u0430)<\/strong> \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044f\u0445 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0438\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f SLAM, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u0438\u0442 \u0442\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u044b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Location-Based (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f)<\/strong> \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%9E%D0%B1%D0%B7%D0%BE%D1%80%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA\" id=\"\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\"><\/a><\/p>\n<h2>\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h2>\n<p>\u0412\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438\u043b\u0438 WebGL (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Three.js, A-Frame, AR.js, model-viewer) \u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0445 WebXR API (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 8th Wall).<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR \u0432 \u0432\u0435\u0431\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0445 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8%20%D0%B8%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebXR%20API%20%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebGL\" id=\"\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL\"><\/a><\/p>\n<h3>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL<\/h3>\n<p><a class=\"anchor\" name=\"Three.js\" id=\"Three.js\"><\/a><\/p>\n<h4>Three.js<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/253\/a8c\/9e0\/253a8c9e08093d718df6d3450f909544.gif\" alt=\"\u041f\u0440\u043e\u043c\u043e \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f AR Fake Sneakers \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Lusion\" title=\"\u041f\u0440\u043e\u043c\u043e \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f AR Fake Sneakers \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Lusion\" width=\"800\" height=\"450\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/253\/a8c\/9e0\/253a8c9e08093d718df6d3450f909544.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u043e\u043c\u043e \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f AR Fake Sneakers \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Lusion<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Three.js \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 \u0432\u0435\u0431\u0435. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebGL \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0443\u044e 3D-\u0441\u0446\u0435\u043d\u0443.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 Markerless AR \u0432 Three.js \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 WebXR API. \u0410 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 AR \u043d\u0430 React \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React Three Fiber \u0438 @react-three\/xr.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0433\u0435\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, AR.js \u0438\u043b\u0438 jsartoolkit5.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/threejs.org\/docs\/\">Three.js Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/mrdoob\/three.js\/\">https:\/\/github.com\/mrdoob\/three.js\/<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<ul>\n<li>\n<p>Markerless AR: <a href=\"https:\/\/webxr-sneakers.lusion.co\/\">WebXR Sneakers<\/a>,<a href=\"https:\/\/threejs.org\/examples\/webxr_ar_hittest\"> Hit Test Example<\/a><\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AR.js (\u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f Hiro-\u043c\u0430\u0440\u043a\u0435\u0440):<a href=\"https:\/\/jeromeetienne.github.io\/AR.js\/three.js\/examples\/mobile-performance.html\"> AR.js Example<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"A-Frame\" id=\"A-Frame\"><\/a><\/p>\n<h4>A-Frame<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d41\/eda\/b45\/d41edab45e0346b41b4ab5aaca191c4b.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0431\u043b\u043e\u0433\u0430 A-Frame\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0431\u043b\u043e\u0433\u0430 A-Frame\" width=\"512\" height=\"288\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d41\/eda\/b45\/d41edab45e0346b41b4ab5aaca191c4b.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0431\u043b\u043e\u0433\u0430 A-Frame<\/em><\/figcaption><\/div>\n<\/figure>\n<p>A-Frame \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Three.js. \u041e\u043d \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 AR \u0438 VR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e HTML: \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u0435\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 A-Frame, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 JavaScript.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043e\u0434\u043d\u043e &#171;\u043d\u043e&#187;: AR-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 A-Frame \u043f\u043e\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 Android \u0438\u0437-\u0437\u0430 WebXR API \u2014 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430. \u042d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0430\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 Safari \u0438\u043b\u0438 \u043d\u0430 iOS.<\/p>\n<p>\u0421 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0433\u0435\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u0438 A-Frame \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0412\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a AR.js.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c A-Frame \u0441 React, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 aframe-react \u0438 react-aframe-ar, \u043d\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u0438 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438 \u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u0440\u0430\u043c\u0438. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b 8th Wall \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-8thwall-aframe.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/aframe.io\/docs\/1.6.0\/introduction\/\">A-Frame Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/aframevr\/aframe\/\">https:\/\/github.com\/aframevr\/aframe\/<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/aframe.io\/examples\/showcase\/modelviewer\/\">Model Viewer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/aframe.io\/examples\/showcase\/anime-UI\/\">Anime UI<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ada.is\/rollAR-coaster\/\">Augmented Reality Roller Coaster<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"AR.js\" id=\"AR.js\"><\/a><\/p>\n<h4>AR.js<\/h4>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0c2\/ec3\/36d\/0c2ec336d87c0ff249f7e904ec5289a1.jpeg\" alt=\"\u0421\u043b\u0435\u0432\u0430 \u2014 Hiro-\u043c\u0430\u0440\u043a\u0435\u0440, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e\" title=\"\u0421\u043b\u0435\u0432\u0430 \u2014 Hiro-\u043c\u0430\u0440\u043a\u0435\u0440, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e\" width=\"1319\" height=\"858\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0c2\/ec3\/36d\/0c2ec336d87c0ff249f7e904ec5289a1.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption><em>\u0421\u043b\u0435\u0432\u0430 \u2014 Hiro-\u043c\u0430\u0440\u043a\u0435\u0440, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u043d\u043e\u0439 AR. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 AR.js \u043b\u0435\u0436\u0438\u0442 jsartoolkit5, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0431\u043e\u0440\u043e\u043a: \u0434\u043b\u044f Three.js \u0438\u043b\u0438 \u0434\u043b\u044f A-Frame. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441 Three.js, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442 \u0442\u0435\u0445 \u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u2014 <a href=\"https:\/\/github.com\/AR-js-org\/locar.js\">LocAR.js<\/a>.<\/p>\n<p>AR.js \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0433\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b WebGL \u0438 WebRTC. \u0418 \u0442\u043e\u0442, \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0443\u0436\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041d\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0443: \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 React \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439-\u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 <a href=\"https:\/\/github.com\/artcom\/react-three-arjs\">react-three-arjs<\/a> \u0438\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u0434 \u0441 AR.js \u0432 iframe.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/ar-js-org.github.io\/AR.js-Docs\/\">AR.js Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/AR-js-org\/AR.js\">https:\/\/github.com\/AR-js-org\/AR.js<\/a>\u00a0<\/p>\n<p>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c AR.js:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/jeromeetienne.github.io\/AR.js-docs\/misc\/EXAMPLES.html\">https:\/\/jeromeetienne.github.io\/AR.js-docs\/misc\/EXAMPLES.html<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/stemkoski.github.io\/AR-Examples\/\">https:\/\/stemkoski.github.io\/AR-Examples\/<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"Model-Viewer\" id=\"Model-Viewer\"><\/a><\/p>\n<h4>Model-Viewer<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/889\/c58\/bb3\/889c58bb3bd4922e1080dc65a685ec22.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u0438\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u0438\" width=\"320\" height=\"640\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/889\/c58\/bb3\/889c58bb3bd4922e1080dc65a685ec22.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Model-Viewer \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 Google, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 API \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;model-viewer&gt;. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Model-Viewer \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Three.js.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebXR, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c AR-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 Chromium. \u0415\u0441\u043b\u0438 WebXR \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, Model-Viewer \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SceneViewer (\u0434\u043b\u044f Android) \u0438 QuickLook (\u0434\u043b\u044f iOS). \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u044e \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, Model-Viewer \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Firefox.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, &lt;model-viewer&gt; \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430 React. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/dev.to\/asross311\/a-strongly-typed-google-model-viewer-implementation-in-react-3m5c\">\u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e<\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c<a href=\"https:\/\/modelviewer.dev\/editor\/\"> Model Editor<\/a>.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/modelviewer.dev\/docs\/\">Model Viewer Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/google\/model-viewer\">https:\/\/github.com\/google\/model-viewer<\/a>\u00a0<\/p>\n<p>\u0412\u0438\u0442\u0440\u0438\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: <a href=\"https:\/\/modelviewer.dev\/examples\/augmentedreality\/\">https:\/\/modelviewer.dev\/examples\/augmentedreality\/<\/a>\u00a0<\/p>\n<p><a class=\"anchor\" name=\"Babylon.js\" id=\"Babylon.js\"><\/a><\/p>\n<h4>Babylon.js<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/241\/949\/194\/2419491943b06fb6796fe212e7725b71.gif\" alt=\"\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e-\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 BabylonJS\" title=\"\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e-\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 BabylonJS\" width=\"320\" height=\"569\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/241\/949\/194\/2419491943b06fb6796fe212e7725b71.gif\"\/><\/p>\n<div><figcaption><em>\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e-\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 BabylonJS<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Babylon.js \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 \u0432\u0435\u0431\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 WebGL\/WebGPU. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u0433\u0430\u0442\u044b\u0439 API, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0438\u0437\u0438\u043a\u043e\u0439, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u0441\u0432\u0435\u0442\u043e\u043c \u0438 \u0442\u0435\u043d\u044c\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0448\u0438\u0440\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 3D-\u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR \u0438 VR Babylon.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebXR API.\u00a0<\/p>\n<p>\u0421\u0438\u043b\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a Markerless, \u0442\u0430\u043a \u0438 Marker Based AR, \u0445\u043e\u0442\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0442\u0438\u043f \u043f\u043e\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 API. \u0414\u043b\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u043d\u043e\u0433\u043e AR \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 BabylonAR, \u0433\u0434\u0435 \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0443\u043b\u044f ArUco \u0438\u0437 OpenCV.<\/p>\n<p>\u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b Babylon.js \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 React \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432: \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e, \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 babylonjs-hook. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u0445\u0443\u043a\u043e\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-babylonjs.\u00a0<\/p>\n<p>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430: <a href=\"https:\/\/playground.babylonjs.com\/\">Babylon.js Playground<\/a><\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/doc.babylonjs.com\/features\/featuresDeepDive\/webXR\">WebXR \u0438 Babylon.js<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/BabylonJS\/Babylon.js\">https:\/\/github.com\/BabylonJS\/Babylon.js<\/a>\u00a0<\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043c\u043e \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0434\u0435\u043b\u0435\u0439):\u00a0<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 AR: <a href=\"https:\/\/playground.babylonjs.com\/#F41V6N#32\">https:\/\/playground.babylonjs.com\/#F41V6N#32<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f: <a href=\"https:\/\/playground.babylonjs.com\/#NAZYHG#5\">https:\/\/playground.babylonjs.com\/#NAZYHG#5<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438: <a href=\"https:\/\/playground.babylonjs.com\/#GG06BQ#97\">https:\/\/playground.babylonjs.com\/#GG06BQ#97<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"MindAR\" id=\"MindAR\"><\/a><\/p>\n<h4>MindAR<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d47\/011\/022\/d47011022572b81a49915543b81dca16.gif\" alt=\"\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" title=\"\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\" width=\"280\" height=\"280\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d47\/011\/022\/d47011022572b81a49915543b81dca16.gif\"\/><\/p>\n<div><figcaption><em>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 MindAR \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043b\u0438\u0446. \u041e\u043d\u0430 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 AR \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, MindAR \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0441 AR-\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p>MindAR \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043b\u0438\u0446\u0430, \u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u044b AR \u0431\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u043b\u0438 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0435\u0439).<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR MindAR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebGL \u0438 WebRTC, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0432 Safari, \u0438 \u0432 Firefox. \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f 3D-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 MindAR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Three.js \u0438\u043b\u0438 A-Frame.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/\">MindAR Documentation<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/hiukim\/mind-ar-js\">https:\/\/github.com\/hiukim\/mind-ar-js<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p>\u0422\u0440\u0435\u043a\u0438\u043d\u0433 \u043b\u0438\u0446\u0430: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/face-tracking-samples\/tryon.html\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/face-tracking-samples\/tryon.html<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/samples\/advanced.html\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/samples\/advanced.html<\/a> (\u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: <a href=\"https:\/\/cdn.jsdelivr.net\/gh\/hiukim\/mind-ar-js@1.1.4\/examples\/image-tracking\/assets\/card-example\/card.png\">https:\/\/cdn.jsdelivr.net\/gh\/hiukim\/mind-ar-js@1.1.4\/examples\/image-tracking\/assets\/card-example\/card.png<\/a>)\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0435\u043a\u0438\u043d\u0433 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/examples\/multi-tracks\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/examples\/multi-tracks<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"PlayCanvas\" id=\"PlayCanvas\"><\/a><\/p>\n<h4>PlayCanvas<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/459\/c7e\/485\/459c7e485fa94bbe377a881e789518a9.gif\" alt=\"\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e glTF Viewer\" title=\"\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e glTF Viewer\" width=\"320\" height=\"693\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/459\/c7e\/485\/459c7e485fa94bbe377a881e789518a9.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e glTF Viewer<\/em><\/figcaption><\/div>\n<\/figure>\n<p>PlayCanvas \u2014 \u044d\u0442\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0438 \u0438\u0433\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 WebGL.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Markerless AR \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0439 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebXR. \u042d\u0442\u043e, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0441\u0443\u0436\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 8th Wall \u0438 Zappar, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Safari. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR \u0441 \u043c\u0430\u0440\u043a\u0435\u0440\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/playcanvas\/playcanvas-ar\">AR Starter Kit<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 ARToolkit.<\/p>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 PlayCanvas \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0446\u0435\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, WebXR AR Starter Kit \u0438\u043b\u0438 Model Viewer) \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 AR.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/developer.playcanvas.com\/\">PlayCanvas Developer Site<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/playcanvas\/engine\">https:\/\/github.com\/playcanvas\/engine<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:\u00a0<\/p>\n<ul>\n<li>\n<p>\u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e <s>\u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c<\/s> \u043f\u043e\u0441\u0430\u0434\u0438\u0442\u044c \u0442\u0440\u0430\u0432\u0443: <a href=\"https:\/\/playcanvas.com\/project\/672464\/\">https:\/\/playcanvas.com\/project\/672464\/<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438: <a href=\"https:\/\/playcanvas.vercel.app\/#\/xr\/xr-ui\">https:\/\/playcanvas.vercel.app\/#\/xr\/xr-ui<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>Marker-based AR \u0441 Hiro \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u043c: <a href=\"https:\/\/playcanv.as\/p\/eJ1ygzym\/\">https:\/\/playcanv.as\/p\/eJ1ygzym\/<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <a href=\"https:\/\/github.com\/playcanvas\/awesome-playcanvas\">awesome-playcanvas<\/a>.<\/p>\n<p><a class=\"anchor\" name=\"JSARToolKit5\" id=\"JSARToolKit5\"><\/a><\/p>\n<h4>JSARToolKit5<\/h4>\n<p>JSARToolKit5 \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0441\u043e\u0431\u043e\u0439 JavaScript-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e ARToolKit, \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR. \u041e\u043d\u0430 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043e \u0448\u0442\u0440\u0438\u0445-\u043a\u043e\u0434\u0430\u043c\u0438, \u043d\u0430\u0431\u043e\u0440\u044b \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 NFT-\u043c\u0430\u0440\u043a\u0435\u0440\u044b.\u00a0<\/p>\n<p>\u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u0430 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 marker-based AR, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0430\u0441\u044c \u0432\u044b\u0448\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 JSARToolKit5 \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 Three.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431 (\u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043a): <a href=\"https:\/\/github.com\/artoolkitx\/jsartoolkit5\">https:\/\/github.com\/artoolkitx\/jsartoolkit5<\/a><\/p>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u0434\u0435\u0441\u044c:\u00a0<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/kalwalt.github.io\/jsartoolkit5\/examples\/\">https:\/\/kalwalt.github.io\/jsartoolkit5\/examples\/<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BB%D0%B0%D1%82%D0%BD%D1%8B%D0%B5%20%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B,%20%D0%B8%D0%BC%D0%B8%D1%82%D0%B8%D1%80%D1%83%D1%8E%D1%89%D0%B8%D0%B5%20WebXR%20API\" id=\"\u041f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 WebXR API\"><\/a><\/p>\n<h3>\u041f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 WebXR API<\/h3>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0449\u0438\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 8th Wall.<\/p>\n<p><a class=\"anchor\" name=\"8th%20Wall\" id=\"8th Wall\"><\/a><\/p>\n<h4>8th Wall<\/h4>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c0e\/a3e\/949\/c0ea3e949970b8d71342470fb63e2633.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f McDonalds\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f McDonalds\" width=\"320\" height=\"617\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c0e\/a3e\/949\/c0ea3e949970b8d71342470fb63e2633.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f McDonalds<\/em><\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1af\/303\/d13\/1af303d13a27f5206ef4ff7983d63810.gif\" alt=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f Coca-Cola\" title=\"\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f Coca-Cola\" width=\"540\" height=\"960\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1af\/303\/d13\/1af303d13a27f5206ef4ff7983d63810.gif\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u043c\u043e-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f Coca-Cola<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 8th Wall \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e SLAM, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 WebXR API \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0441 \u043a\u0430\u043c\u0435\u0440\u043e\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0441\u0435\u043d\u0441\u043e\u0440\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0435\u0431-API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a WebRTC \u0438 WebGL. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Markerless AR \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u0430\u0436\u0435 \u0432 Safari \u043d\u0430 iOS. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, A-Frame, Three.js, PlayCanvas. \u041d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0438\u0434\u044b AR, \u0434\u0430\u0436\u0435 Location-based \u0438 AR \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u043b\u0438\u0446\u0430.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f: \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, app.js, body.html), \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/www.8thwall.com\/docs\/home\/intro\">8th Wall Documentation<\/a><\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u0438\u0442\u044c \u044e\u0432\u0435\u043b\u0438\u0440\u043d\u044b\u0435 \u0438\u0437\u0434\u0435\u043b\u0438\u044f: <a href=\"https:\/\/ar.pandora-ar.com\/got\/index.html\">https:\/\/ar.pandora-ar.com\/got\/index.html<\/a><\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0439\u0442\u0438 \u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0435 \u0441\u0430\u043c\u043e\u0446\u0432\u0435\u0442\u044b: <a href=\"https:\/\/edl-002-lucky-charms-ar.still.14four.com\/\">https:\/\/edl-002-lucky-charms-ar.still.14four.com\/<\/a><\/p>\n<\/li>\n<li>\n<p>\u041c\u0430\u043a\u043d\u0443\u0442\u044c \u0441\u0442\u043e\u043f\u043a\u0443 Oreo \u0432 \u043c\u043e\u043b\u043e\u043a\u043e: <a href=\"https:\/\/www.8thwall.com\/alivenow\/oreo-playful-dunks\">https:\/\/www.8thwall.com\/alivenow\/oreo-playful-dunks<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043c\u043e\u0447\u044c \u041f\u0440\u044f\u043d\u0435 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e\u0434\u043d\u0438\u0435 \u043f\u043e\u0434\u0430\u0440\u043a\u0438: <a href=\"https:\/\/www.8thwall.com\/invision\/gingygiftgrab\">https:\/\/www.8thwall.com\/invision\/gingygiftgrab<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c WebXR API, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Onirix, Zappar \u0438 MyWebAR.<\/p>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0%20AR%20%D0%B2%20%D0%B2%D0%B5%D0%B1%D0%B5\" id=\"\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 AR \u0432 \u0432\u0435\u0431\u0435\"><\/a><\/p>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 AR \u0432 \u0432\u0435\u0431\u0435<\/h2>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u043e\u0439 \u0442\u0438\u043f AR \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439.<\/p>\n<p>Markerless AR \u0432 \u0432\u0435\u0431\u0435 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 WebXR API. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 WebXR \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Chromium (Google Chrome, Microsoft Edge, Opera \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438). \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 WebKit (Safari, \u0430 \u0442\u0430\u043a\u0436\u0435 Chrome \u0438 Firefox \u0434\u043b\u044f iOS) \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u044d\u0442\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e. \u0414\u0430\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432 \u0434\u043b\u044f WebXR \u0432 Safari \u043d\u0435 \u0434\u0430\u0435\u0442 \u043f\u043b\u043e\u0434\u043e\u0432.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0432\u0440\u043e\u0434\u0435 Apple Vision Pro \u0441\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c Apple \u0438 \u043a \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044e WebXR \u0432 WebKit. \u041d\u043e \u043f\u043e\u043a\u0430 Markerless AR \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0434\u043d\u043e\u0433\u043e \u043b\u0438\u0448\u044c WebXR API \u0432 Safari \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<ul>\n<li>\n<p>\u0423\u0437\u043d\u0430\u0442\u044c \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 WebXR \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c: <a href=\"https:\/\/caniuse.com\/webxr\">https:\/\/caniuse.com\/webxr<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0410 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043b\u0438 WebXR \u0432 \u0432\u0430\u0448\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435: <a href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">https:\/\/immersive-web.github.io\/webxr-samples\/<\/a><\/p>\n<\/li>\n<\/ul>\n<p>Marker-based AR, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u042d\u0442\u043e\u0442 \u0442\u0438\u043f AR \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebXR API \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0440\u0435\u0434\u044b (SLAM). \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043e\u043d \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438: WebGL, WebRTC (\u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, getUserMedia API) \u0438 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>Location-based AR \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0431\u0435\u0437 WebXR API. \u041e\u043d \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WebGL \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0435\u0431-API \u0442\u0438\u043f\u0430 Geolocation API \u0438 DeviceOrientationEvent API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p><a class=\"anchor\" name=\"%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0435\u043c \u0436\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0443\u044e \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u043d\u0438\u0436\u0435. \u041e\u043d\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0430\u0445 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/0e6\/1c0\/e7b\/0e61c0e7b270f0f431b3f2b4eab4bdd6.jpeg\" alt=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432\" title=\"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432\" width=\"1600\" height=\"938\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0e6\/1c0\/e7b\/0e61c0e7b270f0f431b3f2b4eab4bdd6.jpeg\" data-blurred=\"true\"\/><\/p>\n<div><figcaption><em>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u0437 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0434\u043b\u044f Markerless AR \u0432 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u044c) \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 Model Viewer \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. Three.js, PlayCanvas \u0438 Babylon.js \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430 AR, \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 3D-\u0441\u0446\u0435\u043d\u044b \u0438 \u0438\u0433\u0440\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0435\u0437 WebXR.<\/p>\n<p>\u0414\u043b\u044f \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 Location Based AR \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 AR.js; \u0434\u043b\u044f \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043b\u0438\u0446 \u2014 MindAR. \u042d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438 \u0434\u043b\u044f AR, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043a \u0441\u0442\u0430\u0442\u044c\u0435 \u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u043c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u043c (\u0438 \u043c\u043d\u0435 \u0442\u043e\u0436\u0435!) \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0435\u0439\u0441\u0430\u0445 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0410 \u0434\u043b\u044f \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e AR \u0432 \u0432\u0435\u0431\u0435, \u043d\u043e \u0438 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c, \u044f \u0441\u043e\u0431\u0440\u0430\u043b\u0430 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0439 \u0438\u0437 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043b\u043e\u0433\u0430. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/864302\/\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: CSS, WebP, Canvas, Lottie, Spine \u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/819757\/\">\u041b\u0435\u0442\u0430\u044e\u0449\u0438\u0439 \u0421\u0430\u043d\u0442\u0430 \u0438 \u0442\u0430\u043d\u0446\u0443\u044e\u0449\u0438\u0435 \u0441\u043d\u0435\u0433\u0438\u0440\u0438: \u043e\u043f\u044b\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/821111\/\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm\/yarn link<\/a> (\u0441\u0442\u0430\u0442\u044c\u044f \u043c\u043e\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e)<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/843054\/\">Next.js + Playwright. \u041a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b \u0438 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/829460\/\">\u0418\u0441\u043a\u0443\u0441\u0441\u0442\u0432\u043e \u0441\u0435\u0442\u0430\u043f\u0430: \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0441\u0442\u0435\u043a\u0430 \u043f\u043e\u0434 \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/874464\/\"> https:\/\/habr.com\/ru\/articles\/874464\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042f \u0421\u0432\u0435\u0442\u0430, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u043e\u0442\u0434\u0435\u043b\u0435 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432 <a href=\"https:\/\/kts.tech\/\"><u>KTS<\/u><\/a>.<\/p>\n<p>\u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0437\u0430\u0434\u0430\u0447 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 AR \u0432 \u0432\u0435\u0431\u0435. \u042f \u043f\u0440\u043e\u0432\u0435\u043b\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u043a\u043e\u043f\u0430\u043b\u0430\u0441\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043e\u0442\u044b\u0441\u043a\u0430\u043b\u0430 \u043a\u0443\u0447\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438 \u0440\u0435\u0448\u0438\u043b\u0430, \u0447\u0442\u043e \u044d\u0442\u0438\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0449\u0435\u0442\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c AR \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p><strong>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5%20%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%20%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D1%82%D1%8C\">\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D0%B1%D0%B7%D0%BE%D1%80%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA\">\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8%20%D0%B8%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebXR%20API%20%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebGL\">\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#Three.js\">Three.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#A-Frame\">A-Frame<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#AR.js\">AR.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Model-Viewer\">Model-Viewer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Babylon.js\">Babylon.js<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#MindAR\">MindAR<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#PlayCanvas\">PlayCanvas<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#JSARToolKit5\">JSARToolKit5<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BB%D0%B0%D1%82%D0%BD%D1%8B%D0%B5%20%D0%B0%D0%BB%D1%8C%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D1%8B,%20%D0%B8%D0%BC%D0%B8%D1%82%D0%B8%D1%80%D1%83%D1%8E%D1%89%D0%B8%D0%B5%20WebXR%20API\">\u041f\u043b\u0430\u0442\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 WebXR API<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#8th%20Wall\">8th Wall<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0%20AR%20%D0%B2%20%D0%B2%D0%B5%D0%B1%D0%B5\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 AR \u0432 \u0432\u0435\u0431\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%B0%D0%BA%D0%B8%D0%B5%20%D1%82%D0%B5%D1%80%D0%BC%D0%B8%D0%BD%D1%8B%20%D0%B2%D0%B0%D0%B6%D0%BD%D0%BE%20%D0%BF%D0%BE%D0%BD%D0%B8%D0%BC%D0%B0%D1%82%D1%8C\" id=\"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c\">\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c&#187;><\/a><\/p>\n<h2>\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/h2>\n<p><strong>WebXR API<\/strong> \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0443\u044e (AR), \u0442\u0430\u043a \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c (VR) \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043f\u043e\u0438\u0441\u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 3D-\u0441\u0446\u0435\u043d\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u0441\u0446\u0435\u043d\u044b. \u041e\u0434\u043d\u0430\u043a\u043e WebXR \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043c\u0438, \u043a\u0430\u043a \u0438\u0445 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u2013 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p><strong>WebAR<\/strong> \u2014 \u044d\u0442\u043e \u043e\u0431\u0449\u0438\u0439 \u0442\u0435\u0440\u043c\u0438\u043d \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (AR) \u0432 \u0432\u0435\u0431\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 SDK \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p><strong>ARCore \u0438 ARKit<\/strong> \u2014 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 SDK \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Android \u0438 iOS \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u0427\u0435\u0440\u0435\u0437 WebXR \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u043a \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0445 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p><strong>WebGL<\/strong> \u2014 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0436\u0438\u0432\u043b\u044f\u0442\u044c \u0432\u0430\u0448\u0438 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u0432 AR; \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b, \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u044b.<\/p>\n<p><strong>WebRTC<\/strong> \u2014 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0437\u0430\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0435 \u0430\u0443\u0434\u0438\u043e \u0438 \u0432\u0438\u0434\u0435\u043e \u0438 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0425\u043e\u0442\u044f \u043e\u043d\u0430 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f AR, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0435\u0435 API \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0430\u043c\u0435\u0440\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p><strong>\u0422\u0438\u043f\u044b AR:<\/strong><\/p>\n<ul>\n<li>\n<p><strong>Marker-based (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u0430)<\/strong> \u2014 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u043a\u0435\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Hiro, Kanji, barcode) \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>Markerless (\u0431\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0440\u0430)<\/strong> \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044f\u0445 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u0438\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f SLAM, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u0438\u0442 \u0442\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0440\u0435\u0434\u044b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>Location-Based (\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f)<\/strong> \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"%D0%9E%D0%B1%D0%B7%D0%BE%D1%80%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA\" id=\"\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\">\u043b\u0438\u043e\u0442\u0435\u043a&#187;><\/a><\/p>\n<h2>\u041e\u0431\u0437\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/h2>\n<p>\u0412\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438\u043b\u0438 WebGL (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Three.js, A-Frame, AR.js, model-viewer) \u0438\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438\u043c\u0438\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0445 WebXR API (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 8th Wall).<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR \u0432 \u0432\u0435\u0431\u0435, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u043c \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0445 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D0%A4%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8%20%D0%B8%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebXR%20API%20%D0%B8%20%D0%BD%D0%B0%20%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5%20WebGL\" id=\"\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL\">WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL&#187;><\/a><\/p>\n<h3>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebXR API \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 WebGL<\/h3>\n<p><a class=\"anchor\" name=\"Three.js\" id=\"Three.js\"><\/a><\/p>\n<h4>Three.js<\/h4>\n<figure class=\"full-width\">\n<div><figcaption><em>\u041f\u0440\u043e\u043c\u043e \u0434\u043b\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f AR Fake Sneakers \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 Lusion<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Three.js \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 \u0432\u0435\u0431\u0435. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebGL \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0443\u044e 3D-\u0441\u0446\u0435\u043d\u0443.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 Markerless AR \u0432 Three.js \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 WebXR API. \u0410 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 AR \u043d\u0430 React \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React Three Fiber \u0438 @react-three\/xr.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0433\u0435\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, AR.js \u0438\u043b\u0438 jsartoolkit5.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/threejs.org\/docs\/\">Three.js Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/mrdoob\/three.js\/\">https:\/\/github.com\/mrdoob\/three.js\/<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<ul>\n<li>\n<p>Markerless AR: <a href=\"https:\/\/webxr-sneakers.lusion.co\/\">WebXR Sneakers<\/a>,<a href=\"https:\/\/threejs.org\/examples\/webxr_ar_hittest\"> Hit Test Example<\/a><\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 AR.js (\u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f Hiro-\u043c\u0430\u0440\u043a\u0435\u0440):<a href=\"https:\/\/jeromeetienne.github.io\/AR.js\/three.js\/examples\/mobile-performance.html\"> AR.js Example<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"A-Frame\" id=\"A-Frame\"><\/a><\/p>\n<h4>A-Frame<\/h4>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0431\u043b\u043e\u0433\u0430 A-Frame<\/em><\/figcaption><\/div>\n<\/figure>\n<p>A-Frame \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Three.js. \u041e\u043d \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 AR \u0438 VR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e HTML: \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u0435\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 A-Frame, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 JavaScript.<\/p>\n<p>\u0415\u0441\u0442\u044c \u043e\u0434\u043d\u043e &#171;\u043d\u043e&#187;: AR-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 A-Frame \u043f\u043e\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Chromium-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 Android \u0438\u0437-\u0437\u0430 WebXR API \u2014 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0430. \u042d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0430\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 Safari \u0438\u043b\u0438 \u043d\u0430 iOS.<\/p>\n<p>\u0421 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438\u043b\u0438 \u0433\u0435\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u0438 A-Frame \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0412\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a AR.js.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c A-Frame \u0441 React, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 aframe-react \u0438 react-aframe-ar, \u043d\u043e \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d\u0438 \u0443\u0441\u0442\u0430\u0440\u0435\u043b\u0438 \u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u0440\u0430\u043c\u0438. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b 8th Wall \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-8thwall-aframe.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/aframe.io\/docs\/1.6.0\/introduction\/\">A-Frame Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/aframevr\/aframe\/\">https:\/\/github.com\/aframevr\/aframe\/<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/aframe.io\/examples\/showcase\/modelviewer\/\">Model Viewer<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/aframe.io\/examples\/showcase\/anime-UI\/\">Anime UI<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/ada.is\/rollAR-coaster\/\">Augmented Reality Roller Coaster<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"AR.js\" id=\"AR.js\"><\/a><\/p>\n<h4>AR.js<\/h4>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0421\u043b\u0435\u0432\u0430 \u2014 Hiro-\u043c\u0430\u0440\u043a\u0435\u0440, \u0441\u043f\u0440\u0430\u0432\u0430 \u2014 3D-\u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0430\u0440\u043a\u0435\u0440\u043d\u043e\u0439 AR. \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 AR.js \u043b\u0435\u0436\u0438\u0442 jsartoolkit5, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0431\u043e\u0440\u043e\u043a: \u0434\u043b\u044f Three.js \u0438\u043b\u0438 \u0434\u043b\u044f A-Frame. \u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 AR \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0435\u043e\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441 Three.js, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442 \u0442\u0435\u0445 \u0436\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u2014 <a href=\"https:\/\/github.com\/AR-js-org\/locar.js\">LocAR.js<\/a>.<\/p>\n<p>AR.js \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0433\u0434\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b WebGL \u0438 WebRTC. \u0418 \u0442\u043e\u0442, \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0443\u0436\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041d\u043e \u0438\u043c\u0435\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0443: \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 React \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439-\u043e\u0431\u0435\u0440\u0442\u043a\u043e\u0439 <a href=\"https:\/\/github.com\/artcom\/react-three-arjs\">react-three-arjs<\/a> \u0438\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u0434 \u0441 AR.js \u0432 iframe.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/ar-js-org.github.io\/AR.js-Docs\/\">AR.js Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/AR-js-org\/AR.js\">https:\/\/github.com\/AR-js-org\/AR.js<\/a>\u00a0<\/p>\n<p>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c AR.js:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/jeromeetienne.github.io\/AR.js-docs\/misc\/EXAMPLES.html\">https:\/\/jeromeetienne.github.io\/AR.js-docs\/misc\/EXAMPLES.html<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/stemkoski.github.io\/AR-Examples\/\">https:\/\/stemkoski.github.io\/AR-Examples\/<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"Model-Viewer\" id=\"Model-Viewer\"><\/a><\/p>\n<h4>Model-Viewer<\/h4>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f 3D-\u043c\u043e\u0434\u0435\u043b\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Model-Viewer \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442 Google, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432 \u0432\u0438\u0434\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 API \u2014 \u044d\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;model-viewer&gt;. \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c Model-Viewer \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Three.js.<\/p>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebXR, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c AR-\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 Chromium. \u0415\u0441\u043b\u0438 WebXR \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, Model-Viewer \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SceneViewer (\u0434\u043b\u044f Android) \u0438 QuickLook (\u0434\u043b\u044f iOS). \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u0432\u043e\u044e \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443, Model-Viewer \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Firefox.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, &lt;model-viewer&gt; \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430 React. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/dev.to\/asross311\/a-strongly-typed-google-model-viewer-implementation-in-react-3m5c\">\u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e<\/a>, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b 3D-\u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c<a href=\"https:\/\/modelviewer.dev\/editor\/\"> Model Editor<\/a>.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/modelviewer.dev\/docs\/\">Model Viewer Docs<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/google\/model-viewer\">https:\/\/github.com\/google\/model-viewer<\/a>\u00a0<\/p>\n<p>\u0412\u0438\u0442\u0440\u0438\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435: <a href=\"https:\/\/modelviewer.dev\/examples\/augmentedreality\/\">https:\/\/modelviewer.dev\/examples\/augmentedreality\/<\/a>\u00a0<\/p>\n<p><a class=\"anchor\" name=\"Babylon.js\" id=\"Babylon.js\"><\/a><\/p>\n<h4>Babylon.js<\/h4>\n<figure class=\"\">\n<div><figcaption><em>\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0438\u0437 \u0432\u0438\u0434\u0435\u043e-\u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 BabylonJS<\/em><\/figcaption><\/div>\n<\/figure>\n<p>Babylon.js \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0432 \u0432\u0435\u0431\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 WebGL\/WebGPU. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u0433\u0430\u0442\u044b\u0439 API, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0444\u0438\u0437\u0438\u043a\u043e\u0439, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u0441\u0432\u0435\u0442\u043e\u043c \u0438 \u0442\u0435\u043d\u044c\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0448\u0438\u0440\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 3D-\u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR \u0438 VR Babylon.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebXR API.\u00a0<\/p>\n<p>\u0421\u0438\u043b\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a Markerless, \u0442\u0430\u043a \u0438 Marker Based AR, \u0445\u043e\u0442\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0442\u0438\u043f \u043f\u043e\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 API. \u0414\u043b\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u043d\u043e\u0433\u043e AR \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 BabylonAR, \u0433\u0434\u0435 \u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0434\u0443\u043b\u044f ArUco \u0438\u0437 OpenCV.<\/p>\n<p>\u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b Babylon.js \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 React \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432: \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0438\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e, \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 babylonjs-hook. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u0445\u0443\u043a\u043e\u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 react-babylonjs.\u00a0<\/p>\n<p>\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430: <a href=\"https:\/\/playground.babylonjs.com\/\">Babylon.js Playground<\/a><\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/doc.babylonjs.com\/features\/featuresDeepDive\/webXR\">WebXR \u0438 Babylon.js<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/BabylonJS\/Babylon.js\">https:\/\/github.com\/BabylonJS\/Babylon.js<\/a>\u00a0<\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043c\u043e \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 (\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u043e\u0434\u0435\u043b\u0435\u0439):\u00a0<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 AR: <a href=\"https:\/\/playground.babylonjs.com\/#F41V6N#32\">https:\/\/playground.babylonjs.com\/#F41V6N#32<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f: <a href=\"https:\/\/playground.babylonjs.com\/#NAZYHG#5\">https:\/\/playground.babylonjs.com\/#NAZYHG#5<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0435\u043b\u044f\u043c\u0438: <a href=\"https:\/\/playground.babylonjs.com\/#GG06BQ#97\">https:\/\/playground.babylonjs.com\/#GG06BQ#97<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"MindAR\" id=\"MindAR\"><\/a><\/p>\n<h4>MindAR<\/h4>\n<figure class=\"\">\n<div><figcaption><em>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/em><\/figcaption><\/div>\n<\/figure>\n<p>\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 MindAR \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043b\u0438\u0446. \u041e\u043d\u0430 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 AR \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, MindAR \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0441 AR-\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p>MindAR \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u043b\u0438\u0446\u0430, \u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u044b AR \u0431\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u043b\u0438 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0435\u0439).<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f AR MindAR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebGL \u0438 WebRTC, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0432 Safari, \u0438 \u0432 Firefox. \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f 3D-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 MindAR \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Three.js \u0438\u043b\u0438 A-Frame.<\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/\">MindAR Documentation<\/a><\/p>\n<p>\u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/hiukim\/mind-ar-js\">https:\/\/github.com\/hiukim\/mind-ar-js<\/a>\u00a0<\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:\u00a0<\/p>\n<ul>\n<li>\n<p>\u0422\u0440\u0435\u043a\u0438\u043d\u0433 \u043b\u0438\u0446\u0430: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/face-tracking-samples\/tryon.html\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/face-tracking-samples\/tryon.html<\/a>\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/samples\/advanced.html\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/samples\/advanced.html<\/a> (\u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435: <a href=\"https:\/\/cdn.jsdelivr.net\/gh\/hiukim\/mind-ar-js@1.1.4\/examples\/image-tracking\/assets\/card-example\/card.png\">https:\/\/cdn.jsdelivr.net\/gh\/hiukim\/mind-ar-js@1.1.4\/examples\/image-tracking\/assets\/card-example\/card.png<\/a>)\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0422\u0440\u0435\u043a\u0438\u043d\u0433 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432: <a href=\"https:\/\/hiukim.github.io\/mind-ar-js-doc\/examples\/multi-tracks\">https:\/\/hiukim.github.io\/mind-ar-js-doc\/examples\/multi-tracks<\/a>\u00a0<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"PlayCanvas\" id=\"PlayCanvas\"><\/a><\/p>\n<h4>PlayCanvas<\/h4>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u043c\u043e\u0434\u0435\u043b\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e glTF Viewer<\/em><\/figcaption><\/div>\n<\/figure>\n<p>PlayCanvas \u2014 \u044d\u0442\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-445356","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/445356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=445356"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/445356\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=445356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=445356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=445356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}