-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
294 lines (275 loc) · 13.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Authors: Bernard Kwok. Site for
utilities to query and extract MaterialX materials from remote servers.">
<style>
model-viewer {
width: 256px;
height: 256px;
background-color: #7d7d7d;
}
.custom-gradient {
background: repeating-radial-gradient(circle, hsl(204, 100%, 8%), #290027 100%); }
.custom-gradient2 {
background: repeating-radial-gradient(circle, hsl(204, 94%, 20%), #96018f 100%); }
.clickable-image {
transition: transform 0.3s;
}
.clickable-image:hover {
transform: scale(1.10);
cursor: pointer;
border: rgb(206, 175, 0) solid 1px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/brands.min.css">
<link rel="stylesheet" href="./documents/css/style.css">
<link rel="icon" type="images" href="./documents/images/toon_sphere.png" type="image/x-icon" class="img-fluid">
</head>
<body>
<!-- Section Information -->
<section class="py-0 px-0 g-0">
<div class="container-fluid p-4">
<h2 class="bg-gradient rounded-2 p-0"> <img src="https://kwokcb.github.io/materialxMaterials/documents/icons/logo_large_blue_teapot_no_text.png" width=32px>MaterialX Materials</h2>
<div class="container p-2 rounded-4 border border-secondary border-rounded">
<h3>Introduction</h3>
<p>Welcome to MaterialX Materials.</p>
<p>This site hosts a set of libraries and command line utilities to query remote databases for MaterialX materials.</p>
<h4> > Visit the <b><a href="https://kwokcb.github.io/materialxMaterials" target="_blank">Home Page</a></b>
</h4>
<p>
Related utilities and libraries can be found at the:
<div class="btn btn-outline-secondary">
<a href="https://kwokcb.github.io/MaterialXLab" target="_blank">
<img src="https://kwokcb.github.io/MaterialXLab/documents/icons/teapot_logo.svg"
width=32px>
MaterialXLab home page</a>
</a>
</div>
</p>
<p>The current utilities support:</p>
<div style="display: flex; align-items: center;">
<img src="https://physicallybased.info/images/renders/cycles/600/aluminum.webp" width="64px" style="margin-right: 5px;">
<a href="https://physicallybased.info/">PhysicallyBased database</a> Material descriptions can be downloaded with additional utilities to create materials using either: Autodesk Standard Surface, OpenPBR, or glTF PBR shading model shaders.
</div>
<br>
<div style="display: flex; align-items: center;">
<img src="https://image.matlib.gpuopen.com/afff0c66-dba8-4d79-b96b-459fbd9cbef5.jpeg" width="64px" style="margin-right: 5px;">
<a href="https://matlib.gpuopen.com/main/materials/all">AMD GPUOpen database</a> MaterialX packages can be downloaded (as zip files). Images and MaterialX documents can be extracted for any of the posted materials in the database.
</div>
<br>
<div style="display: flex; align-items: center;">
<img src="https://acg-media.struffelproductions.com/file/ambientCG-Web/media/thumbnail/2048-JPG-242424/PavingStones142.jpg" width="64px" style="margin-right: 5px;">
<a href="https://ambientcg.com/list?type=material&sort=popular">ambientCG database</a> MaterialX packages can be downloaded (as zip files). Images and MaterialX documents can be extracted for any of the posted materials in the database.
</div>
<p>Each currently has <code>Python</code> implementations.</p>
</p>
<iframe
src="https://www.youtube.com/embed/4KiPW9IUR6U?rel=0&vq=hd1080"
title="Using Material Libraries" width="100%"
height="600px" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<h3>Usage Examples</h3>
<h4>PhysicallyBased</h4>
An <a href="https://kwokcb.github.io/MaterialXLab/javascript/PhysicallyBasedMaterialX_out.html" target="_blank">interactive page:
<br>
<img src="https://kwokcb.github.io/MaterialXLab/documents/help/images/physicallyBased_material_fetch.png" width=100%/>
</a>
<p>for extracting <code>PhysicallyBased</code> uses a Javascript implementation found <a href="https://github.com/kwokcb/materialxMaterials/blob/main/javascript/JsMaterialXPhysicallyBased.js">here</a></p>
</p>
<p>
<hr>
<h4>AMD GPUOpen</h4>
A command line utility is available <a href="https://github.com/kwokcb/materialxMaterials/tree/main/javascript/JsGPUOpenLoaderPackage">here</a>. This uses <code>Node.js</code> to allow access to fetch materials from the <code>GPU Open</code> site(which is not available via a web page).
<p>
<p><a href="https://github.com/kwokcb/materialxWeb/blob/main/flask/gpuopen/README.md">A <b>Flask</b> application</a> is also available which uses the Python package with a Web based front here.
<img src="https://raw.githubusercontent.com/kwokcb/materialxWeb/refs/heads/main/flask/gpuopen/images/extract_material_2.png" width=100%>
</p>
<hr>
<h4>ambientCg</h4>
A <b>NodeJS / Express</b> application can also be found on the <a href="https://kwokcb.github.io/materialxWeb/index.html" target="_blank">MaterialXWeb</a> site.
<p>It is designed to be a general purpose MaterialX material inspector supporting ambientCg and GPUOpen currently with the intent to add new libraries as they become available.<br>
<img src="https://github.com/kwokcb/materialxWeb/blob/main/nodejs/materialxLibraryInspector/public/images/ambientCg_download_2.png?raw=true" width=100%></p>
<hr>
<h4>Loading into Web Editor</h4>
<p>
Below are screenshots of materials fetched from from <code>PhysicallyBased</code> and <code>GPU Open</code> and <code>ambientCg></code> (left to right images respectively). Note that the material zip from <code>GPU Open</code> and <code>ambientCg</code> is directly read into the editor via it's zip loading option.
<table>
<tr>
<td><img src="https://kwokcb.github.io/MaterialXLab/documents/help/images/load_phybased_node_editor.png" width=100%></td>
<td><img src="https://kwokcb.github.io/MaterialXLab/documents/help/images/load_zip_node_editor_3.png" width=100%></td>
<td><img src="https://kwokcb.github.io/MaterialXLab/documents/help/images/load_ambientCG_node_editor.png" width=100%></td>
</tr>
</table>
</p>
<p></p>
<h3>Library Dependencies</h3>
<p>The Python utilities require:</p>
<ol>
<li>The MaterialX 1.39 or greater package for PhysicallyBased OpenPBR shader creation</li>
<li>The <code>requests</code> package.</li>
<li>The <code>pillow</code> package for image handling for GPUOpen package handling</li>
</ol>
<p>The GPUOpen Javascript logic requires:</p>
<ol>
<li><code>node-fetch</code> if fetch is not available in the version of Node.js used.</li>
<li><code>yargs</code> for the command line utility</li>
</ol>
<h3>Package Building</h3>
<p>The <a href="https://github.com/kwokcb/materialxMaterials"><img src="https://raw.githubusercontent.com/kwokcb/materialxMaterials/4125d04c73fc2b1755f5b6054b25b6d1bdabcf6b/documents/icons/github-mark-white.svg" width=16px> GitHub repository</a> can be cloned.</p>
<p>The Python package can be built using:</p>
<pre class="hljs"><code><div>pip install .
</div></code></pre>
<p>This will pull down the dependent Python packages as needed.</p>
<p>Build scripts can be found in the <code>utilities</code> folder.</p>
<ul>
<li><code>build.sh</code> will install the package and run package commands to update package data.</li>
<li><code>buildDocs.sh</code> will prepare documents and run Doxygen to build API docs.</li>
</ul>
<p>The GPUOpen Javascript utility requires Node.js to be installed. From the package folder (<code>javascript\JsGPUOpenLoaderPackage</code>) the following should be run:</p>
<pre class="hljs"><code><div>npm install # Install dependent packages
npm run build # Setup runtime area
</div></code></pre>
<h3>Usage</h3>
<h4>Python Commands</h4>
<ul>
<li>
<p>Query all materials fom PhysicallyBased and convert them to all support shading models. Save the material list and corresponding MaterialX files in the default output location. The build will include this information Python package under the <code>data</code> folder.</p>
<pre class="hljs"><code><div>python physicallyBasedMaterialXCmd.py
</div></code></pre>
<p>or</p>
<pre class="hljs"><code><div>materialxMaterials physbased
</div></code></pre>
</li>
<li>
<p>Query all materials fom GPUOpen. Extract out a few material packages (zip). Save the material lists, material names and unzipped packages (MaterialX and images) in the default output location. The build will include this information Python package under the <code>data</code> folder.</p>
<pre class="hljs"><code><div>materialxMaterials gpuopen --materialNames=1 --saveMaterials=1
</div></code></pre>
</li>
<li>
<p>Download the materials list fom ambientCG:</p>
<pre class="hljs"><code><div>materialxMaterials acg --saveMaterials True
</div></code></pre>
</li>
<li>
<p>Extract out a material package for the "WoodFloor038" material from ambientCG requesting the<br>
package where the images are 2K PNG files:</p>
<pre class="hljs"><code><div>materialxMaterials acg --downloadMaterial <span class="hljs-string">"WoodFloor038"</span> --downloadResolution 2
</div></code></pre>
</li>
</ul>
<h4>GPU Open Node.js Utility</h4>
<p>The utility can be run from the <code>javascript\JsGPUOpenLoaderPackage</code> folder as follows:</p>
<pre class="hljs"><code><div>npm start -- [<arguments>]
</div></code></pre>
<p>or:</p>
<pre class="hljs"><code><div>node gpuOpenFetch.js [<arguments>]
</div></code></pre>
<p>with the appropriate arguments. It supports the same options as the Python utility -- namely material information, and package (zip) downloads. For the following 2 lines are equivalent to download a material called "Moss Green Solid Granite".</p>
<pre class="hljs"><code><div>node gpuOpenFetch.js -n "Moss Green Solid Granite"
npm start -- -n "Moss Green Solid Granite"
</div></code></pre>
<h3>Library</h3>
<p>A <code>Jupyter</code> notebook demonstrates the direct usage of the Python library. The output of the notebook can be found <a href="https://kwokcb.github.io/materialxMaterials/examples/materialxMaterials_tutorial_out_iframe.html">here</a>. The notebook can found in the Github repository under the <code>examples</code> folder.</p>
<h3>Results</h3>
<p>The following are some samples which have been rendered using the <code>MaterialXView</code> utility which is part of the MaterialX binary distribution.</p>
<h4>Examples</h4>
Details about some examples can be found in the <a href="https://kwokcb.github.io/materialxMaterials/examples/index.html">Examples pages</a>
<table>
<tr >
<th >
Emerald Peaks Wallpaper
<th >
Indigo Palm Wallpaper
<th >
Oliana Blue Painted Wood
<tr >
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/GPUOpenMaterialX/Emerald Peaks Wallpaper/Emerald_Peaks_Wallpaper.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/GPUOpenMaterialX/Indigo Palm Wallpaper/Indigo_Palm_Wallpaper.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/GPUOpenMaterialX/Oliana Blue Painted Wood/Oliana_Blue_Painted_Wood.png" width=100%>
</td>
</tr>
</table>
<table>
<tr >
<th>
Ketchup
<th>
Cooking Oil
<th>
Brass
</th>
<tr >
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/PhysicallyBasedMaterialX/Ketchup.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/PhysicallyBasedMaterialX/Cooking_Oil.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/PhysicallyBasedMaterialX/Brass.png" width=100%>
</td>
</table>
<table>
<tr >
<th>
Metal (53)
<th>
Paving Stones (142)
<th>
Wood Floor (38)
</th>
<tr >
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/ambientCgMaterials/Metal053C_1K-PNG.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/ambientCgMaterials/PavingStones142_1K-PNG.png" width=100%>
</td>
<td >
<img src="https://kwokcb.github.io/materialxMaterials/src/materialxMaterials/data/ambientCgMaterials/WoodFloor038_1K-PNG.png" width=100%>
</td>
</table>
<sub>The rows of materials are from `GPUOpen` `PhysicallyBased`, and `ambientCG` from top to bottom respectively.</sub>
<p></p>
<h3>API Reference</h3>
<p>The API reference can be found <a href="https://kwokcb.github.io/materialxMaterials/documents/html/index.html">here</a></p>
</div>
</div>
</section>
<script>
document.body.setAttribute('data-bs-theme', 'dark');
</script>
<footer class="bg-dark-subtle footer text-white py-2 pt-2" data-bs-theme="dark">
<div class="container">
<ul class="social-icons">
<button class="btn btn-outline" type="button">
<a href="https://github.com/kwokcb/materialxMaterials" target="_blank"><b class="fa-brands fa-github fa-2x"
style="color: #ffffff;"></b></a>
</button>
<button class="btn btn-outline " type="button">
<a href="https://www.linkedin.com/in/bernard-kwok/" target="_blank"><b class="fa-brands fa-linkedin-in fa-2x"
style="color: #0082ca;"></b></a>
</button>
</ul>
<p>
<a class="bg-dark p-2 right" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0"
src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a>
<a href="https://kwokcb.github.io/nanmuconsulting/" target="_blank">
© 2022-2024 NanMu Consulting.</a>
</p>
</div>
</footer>
</body>
</html>