Updated user interface documentation
BIN
material_maker/doc/images/create_node_menu.gif
Normal file
After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 3.1 KiB |
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 100 KiB |
@ -24,18 +24,20 @@ connected to several node inputs. Each node output (and input) can be:
|
|||||||
|
|
||||||
* a **3D signed distance function** (shown in red)
|
* a **3D signed distance function** (shown in red)
|
||||||
|
|
||||||
|
* a **3D texture** (shown in fuchia)
|
||||||
|
|
||||||
Greyscale, color and RGBA inputs and outputs can be connected to each other and will automatically be
|
Greyscale, color and RGBA inputs and outputs can be connected to each other and will automatically be
|
||||||
converted when required.
|
converted when required.
|
||||||
|
|
||||||
2D signed distance functions have a specific preview that shows the associated signed distance
|
2D signed distance functions have a specific preview that shows the associated signed distance
|
||||||
field. They can be converted into greyscale images using the `sdShow node`.
|
field. They can be converted into greyscale images using the `sdShow` node.
|
||||||
|
|
||||||
3D signed distance functions have a specific preview that shows the lit 3Dscene. They can be
|
3D signed distance functions have a specific preview that shows the lit 3D scene. They can be
|
||||||
converted into a greyscale height map and a color normal map using the `Render node`.
|
converted into a greyscale height map and a color normal map using the `Render` node.
|
||||||
|
|
||||||
Next to the output, an (open or closed) eye icon indicates that a preview is available. Clicking
|
Clicking on an output slot it will show the corresponding preview at the bottom of the node.
|
||||||
on it will show the preview at the bottom of the node. When a node has several outputs, only
|
When a node has several outputs, only one of them can be previewed at a time. The previewed
|
||||||
one of them can be previewed at a time.
|
output slot will has a circle around it, and clicking it again will hide the preview.
|
||||||
|
|
||||||
Inputs
|
Inputs
|
||||||
^^^^^^
|
^^^^^^
|
||||||
|
@ -4,22 +4,30 @@ User interface
|
|||||||
Overview
|
Overview
|
||||||
--------
|
--------
|
||||||
|
|
||||||
Material Maker mainly consists of 3 panes:
|
Material Maker mainly consists of 5 panes:
|
||||||
|
|
||||||
* The top left pane is the library, that contains all available nodes that can be used
|
* The Project pane (located in the center) contains the graph editors where materials are
|
||||||
|
described for current projects
|
||||||
|
|
||||||
|
* The Library pane (by default in the top left corner) contains all available nodes that can be used
|
||||||
to create materials. Library items are shown in a tree view
|
to create materials. Library items are shown in a tree view
|
||||||
|
|
||||||
* The bottom left pane is the preview, that shows at the same time the current material
|
* The Hierarchy pane (by default in the bottom left corner) shows the hierarchy of node groups
|
||||||
applied to a sample mesh in a sample environment, and the texture generated by the
|
of the current material graph
|
||||||
|
|
||||||
|
* The 2D preview pane (by default in the top right corner) shows the first texture generated by the
|
||||||
currently selected node
|
currently selected node
|
||||||
|
|
||||||
* The right pane contains the graph editors where materials are described for current
|
* The 3D preview pane (by default in the bottom right corner) shows the current material
|
||||||
projects
|
applied to a sample mesh in a sample environment
|
||||||
|
|
||||||
|
The 4 panes on the sides of the user interface can be moved around by dragging their title to their
|
||||||
|
desired location and hidden using the **View -> Panes**
|
||||||
|
|
||||||
First steps with the user interface
|
First steps with the user interface
|
||||||
-----------------------------------
|
-----------------------------------
|
||||||
|
|
||||||
When opening Material Maker, a new empty project is created and shown in the right pane.
|
When opening Material Maker, a new empty project is created and shown in the center pane.
|
||||||
An empty project simply consists of a material node where textures for all elements of
|
An empty project simply consists of a material node where textures for all elements of
|
||||||
the material should be connected.
|
the material should be connected.
|
||||||
|
|
||||||
@ -30,15 +38,20 @@ item, a preview or a simple description will be displayed while dragging.
|
|||||||
.. image:: images/create_node.gif
|
.. image:: images/create_node.gif
|
||||||
:align: center
|
:align: center
|
||||||
|
|
||||||
Selecting this new node (by clicking on it) shows it in the preview pane. The very small
|
An alternate method to create a node is to show the library menu using the space bar
|
||||||
2d preview of the preview pane can be maximized by double clicking on it. This will hide
|
in the Project pane, and select a node from the list. The library menu will also be
|
||||||
the 3d preview but is useful when working on the different textures of the material.
|
shown when connecting a node output into an empty space in the graph (in this case,
|
||||||
|
the newly created node will be connected automatically).
|
||||||
|
|
||||||
|
.. image:: images/create_node_menu.gif
|
||||||
|
:align: center
|
||||||
|
|
||||||
|
Selecting this new node (by clicking on it) shows it in the 2D preview pane.
|
||||||
|
|
||||||
To connect a node output to an input of another node, simply drag one to the other.
|
To connect a node output to an input of another node, simply drag one to the other.
|
||||||
For example we can drag the first output of the Bricks node to the albedo input of
|
For example we can drag the first output of the Bricks node to the albedo input of
|
||||||
the Materials node. This will automatically assign the simple Bricks texture to the
|
the Materials node. This will automatically assign the simple Bricks texture to the
|
||||||
albedo element of the material, and the 3d preview will immediately be updated (if
|
albedo element of the material, and the 3D preview will immediately be updated.
|
||||||
you maximized the 2d preview it can be minimized by double-clicking on it again).
|
|
||||||
|
|
||||||
Nodes can also be disconnected by dragging a connected input away from its node.
|
Nodes can also be disconnected by dragging a connected input away from its node.
|
||||||
|
|
||||||
@ -90,7 +103,8 @@ Material navigation
|
|||||||
.. |graph_up_button| image:: images/graph_up_button.png
|
.. |graph_up_button| image:: images/graph_up_button.png
|
||||||
|
|
||||||
In the top right corner of the graph pane, the graph navigation button
|
In the top right corner of the graph pane, the graph navigation button
|
||||||
|graph_navigation_button| can be used to show a tree view of the material.
|
|graph_navigation_button| can be used to show a tree view of the
|
||||||
|
material (this is only useful when the Hierarchy pane is not visible).
|
||||||
Double clicking on an item in this tree will show it in the graph view.
|
Double clicking on an item in this tree will show it in the graph view.
|
||||||
|
|
||||||
When a subgraph is shown in the graph pane, additional items are visible in
|
When a subgraph is shown in the graph pane, additional items are visible in
|
||||||
@ -117,10 +131,20 @@ or group of nodes can easily be shared using this format.
|
|||||||
The contents of the clipboard can be pasted into a graph using the **Edit -> Paste**
|
The contents of the clipboard can be pasted into a graph using the **Edit -> Paste**
|
||||||
menu or the **Control+V** keyboard shortcut.
|
menu or the **Control+V** keyboard shortcut.
|
||||||
|
|
||||||
|
Selected items can also be duplicated using the **Edit -> Duplicate**
|
||||||
|
menu or the **Control+D** keyboard shortcut. This operation does not affect
|
||||||
|
the clipboard.
|
||||||
|
|
||||||
|
Background 2D preview
|
||||||
|
^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
The bottom left "bricks" button can be used to show a 2D preview in the background
|
||||||
|
of the graph view.
|
||||||
|
|
||||||
Background 3D preview
|
Background 3D preview
|
||||||
^^^^^^^^^^^^^^^^^^^^^
|
^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
The bottom left ("cube") button can be used to show a 3D preview in the background
|
The bottom left "cube" button can be used to show a 3D preview in the background
|
||||||
of the graph view. The blue/red arrows icon is used to rotate the object or the view,
|
of the graph view. The blue/red arrows icon is used to rotate the object or the view,
|
||||||
and other controls are similar to the 3D preview.
|
and other controls are similar to the 3D preview.
|
||||||
|
|
||||||
@ -139,15 +163,20 @@ give focus to the search field using the **Control+F** keyboard shortcut.
|
|||||||
.. image:: images/library_filter.gif
|
.. image:: images/library_filter.gif
|
||||||
:align: center
|
:align: center
|
||||||
|
|
||||||
Preview pane
|
Hierarchy pane
|
||||||
------------
|
--------------
|
||||||
|
|
||||||
The preview pane has tabs for a 2D preview and the 3D preview.
|
The hierarchy pane shows the hierarchy of groups of the current material graph.
|
||||||
|
It shows the name as well as a preview of a number of outputs (for 0 to 3),
|
||||||
|
that can be configured by right clicking on the pane.
|
||||||
|
|
||||||
2D preview
|
Double clicking on a group in the hierarchy shows the contents of the corresponding group
|
||||||
^^^^^^^^^^
|
in the Graph pane.
|
||||||
|
|
||||||
The 2D preview shows a tiled preview of the first output of the selected
|
2D Preview pane
|
||||||
|
---------------
|
||||||
|
|
||||||
|
The 2D preview pane shows a tiled preview of the first output of the selected
|
||||||
node. The animated dashed lines show the bounds of the texture, so it is
|
node. The animated dashed lines show the bounds of the texture, so it is
|
||||||
easy to check that the texture wraps correctly.
|
easy to check that the texture wraps correctly.
|
||||||
|
|
||||||
@ -157,8 +186,8 @@ easy to check that the texture wraps correctly.
|
|||||||
Depending on the selected node, controls can be shown and they can me moved
|
Depending on the selected node, controls can be shown and they can me moved
|
||||||
around to modify the associated parameters.
|
around to modify the associated parameters.
|
||||||
|
|
||||||
3D preview
|
3D Preview pane
|
||||||
^^^^^^^^^^
|
---------------
|
||||||
|
|
||||||
The 3D preview pane shows a 3D preview of the current material.
|
The 3D preview pane shows a 3D preview of the current material.
|
||||||
|
|
||||||
@ -184,10 +213,11 @@ forward or backward).
|
|||||||
Main menu
|
Main menu
|
||||||
---------
|
---------
|
||||||
|
|
||||||
The main menu is organized in 4 sections:
|
The main menu bar is organized in 5 menus:
|
||||||
|
|
||||||
* the *File* menu contains actions to create, load, save and export materials
|
* the *File* menu contains actions to create, load, save and export materials
|
||||||
* the *Edit* menu has common edit actions cut, copy and paste
|
* the *Edit* menu has common edit actions cut, copy and paste
|
||||||
|
* the *View* menu contains actions to customize the graphial user interface
|
||||||
* the *Tools* menu has actions to add items to the user library
|
* the *Tools* menu has actions to add items to the user library
|
||||||
* the *Help* menu can be used to find more information and submit feedback about the software
|
* the *Help* menu can be used to find more information and submit feedback about the software
|
||||||
|
|
||||||
@ -239,6 +269,8 @@ View menu
|
|||||||
|
|
||||||
* *Reset zoom* Resets the zoom level of the current material graph view
|
* *Reset zoom* Resets the zoom level of the current material graph view
|
||||||
|
|
||||||
|
* the *Panes* submenu can be used to show or hide all side panes
|
||||||
|
|
||||||
Tools menu
|
Tools menu
|
||||||
^^^^^^^^^^
|
^^^^^^^^^^
|
||||||
|
|
||||||
|