webgpu/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>

     <title>WebXR - WebGPU Samples</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'>WebGPU Samples</a>
             <a href='../proposals/'>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'>WebGPU Sample Pages</h2>
       </header>

       <main class='main' id='main'>
         <p><b>Does my browser support WebXR with WebGPU?</b><br/>
         <div>
           <img id='canhazimg' style='width: 32px; float: left;'></img>
           <p id='canhazwebxr' style='margin-left: 48px;'></p>
         </div>
         <script>
           let canhazElement = document.getElementById('canhazwebxr');
           let canhazImg = document.getElementById('canhazimg');
           if ('xr' in navigator) {
             if ('gpu' in navigator) {
               if ('XRGPUBinding' in window) {
                 canhazElement.innerText = "Yes! Your browser supports WebXR with WebGPU!"
                 navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
                   const span = document.createElement('span');
                   span.innerText = supported ? '✔️- VR support detected' : '❌ - VR support not detected';
                   canhazElement.appendChild(document.createElement('br'));
                   canhazElement.appendChild(span);
                 });
                 navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
                   const span = document.createElement('span');
                   span.innerText = supported ? '✔️- AR support detected' : '❌ - AR support not detected';
                   canhazElement.appendChild(document.createElement('br'));
                   canhazElement.appendChild(span);
                 });
                 canhazImg.src = "../media/textures/check-button.png";
               } else {
                 canhazElement.innerText = "Your browser supports WebXR and WebGPU, but does not support the necessary feature to display WebGPU content in WebXR. However you can still run WebXR experiences built with WebGL!"
                 canhazImg.src = "../media/textures/info-button.png";
               }
             } else {
               canhazElement.innerText = "Your browser supports WebXR but not WebGPU. However you can still run WebXR experiences built with WebGL!"
               canhazImg.src = "../media/textures/info-button.png";
             }
           } else {
             canhazElement.innerText = "Sorry, your browser does not support WebXR."
             canhazImg.src = "../media/textures/x-button.png";
           }
         </script>

         <p><b>Sample pages demonstrating how to use various aspects of the WebXR API with WebGPU.</b><br/>

         <script>
           let pages = [
             { title: 'Barebones VR', category: 'No Dependencies',
               path: 'vr-barebones.html',
               description: 'Extremely simple use of "immersive-vr" sessions with no library dependencies. Doesn\'t render anything exciting.',
               noPolyfill: true },
             { title: 'Barebones AR', category: 'No Dependencies',
               path: 'ar-barebones.html',
               description: 'Extremely simple use of "immersive-ar" sessions with no library dependencies. Doesn\'t render anything exciting.',
               noPolyfill: true },
           ];

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

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

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

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

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

             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/' + 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>

       <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 are 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;
	}

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

	<title>WebXR - WebGPU Samples</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'>WebGPU Samples</a>
	<a href='../proposals/'>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'>WebGPU Sample Pages</h2>
	</header>

	<main class='main' id='main'>
	<p><b>Does my browser support WebXR with WebGPU?</b><br/>
	<div>
	<img id='canhazimg' style='width: 32px; float: left;'></img>
	<p id='canhazwebxr' style='margin-left: 48px;'></p>
	</div>
	<script>
	let canhazElement = document.getElementById('canhazwebxr');
	let canhazImg = document.getElementById('canhazimg');
	if ('xr' in navigator) {
	if ('gpu' in navigator) {
	if ('XRGPUBinding' in window) {
	canhazElement.innerText = "Yes! Your browser supports WebXR with WebGPU!"
	navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
	const span = document.createElement('span');
	span.innerText = supported ? '✔️- VR support detected' : '❌ - VR support not detected';
	canhazElement.appendChild(document.createElement('br'));
	canhazElement.appendChild(span);
	});
	navigator.xr.isSessionSupported('immersive-ar').then((supported) => {
	const span = document.createElement('span');
	span.innerText = supported ? '✔️- AR support detected' : '❌ - AR support not detected';
	canhazElement.appendChild(document.createElement('br'));
	canhazElement.appendChild(span);
	});
	canhazImg.src = "../media/textures/check-button.png";
	} else {
	canhazElement.innerText = "Your browser supports WebXR and WebGPU, but does not support the necessary feature to display WebGPU content in WebXR. However you can still run WebXR experiences built with WebGL!"
	canhazImg.src = "../media/textures/info-button.png";
	}
	} else {
	canhazElement.innerText = "Your browser supports WebXR but not WebGPU. However you can still run WebXR experiences built with WebGL!"
	canhazImg.src = "../media/textures/info-button.png";
	}
	} else {
	canhazElement.innerText = "Sorry, your browser does not support WebXR."
	canhazImg.src = "../media/textures/x-button.png";
	}
	</script>

	<p><b>Sample pages demonstrating how to use various aspects of the WebXR API with WebGPU.</b><br/>

	<script>
	let pages = [
	{ title: 'Barebones VR', category: 'No Dependencies',
	path: 'vr-barebones.html',
	description: 'Extremely simple use of "immersive-vr" sessions with no library dependencies. Doesn\'t render anything exciting.',
	noPolyfill: true },
	{ title: 'Barebones AR', category: 'No Dependencies',
	path: 'ar-barebones.html',
	description: 'Extremely simple use of "immersive-ar" sessions with no library dependencies. Doesn\'t render anything exciting.',
	noPolyfill: true },
	];

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

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

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

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

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

	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/' + 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>

	<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 are 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>