{"id":28614,"date":"2019-12-03T18:19:39","date_gmt":"2019-12-03T10:19:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28614"},"modified":"2021-04-22T18:03:36","modified_gmt":"2021-04-22T10:03:36","slug":"webvr","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/webvr\/","title":{"rendered":"Bring VR Experience in Your Browser with WebVR"},"content":{"rendered":"<p>The Oculus Rift, HTC Vive, and <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/oculus-rift-virtual-reality-alternative\/\" rel=\"noopener\">other VR products<\/a> have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet in the 1990s, VR is the way of the future.<\/p>\n<p>And thanks to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webvr.info\/\">WebVR<\/a> we already have a way to <strong>merge the Internet with VR using a powerful JavaScript API<\/strong>. This library is completely free, open source, and supported by the W3C so it\u2019s the perfect library to play with if you\u2019re into virtual reality.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webvr.info\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg\" alt=\"webvr js homepage\"><\/a><\/figure>\n<p>WebVR is still experimental and you can only <strong>test it with browsers on VR headsets<\/strong>. Because of this you can\u2019t really see live demos in your browser although you <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webvr.info\/samples\/\">certainly can try<\/a>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/youtube-vr-daydream-smartphones\/\">YouTube VR is now available for Daydream-ready smartphones<\/a>\n\t\t\t\t<\/p>\n<p>Most examples give a warning saying that <strong>your browser isn\u2019t supported<\/strong>. But you can still see what the idea is behind VR and<strong> why WebVR can drastically change how web developers create virtual reality on the web<\/strong>.<\/p>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/mixedreality.mozilla.org\/\">Moz VR site<\/a> is another cool place to <strong>check out live projects<\/strong>. Again these work best with VR headsets but many of them have been built with WebVR.<\/p>\n<p>The WebVR API is actually <strong>supported in the Firefox Nightly Build<\/strong> and <strong>upcoming versions of Chromium<\/strong>. It\u2019s a very experimental library but it proves that developers are interested in virtual reality even on the web.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/threejs.org\/examples\/webxr_vr_cubes.html\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webvr\/02-webvr-3d-visuals.jpg\" alt=\"3d visuals webvr page\"><\/a><\/figure>\n<p>In case you\u2019re wondering who\u2019s managing the WebVR API, it\u2019s actually hosted <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/webxr\">on GitHub<\/a> by the W3C team. This would ideally become an official W3C spec and it even has an editor\u2019s draft of how the spec can be implemented once the W3C pushes it through.<\/p>\n<p>This WebVR API has the chance to <strong>radically transform web games<\/strong> and <strong>interactivity<\/strong> on the web. It may be well over a decade before consumers see any benefits, but WebVR is in place and it\u2019ll only continue to grow.<\/p>\n<p>If you wanna give it a try you can download the source directly from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/webxr\">WebVR\u2019s GitHub page<\/a> with links to the different API specifications and dev resources to get started.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/oculus-rift-virtual-reality-alternative\/\">5 VR Headset Alternatives to The Oculus Rift<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet in the 1990s, VR is the way of the future. And thanks to WebVR we already have a way to merge the Internet with VR using&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4117,3252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Bring VR Experience in Your Browser with WebVR - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/webvr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bring VR Experience in Your Browser with WebVR\" \/>\n<meta property=\"og:description\" content=\"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/webvr\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-03T10:19:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-22T10:03:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Bring VR Experience in Your Browser with WebVR\",\"datePublished\":\"2019-12-03T10:19:39+00:00\",\"dateModified\":\"2021-04-22T10:03:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/\"},\"wordCount\":350,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webvr\\\/01-webvr-homepage-api.jpg\",\"keywords\":[\"Javascripts\",\"virtual reality\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/\",\"name\":\"Bring VR Experience in Your Browser with WebVR - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webvr\\\/01-webvr-homepage-api.jpg\",\"datePublished\":\"2019-12-03T10:19:39+00:00\",\"dateModified\":\"2021-04-22T10:03:36+00:00\",\"description\":\"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webvr\\\/01-webvr-homepage-api.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webvr\\\/01-webvr-homepage-api.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webvr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bring VR Experience in Your Browser with WebVR\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bring VR Experience in Your Browser with WebVR - Hongkiat","description":"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/webvr\/","og_locale":"en_US","og_type":"article","og_title":"Bring VR Experience in Your Browser with WebVR","og_description":"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet","og_url":"https:\/\/www.hongkiat.com\/blog\/webvr\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-12-03T10:19:39+00:00","article_modified_time":"2021-04-22T10:03:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Bring VR Experience in Your Browser with WebVR","datePublished":"2019-12-03T10:19:39+00:00","dateModified":"2021-04-22T10:03:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/"},"wordCount":350,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg","keywords":["Javascripts","virtual reality"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/webvr\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/","url":"https:\/\/www.hongkiat.com\/blog\/webvr\/","name":"Bring VR Experience in Your Browser with WebVR - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg","datePublished":"2019-12-03T10:19:39+00:00","dateModified":"2021-04-22T10:03:36+00:00","description":"The Oculus Rift, HTC Vive, and other VR products have changed the future of technology. We may scoff at the idea of VR headsets but much like the Internet","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/webvr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/webvr\/01-webvr-homepage-api.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/webvr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Bring VR Experience in Your Browser with WebVR"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/s4uxU-webvr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28614"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28614\/revisions"}],"predecessor-version":[{"id":54030,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28614\/revisions\/54030"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28614"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}