webxr-samples/index.html at main · immersive-web/webxr-samples

Cannot retrieve contributors at this time

210 lines (168 sloc) 7.04 KB

	<!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 - Test Pages</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='../proposals/'>Proposals</a>
	<a href='./' class='selected'>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'>Test Pages</h2>
	</header>

	<main class='main' id='main'>
	<p>These pages are useful for testing various aspects of WebXR
	implementations, but aren't as well commented or straightforward as
	the sample pages.<br/>

	<script>
	let pages = [
	{ title: 'Cube Sea', category: 'Cube Sea',
	path: 'cube-sea.html',
	description: 'All hail the cube sea! Not very interesting to look at, but it\'s fantastic for testing!' },

	{ title: 'Pointer Painter', category: 'Input',
	path: 'pointer-painter.html',
	description: 'Leaves behind a trail of pointers and cursors on select events.' },

	{ title: 'User Agent Prompts', category: 'User Agent Behavior',
	path: 'permission-request.html',
	description: 'Tests various prompts (PWA install, permission requests, notifications) from within XR.' },

	{ title: 'Offscreen Canvas', category: 'Alternate WebGL Modes',
	path: 'offscreen-canvas.html',
	description: 'Tests use of an OffscreenCanvas with XR.' },

	{ title: 'Sponza', category: 'Lots-o-Polys',
	path: 'sponza.html',
	description: 'Loads a larger scene than other samples for performance testing. (Warning: Can be slow on mobile devices!)' },

	{ title: 'Composed Views', category: 'We Like Matrix Math',
	path: 'composed-views.html',
	description: 'Tests a scenario where views are composed from a combination of viewer and local-floor space.' },

	{ title: 'Reference Space Invert', category: 'We Hate Matrix Math',
	path: 'ref-space-invert.html',
	description: 'Tests creating an offset reference space with the viewer pose, which should cancel out the pose and report the viewer at the origin.' },

	{ title: 'Interrupted AR', category: 'Exceptions!',
	path: 'interrupted-ar.html',
	description: 'Tests what happens when an exception is thrown in promise resolve of an `immersive-ar` session request.' },

	{ title: 'Sparse Frames', category: 'M_ss_ng Fr_m_s',
	path: 'sparse-frames.html',
	description: 'Tests what happens the framebuffer is not populated every frame.' },

	{ title: 'WebGL 2.0 Multisampling', category: 'Artisinally crafted pixels',
	path: 'webgl2-multisample.html',
	description: 'Tests that multisample renderbuffers are usable with XRWebGLLayer.' },
	];

	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/tests/' + page.path;
	sourceLink.textContent = 'Source';
	links.appendChild(sourceLink);

	if (!page.noPolyfill) {
	let polyfillLink = document.createElement('a');
	polyfillLink.href = page.path + '?usePolyfill=0';
	polyfillLink.textContent = 'Run Without Polyfill';
	links.appendChild(polyfillLink);
	}

	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>

Unstar this repository?

webxr-samples/tests/index.html