Skip to content

Commit 569c9b4

Browse files
kwokcbkwokcb
authored
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.
1 parent 41c5834 commit 569c9b4

File tree

7 files changed

+421
-106
lines changed

7 files changed

+421
-106
lines changed

‎javascript/MaterialXView/index.ejs‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,38 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
5+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
66
<title>MaterialX Web Viewer</title>
77
<link rel="icon" type="image/x-icon" href="public/favicon.ico" />
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: Arial
12+
}
13+
</style>
814
</head>
915
<body style="margin: 0px; overflow: hidden;">
1016
<div id="container">
11-
<div style="position: absolute;margin: 10px;">
12-
<label for="materials" style="color: white;">Choose a material:</label>
17+
<div style="color:white; position: absolute; top: 0em; margin: 1em">
18+
<label for="materials">Material:</label>
1319
<select name="materials" id="materials">
1420
<% materials.forEach(function(m){ %>
15-
<option value="<%-m.value%>"><%-m.name%></option>
16-
<% }); %>
21+
<option value="<%-m.value%>">
22+
<%-m.name%>
23+
</option>
24+
<% }); %>
25+
</select>
26+
</div>
27+
<div style="color:white; position: absolute; top: 1.5em; margin: 1em">
28+
<label for="geometry">Geometry:</label>
29+
<select name="geometry" id="geometry">
30+
<% geometry.forEach(function(m){ %>
31+
<option value="<%-m.value%>">
32+
<%-m.name%>
33+
</option>
34+
<% }); %>
1735
</select>
1836
</div>
19-
2037
<canvas id="webglcanvas"></canvas>
2138
</div>
2239
<script src="JsMaterialXGenShader.js"></script>

‎javascript/MaterialXView/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"author": "",
1111
"license": "ISC",
1212
"dependencies": {
13+
"dat.gui": "^0.7.9",
1314
"three": "^0.128.0",
1415
"webpack": "^5.37.1"
1516
},

‎javascript/MaterialXView/source/helper.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,8 @@ function toThreeUniform(type, value, name, uniforms, textureLoader)
157157
case 'filename':
158158
if (value)
159159
{
160-
const mappedValue = value.replace(FILE_PREFIX, TARGET_FILE_PREFIX)
160+
let mappedValue = value.replace(FILE_PREFIX, TARGET_FILE_PREFIX);
161+
mappedValue = mappedValue.replace('boombox', TARGET_FILE_PREFIX);
161162
const texture = textureLoader.load(mappedValue);
162163
// Set address & filtering mode
163164
setTextureParameters(texture, name, uniforms);
@@ -239,6 +240,8 @@ function setTextureParameters(texture, name, uniforms, generateMipmaps = true)
239240
const filterType = uniforms.get(base + FILTER_TYPE_SUFFIX) ? uniforms.get(base + FILTER_TYPE_SUFFIX).value : -1;
240241
texture.magFilter = THREE.LinearFilter;
241242
texture.minFilter = getMinFilter(filterType, generateMipmaps);
243+
244+
texture.flipY = false;
242245
}
243246

244247
/**

0 commit comments

Comments
 (0)