Spaces:

cm107
/

excav_demo

Running

App Files Files Community

cm107 commited on Dec 20, 2022

Commit

57ac313

1 Parent(s): 28c86c4

Included explaination of controls in index.html.

Browse files

I also added a disclaimer in regards to performance issues.

Files changed (2) hide show

index.html +192 -82
main.css +45 -0

index.html CHANGED Viewed

@@ -1,92 +1,202 @@
 <!DOCTYPE html>
 <html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>excav_simul_3d</title>
-    <link rel="shortcut icon" href="TemplateData/favicon.ico">
-    <link rel="stylesheet" href="TemplateData/style.css">
-  </head>
-  <body class="dark">
-    <div id="unity-container" class="unity-desktop">
-      <canvas id="unity-canvas"></canvas>
-    </div>
-    <div id="loading-cover" style="display:none;">
-      <div id="unity-loading-bar">
-        <div id="unity-logo"><img src="logo.png"></div>
-        <div id="unity-progress-bar-empty" style="display: none;">
-          <div id="unity-progress-bar-full"></div>
-        </div>
-        <div class="spinner"></div>
       </div>
     </div>
-    <div id="unity-fullscreen-button" style="display: none;"></div>
-    <script>
-      const hideFullScreenButton = "";
-      const buildUrl = "Build";
-      const loaderUrl = buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.loader.js";
-      const config = {
-        dataUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.data",
-        frameworkUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.framework.js",
-        codeUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.wasm",
-        streamingAssetsUrl: "StreamingAssets",
-        companyName: "DefaultCompany",
-        productName: "excav_simul_3d",
-        productVersion: "0.1",
-      };
-      const container = document.querySelector("#unity-container");
-      const canvas = document.querySelector("#unity-canvas");
-      const loadingCover = document.querySelector("#loading-cover");
-      const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
-      const progressBarFull = document.querySelector("#unity-progress-bar-full");
-      const fullscreenButton = document.querySelector("#unity-fullscreen-button");
-      const spinner = document.querySelector('.spinner');
-      const canFullscreen = (function() {
-        for (const key of [
-            'exitFullscreen',
-            'webkitExitFullscreen',
-            'webkitCancelFullScreen',
-            'mozCancelFullScreen',
-            'msExitFullscreen',
-          ]) {
-          if (key in document) {
-            return true;
-          }
         }
-        return false;
-      }());
-      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-        container.className = "unity-mobile";
-        config.devicePixelRatio = 1;
       }
-      loadingCover.style.display = "";
-      const script = document.createElement("script");
-      script.src = loaderUrl;
-      script.onload = () => {
-        createUnityInstance(canvas, config, (progress) => {
-          spinner.style.display = "none";
-          progressBarEmpty.style.display = "";
-          progressBarFull.style.width = `${100 * progress}%`;
-        }).then((unityInstance) => {
-          loadingCover.style.display = "none";
-          if (canFullscreen) {
-            if (!hideFullScreenButton) {
-              fullscreenButton.style.display = "";
-            }
-            fullscreenButton.onclick = () => {
-              unityInstance.SetFullscreen(1);
-            };
           }
-        }).catch((message) => {
-          alert(message);
-        });
-      };
-      document.body.appendChild(script);
-    </script>
-  </body>
-</html>

 <!DOCTYPE html>
 <html lang="en-us">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <title>excav_simul_3d</title>
+  <link rel="shortcut icon" href="TemplateData/favicon.ico">
+  <link rel="stylesheet" href="TemplateData/style.css">
+  <link rel="stylesheet" href="main.css">
+</head>
+<body class="dark">
+  <div id="unity-container" class="unity-desktop">
+    <canvas id="unity-canvas"></canvas>
+  </div>
+  <div id="loading-cover" style="display:none;">
+    <div id="unity-loading-bar">
+      <div id="unity-logo"><img src="logo.png"></div>
+      <div id="unity-progress-bar-empty" style="display: none;">
+        <div id="unity-progress-bar-full"></div>
       </div>
+      <div class="spinner"></div>
     </div>
+  </div>
+  <div id="unity-fullscreen-button" style="display: none;"></div>
+  <script>
+    const hideFullScreenButton = "";
+    const buildUrl = "Build";
+    const loaderUrl = buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.loader.js";
+    const config = {
+      dataUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.data",
+      frameworkUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.framework.js",
+      codeUrl: buildUrl + "/SimplifiedTerrain-simpleMovement-demo-webgl-dev.wasm",
+      streamingAssetsUrl: "StreamingAssets",
+      companyName: "DefaultCompany",
+      productName: "excav_simul_3d",
+      productVersion: "0.1",
+    };
+    const container = document.querySelector("#unity-container");
+    const canvas = document.querySelector("#unity-canvas");
+    const loadingCover = document.querySelector("#loading-cover");
+    const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
+    const progressBarFull = document.querySelector("#unity-progress-bar-full");
+    const fullscreenButton = document.querySelector("#unity-fullscreen-button");
+    const spinner = document.querySelector('.spinner');
+    const canFullscreen = (function () {
+      for (const key of [
+        'exitFullscreen',
+        'webkitExitFullscreen',
+        'webkitCancelFullScreen',
+        'mozCancelFullScreen',
+        'msExitFullscreen',
+      ]) {
+        if (key in document) {
+          return true;
         }
       }
+      return false;
+    }());
+    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+      container.className = "unity-mobile";
+      config.devicePixelRatio = 1;
+    }
+    loadingCover.style.display = "";
+    const script = document.createElement("script");
+    script.src = loaderUrl;
+    script.onload = () => {
+      createUnityInstance(canvas, config, (progress) => {
+        spinner.style.display = "none";
+        progressBarEmpty.style.display = "";
+        progressBarFull.style.width = `${100 * progress}%`;
+      }).then((unityInstance) => {
+        loadingCover.style.display = "none";
+        if (canFullscreen) {
+          if (!hideFullScreenButton) {
+            fullscreenButton.style.display = "";
           }
+          fullscreenButton.onclick = () => {
+            unityInstance.SetFullscreen(1);
+          };
+        }
+      }).catch((message) => {
+        alert(message);
+      });
+    };
+    document.body.appendChild(script);
+  </script>
+  <div id="infoBox">
+    <h1>Controls</h1>
+    <div id="controls">
+      <table>
+        <th>Binding</th>
+        <th>Description</th>
+        <tr>
+          <td>Right Mouse Click (Drag)</td>
+          <td>
+            Rotates the camera in the direction of the mouse drag.
+          </td>
+        </tr>
+        <tr>
+          <td>Left Mouse Click</td>
+          <td>
+            Sets the goal point to the location on the terrain where you clicked.
+          </td>
+        </tr>
+        <tr>
+          <td>W</td>
+          <td>
+            Move forward.
+          </td>
+        </tr>
+        <tr>
+          <td>S</td>
+          <td>
+            Move backward.
+          </td>
+        </tr>
+        <tr>
+          <td>A</td>
+          <td>
+            Move left.
+          </td>
+        </tr>
+        <tr>
+          <td>D</td>
+          <td>
+            Move right.
+          </td>
+        </tr>
+        <tr>
+          <td>R</td>
+          <td>
+            Restart the episode.
+            Note that the terrain does not change even if you are in random mode.
+            Deformations to the terrain are preserved as well.
+          </td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td>
+            <div class="cellHeader">Terrain Mode: RANDOM</div>
+            Restart with a random terrain shape (no perlin noise).
+          </td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td>
+            <div class="cellHeader">Terrain Mode: RANDOM_NOISE</div>
+            Restart with a random terrain shape (with perlin noise).
+          </td>
+        </tr>
+        <tr>
+          <td>3</td>
+          <td>
+            <div class="cellHeader">Terrain Mode: GAUSSIAN_SLOPE</div>
+            Restart with a gaussian slope shaped terrain.
+          </td>
+        </tr>
+        <tr>
+          <td>4</td>
+          <td>
+            <div class="cellHeader">Terrain Mode: POINTY_GAUSSIAN_SLOPE</div>
+            Restart with a <i>pointy</i> gaussian slope shaped terrain.
+          </td>
+        </tr>
+        <tr>
+          <td>5</td>
+          <td>
+            <div class="cellHeader">Terrain Mode: TRAPEZOIDAL_HILL</div>
+            Restart with a trapezoidal hill shaped terrain.
+          </td>
+        </tr>
+      </table>
+    </div>
+    <h1>Disclaimer</h1>
+    <div id="disclaimerBody">
+      <p>
+        <a href="https://docs.unity3d.com/Packages/[email protected]/manual/index.html#inference">
+          Unfortunately, MLAgents doesn't support GPU inference for WebGL builds.
+        </a><br>
+        The current model is small enough that it runs smoothly with GPU
+        inference, but large enough that it runs slowly with CPU inference.
+        If you would like to receive the latest build on your target platform,
+        PM cm107 on huggingface.
+      </p>
+      <p>
+        For more information about WebGL performance considerations, refer to
+        <a href="https://docs.unity3d.com/Manual/webgl-performance.html">
+          the unity documentation
+        </a>.
+      </p>
+    </div>
+  </div>
+</body>
+</html>

main.css ADDED Viewed

	@@ -0,0 +1,45 @@

+#infoBox {
+    /* border: 5px solid red; */
+    width: 75%;
+    margin-left: auto;
+    margin-right: auto;
+}
+#controls {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: auto;
+    margin-bottom: auto;
+    justify-content: center;
+    justify-items: center;
+}
+table {
+    display: table;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+table,
+th,
+td {
+    border: 1px solid;
+    border-collapse: collapse;
+}
+td {
+    justify-content: right;
+}
+.cellHeader {
+    display: flex;
+    color: purple;
+    justify-content: center;
+}
+#disclaimerBody {
+    color: red;
+    margin-left: 30px;
+}