{"id":9912,"date":"2017-03-20T09:15:02","date_gmt":"2017-03-20T16:15:02","guid":{"rendered":"https:\/\/blog.mozilla.org\/?p=9912"},"modified":"2017-06-13T15:15:18","modified_gmt":"2017-06-13T22:15:18","slug":"webvr-aframe-bringing-vr-web-virtuleap-hackathon","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/","title":{"rendered":"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon"},"content":{"rendered":"<p>Imagine an online application that lets city planners walk through three-dimensional virtual versions of proposed projects, or a math program that helps students understand complex concepts by visualizing them in three dimensions. Both <a href=\"http:\/\/www.virtuleap.com\/apps\/details\/ed\">CityViewR<\/a> &amp; <a href=\"http:\/\/vr.sld.gs\/mathworldvr\/\">MathworldVR<\/a> are amazing applications experiences that bring to life the possibilities of virtual reality (VR).<br \/>\nBoth are concept virtual reality applications for the web that were generated for the <a href=\"http:\/\/www.virtuleap.com\/\">Virtuleap WebVR Hackathon<\/a>. Amazingly, nine out of ten of the winning projects used <a href=\"https:\/\/aframe.io\/blog\/#virtuleap-hackathon-projects\">AFrame<\/a>, an open source project sponsored by <a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\">Mozilla<\/a>, which makes it much easier to create VR experiences.. CityView really illustrates the capabilities of <a href=\"https:\/\/research.mozilla.org\/mixed-reality\/\">WebVR<\/a> to have real life benefits that impact the quality of people\u2019s daily lives beyond the browser.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-9913\" src=\"https:\/\/blog.mozilla.org\/wp-content\/uploads\/2017\/03\/CityViewVR-300x170.png\" alt=\"\" width=\"632\" height=\"358\" srcset=\"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/CityViewVR-300x170.png 300w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/CityViewVR-768x436.png 768w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/CityViewVR-600x340.png 600w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/CityViewVR.png 774w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><\/p>\n<p>A top-notch batch of leading VR companies, including Mozilla, funded and supported this global event with the goal of building the grassroots community for WebVR. For non-techies, WebVR is the experimental JavaScript API that allows anyone with a web browser to experience immersive virtual reality on almost any device. WebVR is designed to be completely platform and device agnostic and so it is a scalable and democratic path to stoking a mainstream VR industry that can take advantage of the most valuable thing the web has to offer: built-in traffic and hundreds of millions of users.<\/p>\n<p>Over three months, long contest teams from a dozen countries submitted 34 VR concepts. Seventeen judges and audience panels voted on the entries. Below is a list of the top 10 projects. I wanted to congratulate<a href=\"https:\/\/twitter.com\/@ThePascalRascal\"> @ThePascalRascal<\/a> and<a href=\"https:\/\/twitter.com\/@Geczy\"> @Geczy<\/a> for their work that won the \u20ac30,000 prize and spots to VR accelerator programs in Amsterdam, respectively.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-9914\" src=\"https:\/\/blog.mozilla.org\/wp-content\/uploads\/2017\/03\/Enter-the-Data-Mine-300x170.png\" alt=\"\" width=\"642\" height=\"364\" srcset=\"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Enter-the-Data-Mine-300x170.png 300w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Enter-the-Data-Mine-768x436.png 768w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Enter-the-Data-Mine-600x341.png 600w, https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Enter-the-Data-Mine.png 778w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><\/p>\n<p>Here\u2019s the really excellent part. With luck and solid code, virtual reality should start appearing in standard general availability web browsers in 2017. That\u2019s a big deal. To date, VR has been accessible primarily on proprietary platforms. To put that in real world terms, the world of VR has been like a maze with many doors opening into rooms. Each room held something cool. But there was no way to walk easily and search through the rooms, browse the rooms, or link one room to another. This ability to link, browse, collaborate and share is what makes the web powerful and it\u2019s what will help WebVR take off.<\/p>\n<p>To get an idea of how we envision this might work, consider the <a href=\"https:\/\/aframe.io\/examples\/showcase\/a-painter\/\">APainter <\/a>app built by Mozilla\u2019s team. It is designed to let artists create virtual art installations online. Each APainter work has a unique URL and other artists can come in and add to or build on top of the creation of the first artist, because the system is open source. At the same time, anyone with a browser can walk through an APainter work. And artists using APainter can link to other works within their virtual works, be it a button on a wall, a traditional text block, or any other format.<\/p>\n<p>Mozilla participated in this hackathon, and is supporting WebVR, \u00a0because we believe keeping the web open and ensuring it is built on open standards that work across all devices and browsers is a key to keeping the internet vibrant and healthy. To that same end, we are sponsoring the AFrame Project. The goal of AFrame is to make coding VR apps for the web even easier than coding web apps with standard HTML and javascript. Our vision at Mozilla is that, in the very near future, any web developer that wants to build VR apps can learn to do so, quickly and easily. We want to give them the power of creative self-expression.<\/p>\n<p>It\u2019s gratifying to see something we have worked so hard on enjoy such strong community adoption. And we\u2019re also super grateful to Amir and the folks that put in the time and effort to organize and staff the Virtualeap Global Hackathon. If you are interested in learning more about AFrame, you can do so <a href=\"https:\/\/aframe.io\/blog\/\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imagine an online application that lets city planners walk through three-dimensional virtual versions of proposed projects, or a math program that helps students understand complex concepts by visualizing them in &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/\">Read more<\/a><\/p>\n","protected":false},"author":1435,"featured_media":9915,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47690,47689,30748],"tags":[5872,282937,47688],"coauthors":[290400],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon - The Mozilla Blog (Archived)<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sean White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/\",\"url\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/\",\"name\":\"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon - The Mozilla Blog (Archived)\",\"isPartOf\":{\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png\",\"datePublished\":\"2017-03-20T16:15:02+00:00\",\"dateModified\":\"2017-06-13T22:15:18+00:00\",\"author\":{\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/0a0eb705e852a8c5b9655e2e9f6dfba4\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage\",\"url\":\"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png\",\"contentUrl\":\"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png\",\"width\":798,\"height\":419},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.mozilla.org\/blogarchive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/#website\",\"url\":\"https:\/\/blog.mozilla.org\/blogarchive\/\",\"name\":\"The Mozilla Blog (Archived)\",\"description\":\"Dispatches from the Internet frontier.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.mozilla.org\/blogarchive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/0a0eb705e852a8c5b9655e2e9f6dfba4\",\"name\":\"Sean White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/image\/7559e8e163a0252b6f9d24151a76ea06\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fe07d32ca76ce2b328f94cad497adf92?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fe07d32ca76ce2b328f94cad497adf92?s=96&d=mm&r=g\",\"caption\":\"Sean White\"},\"url\":\"https:\/\/blog.mozilla.org\/blogarchive\/blog\/author\/swhitemozilla-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon - The Mozilla Blog (Archived)","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:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/","twitter_misc":{"Written by":"Sean White","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/","url":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/","name":"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon - The Mozilla Blog (Archived)","isPartOf":{"@id":"https:\/\/blog.mozilla.org\/blogarchive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage"},"image":{"@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png","datePublished":"2017-03-20T16:15:02+00:00","dateModified":"2017-06-13T22:15:18+00:00","author":{"@id":"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/0a0eb705e852a8c5b9655e2e9f6dfba4"},"breadcrumb":{"@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#primaryimage","url":"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png","contentUrl":"https:\/\/blog.mozilla.org\/blogarchive\/files\/2017\/03\/Screen-Shot-2017-03-16-at-11.05.48-AM.png","width":798,"height":419},{"@type":"BreadcrumbList","@id":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/2017\/03\/20\/webvr-aframe-bringing-vr-web-virtuleap-hackathon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.mozilla.org\/blogarchive\/"},{"@type":"ListItem","position":2,"name":"WebVR and AFrame Bringing VR to Web at the Virtuleap Hackathon"}]},{"@type":"WebSite","@id":"https:\/\/blog.mozilla.org\/blogarchive\/#website","url":"https:\/\/blog.mozilla.org\/blogarchive\/","name":"The Mozilla Blog (Archived)","description":"Dispatches from the Internet frontier.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.mozilla.org\/blogarchive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/0a0eb705e852a8c5b9655e2e9f6dfba4","name":"Sean White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.mozilla.org\/blogarchive\/#\/schema\/person\/image\/7559e8e163a0252b6f9d24151a76ea06","url":"https:\/\/secure.gravatar.com\/avatar\/fe07d32ca76ce2b328f94cad497adf92?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fe07d32ca76ce2b328f94cad497adf92?s=96&d=mm&r=g","caption":"Sean White"},"url":"https:\/\/blog.mozilla.org\/blogarchive\/blog\/author\/swhitemozilla-com\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/posts\/9912"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/users\/1435"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/comments?post=9912"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/posts\/9912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/media\/9915"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/media?parent=9912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/categories?post=9912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/tags?post=9912"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/blogarchive\/wp-json\/wp\/v2\/coauthors?post=9912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}