Starting some very simple, speculative WebXR+WebGPU samples

immersive-web · Jun 30, 2023 · 590b9dc · 590b9dc
1 parent 016a039
commit 590b9dc
Show file tree

Hide file tree

Showing 3 changed files with 444 additions and 0 deletions.
diff --git a/media/logo/webgpu-logo.svg b/media/logo/webgpu-logo.svg
diff --git a/webgpu/index.html b/webgpu/index.html
@@ -0,0 +1,171 @@
+<!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 - WebGPU</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'/><br/>
+            ❤️<br/>
+            <img src='../media/logo/webgpu-logo.svg' alt='WebGPU Logo'/>
+          </a>
+        </h1>
+        <h2 class='tagline'>WebGPU</h2>
+      </header>
+
+      <main class='main' id='main'>
+        <p>These pages test WebGPU integration with WebXR. They intentionally do not copy the WebGL-based samples 1:1
+          because a significant portion of the API functions identically regardless of which API is being used for
+          rendering.<br/>
+
+        <script>
+          let pages = [
+            { title: 'WebGPU VR barebones', category: 'WebGPU',
+              path: 'vr-barebones.html',
+              description: 'Extremely simple use of "immersive-vr" sessions that presents a WebGPU layer 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.
+          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/webgpu/' + 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>