Utility Layout
The diagram below shows the sections and interactable areas for the graph utility.
The left column contains the node graph editor. Users can add additional nodes, create groups, adjust connection points and edit material properties.
The right column contains the model viewer, viewer controls and contextual property editor. The model viewer shows the material on various preset or custom models. The refresh button needs to be clicked to see changes made to the material appearance if an edit is made in the node graph. Users have free control over the camera, rotation and background. The property editor shows editable values according to which material is selected in the node graph editor.
The row below contains the code editor for the node graph which enables users to update a document from a graph or a graph from a document. File up/down arrow icons are used to accomplish this. Users can also copy and paste their own code to create the node graph.
Node Creation
Users of the Graph Editor can create a node by double clicking within the graph editor. This will show a list of available nodes. You can type to filter the list in the search bar.
Nodes can be filtered by the category, node type, and the type of data (float, color ,vector, integer or matrix). An example node would be mtlx/input/input color3.
Nodes can be move around within the graph editor by dragging with the left moust button.
Cloning, Deleting, Clearing Nodes
Users can copy a node by using "shift + left click" on their keyboard to select nodes which are highlighted with a white border. Next right click and select clone in the menu. This will create a copy and generate a unique name. Alternatively you can use the keyboard shortcuts ctrl+c or ctrl+v to copy and paste individual items.
Users can delete items by right clicking on nodes and selecting delete in the popup menu. Pressing delete or backspace on a keybaord also deletes nodes.
If you wish to clear the entire node graph window got to file > clear in the menu bar located above the editor
Creating and Editing Materials
Various prebuilt node graphs and materials are provided in the library menu located above the graph eidtor window. As an example going to libary > default > materials > standards surface creates two nodes. One bineg the shader (sr_default) and the other being the material (Default).
When a shader is selected the property panel is brought up. It is located to the right of graph editor. All the inputs of the selected node are shown in this panel. These input values can be edited. For example the base color, metalness, and roughness can all by altered. Refresh the material viewer by clicking the refresh icon, which is highlighted orange to indicate changes made to the node graph.
Editing Nodegraphs
This example for editing nodegraphs uses a checkerboard pattern as reference.
After adding the checkerboard pattern click the output and drag to create a link to base_color_port. Doin this will show the valid/invalid connection ports for SR_default. Invalid ports are grayed out while valid ports are color coded to be the same as the output. Whenever connections are update the model viewer needs to be refreshed to show changes made to the material. Following this users can edit various values of the checkerboard such as the tiling and color scheme.
For comparison an additional input color can be added and connected to the checkerboard. Clicking the checkerboard node will have an upstream link to input_color and will show the input_color node in the property editor.
Edited nodegraphs can be saved by going to file > save document in the menu bar above the editor. Files can be loaded by going to file > load document > select file in the file window.
Creating Subgraphs
Other than creating nodes users can also create subgraphs - a group of related nodes. The standard surface material is used as reference.
A subgraph is created by double clicking within the graph editor and typing/selecting graph/subgraph. The subgraph is initially empty and can be given any name as long as it doesn't use special characters. For this example the subgraph is named "Checkerboard Graph".
Navigate to the subgraph by using the down arrow or double clicking on the subgraph. This hides the content of the top level graph and shows the content of the sub-graph. Within the subgraph various nodes can be created. As an example the nodes within the subgraph multiply a checkerboard by a ramp and output the result. To do this connect the output of checkerboard and ramplr to the input of multiply_color.
Go back to the top level by pressing [x] or going to menu > view > close subgraph located above the graph editor. The problem here is that the subgraph does not output anything. To fix this create an output color node and connect the output of multiply to this in the subgraph. After closing the subgraph the output node will show up visually as a port that can be connected to another node - in this case standard surface.
In the event that multiply subgraphs are created, users can rename subgraphs and ouput names to reduce clutter.
Property Editor Overview
Origin of Nodes
Pattern Shaders is used as reference to show the origin of nodes (Library > sample graph > patterns > pattern shaders).
Single nodes or shaders show different symbols depending on origin when selected. Examples include: - Single nodes like texcoord, or ramp show a MaterialX symbol - Shaders (_shader) can get different symbols depending on origin - e.g. usd_shader (is a definition defined in OpenUSD ) - e.g. gltf_shader (is a definition defined in glTF ) - e.g. openpbr_shader (is a definition defined by OpenPBR ) - There can be externally defined icons as well such as Maya_Phong which shows a Maya symbol. (Accessed from Sample Graphs -> Materials -> Custom Shader Definition)
Node Properties
The preloaded marbley example is used as reference when describing node properties.
When selecting "Marbley_shader" in the graph editor the property panel shows all the names and inputs to the node. The property panel is located to the right of the graph eidtor. Groups of inputs are shown as a series of collapsible tabs. Input values are editable typing in exact values, by slider, using arrow keys to adjust by smalle increments. Colors are adjustable by using a color picker to input rgb values or selecting a random color in the color box.
Node Category, Output Type and Name
When selecting a node the main identifiers are shown. For example selecting Marbley_shader node shows in bold its category (open_pbr_surface), its output type (surface shader), and its name to the right of that. Only names can be edited within the property editor.
For this example the Marbley_graph subraph is selected. All subraphs have one category - nodegraph. There can multiple outputs marked by "multi", single output types or no output types.
Filtering default value display
Within the property editor inputs which have default values specied can be filtered out. Do this by pressing the filter icon located beside the node name box. Toggle on/off to see all the inputs. As an example when selecting "Marbley_shader" notice who the "Bse: group hides inputs with default values. If all the inputs on a tab group are filtered out the tab group itself is hidden. Users can test this by changing the "base weight" value so that it is no longer 1 (the default value). Pressing the toggle button witll result in this value not being filtered out. A filtered value example would be changing the metallness back to 0 (the default). It will not be filtered out after retoggling.
File image inputs: Image placement
The image placement uses tile wood material as reference (Library -> Presets -> Standard Surface -> Tiled Wood) with a teapot as the geometry.
View file image previews by selecting the image_color node within the NG_wood1 subraph. The image is pre-packaged with the web iste and reference by name. You can change the image to a different one. This example show grid.png used in its place. Refresh the viewer to see the material visual changes. Image loaded in starts as a "blob" meaning it is a temporary locally loaded image for this session. Various values can edited such as uvtiling, uvoffset, readlworldimagesize, and realwodltilesize which will interactively updates in the material viewer.
File image inputs: Colorspaces and Units
The colorspace and units demo uses the boombox prebuilt as reference with a custom boombox geometry.
Selecting the image_basecolor node in the boombox allows you to alter the colorspace by selecting from various options in the dropdown menu within the property editor. This indicates which color space an image is output from. For example "srgb_texture" can be changed to "lin_adobergb". Refresh the material viewer to see visual changes in the material.
Unit of measurement and rotation can also be edited. As an example when selecting the "image_normal" node of the boombox shows a dropdwon for unit of meaurement wihtin the property editor. Centimeters can be used as measurement instead of inches. The same applies for rotation, Selecting "image_basecolor" node again and navigate to the "rotate" dropdown menu in the property editor. You can change from degrees to radians for instance. Referes the material viewer to see visual changes.