mozilla
/
webxr-polyfill
зеркало из https://github.com/mozilla/webxr-polyfill.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность
webxr-polyfill/index.html

286 строки
12 KiB
HTML
Исходник Обычный вид История

added missing VR example copy changes over from viewer.html to index.html
2018-02-08 22:48:40 +03:00
<!doctype html>
Pull the example code from the webxr-api repository.
2017-09-05 04:59:34 +03:00
<html>
added missing VR example copy changes over from viewer.html to index.html
2018-02-08 22:48:40 +03:00
<head>
<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>
<title>WebXR Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
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 */
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding-bottom: 200px;
}
section {
margin: 0.5rem;
}
section > * {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
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;
}
ul {
list-style: none;
margin:0;
padding:0;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
}
li {
display: flex;
flex-direction: column;
padding: 0.5em;
margin: 0.5rem;
justify-content: flex-start;
}
li a.img {
flex: 1;
justify-self: flex-end;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
</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>
<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>
<a class="img" href="http://apainter.webxrexperiments.com/">
<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>
<a class="img" href="http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/0b45b93b-e651-42d8-ba49-b2df907575f3/">
<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>
<a class="img" href="http://apainter.webxrexperiments.com/?url=https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/">
<img src="./screenshots/apainter.png" width="300" height="200"/>
</a>
</li>
</ul>
<h2>Simple Examples</h2>
<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>
<a class="img" href="examples/ar_simplest/">
<img src="examples/ar_simplest/screenshot.jpeg" width="300" height="200"/>
</a>
</li>
<li>
<a href="examples/vr_simplest/">Simplest VR</a>
<a class="source" href="https://github.com/mozilla/webxr-polyfill/blob/master/examples/vr_simplest/index.html">source</a>
<p>Use Three.js to position the Utah Teapot in an virtual reality scene.</p>
<a class="img" href="examples/vr_simplest">
<img src="#" width="300" height="200"/>
</a>
</li>
<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>
<a class="img" href="examples/ar_anchors/">
<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>
<a class="img" href="examples/hit_test/">
<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>
<a class="img" href="examples/peoples/">
<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>
<p>A shiny boom box in an environment map</p>
<a class="img" href="examples/boombox/">
<img src="examples/boombox/screenshot.jpeg" width="300" height="200"/>
</a>
</li>
<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>
<a class="img" href="examples/reticle/">
<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>
<a class="img" href="examples/light/">
<img src="examples/light/screenshot.jpeg" width="300" height="200"/>
</a>
</li>
initial simple CV example
2018-03-18 21:58:09 +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/">
opencv demos OpenCV face demo works. Initial aruco marker tracker demo, still need to create anchors for markers. added gl-matrix.js file that can be included directly in .html page
2018-04-11 06:31:53 +03:00
<img src="examples/simplecv/screenshot.png" width="300" height="200"/>
initial simple CV example
2018-03-18 21:58:09 +03:00
</a>
</li>
WIP on opencv
2018-04-03 14:14:36 +03:00
<li>
opencv demos OpenCV face demo works. Initial aruco marker tracker demo, still need to create anchors for markers. added gl-matrix.js file that can be included directly in .html page
2018-04-11 06:31:53 +03:00
<a href="examples/opencv-face/">OpenCV Face</a>
<a class="source" href="https://github.com/mozilla/webxr-polyfill/blob/master/examples/opencv-face/index.html">source</a>
WIP on opencv
2018-04-03 14:14:36 +03:00
<p>OpenCV face detector.</p>
opencv demos OpenCV face demo works. Initial aruco marker tracker demo, still need to create anchors for markers. added gl-matrix.js file that can be included directly in .html page
2018-04-11 06:31:53 +03:00
<a class="img" href="examples/opencv-face/">
<img src="examples/opencv-face/screenshot.png" width="300" height="200"/>
WIP on opencv
2018-04-03 14:14:36 +03:00
</a>
</li>
opencv demos OpenCV face demo works. Initial aruco marker tracker demo, still need to create anchors for markers. added gl-matrix.js file that can be included directly in .html page
2018-04-11 06:31:53 +03:00
<li>
<a href="examples/opencv-aruco/">OpenCV Markers</a>
<a class="source" href="https://github.com/mozilla/webxr-polyfill/blob/master/examples/opencv-aruco/index.html">source</a>
<p>OpenCV Aruco marker detector.</p>
<a class="img" href="examples/opencv-aruco/">
<img src="examples/opencv-aruco/screenshot.png" width="300" height="200"/>
</a>
</li>
Work in progress on a sample using ARKit 1.5 image detection.
2018-04-20 18:01:06 +03:00
<li>
<a href="examples/image_detection/">Image Detection</a>
<a class="source" href="https://github.com/mozilla/webxr-polyfill/blob/master/examples/image_detection/index.html">source</a>
Added ARKit face tracking support and a simple example to demo it.
2018-05-10 18:06:24 +03:00
<p>Image detector</p>
Work in progress on a sample using ARKit 1.5 image detection.
2018-04-20 18:01:06 +03:00
<a class="img" href="examples/image_detection/">
Added a simple example with 2 buttons that registers 2 test images into the ARKit session. A promise is resolved with the ARKit provided data when they're detected.
2018-04-23 17:30:35 +03:00
<img src="examples/image_detection/screenshot.jpg" width="300" height="200"/>
Work in progress on a sample using ARKit 1.5 image detection.
2018-04-20 18:01:06 +03:00
</a>
</li>
Added ARKit face tracking support and a simple example to demo it.
2018-05-10 18:06:24 +03:00
<li>
<a href="examples/face_tracking/">Face Tracking</a>
<a class="source" href="https://github.com/mozilla/webxr-polyfill/blob/master/examples/face_tracking/index.html">source</a>
<p>Face tracker.</p>
<a class="img" href="examples/face_tracking/">
<img src="examples/face_tracking/screenshot.jpg" width="300" height="200"/>
</a>
</li>
opencv demos OpenCV face demo works. Initial aruco marker tracker demo, still need to create anchors for markers. added gl-matrix.js file that can be included directly in .html page
2018-04-11 06:31:53 +03:00
</ul>
added missing VR example copy changes over from viewer.html to index.html
2018-02-08 22:48:40 +03:00
</section>
</body>
Pull the example code from the webxr-api repository.
2017-09-05 04:59:34 +03:00
</html>