proposals/index.html - external/github.com/immersive-web/webxr-samples - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='chrome=1'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>

     <meta name='twitter:card' content='summary'>
     <meta name='twitter:title' content='WebXR Samples'>
     <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

     <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
     <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

     <link rel='stylesheet' href='../css/stylesheet.css'>
     <link rel='stylesheet' href='../css/pygment_trac.css'>

     <style>
       article {
         position: relative;
         padding: 0.5em;
         background-color: rgba(255, 255, 255, 0.90);
         margin-bottom: 1em;
         border-radius: 3px;
       }

       article h3 {
         font-size: 1.0em;
         margin-top: 0px;
         margin-bottom: 0px;
       }

       article h3::before {
         display: inline-block;
         content: attr(data-index) ' - ';
         font-weight: bold;
         white-space: nowrap;
         margin-right: 0.2em;
       }

       article h4 {
         position: absolute;
         right: 0.5em;
         top: 0.5em;
         margin-top: 0px;
         margin-bottom: 0px;
       }

       article p {
         margin: 0.5em;
       }

       article .links {
         margin-left: 0.5em;
         margin-right: 0.5em;
       }

       article a {
         display: inline-block;
       }

       article a:not(:first-child)::before {
         display: inline-block;
         content: '•';
         font-weight: bold;
         white-space: nowrap;
         margin-left: 0.5em;
         margin-right: 0.5em;
       }

       .github-link {
         font-size: 0.8em;
       }

       .wordmark img {
         width: 70%;
       }
     </style>

     <!--[if lt IE 9]>
     <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
     <![endif]-->
     <title>WebXR - Proposals</title>
   </head>
   <body>

     <div class='container' id='container'>
       <header class='header'>
         <div id='nav'>
             <a href='../'>Samples</a>
             <a href='../layers-samples/'>Layers Samples</a>
             <a href='./' class='selected'>Proposals</a>
             <a href='../tests/'>Test Pages</a>
             <a href='../report/'>Report</a>
         </div>

         <h1>
           <a href='' class='wordmark'>
             <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
           </a>
         </h1>
         <h2 class='tagline'>Proposals</h2>
       </header>

       <main class='main' id='main'>
         <p>These pages test features which have been proposed and are in development but have
           not yet been adopted into the core WebXR Device API. They may have varying support
           across WebXR-compatible browsers, and the APIs presented here are assumed to be
           in flux.<br/>

         <script>
           let pages = [
             { title: 'AR Depth Sensing - GPU access', category: 'AR',
               path: 'phone-ar-depth-gpu.html',
               description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
                            'The data will be uploaded to the GPU & accessed from a shader to visualize the depth map.' },

             { title: 'AR Depth Sensing - CPU access', category: 'AR',
               path: 'phone-ar-depth.html',
               description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
                            'The data will be accessed on the CPU.' },

             { title: 'AR Plane Detection', category: 'AR',
               path: 'plane-detection.html',
               description: 'Demonstrates use of the plane detection API in an immersive-ar session. ' +
                            'Implements JavaScript-level hit-test and leverages the Anchors API.' },

             { title: 'AR Mesh Detection', category: 'AR',
               path: 'mesh-detection.html',
               description: 'Demonstrates use of the mesh detection API in an immersive-ar session. ' +
                            'Implements JavaScript-level hit-test on the meshes and leverages the Anchors API.' },

           ];

           let mainElement = document.getElementById("main");

           // Append an element for every item in the pages list.
           for (var i = 0; i < pages.length; ++i) {
             var page = pages[i];

             let article = document.createElement('article');

             let title = document.createElement('h3');
             title.setAttribute('data-index', i + 1);

             let titleLink = document.createElement('a');
             titleLink.href = page.path;
             titleLink.textContent = page.title;
             title.appendChild(titleLink);
             article.appendChild(title);

             let category = document.createElement('h4');
             category.textContent = page.category;
             article.appendChild(category);

             let description = document.createElement('p');
             description.textContent = page.description;
             article.appendChild(description);

             let links = document.createElement('div');
             links.classList.add('links');

             let sourceLink = document.createElement('a');
             sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/master/proposals/' + page.path;
             sourceLink.textContent = 'Source';
             links.appendChild(sourceLink);

             article.appendChild(links);

             mainElement.appendChild(article);
           }
         </script>
       </main>

       <br/>

       <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

       <footer class='footer'>
       </footer>
     </div>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='chrome=1'>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<meta name='mobile-web-app-capable' content='yes'>
	<meta name='apple-mobile-web-app-capable' content='yes'>

	<meta name='twitter:card' content='summary'>
	<meta name='twitter:title' content='WebXR Samples'>
	<meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

	<link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
	<link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

	<link rel='stylesheet' href='../css/stylesheet.css'>
	<link rel='stylesheet' href='../css/pygment_trac.css'>

	<style>
	article {
	position: relative;
	padding: 0.5em;
	background-color: rgba(255, 255, 255, 0.90);
	margin-bottom: 1em;
	border-radius: 3px;
	}

	article h3 {
	font-size: 1.0em;
	margin-top: 0px;
	margin-bottom: 0px;
	}

	article h3::before {
	display: inline-block;
	content: attr(data-index) ' - ';
	font-weight: bold;
	white-space: nowrap;
	margin-right: 0.2em;
	}

	article h4 {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	margin-top: 0px;
	margin-bottom: 0px;
	}

	article p {
	margin: 0.5em;
	}

	article .links {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	article a {
	display: inline-block;
	}

	article a:not(:first-child)::before {
	display: inline-block;
	content: '•';
	font-weight: bold;
	white-space: nowrap;
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	.github-link {
	font-size: 0.8em;
	}

	.wordmark img {
	width: 70%;
	}
	</style>

	<!--[if lt IE 9]>
	<script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
	<![endif]-->
	<title>WebXR - Proposals</title>
	</head>
	<body>

	<div class='container' id='container'>
	<header class='header'>
	<div id='nav'>
	<a href='../'>Samples</a>
	<a href='../layers-samples/'>Layers Samples</a>
	<a href='./' class='selected'>Proposals</a>
	<a href='../tests/'>Test Pages</a>
	<a href='../report/'>Report</a>
	</div>

	<h1>
	<a href='' class='wordmark'>
	<img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
	</a>
	</h1>
	<h2 class='tagline'>Proposals</h2>
	</header>

	<main class='main' id='main'>
	<p>These pages test features which have been proposed and are in development but have
	not yet been adopted into the core WebXR Device API. They may have varying support
	across WebXR-compatible browsers, and the APIs presented here are assumed to be
	in flux.<br/>

	<script>
	let pages = [
	{ title: 'AR Depth Sensing - GPU access', category: 'AR',
	path: 'phone-ar-depth-gpu.html',
	description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
	'The data will be uploaded to the GPU & accessed from a shader to visualize the depth map.' },

	{ title: 'AR Depth Sensing - CPU access', category: 'AR',
	path: 'phone-ar-depth.html',
	description: 'Demonstrates use of a depth API in an immersive-ar session. ' +
	'The data will be accessed on the CPU.' },

	{ title: 'AR Plane Detection', category: 'AR',
	path: 'plane-detection.html',
	description: 'Demonstrates use of the plane detection API in an immersive-ar session. ' +
	'Implements JavaScript-level hit-test and leverages the Anchors API.' },

	{ title: 'AR Mesh Detection', category: 'AR',
	path: 'mesh-detection.html',
	description: 'Demonstrates use of the mesh detection API in an immersive-ar session. ' +
	'Implements JavaScript-level hit-test on the meshes and leverages the Anchors API.' },

	];

	let mainElement = document.getElementById("main");

	// Append an element for every item in the pages list.
	for (var i = 0; i < pages.length; ++i) {
	var page = pages[i];

	let article = document.createElement('article');

	let title = document.createElement('h3');
	title.setAttribute('data-index', i + 1);

	let titleLink = document.createElement('a');
	titleLink.href = page.path;
	titleLink.textContent = page.title;
	title.appendChild(titleLink);
	article.appendChild(title);

	let category = document.createElement('h4');
	category.textContent = page.category;
	article.appendChild(category);

	let description = document.createElement('p');
	description.textContent = page.description;
	article.appendChild(description);

	let links = document.createElement('div');
	links.classList.add('links');

	let sourceLink = document.createElement('a');
	sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/master/proposals/' + page.path;
	sourceLink.textContent = 'Source';
	links.appendChild(sourceLink);

	article.appendChild(links);

	mainElement.appendChild(article);
	}
	</script>
	</main>

	<br/>

	<h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

	<footer class='footer'>
	</footer>
	</div>
	</body>
	</html>