2017-10-24 05:39:35 +03:00
<!doctype html>
2017-10-24 05:34:17 +03:00
< html >
< head >
2017-11-03 17:55:26 +03:00
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-77033033-2" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-77033033-2');
< / script >
2017-10-24 05:34:17 +03:00
< title > WebXR Viewer< / title >
< meta charset = "utf-8" >
2017-10-24 05:39:35 +03:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2017-10-24 05:34:17 +03:00
< style >
2018-02-08 22:26:55 +03:00
/*
colors
*/
/*https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/fonts/ZillaSlab-Regular.woff2*/
@font-face { font-family: 'Zilla Slab'; font-weight: normal; font-style: normal; src: url("https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/fonts/ZillaSlab-Regular.woff2") format("woff2"), url("https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/fonts/ZillaSlab-Regular.woff") format("woff"); }
@font-face { font-family: 'Zilla Slab'; font-weight: bold; font-style: normal; src: url("https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/fonts/ZillaSlab-Bold.woff2") format("woff2"), url("https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/fonts/ZillaSlab-Bold.woff") format("woff"); }
/*@font-face { font-family: 'Zilla Slab'; font-weight: normal; font-style: italic; src: url("fonts/ZillaSlab-RegularItalic.woff2") format("woff2"), url("fonts/ZillaSlab-RegularItalic.woff") format("woff"); }*/
/*@font-face { font-family: 'Zilla Slab'; font-weight: bold; font-style: italic; src: url("fonts/ZillaSlab-BoldItalic.woff2") format("woff2"), url("fonts/ZillaSlab-BoldItalic.woff") format("woff"); }*/
/*@font-face { font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url("fonts/opensans-regular.woff2") format("woff2"), url("fonts/opensans-regular.woff") format("woff"); }*/
/*@font-face { font-family: 'Open Sans'; font-weight: bold; font-style: normal; src: url("fonts/opensans-bold.woff2") format("woff2"), url("fonts/opensans-bold.woff") format("woff"); }*/
body, html {
background-color: #ffffff;
color: #221E1D;
font-family: "Zilla Slab", "Open Sans", X-LocaleSpecific, sans-serif;
/*font-size: 12px;*/
line-height: 1.3em;
}
h1, h2, h3 {
background-color: #221E1D;
color: white;
padding: 0.25rem 0.25rem 0.5rem 0.4rem;
font-weight: normal;
margin: 2rem 0 0 0;
}
a {
color: #00a7e0;
}
li {
border: 1px solid #ccc;
background-color: #eee;
}
/* layout */
2017-10-24 05:34:17 +03:00
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding-bottom: 200px;
}
section {
margin: 0.5rem;
}
section > * {
2018-02-08 22:26:55 +03:00
margin-left: 0.5rem;
margin-right: 0.5rem;
2017-10-24 05:34:17 +03:00
}
ul li img {
width: 100%;
height: auto;
margin:0;
padding:0;
}
.intro {
max-width: 40em;
padding: 0.5rem 0;
}
.source {
font-size: 0.8rem;
}
a {
text-decoration: none;
}
li a {
font-size: 1.3rem;
}
li p {
margin-top: 0.5rem;
}
2018-02-08 22:11:12 +03:00
ul {
list-style: none;
margin:0;
padding:0;
width: 100%;
display: grid;
2018-02-08 22:39:49 +03:00
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
2018-02-08 22:11:12 +03:00
}
li {
display: flex;
flex-direction: column;
padding: 0.5em;
2018-02-08 22:26:55 +03:00
margin: 0.5rem;
2018-02-08 22:11:12 +03:00
justify-content: flex-start;
}
li a.img {
flex: 1;
justify-self: flex-end;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
2017-10-24 05:34:17 +03:00
< / style >
< / head >
< body >
< section >
< h1 > WebXR Viewer< / h1 >
< p class = "intro" >
Help Mozilla Research by taking part in WebXR viewer, an augmented reality and virtual reality application that lets you navigate to XR experiences just like websites.
< / p >
< p class = "intro" >
Below you will find examples of WebXR experiences. If you are a developer, click the source code links to see how to use the < a href = "https://github.com/mozilla/webxr-polyfill" > WebXR polyfill< / a > to create your own AR or VR experiences.
< / p >
< / section >
< section >
2018-02-08 02:03:31 +03:00
< h2 > Samples< / h2 >
< ul >
< li >
< a href = "http://apainter.webxrexperiments.com/" > A-Painter< / a >
< a class = 'source' href = "wxrv://apainter.webxrexperiments.com/" > wxrv< / a >
< p > Draw in 3D< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "http://apainter.webxrexperiments.com/" >
2018-02-08 02:03:31 +03:00
< img src = "./screenshots/apainter.png" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/0b45b93b-e651-42d8-ba49-b2df907575f3/" > A-painter fox< / a >
< a class = 'source' href = "wxrv://apainter.webxrexperiments.com/?url=https://ucarecdn.com/0b45b93b-e651-42d8-ba49-b2df907575f3/" > wxrv< / a >
< p > A-Painter Fox< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/0b45b93b-e651-42d8-ba49-b2df907575f3/" >
2018-02-08 02:03:31 +03:00
< img src = "./screenshots/apainter.png" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/" > A-painter Balrog< / a >
< a class = 'source' href = "wxrv://apainter.webxrexperiments.com/?url=https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/" > wxrv< / a >
< p > A-Painter Balrog< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/" >
2018-02-08 02:03:31 +03:00
< img src = "./screenshots/apainter.png" width = "300" height = "200" / >
< / a >
< / li >
< / ul >
< h2 > Simple Examples< / h2 >
2017-10-24 05:34:17 +03:00
< ul >
< li >
< a href = "examples/ar_simplest/" > Simplest AR< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/ar_simplest/index.html" > source< / a >
< p > Use Three.js to position the Utah Teapot in an augmented reality scene.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/ar_simplest/" >
2017-10-24 05:34:17 +03:00
< img src = "examples/ar_simplest/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
2018-02-08 22:45:20 +03:00
2017-10-24 05:34:17 +03:00
< li >
< a href = "examples/ar_anchors/" > Anchors< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/ar_anchors/index.html" > source< / a >
< p > Position boxes in space and receive updated positions using ARKit anchors.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/ar_anchors/" >
2017-10-24 05:34:17 +03:00
< img src = "examples/ar_anchors/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "examples/hit_test/" > Hit testing< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/hit_test/index.html" > source< / a >
< p > Find anchors by tapping to search for surfaces.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/hit_test/" >
2017-10-24 05:34:17 +03:00
< img src = "examples/hit_test/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "examples/peoples/" > Peoples< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/peoples/index.html" > source< / a >
< p > Place animated people on surfaces.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/peoples/" >
2017-10-24 05:34:17 +03:00
< img src = "examples/peoples/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "examples/boombox/" > Boom box< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/boombox/index.html" > source< / a >
2017-12-04 17:04:03 +03:00
< p > A shiny boom box in an environment map< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/boombox/" >
2017-10-24 05:34:17 +03:00
< img src = "examples/boombox/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
2018-01-25 05:32:05 +03:00
< li >
< a href = "examples/reticle/" > Reticle< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/reticle/index.html" > source< / a >
< p > Place a reticle on surfaces.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/reticle/" >
2018-01-25 05:32:05 +03:00
< img src = "examples/reticle/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
< li >
< a href = "examples/light/" > Light< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/light/index.html" > source< / a >
< p > Place a reticle on surfaces with light estimation.< / p >
2018-02-08 22:11:12 +03:00
< a class = "img" href = "examples/light/" >
2018-01-25 05:32:05 +03:00
< img src = "examples/light/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
2018-03-21 04:50:42 +03:00
< li >
< a href = "examples/simplecv/" > Simple CV< / a >
< a class = "source" href = "https://github.com/mozilla/webxr-polyfill/blob/master/examples/simplecv/index.html" > source< / a >
< p > Show average world brightness to demonstrate simple computer vision.< / p >
< a class = "img" href = "examples/simplecv/" >
< img src = "examples/simplecv/screenshot.jpeg" width = "300" height = "200" / >
< / a >
< / li >
2017-10-24 05:34:17 +03:00
< / ul >
< / section >
< / body >
< / html >
