Update WebXR M76 sample page index

- Changed the style of the header to make it look more distinct from the WG samples. - Removed redundant links. - Added text clarifying that these samples are specifically for Chrome 76-77. Bug: 966565 Change-Id: Ia99f36a546d8ecada79864797e8c4b3d9dd412e0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1664972 Commit-Queue: Jacob DeWitt <jacde@chromium.org> Reviewed-by: Brandon Jones <bajones@chromium.org> Cr-Commit-Position: refs/heads/master@{#670214}
Denger-Network · Jun 18, 2019 · d988a34 · d988a34
1 parent 2fa37b3
commit d988a34
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 28 deletions.
diff --git a/third_party/webxr_test_pages/make_ot_samples_folder.py b/third_party/webxr_test_pages/make_ot_samples_folder.py
@@ -15,7 +15,7 @@
 ]
 
 other_pages = [
-  'explainer.html',
+  'attribution.html',
   'favicon-32x32.png',
   'favicon-96x96.png',
   'favicon.ico',

diff --git a/third_party/webxr_test_pages/webxr-samples/attribution.html b/third_party/webxr_test_pages/webxr-samples/attribution.html
@@ -0,0 +1,154 @@
+<!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>Models Attribution</title>
+  </head>
+  <body>
+    <p>
+      <b>Camp</b><br>
+      All models used in this scene are licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+"Campground" scene by Brandon Jones.<br>
+"[Lowpoly Squirrel](https://poly.google.com/view/eGdXC-5V2wM)" model by Tipatat Chennavasin.<br>
+"[Fox](https://poly.google.com/view/1DsQKS4G-aj)" model by Jake Blakeley.<br>
+"[Tent](https://poly.google.com/view/2tvQrMLf_tP)" model by Jarlan Perez.<br>
+"[Pine Tree](https://poly.google.com/view/2Qo-fmVKuSG)" and "[Pastel Plume Flowers](https://poly.google.com/view/eLVv17bTyB-)" models by Danny Bittman.<br>
+    </p>
+    <p>
+      <b>Cave</b><br>
+      All models used in this scene are licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+"Cave" scene by Brandon Jones.<br>
+"[Mushroom](https://poly.google.com/view/2DAaKHD48ZP)" and "[Bat](https://poly.google.com/view/fzJn9xTT-UO)" models by Poly by Google.<br>
+"[Crystal Cluster](https://poly.google.com/view/6NY2BPvOISW)" model by Lee Mason.<br>
+"[Tree-2](https://poly.google.com/view/cRipmFHCEVU)" model by Trackball.<br>
+    </p>
+    <p>
+      <b>Controller</b><br>
+      "[controller](https://poly.google.com/view/cdts4fBVXe7)" model by Jack Brookes is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+      Minor edits by Brandon Jones.<br>
+    </p>
+    <p>
+      <b>Cube Room</b><br>
+      "[Cube Room](https://poly.google.com/view/1fahMeqZOw_)" model by Naomi Chen is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+    </p>
+    <p>
+      <b>Garage</b><br>
+All models used in this scene are licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+"Garage" scene by Brandon Jones.<br>
+"[Light Switch](https://poly.google.com/view/7yVvvpp-ftQ)", "[CRT Monitor](https://poly.google.com/view/8jVB0zIXKCv)", "[Fire Extinguisher](https://poly.google.com/view/71rR7PaeXNN)", "[Wooden Stool](https://poly.google.com/view/dn419U6vWYx)", "[Cork Board](https://poly.google.com/view/5Ql0Sdq6fmy)", "[Industrial Broom](https://poly.google.com/view/eH6PcHmWOdK)", "[Wall Shelf](https://poly.google.com/view/7544dJq1UVu)", and "[HTC Vive Headset](https://poly.google.com/view/bFZbl-mmCeD)" models by Jarlan Perez.<br>
+"[Red Cooler](https://poly.google.com/view/f7q6m6IL8UI)" model by S. Paul Michael.<br>
+"[Ladder](https://poly.google.com/view/32UszyQQLtJ)" model by Carwyn Pelley.<br>
+"[Window](https://poly.google.com/view/dwBpM-aSA_t)" model by Justin Randall.<br>
+"[SNES](https://poly.google.com/view/7yVvvpp-ftQ)" model by Gabriel Valdivia.<br>
+    </p>
+    <p>
+      <b>Headset</b><br>
+      "[VR Headset](https://poly.google.com/view/bvd33G7Q66m)" model by Poly by Google is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+    </p>
+    <p>
+      <b>Home Theater</b><br>
+All models used in this scene are licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+"[Home Theater](https://poly.google.com/view/6wJboiESaWR)" scene by Brandon Jones.<br>
+"[Projector](https://poly.google.com/view/4oVHZbDvwV8)" and "[Window](https://poly.google.com/view/9FqbXmzB-CS)" models by Jonathan Granskog.<br>
+"[Woonkamerkast](https://poly.google.com/view/70n22Lhssat)" model by Vincent van de Goolberg.<br>
+"[Nice Door](https://poly.google.com/view/00xFHE4LR_6)" model by Wesley Thompson.<br>
+    </p>
+    <p>
+      <b>Space</b><br>
+      "[Solar System](https://poly.google.com/view/8hnnpNiQMmy)" model by Jarlan Perez is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+    </p>
+    <p>
+      <b>Stereo</b><br>
+      "[Stereo](https://poly.google.com/view/5gXgHgP-dmh)" model by Poly by Google is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+    </p>
+    <p>
+      <b>Sunflower</b><br>
+      All models used in this application are licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+      "[Sunflower](https://poly.google.com/view/ce4GXw3VYE5)" by Poly by Google.<br>
+    </p>
+    <p>
+      <b>Textures</b><br>
+      "[Le panorama de la Voie Lactée](http://www.eso.org/public/images/eso0932a/)" image by European Southern Observatory is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode).<br>
+    </p>
+    <p>
+      <b>Video</b><br>
+      "[Big Buck Bunny](https://peach.blender.org/about/)" by the [Blender Foundation](www.blender.org) is licensed under [CC-BY 3.0](https://creativecommons.org/licenses/by/3.0/legalcode).<br>
+    </p>
+  </body>
+</html>
diff --git a/third_party/webxr_test_pages/webxr-samples/css/stylesheet.css b/third_party/webxr_test_pages/webxr-samples/css/stylesheet.css
@@ -69,13 +69,12 @@ a:hover {
 }
 
 .wordmark > span {
-  background: #2ea;
+  background: #369;
   box-shadow: 3px 3px 0 0 rgba(0,0,0,.15);
   color: #fff;
   display: inline-block;
-  font-size: 64px;
-  font-size: calc(16px + 1vh + 3vw);  /* Responsive font-size for mobile */
-  font-style: italic;
+  font-size: 48px;
+  /*font-size: calc(16px + 1vh + 3vw);*/  /* Responsive font-size for mobile */
   font-weight: 300;
   margin-bottom: 15px;
   max-width: 100%;
@@ -88,7 +87,7 @@ a:hover {
 }
 
 .wordmark:hover > span {
-  background: #2ea;
+  background: #369;
   box-shadow: 3px 3px 0 0 rgba(0,0,0,.25);
 }
 

diff --git a/third_party/webxr_test_pages/webxr-samples/index.published.html b/third_party/webxr_test_pages/webxr-samples/index.published.html
@@ -83,36 +83,23 @@
   <body>
 
     <div class='container' id='container'>
-      <header class='header'>
-        <div id='nav'>
-            <a href='./index.html' class='selected'>Samples</a>
-        </div>
-
-        <h1><a href='' class='wordmark'><span>WebXR</span></a></h1>
-        <h2 class='tagline'>Sample Pages</h2>
+        <h1><a href='' class='wordmark'><span>WebXR Samples for Chrome</span></a></h1>
       </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>
+        <p>Sample pages demonstrating how to use various aspects of the WebXR API <b><em>as implemented in Chrome versions 76-77.</b></em><br/>
 
         <script>
           let pages = [
             { title: 'Barebones', category: 'Basics',
               path: 'xr-barebones.html',
               description: 'Extremely simple use of WebXR with no library dependencies. Doesn\'t render anything exciting.' },
 
-            { tag: 'hr' },
-            { tag: 'br' },
-
             { title: 'Magic Window', category: 'Basics',
               path: 'magic-window.html',
               description: 'Demonstrates use of a non-exclusive XRSession to present "Magic Window" content.' },
 
-            { tag: 'hr' },
-            { tag: 'br' },
-
-            { title: 'Teleportation', category: 'Input',
+            { title: 'Teleportation', category: 'Spatial Tracking, Input',
               path: 'teleportation.html',
               description: 'Demonstrates teleporting the viewer by updating the XRSession reference space.' },
 
@@ -156,11 +143,6 @@ <h2 class='tagline'>Sample Pages</h2>
             let links = document.createElement('div');
             links.classList.add('links');
 
-            let liveLink = document.createElement('a');
-            liveLink.href = page.path;
-            liveLink.innerHTML = 'Open';
-            links.appendChild(liveLink);
-
             article.appendChild(links);
 
             mainElement.appendChild(article);
@@ -170,7 +152,7 @@ <h2 class='tagline'>Sample Pages</h2>
 
       <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>
+      Attribution for individual models can be found <a href="attribution.html">here</a>.</p>
 
       <footer class='footer'>
       </footer>