blob: 46cdb33b65ca8cd2e5754969b837b48d0ba39eeb [file] [log] [blame]
<!DOCTYPE html>
<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'>
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;
<!--[if lt IE 9]>
<script src=''></script>
<title>WebXR - Samples</title>
<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>
<h1><a href='' class='wordmark'><span>WebXR</span></a></h1>
<h2 class='tagline'>Sample Pages</h2>
<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>
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) {
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;
let category = document.createElement('h4');
category.innerHTML = page.category;
let description = document.createElement('p');
description.innerHTML = page.description;
let links = document.createElement('div');
let liveLink = document.createElement('a');
liveLink.href = page.path;
liveLink.innerHTML = 'Open';
let polyfillLink = document.createElement('a');
polyfillLink.href = page.path + '?allowPolyfill=1';
polyfillLink.innerHTML = 'Open with Polyfill';
let sourceLink = document.createElement('a');
sourceLink.href = '' + page.path;
sourceLink.innerHTML = 'Source';
<p>Models used in these samples come from <a href="">Poly</a>, and many were modeled in <a href="">Blocks</a>.<br/>
They a stored and loaded using the <a href="">glTF 2.0 format</a>.<br/>
Attribution for individual models can be found under the <a href="">media/gltf</a> folders for this repository.</p>
<h3><a class='github-link' href=''>View samples source on GitHub</a></h3>
<footer class='footer'>