Updated user interface documentation

This commit is contained in:
Rodolphe Suescun 2020-03-08 13:01:24 +01:00
parent 754edea090
commit 7960ef43d6
7 changed files with 63 additions and 29 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 100 KiB

View File

@ -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 3D scene. 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
^^^^^^ ^^^^^^

View File

@ -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
^^^^^^^^^^ ^^^^^^^^^^