JavaScript viewer update (#895)

- Add USD and glTF as loadable materials. - Add in geometry switcher to select glTF files to load. - Fix texture flipping. - Fix when default url options not set. - Update camera to more closely match desktop viewer. - For boombox example add in images and image path mapping. Search pathing has not been added to viewer so adding to manual mapping. - Fixed up geometric stream loading so there is fallback geometry if the load fails, and if there are no uvs or normals they are generated. This prevents tangent generation from failing if either of those does not exist and hence failing on a series of GL errors. - Add some very basic parameter control.
AcademySoftwareFoundation · Apr 4, 2022 · 569c9b4 · 569c9b4
1 parent 41c5834
commit 569c9b4
Show file tree

Hide file tree

Showing 7 changed files with 421 additions and 106 deletions.
diff --git a/javascript/MaterialXView/index.ejs b/javascript/MaterialXView/index.ejs
@@ -2,21 +2,38 @@
 <html>
   <head>
     <meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">  
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
     <title>MaterialX Web Viewer</title>
     <link rel="icon" type="image/x-icon" href="public/favicon.ico" />
+    <style>
+      body {
+        margin: 0;
+        font-family: Arial
+      }
+    </style>
   </head>
   <body style="margin: 0px; overflow: hidden;">
     <div id="container">
-      <div style="position: absolute;margin: 10px;">
-        <label for="materials" style="color: white;">Choose a material:</label>
+      <div style="color:white; position: absolute; top: 0em; margin: 1em">
+        <label for="materials">Material:</label>
         <select name="materials" id="materials">
           <% materials.forEach(function(m){ %>
-            <option value="<%-m.value%>"><%-m.name%></option>
-          <% }); %>
+            <option value="<%-m.value%>">
+              <%-m.name%>
+            </option>
+            <% }); %>
+        </select>
+      </div>
+      <div style="color:white; position: absolute; top: 1.5em; margin: 1em">
+        <label for="geometry">Geometry:</label>
+        <select name="geometry" id="geometry">
+          <% geometry.forEach(function(m){ %>
+            <option value="<%-m.value%>">
+              <%-m.name%>
+            </option>
+            <% }); %>
         </select>
       </div>
-
       <canvas id="webglcanvas"></canvas>
     </div>
     <script src="JsMaterialXGenShader.js"></script>

diff --git a/javascript/MaterialXView/package.json b/javascript/MaterialXView/package.json
@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "dat.gui": "^0.7.9",
     "three": "^0.128.0",
     "webpack": "^5.37.1"
   },

diff --git a/javascript/MaterialXView/source/helper.js b/javascript/MaterialXView/source/helper.js
@@ -157,7 +157,8 @@ function toThreeUniform(type, value, name, uniforms, textureLoader)
         case 'filename':
             if (value)
             {
-                const mappedValue = value.replace(FILE_PREFIX, TARGET_FILE_PREFIX)
+                let  mappedValue = value.replace(FILE_PREFIX, TARGET_FILE_PREFIX);
+                mappedValue = mappedValue.replace('boombox', TARGET_FILE_PREFIX);
                 const texture = textureLoader.load(mappedValue);
                 // Set address & filtering mode
                 setTextureParameters(texture, name, uniforms);
@@ -239,6 +240,8 @@ function setTextureParameters(texture, name, uniforms, generateMipmaps = true)
     const filterType = uniforms.get(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
     texture.magFilter = THREE.LinearFilter;
     texture.minFilter = getMinFilter(filterType, generateMipmaps);
+
+    texture.flipY = false;
 }
 
 /**