third_party/webxr_test_pages/webxr-samples/index.html - chromium/src - 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;
       }
     </style>

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

     <div class='container' id='container'>
       <header class='header'>
         <div id='nav'>
             <a href='./' class='selected'>Samples</a>
             <a href='proposals/'>Proposals</a>
             <a href='tests/'>Test Pages</a>
         </div>

         <h1><a href='' class='wordmark'><span>WebXR</span></a></h1>
         <h2 class='tagline'>Sample Pages</h2>
       </header>

       <main class='main' id='main'>
         <p>Sample pages demonstrating how to use various aspects of the WebXR API.<br/>
         <a href="explainer.html">Learn More</a></p>

         <script>
           let pages = [
             { title: 'XR Presentation', category: 'Basics',
               path: 'xr-presentation.html',
               description: 'Demonstrates how to present a simple WebGL scene to a XRDevice.' },

             { title: 'Mirroring', category: 'Basics',
               path: 'mirroring.html',
               description: 'Demonstrates how to mirroring exclusive session content to a canvas.' },

             { title: 'Magic Window', category: 'Basics',
               path: 'magic-window.html',
               description: 'Demonstrates use of a non-exclusive XRSession to present "Magic Window" content.' },

             { title: 'Fallback Rendering', category: 'Basics',
               path: 'fallback-rendering.html',
               description: 'Demonstrates a way to fallback to rendering the scene when WebXR isn\'t available..' },

             { tag: 'hr' },
             { tag: 'br' },

             { title: 'Reduced-Bind Rendering', category: 'Performance',
               path: 'reduced-bind-rendering.html',
               description: 'Demonstrates a technique to reduce the number of state changes made while rendering.' },

             { title: 'Room Scale', category: 'Basics',
               path: 'room-scale.html',
               description: 'Demonstrates using a "stage" frame of reference to provide room scale tracking.' },

             { title: 'Input Tracking', category: 'Input',
               path: 'input-tracking.html',
               description: 'Demonstrates basic tracking and rendering of XRInputSources.'},

             { title: 'Input Selection', category: 'Input',
               path: 'input-selection.html',
               description: 'Demonstrates handling \'select\' events generated by XRInputSources.'},

             { title: 'Framebuffer Scaling', category: 'Performance',
               path: 'framebuffer-scaling.html',
               description: 'Demonstrates scaling a layer\'s framebuffer to statically control performance or quality.' },

             { title: 'Viewport Scaling', category: 'Performance',
               path: 'viewport-scaling.html',
               description: 'Demonstrates scaling a layer\'s viewports to dynamically control performance or quality.' },

             { title: '360 Stereo Photos', category: 'Content',
               path: '360-photos.html',
               description: 'Demonstrates displaying a 360 degree equirectangular stereo photo.' },

             { title: 'Stereo Video', category: 'Content',
               path: 'stereo-video.html',
               description: 'Demonstrates playing stereo videos.' },

             { title: 'Positional Audio', category: 'Content',
               path: 'positional-audio.html',
               description: 'Demonstrates playing audio that sounds as if it originates at a specific point in the space.' },

             { title: 'Spectator Mode', category: 'Advanced Techniques',
               path: 'spectator-mode.html',
               description: 'Demonstrates rendering a 3rd person view of the scene to an external monitor.' },

             { tag: 'hr' },
             { tag: 'br' },

             { title: 'Barebones', category: 'WIN32_LEAN_AND_MEAN',
               path: 'xr-barebones.html',
               description: 'Extremely simple use of WebXR with no library dependencies. Doesn\'t render anything exciting.' },
           ];

           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];

             if (page.tag) {
               mainElement.appendChild(document.createElement(page.tag));
               continue;
             }

             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.innerHTML = page.title;
             title.appendChild(titleLink);
             article.appendChild(title);

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

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

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

             let liveLink = document.createElement('a');
             liveLink.href = page.path;
             liveLink.innerHTML = 'Open';
             links.appendChild(liveLink);

             let polyfillLink = document.createElement('a');
             polyfillLink.href = page.path + '?allowPolyfill=1';
             polyfillLink.innerHTML = 'Open with Polyfill';
             links.appendChild(polyfillLink);

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

             article.appendChild(links);

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

       <p>Models used in these samples come from <a href="https://poly.google.com">Poly</a>, and many were modeled in <a href="https://vr.google.com/blocks/">Blocks</a>.<br/>
       They a stored and loaded using the <a href="https://www.khronos.org/gltf/">glTF 2.0 format</a>.<br/>
       Attribution for individual models can be found under the <a href="https://github.com/immersive-web/webxr-samples/tree/master/media/gltf">media/gltf</a> folders for this repository.</p>

       <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View samples 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;
	}
	</style>

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

	<div class='container' id='container'>
	<header class='header'>
	<div id='nav'>
	<a href='./' class='selected'>Samples</a>
	<a href='proposals/'>Proposals</a>
	<a href='tests/'>Test Pages</a>
	</div>

	<h1><a href='' class='wordmark'><span>WebXR</span></a></h1>
	<h2 class='tagline'>Sample Pages</h2>
	</header>

	<main class='main' id='main'>
	<p>Sample pages demonstrating how to use various aspects of the WebXR API.<br/>
	<a href="explainer.html">Learn More</a></p>

	<script>
	let pages = [
	{ title: 'XR Presentation', category: 'Basics',
	path: 'xr-presentation.html',
	description: 'Demonstrates how to present a simple WebGL scene to a XRDevice.' },

	{ title: 'Mirroring', category: 'Basics',
	path: 'mirroring.html',
	description: 'Demonstrates how to mirroring exclusive session content to a canvas.' },

	{ title: 'Magic Window', category: 'Basics',
	path: 'magic-window.html',
	description: 'Demonstrates use of a non-exclusive XRSession to present "Magic Window" content.' },

	{ title: 'Fallback Rendering', category: 'Basics',
	path: 'fallback-rendering.html',
	description: 'Demonstrates a way to fallback to rendering the scene when WebXR isn\'t available..' },

	{ tag: 'hr' },
	{ tag: 'br' },

	{ title: 'Reduced-Bind Rendering', category: 'Performance',
	path: 'reduced-bind-rendering.html',
	description: 'Demonstrates a technique to reduce the number of state changes made while rendering.' },

	{ title: 'Room Scale', category: 'Basics',
	path: 'room-scale.html',
	description: 'Demonstrates using a "stage" frame of reference to provide room scale tracking.' },

	{ title: 'Input Tracking', category: 'Input',
	path: 'input-tracking.html',
	description: 'Demonstrates basic tracking and rendering of XRInputSources.'},

	{ title: 'Input Selection', category: 'Input',
	path: 'input-selection.html',
	description: 'Demonstrates handling \'select\' events generated by XRInputSources.'},

	{ title: 'Framebuffer Scaling', category: 'Performance',
	path: 'framebuffer-scaling.html',
	description: 'Demonstrates scaling a layer\'s framebuffer to statically control performance or quality.' },

	{ title: 'Viewport Scaling', category: 'Performance',
	path: 'viewport-scaling.html',
	description: 'Demonstrates scaling a layer\'s viewports to dynamically control performance or quality.' },

	{ title: '360 Stereo Photos', category: 'Content',
	path: '360-photos.html',
	description: 'Demonstrates displaying a 360 degree equirectangular stereo photo.' },

	{ title: 'Stereo Video', category: 'Content',
	path: 'stereo-video.html',
	description: 'Demonstrates playing stereo videos.' },

	{ title: 'Positional Audio', category: 'Content',
	path: 'positional-audio.html',
	description: 'Demonstrates playing audio that sounds as if it originates at a specific point in the space.' },

	{ title: 'Spectator Mode', category: 'Advanced Techniques',
	path: 'spectator-mode.html',
	description: 'Demonstrates rendering a 3rd person view of the scene to an external monitor.' },

	{ tag: 'hr' },
	{ tag: 'br' },

	{ title: 'Barebones', category: 'WIN32_LEAN_AND_MEAN',
	path: 'xr-barebones.html',
	description: 'Extremely simple use of WebXR with no library dependencies. Doesn\'t render anything exciting.' },
	];

	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];

	if (page.tag) {
	mainElement.appendChild(document.createElement(page.tag));
	continue;
	}

	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.innerHTML = page.title;
	title.appendChild(titleLink);
	article.appendChild(title);

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

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

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

	let liveLink = document.createElement('a');
	liveLink.href = page.path;
	liveLink.innerHTML = 'Open';
	links.appendChild(liveLink);

	let polyfillLink = document.createElement('a');
	polyfillLink.href = page.path + '?allowPolyfill=1';
	polyfillLink.innerHTML = 'Open with Polyfill';
	links.appendChild(polyfillLink);

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

	article.appendChild(links);

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

	<p>Models used in these samples come from <a href="https://poly.google.com">Poly</a>, and many were modeled in <a href="https://vr.google.com/blocks/">Blocks</a>.<br/>
	They a stored and loaded using the <a href="https://www.khronos.org/gltf/">glTF 2.0 format</a>.<br/>
	Attribution for individual models can be found under the <a href="https://github.com/immersive-web/webxr-samples/tree/master/media/gltf">media/gltf</a> folders for this repository.</p>

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

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