-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGraphEditor.html
241 lines (200 loc) · 21.3 KB
/
GraphEditor.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
<!DOCTYPE html>
<html lang="en" data-content_root="./">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>MaterialX Graph Editor — MaterialX 1.39.2 documentation</title>
<link rel="stylesheet" type="text/css" href="_static/pygments.css?v=b20cc3f5" />
<link rel="stylesheet" type="text/css" href="_static/basic.css?v=686e5160" />
<link rel="stylesheet" type="text/css" href="_static/alabaster.css?v=d8f72ed4" />
<script src="_static/documentation_options.js?v=e2b5d38d"></script>
<script src="_static/doctools.js?v=9bcbadda"></script>
<script src="_static/sphinx_highlight.js?v=dc90522c"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="MaterialX Viewer" href="Viewer.html" />
<link rel="prev" title="MaterialX Overview" href="MainPage.html" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
</head><body>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<section id="materialx-graph-editor">
<h1>MaterialX Graph Editor<a class="headerlink" href="#materialx-graph-editor" title="Link to this heading">¶</a></h1>
<p>The MaterialX Graph Editor is an example application for visualizing, creating, and editing MaterialX graphs. It utilizes the ImGui framework as well as additional ImGui extensions such as the Node Editor.</p>
<section id="example-images">
<h2>Example Images<a class="headerlink" href="#example-images" title="Link to this heading">¶</a></h2>
<p><strong>Figure 1:</strong> MaterialX Graph Editor with procedural marble example</p>
<p><img alt="MaterialX Graph Editor with procedural marble example" src="https://github.com/AcademySoftwareFoundation/MaterialX/raw/main/documents/Images/MaterialXGraphEditor_Marble.png" /></p>
</section>
<section id="building-the-materialx-graph-editor">
<h2>Building the MaterialX Graph Editor<a class="headerlink" href="#building-the-materialx-graph-editor" title="Link to this heading">¶</a></h2>
<p>Select the <code class="docutils literal notranslate"><span class="pre">MATERIALX_BUILD_GRAPH_EDITOR</span></code> option in CMake to build the MaterialX Graph Editor. Installation will copy the <strong>MaterialXGraphEditor</strong> executable to a <code class="docutils literal notranslate"><span class="pre">/bin</span></code> directory within the selected install folder.</p>
</section>
<section id="summary-of-graph-editor-features">
<h2>Summary of Graph Editor Features<a class="headerlink" href="#summary-of-graph-editor-features" title="Link to this heading">¶</a></h2>
<ol class="arabic simple">
<li><p><strong><code class="docutils literal notranslate"><span class="pre">Load</span> <span class="pre">Material</span></code></strong>: Load a material document in the MTLX format.</p></li>
<li><p><strong><code class="docutils literal notranslate"><span class="pre">Save</span> <span class="pre">Material</span></code></strong>: Save out a graph as a mterial document in MTLX format.</p></li>
<li><p><strong><code class="docutils literal notranslate"><span class="pre">New</span> <span class="pre">Material</span></code></strong>: Clear all information to set up for the creation of a new material</p></li>
<li><p><strong><code class="docutils literal notranslate"><span class="pre">Node</span> <span class="pre">Property</span> <span class="pre">Editor</span></code></strong>: View or edit properties of the selected node.</p></li>
<li><p><strong><code class="docutils literal notranslate"><span class="pre">Render</span> <span class="pre">View</span></code></strong>: View the rendered material.</p></li>
</ol>
</section>
<section id="buttons">
<h2>Buttons<a class="headerlink" href="#buttons" title="Link to this heading">¶</a></h2>
<p>To display a new material and graph, click the <code class="docutils literal notranslate"><span class="pre">Load</span> <span class="pre">Material</span></code> button and and navigate to the <a class="reference external" href="https://github.com/AcademySoftwareFoundation/MaterialX/tree/main/resources/Materials/Examples">Materials/Examples</a> folder, which contains a selection of materials in the MTLX format, and select a document to load. The Graph Editor will display the graph hierarchy of the selected document for visualization and editing.</p>
<p>To save out changes to the graphs as MTLX files click the <code class="docutils literal notranslate"><span class="pre">Save</span> <span class="pre">Material</span></code> button. This will save the position of the nodes in the graph for future use as well.</p>
</section>
<section id="editor-window">
<h2>Editor Window<a class="headerlink" href="#editor-window" title="Link to this heading">¶</a></h2>
<p>The MaterialX document is displayed as nodes in the Editor window. When a file is intially loaded the material node, surface shader node, and any enclosing nodegraphs will be displayed. Double-clicking on a nodegraph, or any node defined as a subgraph, will display the contents of that graph.</p>
<p>The current graph hierarchy is displayed above the editor. To back up and out of a subgraph click the <code class="docutils literal notranslate"><span class="pre"><</span></code> button to the left of the graph names.</p>
<p>Each node and nodegraph displays its name and pins for all of its inputs and outputs. Nodes can be connected by clicking on the output pin of one node and connecting it to the input pin of another node, thus creating a link. Links can only be created if the input and output pins have the same type, as designated by the color of the pin. When a new link is created the material in the render view will automatically be updated.</p>
<p>Using the tab key on the editor allows the user to add a certain node by bringing up the <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Node</span></code> pop-up. The nodes are organized in the pop-up window based on their node group but a specfic node can also be searched for by name. To create a nodegraph select <code class="docutils literal notranslate"><span class="pre">Node</span> <span class="pre">Graph</span></code> in the <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Node</span></code> popup and dive into the node in order to add nodes inside of it and populate it.</p>
<p>In order to connect to the nodegraph to a shader add output nodes inside the nodegraph then travel back up outside the nodegraph and connect the corresponding output pin to the surface shader. By default, the nodegraph does not contain any output nodes or pins.</p>
<p>Another type of node present in the <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Node</span></code> pop-up is the group, or background node. This background node can be used to group specific nodes and label by them by dragging them on to the background node.</p>
<p>To search the editor window for a specific node use <code class="docutils literal notranslate"><span class="pre">CTRL</span></code> + <code class="docutils literal notranslate"><span class="pre">F</span></code> to bring up the search bar.</p>
</section>
<section id="node-property-editor">
<h2>Node Property Editor<a class="headerlink" href="#node-property-editor" title="Link to this heading">¶</a></h2>
<p>When a node is selected in the graph, its information is displayed on the left-hand column in the <code class="docutils literal notranslate"><span class="pre">Node</span> <span class="pre">Property</span> <span class="pre">Editor</span></code>. This editor displays the name of the node, its category, its inputs, the input name, types and values. Inputs that are connected to other nodes will not display a value.</p>
<p>This is where a node’s properties such as its name and input values can be adjusted. When an input value is changed the material is automatically updated to reflect that change. The node info button displays the <code class="docutils literal notranslate"><span class="pre">doc</span></code> string for the selected node and its inputs if they exist. This <code class="docutils literal notranslate"><span class="pre">doc</span></code> string is currently read only.</p>
<p>The show All Inputs checkbox displays all possible inputs for a node. With the box unchecked only inputs that have a connection or have had a value set will be shown. Only these inputs will be saved out when the graph is saved.</p>
</section>
<section id="render-view">
<h2>Render View<a class="headerlink" href="#render-view" title="Link to this heading">¶</a></h2>
<p>Above the <code class="docutils literal notranslate"><span class="pre">Node</span> <span class="pre">Property</span> <span class="pre">Editor</span></code>, the <code class="docutils literal notranslate"><span class="pre">Render</span> <span class="pre">View</span></code> displays the current material on the Arnold Shader Ball. If inside a subgraph it will display the material associated with that subgraph; otherwise it will display the output of the selected node. It automatically updates when any changes are made to the graph.</p>
<p>To adjust the relative sizes of the Node Property Editor and Render View windows, drag the separator between these windows in the application. The render view window camera can be changed using the left or right mouse buttons to manipulate the shader ball.</p>
</section>
<section id="keyboard-shortcuts">
<h2>Keyboard Shortcuts<a class="headerlink" href="#keyboard-shortcuts" title="Link to this heading">¶</a></h2>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">TAB</span></code>: Add Node Popup</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Right</span> <span class="pre">Click</span></code>: pan along the editor</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Double</span> <span class="pre">Click</span> <span class="pre">on</span> <span class="pre">Node</span></code>: Dive into node’s subgraph if it has one</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">U</span></code>: Go up and out of a subgraph</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">F</span></code>: Frame selected node(s)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Ctrl</span> <span class="pre">+</span> <span class="pre">F</span></code> to search for a node in the editor by name</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Ctrl/Cmd</span> <span class="pre">+</span> <span class="pre">C</span></code> for Copying Nodes</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Ctrl/Cmd+X</span></code> for Cutting Nodes</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">Ctrl/Cmd+V</span></code> for Pasting Nodes</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">+</span></code> : Zoom in with the camera when mouse is over the Render View Window.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">-</span></code> : Zoom out with the camera when mouse is over the Render View Window.</p></li>
</ul>
</section>
<section id="command-line-options">
<h2>Command-Line Options<a class="headerlink" href="#command-line-options" title="Link to this heading">¶</a></h2>
<p>The following are common command-line options for MaterialXGraphEditor, and a complete list can be displayed with the <code class="docutils literal notranslate"><span class="pre">--help</span></code> option.</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">--material</span> <span class="pre">[FILENAME]</span></code> : Specify the filename of the MTLX document to be displayed in the graph editor</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">--mesh</span> <span class="pre">[FILENAME]</span></code> : Specify the filename of the OBJ or glTF mesh to be displayed in the graph editor</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">--path</span> <span class="pre">[FILEPATH]</span></code> : Specify an additional data search path location (e.g. ‘/projects/MaterialX’). This absolute path will be queried when locating data libraries, XInclude references, and referenced images.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">--library</span> <span class="pre">[FILEPATH]</span></code> : Specify an additional data library folder (e.g. ‘vendorlib’, ‘studiolib’). This relative path will be appended to each location in the data search path when loading data libraries.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">--captureFilename</span> <span class="pre">[FILENAME]</span></code> : Specify the filename to which the first rendered frame should be written</p></li>
</ul>
</section>
<section id="known-limitations">
<h2>Known Limitations<a class="headerlink" href="#known-limitations" title="Link to this heading">¶</a></h2>
<ul class="simple">
<li><p>Creating new connections using the <code class="docutils literal notranslate"><span class="pre">channels</span></code> attribute of an input is not yet supported, though existing <code class="docutils literal notranslate"><span class="pre">channels</span></code> connections will be displayed in graphs.</p></li>
<li><p>Assigning a new <code class="docutils literal notranslate"><span class="pre">colorspace</span></code> attribute to an input is not yet supported, though existing <code class="docutils literal notranslate"><span class="pre">colorspace</span></code> attributes on inputs will be respected by the render view.</p></li>
</ul>
</section>
</section>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="Main">
<div class="sphinxsidebarwrapper">
<p class="logo">
<a href="index.html">
<img class="logo" src="_static/MaterialXLogo_200x155.png" alt="Logo" />
</a>
</p>
<p class="blurb">
<b>MaterialX</b> – An open standard for the exchange of rich material and
look-development content across applications and renderers.
<p>
<a title="MaterialX on GitHub" class="blueButton" href="https://github.com/AcademySoftwareFoundation/MaterialX">GitHub</a>
<a title="MaterialX on Mastodon" class="blueButton" href="https://mastodon.social/@MaterialX@fosstodon.org">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
alt="MaterialX on Mastodon" title="MaterialX on Mastodon" viewBox="0 0 24 24"
width="16" height="16" style="vertical-align: text-top;">
<title>MaterialX on Mastodon</title>
<g transform="translate(-1, 0) scale(0.32, 0.32)" fill="#d2dbde">
<path d="M74.7135 16.6043C73.6199 8.54587 66.5351 2.19527 58.1366 0.964691C56.7196 0.756754 51.351 0 38.9148 0H38.822C26.3824 0 23.7135 0.756754 22.2966 0.964691C14.1319 2.16118 6.67571 7.86752 4.86669 16.0214C3.99657 20.0369 3.90371 24.4888 4.06535 28.5726C4.29578 34.4289 4.34049 40.275 4.877 46.1075C5.24791 49.9817 5.89495 53.8251 6.81328 57.6088C8.53288 64.5968 15.4938 70.4122 22.3138 72.7848C29.6155 75.259 37.468 75.6697 44.9919 73.971C45.8196 73.7801 46.6381 73.5586 47.4475 73.3063C49.2737 72.7302 51.4164 72.086 52.9915 70.9542C53.0131 70.9384 53.0308 70.9178 53.0433 70.8942C53.0558 70.8706 53.0628 70.8445 53.0637 70.8179V65.1661C53.0634 65.1412 53.0574 65.1167 53.0462 65.0944C53.035 65.0721 53.0189 65.0525 52.9992 65.0371C52.9794 65.0218 52.9564 65.011 52.9318 65.0056C52.9073 65.0002 52.8819 65.0003 52.8574 65.0059C48.0369 66.1472 43.0971 66.7193 38.141 66.7103C29.6118 66.7103 27.3178 62.6981 26.6609 61.0278C26.1329 59.5842 25.7976 58.0784 25.6636 56.5486C25.6622 56.5229 25.667 56.4973 25.6775 56.4738C25.688 56.4502 25.7039 56.4295 25.724 56.4132C25.7441 56.397 25.7678 56.3856 25.7931 56.3801C25.8185 56.3746 25.8448 56.3751 25.8699 56.3816C30.6101 57.5151 35.4693 58.0873 40.3455 58.086C41.5183 58.086 42.6876 58.086 43.8604 58.0553C48.7647 57.919 53.9339 57.6701 58.7591 56.7361C58.8794 56.7123 58.9998 56.6918 59.103 56.6611C66.7139 55.2124 73.9569 50.665 74.6929 39.1501C74.7204 38.6967 74.7892 34.4016 74.7892 33.9312C74.7926 32.3325 75.3085 22.5901 74.7135 16.6043ZM62.9996 45.3371H54.9966V25.9069C54.9966 21.8163 53.277 19.7302 49.7793 19.7302C45.9343 19.7302 44.0083 22.1981 44.0083 27.0727V37.7082H36.0534V27.0727C36.0534 22.1981 34.124 19.7302 30.279 19.7302C26.8019 19.7302 25.0651 21.8163 25.0617 25.9069V45.3371H17.0656V25.3172C17.0656 21.2266 18.1191 17.9769 20.2262 15.568C22.3998 13.1648 25.2509 11.9308 28.7898 11.9308C32.8859 11.9308 35.9812 13.492 38.0447 16.6111L40.036 19.9245L42.0308 16.6111C44.0943 13.492 47.1896 11.9308 51.2788 11.9308C54.8143 11.9308 57.6654 13.1648 59.8459 15.568C61.9529 17.9746 63.0065 21.2243 63.0065 25.3172L62.9996 45.3371Z"></path>
</g>
</svg>
</a>
</p>
</p>
<h3>Navigation</h3>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="MainPage.html">MaterialX Overview</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">MaterialX Graph Editor</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#example-images">Example Images</a></li>
<li class="toctree-l2"><a class="reference internal" href="#building-the-materialx-graph-editor">Building the MaterialX Graph Editor</a></li>
<li class="toctree-l2"><a class="reference internal" href="#summary-of-graph-editor-features">Summary of Graph Editor Features</a></li>
<li class="toctree-l2"><a class="reference internal" href="#buttons">Buttons</a></li>
<li class="toctree-l2"><a class="reference internal" href="#editor-window">Editor Window</a></li>
<li class="toctree-l2"><a class="reference internal" href="#node-property-editor">Node Property Editor</a></li>
<li class="toctree-l2"><a class="reference internal" href="#render-view">Render View</a></li>
<li class="toctree-l2"><a class="reference internal" href="#keyboard-shortcuts">Keyboard Shortcuts</a></li>
<li class="toctree-l2"><a class="reference internal" href="#command-line-options">Command-Line Options</a></li>
<li class="toctree-l2"><a class="reference internal" href="#known-limitations">Known Limitations</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="Viewer.html">MaterialX Viewer</a></li>
<li class="toctree-l1"><a class="reference internal" href="ShaderGeneration.html">Shader Generation</a></li>
</ul>
<p class="caption" role="heading"><span class="caption-text">MaterialX Python Modules:</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXCore.html">PyMaterialXCore</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXFormat.html">PyMaterialXFormat</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXGenShader.html">PyMaterialXGenShader</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXGenGlsl.html">PyMaterialXGenGlsl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXGenOsl.html">PyMaterialXGenOsl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXGenMdl.html">PyMaterialXGenMdl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXGenMsl.html">PyMaterialXGenMsl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXRender.html">PyMaterialXRender</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXRenderGlsl.html">PyMaterialXRenderGlsl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXRenderOsl.html">PyMaterialXRenderOsl</a></li>
<li class="toctree-l1"><a class="reference internal" href="generated/PyMaterialXRenderMsl.html">PyMaterialXRenderMsl</a></li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="genindex.html">Index</a></li>
</ul>
<hr />
<ul>
<li class="toctree-l1"><a href="https://materialx.org/">MaterialX.org</a></li>
<li class="toctree-l1"><a href="https://materialx.org/docs/api/index.html">MaterialX C++ API Docs</a></li>
<li class="toctree-l1"><a href="https://materialx.org/Specification.html">MaterialX Specification</a></li>
</ul>
<search id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
<input type="submit" value="Go" />
</form>
</div>
</search>
<script>document.getElementById('searchbox').style.display = "block"</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="footer">
©2024 MaterialX Authors.
|
Powered by <a href="https://www.sphinx-doc.org/">Sphinx 8.1.2</a>
& <a href="https://alabaster.readthedocs.io">Alabaster 1.0.0</a>
|
<a href="_sources/GraphEditor.md.txt"
rel="nofollow">Page source</a>
</div>
</body>
</html>