- Add live render link (#9)

- Update images
kwokcb · Jan 28, 2025 · 531f1df · 531f1df
1 parent 557e7b1
commit 531f1df
Show file tree

Hide file tree

Showing 34 changed files with 269 additions and 117 deletions.
diff --git a/README.html b/README.html
@@ -365,28 +365,54 @@
           : 'default'
     });
   </script>
-<h1 id="welcome-to-materialx-web">Welcome to Materialx Web</h1>
-<p>This repository contains a set sample implementations that show bi-directional communication between Python and Javascript logic.</p>
-<p>The main focus is on connection &quot;open standards&quot; such as <code>gltF</code>, <code>OCIO</code>, <code>OpenUSD</code> with <code>MaterialX</code>.</p>
+<h2 id="welcome-to-materialx-web">Welcome to Materialx Web</h2>
+<table>
+<thead>
+<tr>
+<th style="text-align:center"></th>
+<th style="text-align:center"></th>
+<th style="text-align:center"></th>
+<th style="text-align:center"></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center"><img src="https://raw.githubusercontent.com/kwokcb/materialxWeb/refs/heads/main/flask/gpuopen/images/extract_material_1.png" width=100%></td>
+<td style="text-align:center"><img src="https://github.com/kwokcb/materialxWeb/blob/main/flask/converters/images/render_converter_2.png?raw=true" width=100%></td>
+<td style="text-align:center"><img src="https://github.com/kwokcb/materialxWeb/raw/main/flask/ocio/images/ocio_mtlx_convert_1.png" width=100%></td>
+<td style="text-align:center"><img src="https://github.com/kwokcb/materialxWeb/blob/main/nodejs/materialxLibraryInspector/public/images/ambientCg_download.png?raw=true" width=100%></td>
+</tr>
+</tbody>
+</table>
+<p>This repository contains a set sample implementations demonstrate bi-directional communication between backends<br>
+using Python and NodeJS and front ends using Javascript .</p>
+<p>The primary focus is on connection &quot;open standards&quot; such as <code>gltF</code>, <code>OCIO</code>, <code>OpenUSD</code> with <code>MaterialX</code>.</p>
 <p>This is part of the set of tools available from <a href="https://kwokcb.github.io/MaterialXLab/" target="_blank"><br>
 <img src="https://kwokcb.github.io/MaterialXLab/documents/icons/teapot_logo.svg" width=32px>MaterialX Lab</a></p>
-<h2 id="documentation">Documentation</h2>
-<p>See the <a href="https://kwokcb.github.io/materialxWeb/index.html">home page</a> for more details.</p>
-<h2 id="python-flask-connector-examples">Python Flask Connector Examples</h2>
+<h3 id="documentation">Documentation</h3>
+<p>See the <a href="https://kwokcb.github.io/materialxWeb/index.html">h ome page</a> for more details.</p>
+<h3 id="python-flask-connector-examples">Python Flask Connector Examples</h3>
 <ul>
 <li><a href="./flask/gpuopen/README.md">GPUOpen MaterialX Materials Inspector</a> : Download MaterialX materials from the AMD GPUOpen Materials Library and inspect contents of the materials.</li>
 <li><a href="./flask/converters/README.md">glTF and USD Conversion from MaterialX</a> : Convert a MaterialX document to a USD or glTF Texture Procedural document.</li>
 <li><a href="./flask/ocio/README.md">OCIO to MaterialX Definition Generation (Alpha)</a> : Use the OpenColorIO package to query for color space transforms and create MaterialX node definitions.</li>
 <li><a href="./flask/template/README.md">Simple template example</a> : A simple &quot;template&quot; application that can be copied and modified as desired.</li>
 </ul>
-<h2 id="nodejs-express-examples">NodeJS Express Examples</h2>
+<h3 id="nodejs-express-examples">NodeJS Express Examples</h3>
 <ul>
-<li><a href="./nodejs/materialxLibraryInspector/README.md">General MaterialX Library Inspecter</a> : Common interface to access remove MaterialX material libraries such as <code>GPUOpen</code> and <code>AmbientCG</code>.</li>
+<li><a href="./nodejs/materialxLibraryInspector/README.md">General MaterialX Library Inspecter</a> : Common interface to access remove MaterialX material libraries such as <code>GPUOpen</code> and <code>AmbientCG</code>.
+<ul>
+<li>Sample deployment (*) is available <a href="https://materialx-materials-library-inspector.onrender.com/">here</a>.</li>
+</ul>
+</li>
 </ul>
 <hr>
-<p>See build instructions found <a href="https://github.com/kwokcb/materialxWeb/blob/main/utilities/README.md">here</a>.</p>
-<h2 id="github-repository">GitHub Repository</h2>
+<h3 id="github-repository">GitHub Repository</h3>
 <p><a href="https://github.com/kwokcb/materialxWeb">materialXWeb</a></p>
+<h3 id="building">Building</h3>
+<p>See build instructions found <a href="https://github.com/kwokcb/materialxWeb/blob/main/utilities/README.md">here</a>.</p>
+<hr>
+<sub>(*) Spin-up time is slow as this is a free tier deployment.</sub>
 
 </body>
 </html>
diff --git a/README.md b/README.md
@@ -1,31 +1,42 @@
-# Welcome to Materialx Web
+## Welcome to Materialx Web
 
-This repository contains a set sample implementations that show bi-directional communication between Python and Javascript logic.
+|||||
+|:--:|:--:|:--:|:--:|
+| <img src="https://raw.githubusercontent.com/kwokcb/materialxWeb/refs/heads/main/flask/gpuopen/images/extract_material_1.png" width=100%> | <img src="https://github.com/kwokcb/materialxWeb/blob/main/flask/converters/images/render_converter_2.png?raw=true" width=100%> | <img src="https://github.com/kwokcb/materialxWeb/raw/main/flask/ocio/images/ocio_mtlx_convert_1.png" width=100%> | <img src="https://github.com/kwokcb/materialxWeb/blob/main/nodejs/materialxLibraryInspector/public/images/ambientCg_download.png?raw=true" width=100%> |
 
-The main focus is on connection "open standards" such as `gltF`, `OCIO`, `OpenUSD` with `MaterialX`.
+This repository contains a set sample implementations demonstrate bi-directional communication between backends
+using Python and NodeJS and front ends using Javascript .
+
+The primary focus is on connection "open standards" such as `gltF`, `OCIO`, `OpenUSD` with `MaterialX`.
 
 This is part of the set of tools available from <a href="https://kwokcb.github.io/MaterialXLab/" target="_blank">
 <img src="https://kwokcb.github.io/MaterialXLab/documents/icons/teapot_logo.svg" width=32px>MaterialX Lab</a>
 
-## Documentation
+### Documentation
 
-See the <a href="https://kwokcb.github.io/materialxWeb/index.html">home page</a> for more details.
+See the <a href="https://kwokcb.github.io/materialxWeb/index.html">h ome page</a> for more details.
 
-## Python Flask Connector Examples
+### Python Flask Connector Examples
 
 - [GPUOpen MaterialX Materials Inspector](./flask/gpuopen/README.md) : Download MaterialX materials from the AMD GPUOpen Materials Library and inspect contents of the materials.
 - [glTF and USD Conversion from MaterialX](./flask/converters/README.md) : Convert a MaterialX document to a USD or glTF Texture Procedural document.
 - [OCIO to MaterialX Definition Generation (Alpha)](./flask/ocio/README.md) : Use the OpenColorIO package to query for color space transforms and create MaterialX node definitions.
 - [Simple template example](./flask/template/README.md) : A simple "template" application that can be copied and modified as desired.
 
-## NodeJS Express Examples
+### NodeJS Express Examples
 
 - [General MaterialX Library Inspecter](./nodejs/materialxLibraryInspector/README.md) : Common interface to access remove MaterialX material libraries such as `GPUOpen` and `AmbientCG`.
+    - Sample deployment (*) is available <a href="https://materialx-materials-library-inspector.onrender.com/">here</a>. 
 
 <hr>
 
-See build instructions found <a href="https://github.com/kwokcb/materialxWeb/blob/main/utilities/README.md">here</a>.
-
-## GitHub Repository
+### GitHub Repository
 
 <a href="https://github.com/kwokcb/materialxWeb">materialXWeb</a>
+
+### Building
+
+See build instructions found <a href="https://github.com/kwokcb/materialxWeb/blob/main/utilities/README.md">here</a>.
+
+<hr>
+<sub>(*) Spin-up time is slow as this is a free tier deployment.</sub>
diff --git a/documents/html/doxygen_crawl.html b/documents/html/doxygen_crawl.html
@@ -19,10 +19,10 @@
 <a href="materialx__ocio__app_8js_source.html"/>
 <a href="_js_ambient_c_g_loader_8js_source.html"/>
 <a href="_js_g_p_u_open_material_loader_8js_source.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html"/>
 <a href="class_ambient_c_g_loader.html"/>
 <a href="class_ambient_c_g_loader-members.html"/>
 <a href="class_js_g_p_u_open_material_loader.html"/>
@@ -181,21 +181,22 @@
 <a href="index.html#autotoc_md20"/>
 <a href="index.html#autotoc_md21"/>
 <a href="index.html#autotoc_md22"/>
+<a href="index.html#autotoc_md23"/>
 <a href="materialx__ocio__app_8js_source.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md1"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md2"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md3"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md4"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md10"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md11"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md12"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md14"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md15"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md16"/>
-<a href="md__d_1_2work_2materialx_2materialxweb_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md1"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md2"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md3"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html#autotoc_md4"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md10"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md11"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html#autotoc_md12"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md14"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md15"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html#autotoc_md16"/>
+<a href="md__d_1_2_work_2materialx_2materialx_web_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html"/>
 <a href="ocio_2static_2js_2_web_socket_client_8js_source.html"/>
 <a href="usdmtlx_8py_source.html"/>
 </body>

diff --git a/documents/html/index.html b/documents/html/index.html
@@ -108,31 +108,44 @@
   <div class="headertitle"><div class="title">Welcome to Materialx Web </div></div>
 </div><!--header-->
 <div class="contents">
-<div class="textblock"><p><a class="anchor" id="md__d_1_2work_2materialx_2materialxweb_2_r_e_a_d_m_e"></a></p>
-<p>This repository contains a set sample implementations that show bi-directional communication between Python and Javascript logic.</p>
-<p>The main focus is on connection "open standards" such as <code>gltF</code>, <code>OCIO</code>, <code>OpenUSD</code> with <code>MaterialX</code>.</p>
+<div class="textblock"><p><a class="anchor" id="md__d_1_2_work_2materialx_2materialx_web_2_r_e_a_d_m_e"></a></p>
+<table class="markdownTable">
+<tr class="markdownTableHead">
+<th class="markdownTableHeadCenter" colspan="4"></th></tr>
+<tr class="markdownTableRowOdd">
+<td class="markdownTableBodyCenter"><img src="https://raw.githubusercontent.com/kwokcb/materialxWeb/refs/heads/main/flask/gpuopen/images/extract_material_1.png" alt="" width="100%" class="inline"/>   </td><td class="markdownTableBodyCenter"><img src="https://github.com/kwokcb/materialxWeb/blob/main/flask/converters/images/render_converter_2.png?raw=true" alt="" width="100%" class="inline"/>   </td><td class="markdownTableBodyCenter"><img src="https://github.com/kwokcb/materialxWeb/raw/main/flask/ocio/images/ocio_mtlx_convert_1.png" alt="" width="100%" class="inline"/>   </td><td class="markdownTableBodyCenter"><img src="https://github.com/kwokcb/materialxWeb/blob/main/nodejs/materialxLibraryInspector/public/images/ambientCg_download.png?raw=true" alt="" width="100%" class="inline"/>   </td></tr>
+</table>
+<p>This repository contains a set sample implementations demonstrate bi-directional communication between backends using Python and NodeJS and front ends using Javascript .</p>
+<p>The primary focus is on connection "open standards" such as <code>gltF</code>, <code>OCIO</code>, <code>OpenUSD</code> with <code>MaterialX</code>.</p>
 <p>This is part of the set of tools available from <a href="https://kwokcb.github.io/MaterialXLab/" target="_blank"><img src="https://kwokcb.github.io/MaterialXLab/documents/icons/teapot_logo.svg" alt="" style="pointer-events: none;" width="32px" class="inline"/>MaterialX Lab</a></p>
-<h1><a class="anchor" id="autotoc_md19"></a>
-Documentation</h1>
-<p>See the <a href="https://kwokcb.github.io/materialxWeb/index.html">home page</a> for more details.</p>
-<h1><a class="anchor" id="autotoc_md20"></a>
-Python Flask Connector Examples</h1>
+<h2><a class="anchor" id="autotoc_md19"></a>
+Documentation</h2>
+<p>See the <a href="https://kwokcb.github.io/materialxWeb/index.html">h ome page</a> for more details.</p>
+<h2><a class="anchor" id="autotoc_md20"></a>
+Python Flask Connector Examples</h2>
 <ul>
-<li><a class="el" href="md__d_1_2work_2materialx_2materialxweb_2flask_2gpuopen_2_r_e_a_d_m_e.html">GPUOpen MaterialX Materials Inspector</a> : Download MaterialX materials from the AMD GPUOpen Materials Library and inspect contents of the materials.</li>
-<li><a class="el" href="md__d_1_2work_2materialx_2materialxweb_2flask_2converters_2_r_e_a_d_m_e.html">glTF and USD Conversion from MaterialX</a> : Convert a MaterialX document to a USD or glTF Texture Procedural document.</li>
-<li><a class="el" href="md__d_1_2work_2materialx_2materialxweb_2flask_2ocio_2_r_e_a_d_m_e.html">OCIO to MaterialX Definition Generation (Alpha)</a> : Use the OpenColorIO package to query for color space transforms and create MaterialX node definitions.</li>
+<li><a class="el" href="md__d_1_2_work_2materialx_2materialx_web_2flask_2gpuopen_2_r_e_a_d_m_e.html">GPUOpen MaterialX Materials Inspector</a> : Download MaterialX materials from the AMD GPUOpen Materials Library and inspect contents of the materials.</li>
+<li><a class="el" href="md__d_1_2_work_2materialx_2materialx_web_2flask_2converters_2_r_e_a_d_m_e.html">glTF and USD Conversion from MaterialX</a> : Convert a MaterialX document to a USD or glTF Texture Procedural document.</li>
+<li><a class="el" href="md__d_1_2_work_2materialx_2materialx_web_2flask_2ocio_2_r_e_a_d_m_e.html">OCIO to MaterialX Definition Generation (Alpha)</a> : Use the OpenColorIO package to query for color space transforms and create MaterialX node definitions.</li>
 <li>Simple template example : A simple "template" application that can be copied and modified as desired.</li>
 </ul>
-<h1><a class="anchor" id="autotoc_md21"></a>
-NodeJS Express Examples</h1>
+<h2><a class="anchor" id="autotoc_md21"></a>
+NodeJS Express Examples</h2>
 <ul>
-<li><a class="el" href="md__d_1_2work_2materialx_2materialxweb_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html">General MaterialX Library Inspecter</a> : Common interface to access remove MaterialX material libraries such as <code>GPUOpen</code> and <code>AmbientCG</code>.</li>
+<li><a class="el" href="md__d_1_2_work_2materialx_2materialx_web_2nodejs_2materialx_library_inspector_2_r_e_a_d_m_e.html">General MaterialX Library Inspecter</a> : Common interface to access remove MaterialX material libraries such as <code>GPUOpen</code> and <code>AmbientCG</code>.<ul>
+<li>Sample deployment (*) is available <a href="https://materialx-materials-library-inspector.onrender.com/">here</a>.</li>
+</ul>
+</li>
 </ul>
 <hr  />
+<h2><a class="anchor" id="autotoc_md22"></a>
+GitHub Repository</h2>
+<p><a href="https://github.com/kwokcb/materialxWeb">materialXWeb</a></p>
+<h2><a class="anchor" id="autotoc_md23"></a>
+Building</h2>
 <p>See build instructions found <a href="https://github.com/kwokcb/materialxWeb/blob/main/utilities/README.md">here</a>.</p>
-<h1><a class="anchor" id="autotoc_md22"></a>
-GitHub Repository</h1>
-<p><a href="https://github.com/kwokcb/materialxWeb">materialXWeb</a> </p>
+<hr  />
+<p> <sub>(*) Spin-up time is slow as this is a free tier deployment.</sub> </p>
 </div></div><!-- PageDoc -->
 <a href="doxygen_crawl.html"></a>
 </div><!-- contents -->