mirror of
https://github.com/Relintai/material-maker.git
synced 2025-01-09 05:39:38 +01:00
462 lines
21 KiB
HTML
462 lines
21 KiB
HTML
|
||
|
||
<!DOCTYPE html>
|
||
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
|
||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>User interface — Material Maker documentation</title>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
|
||
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
|
||
<link rel="index" title="Index" href="genindex.html" />
|
||
<link rel="search" title="Search" href="search.html" />
|
||
<link rel="next" title="Nodes overview" href="nodes.html" />
|
||
<link rel="prev" title="Introduction" href="intro.html" />
|
||
|
||
|
||
<script src="_static/js/modernizr.min.js"></script>
|
||
|
||
</head>
|
||
|
||
<body class="wy-body-for-nav">
|
||
|
||
|
||
<div class="wy-grid-for-nav">
|
||
|
||
|
||
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
|
||
<div class="wy-side-scroll">
|
||
<div class="wy-side-nav-search">
|
||
|
||
|
||
|
||
<a href="index.html" class="icon icon-home"> Material Maker
|
||
|
||
|
||
|
||
</a>
|
||
|
||
|
||
|
||
|
||
<div class="version">
|
||
0.8
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<div role="search">
|
||
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
|
||
<input type="text" name="q" placeholder="Search docs" />
|
||
<input type="hidden" name="check_keywords" value="yes" />
|
||
<input type="hidden" name="area" value="default" />
|
||
</form>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="current">
|
||
<li class="toctree-l1"><a class="reference internal" href="intro.html">Introduction</a></li>
|
||
<li class="toctree-l1 current"><a class="current reference internal" href="#">User interface</a><ul>
|
||
<li class="toctree-l2"><a class="reference internal" href="#overview">Overview</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="#first-steps-with-the-user-interface">First steps with the user interface</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="#graph-pane">Graph pane</a><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="#grid-and-zoom">Grid and zoom</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#material-navigation">Material navigation</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#selecting-and-copying-nodes">Selecting and copying nodes</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#background-3d-preview">Background 3D preview</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2"><a class="reference internal" href="#library-pane">Library pane</a></li>
|
||
<li class="toctree-l2"><a class="reference internal" href="#preview-pane">Preview pane</a><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="#d-preview">2D preview</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#id1">3D preview</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l2"><a class="reference internal" href="#main-menu">Main menu</a><ul>
|
||
<li class="toctree-l3"><a class="reference internal" href="#file-menu">File menu</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#edit-menu">Edit menu</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#view-menu">View menu</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#tools-menu">Tools menu</a></li>
|
||
<li class="toctree-l3"><a class="reference internal" href="#help-menu">Help menu</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toctree-l1"><a class="reference internal" href="nodes.html">Nodes overview</a></li>
|
||
<li class="toctree-l1"><a class="reference internal" href="base_library.html">Nodes library</a></li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
|
||
|
||
|
||
<nav class="wy-nav-top" aria-label="top navigation">
|
||
|
||
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
|
||
<a href="index.html">Material Maker</a>
|
||
|
||
</nav>
|
||
|
||
|
||
<div class="wy-nav-content">
|
||
|
||
<div class="rst-content">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div role="navigation" aria-label="breadcrumbs navigation">
|
||
|
||
<ul class="wy-breadcrumbs">
|
||
|
||
<li><a href="index.html">Docs</a> »</li>
|
||
|
||
<li>User interface</li>
|
||
|
||
|
||
<li class="wy-breadcrumbs-aside">
|
||
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<hr/>
|
||
</div>
|
||
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
|
||
<div itemprop="articleBody">
|
||
|
||
<div class="section" id="user-interface">
|
||
<h1>User interface<a class="headerlink" href="#user-interface" title="Permalink to this headline">¶</a></h1>
|
||
<div class="section" id="overview">
|
||
<h2>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h2>
|
||
<p>Material Maker mainly consists of 3 panes:</p>
|
||
<ul class="simple">
|
||
<li><p>The top left pane is the library, that contains all available nodes that can be used
|
||
to create materials. Library items are shown in a tree view</p></li>
|
||
<li><p>The bottom left pane is the preview, that shows at the same time the current material
|
||
applied to a sample mesh in a sample environment, and the texture generated by the
|
||
currently selected node</p></li>
|
||
<li><p>The right pane contains the graph editors where materials are described for current
|
||
projects</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="first-steps-with-the-user-interface">
|
||
<h2>First steps with the user interface<a class="headerlink" href="#first-steps-with-the-user-interface" title="Permalink to this headline">¶</a></h2>
|
||
<p>When opening Material Maker, a new empty project is created and shown in the right pane.
|
||
An empty project simply consists of a material node where textures for all elements of
|
||
the material should be connected.</p>
|
||
<p>To create a new node, simply choose one (for example “bricks”) from the library (the
|
||
top left pane) and drag it into the graph editor. Depending on the selected library
|
||
item, a preview or a simple description will be displayed while dragging.</p>
|
||
<img alt="_images/create_node.gif" class="align-center" src="_images/create_node.gif" />
|
||
<p>Selecting this new node (by clicking on it) shows it in the preview pane. The very small
|
||
2d preview of the preview pane can be maximized by double clicking on it. This will hide
|
||
the 3d preview but is useful when working on the different textures of the material.</p>
|
||
<p>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
|
||
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
|
||
you maximized the 2d preview it can be minimized by double-clicking on it again).</p>
|
||
<p>Nodes can also be disconnected by dragging a connected input away from its node.</p>
|
||
<img alt="_images/connect_nodes.gif" class="align-center" src="_images/connect_nodes.gif" />
|
||
<p>Nodes can easily be configured by modifying their parameters, and previews are updated
|
||
automatically.</p>
|
||
<p>Since each input can be connected to a single output, reconnecting an input will
|
||
automatically remove the previous connection.</p>
|
||
</div>
|
||
<div class="section" id="graph-pane">
|
||
<h2>Graph pane<a class="headerlink" href="#graph-pane" title="Permalink to this headline">¶</a></h2>
|
||
<p>The graph pane is where materials can be edited, by adding and configuring nodes,
|
||
and connecting them.</p>
|
||
<img alt="_images/graph_pane.png" class="align-center" src="_images/graph_pane.png" />
|
||
<div class="section" id="grid-and-zoom">
|
||
<h3>Grid and zoom<a class="headerlink" href="#grid-and-zoom" title="Permalink to this headline">¶</a></h3>
|
||
<p>In the top left corner of the graph pane, the following buttons can be used to modify
|
||
the zoom level and configure the grid:</p>
|
||
<blockquote>
|
||
<div><ul class="simple">
|
||
<li><p>the <img alt="zoom_out_button" src="_images/zoom_out_button.png" /> button zooms out.</p></li>
|
||
<li><p>the <img alt="zoom_reset_button" src="_images/zoom_reset_button.png" /> button resets the zoom factor.</p></li>
|
||
<li><p>the <img alt="zoom_in_button" src="_images/zoom_in_button.png" /> button zooms in.</p></li>
|
||
<li><p>the <img alt="grid_button" src="_images/grid_button.png" /> button toggles the grid. When moved, nodes will
|
||
stick to the grid when it is active. The grid size can be modified
|
||
using the spinbox next to the grid button</p></li>
|
||
</ul>
|
||
</div></blockquote>
|
||
<p>The view can be centered using the <strong>View -> Center view</strong> menu item or the <strong>C</strong> shortcut,
|
||
and the zoom factor can be reset using the <strong>View -> Reset zoom</strong> menu item or the <strong>Alt-0</strong>
|
||
shortcut.</p>
|
||
</div>
|
||
<div class="section" id="material-navigation">
|
||
<h3>Material navigation<a class="headerlink" href="#material-navigation" title="Permalink to this headline">¶</a></h3>
|
||
<p>In the top right corner of the graph pane, the graph navigation button
|
||
<img alt="graph_navigation_button" src="_images/graph_navigation_button.png" /> can be used to show a tree view of the material.
|
||
Double clicking on an item in this tree will show it in the graph view.</p>
|
||
<p>When a subgraph is shown in the graph pane, additional items are visible in
|
||
the top right corner:</p>
|
||
<ul class="simple">
|
||
<li><p>a text entry shows the name of the subgraph and can be used to modify it.</p></li>
|
||
<li><p>a <img alt="group_randomness_button" src="_images/group_randomness_button.png" /> button to decide if the current subgraph transmits
|
||
its random seed to its children.</p></li>
|
||
<li><p>a <img alt="graph_up_button" src="_images/graph_up_button.png" /> button to move to the parent of the currently shown subgraph.</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="selecting-and-copying-nodes">
|
||
<h3>Selecting and copying nodes<a class="headerlink" href="#selecting-and-copying-nodes" title="Permalink to this headline">¶</a></h3>
|
||
<p>Clicking on the title bar of a node will select it. Selecting a node will show its
|
||
first output (if any) in the 2D preview. It is possible to select several nodes
|
||
by holding the <strong>Control</strong> key while selecting.</p>
|
||
<p>Selected nodes can be copied using the <strong>Edit -> Copy</strong> menu or the <strong>Control+C</strong>
|
||
keyboard shortcut. They can also be cut using the <strong>Edit -> Cut</strong> menu entry or the
|
||
<strong>Control+X</strong> shortcut. Both operations store the selected nodes and their
|
||
interconnections in the clipboard. Note that the format used is JSON, and nodes
|
||
or group of nodes can easily be shared using this format.</p>
|
||
<p>The contents of the clipboard can be pasted into a graph using the <strong>Edit -> Paste</strong>
|
||
menu or the <strong>Control+V</strong> keyboard shortcut.</p>
|
||
</div>
|
||
<div class="section" id="background-3d-preview">
|
||
<h3>Background 3D preview<a class="headerlink" href="#background-3d-preview" title="Permalink to this headline">¶</a></h3>
|
||
<p>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,
|
||
and other controls are similar to the 3D preview.</p>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="library-pane">
|
||
<h2>Library pane<a class="headerlink" href="#library-pane" title="Permalink to this headline">¶</a></h2>
|
||
<p>The library pane shows all nodes defined in both base and user libraries in a tree
|
||
view. The base library is provided with Material Maker and the nodes it contains are
|
||
documented in this manual. The user library contains all nodes that were added using
|
||
the <strong>Tools -> Add selected node to user library</strong> menu item.</p>
|
||
<p>The filter field above the library tree can be used to quickly find a specific node.
|
||
The tree will be updated whenever the filter string is modified. It is possible to
|
||
give focus to the search field using the <strong>Control+F</strong> keyboard shortcut.</p>
|
||
<img alt="_images/library_filter.gif" class="align-center" src="_images/library_filter.gif" />
|
||
</div>
|
||
<div class="section" id="preview-pane">
|
||
<h2>Preview pane<a class="headerlink" href="#preview-pane" title="Permalink to this headline">¶</a></h2>
|
||
<p>The preview pane has tabs for a 2D preview and the 3D preview.</p>
|
||
<div class="section" id="d-preview">
|
||
<h3>2D preview<a class="headerlink" href="#d-preview" title="Permalink to this headline">¶</a></h3>
|
||
<p>The 2D preview 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
|
||
easy to check that the texture wraps correctly.</p>
|
||
<img alt="_images/preview_2d.png" class="align-center" src="_images/preview_2d.png" />
|
||
<p>Depending on the selected node, controls can be shown and they can me moved
|
||
around to modify the associated parameters.</p>
|
||
</div>
|
||
<div class="section" id="id1">
|
||
<h3>3D preview<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h3>
|
||
<p>The 3D preview pane shows a 3D preview of the current material.</p>
|
||
<img alt="_images/preview_3d.png" class="align-center" src="_images/preview_3d.png" />
|
||
<p>The left select button can be used to select a model for the 3D preview, and the second
|
||
one provides different environments. The <strong>R</strong> button can be used to start and stop the
|
||
object’s rotation animation.</p>
|
||
<p>In the 3D view, the object can be rotated about the yaw and the pitch axes (from the
|
||
camera’s point of view) by holding the right mouse button and moving the mouse horizontally
|
||
or vertically. The object can also be rotated about the roll axis by holding Shift and
|
||
and the right mouse button and moving the mouse horizontally.</p>
|
||
<p>Holding the left mouse button will rotate the camera while the object remains static.</p>
|
||
<p>Rotating the object or the camera will automatically disable the object’s rotate animation.</p>
|
||
<p>The mouse wheel can be used to move the camera along its longitudinal axis (hense zooming
|
||
forward or backward).</p>
|
||
</div>
|
||
</div>
|
||
<div class="section" id="main-menu">
|
||
<h2>Main menu<a class="headerlink" href="#main-menu" title="Permalink to this headline">¶</a></h2>
|
||
<p>The main menu is organized in 4 sections:</p>
|
||
<ul class="simple">
|
||
<li><p>the <em>File</em> menu contains actions to create, load, save and export materials</p></li>
|
||
<li><p>the <em>Edit</em> menu has common edit actions cut, copy and paste</p></li>
|
||
<li><p>the <em>Tools</em> menu has actions to add items to the user library</p></li>
|
||
<li><p>the <em>Help</em> menu can be used to find more information and submit feedback about the software</p></li>
|
||
</ul>
|
||
<div class="section" id="file-menu">
|
||
<h3>File menu<a class="headerlink" href="#file-menu" title="Permalink to this headline">¶</a></h3>
|
||
<ul class="simple">
|
||
<li><p><em>New material</em> creates a new material and opens a tab in the right pane to edit it</p></li>
|
||
<li><p><em>Load material</em> opens a file dialog to select a procedural material (.ptex) file. If
|
||
a material file is selected, it will be open in a new tab in the right pane. If the current
|
||
tab contains an empty material (about material that only consists of a Material node), the
|
||
material will be loaded into this tab.</p></li>
|
||
<li><p><em>Save material</em> saves the current material. If it was not previously saved, a file dialog
|
||
will be displayed to select a location and file name.</p></li>
|
||
<li><p><em>Save material as</em> prompts for a location and file name and saves the current material.</p></li>
|
||
<li><p><em>Save all materials</em> saves all currently open materials. Materials that were already
|
||
saved are ignored.</p></li>
|
||
<li><p><em>Export material</em> generates PNG image files for all elements of the material. File names are
|
||
defined using the path of the <strong>.ptex</strong> material file and their role (albedo, emission…)
|
||
in the material.
|
||
The Ambient occlusion, roughness and metallic textures are saved into a single file whose
|
||
suffix is <strong>orm</strong>.
|
||
If the material contains <strong>export</strong> nodes, their textures will be exported as well.</p></li>
|
||
<li><p><em>Close material</em> closes the current material.</p></li>
|
||
<li><p><em>Quit</em> closes the software.</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="edit-menu">
|
||
<h3>Edit menu<a class="headerlink" href="#edit-menu" title="Permalink to this headline">¶</a></h3>
|
||
<ul class="simple">
|
||
<li><p><em>Cut</em> Copies the selected nodes to the clipboard and removes them from the current material.</p></li>
|
||
<li><p><em>Copy</em> Copies the selected nodes to the clipboard</p></li>
|
||
<li><p><em>Paste</em> Copies the clipboard into the current material. Note that the nodes will be added to
|
||
the center of the view, so it is advised to scroll to the correct location before pasting.
|
||
Pasting also unselects all previously selected nodes and selects all newly created nodes,
|
||
so they can easily be moved around.</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="view-menu">
|
||
<h3>View menu<a class="headerlink" href="#view-menu" title="Permalink to this headline">¶</a></h3>
|
||
<ul class="simple">
|
||
<li><p><em>Center view</em> Centers the current material graph view</p></li>
|
||
<li><p><em>Reset zoom</em> Resets the zoom level of the current material graph view</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="tools-menu">
|
||
<h3>Tools menu<a class="headerlink" href="#tools-menu" title="Permalink to this headline">¶</a></h3>
|
||
<ul class="simple">
|
||
<li><p>The <em>Create</em> submenu can be used to create any of the node templates.</p></li>
|
||
<li><p><em>Create group</em> creates a subgraph node with the currently selected nodes,
|
||
and shows the contents of the newly created group in the current graph
|
||
view.</p></li>
|
||
<li><p>the <em>Make selected nodes editable</em> menu item will toggle edit mode for
|
||
all selected nodes that support it. Shader and graph nodes will show
|
||
3 buttons to edit, load and save the node, switches will show controls to
|
||
modify the number of choices and outputs, and input/output modes will
|
||
become editable.</p></li>
|
||
<li><p><em>Add selected node to user library</em> first prompts for an item name. If a name is entered and
|
||
confirmed, the selected nodes in the current material will be added to the user library under
|
||
that name. The user library is saved automatically.</p></li>
|
||
<li><p><em>Export the nodes library</em> will prompt for a location on the disk and
|
||
save the whole node library.</p></li>
|
||
</ul>
|
||
</div>
|
||
<div class="section" id="help-menu">
|
||
<h3>Help menu<a class="headerlink" href="#help-menu" title="Permalink to this headline">¶</a></h3>
|
||
<ul class="simple">
|
||
<li><p><em>User manual</em> opens an external web browser to show this manual</p></li>
|
||
<li><p><em>Show selected library item documentation</em> opens an external web browser to show
|
||
documentation from the User Manual for the current library item</p></li>
|
||
<li><p><em>Report a bug</em> opens a web browser on the Issues page of Material Maker’s GitHub project. Please
|
||
do not hesitate to use it to suggest improvements for Material Maker.</p></li>
|
||
<li><p><em>About</em> Shows the about dialog.</p></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<footer>
|
||
|
||
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
|
||
|
||
<a href="nodes.html" class="btn btn-neutral float-right" title="Nodes overview" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
|
||
|
||
|
||
<a href="intro.html" class="btn btn-neutral" title="Introduction" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
|
||
|
||
</div>
|
||
|
||
|
||
<hr/>
|
||
|
||
<div role="contentinfo">
|
||
<p>
|
||
© Copyright 2018-2020, Rodz Labs.
|
||
|
||
</p>
|
||
</div>
|
||
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<script type="text/javascript">
|
||
var DOCUMENTATION_OPTIONS = {
|
||
URL_ROOT:'./',
|
||
VERSION:'',
|
||
LANGUAGE:'None',
|
||
COLLAPSE_INDEX:false,
|
||
FILE_SUFFIX:'.html',
|
||
HAS_SOURCE: true,
|
||
SOURCELINK_SUFFIX: '.txt'
|
||
};
|
||
</script>
|
||
<script type="text/javascript" src="_static/jquery.js"></script>
|
||
<script type="text/javascript" src="_static/underscore.js"></script>
|
||
<script type="text/javascript" src="_static/doctools.js"></script>
|
||
<script type="text/javascript" src="_static/language_data.js"></script>
|
||
|
||
|
||
|
||
<script type="text/javascript" src="_static/js/theme.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
jQuery(function () {
|
||
SphinxRtdTheme.Navigation.enable(true);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |