2019-11-26 19:26:48 +01:00
<!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 > Shader nodes — 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 = "Texture nodes" href = "texture_nodes.html" / >
< link rel = "prev" title = "Common properties of nodes" href = "nodes_common.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" >
2020-03-15 09:55:36 +01:00
0.9
2019-11-26 19:26:48 +01:00
< / 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" > < a class = "reference internal" href = "user_interface.html" > User interface< / a > < / li >
< li class = "toctree-l1 current" > < a class = "reference internal" href = "nodes.html" > Nodes overview< / a > < ul class = "current" >
< li class = "toctree-l2" > < a class = "reference internal" href = "nodes_common.html" > Common properties of nodes< / a > < / li >
< li class = "toctree-l2 current" > < a class = "current reference internal" href = "#" > Shader nodes< / a > < ul >
< li class = "toctree-l3" > < a class = "reference internal" href = "#defining-a-shader-node-interface" > Defining a shader node interface< / a > < ul >
< li class = "toctree-l4" > < a class = "reference internal" href = "#parameters" > Parameters< / a > < / li >
< li class = "toctree-l4" > < a class = "reference internal" href = "#inputs" > Inputs< / a > < / li >
< li class = "toctree-l4" > < a class = "reference internal" href = "#outputs" > Outputs< / a > < / li >
< / ul >
< / li >
< li class = "toctree-l3" > < a class = "reference internal" href = "#adding-the-actual-glsl-code" > Adding the actual GLSL code< / a > < ul >
< li class = "toctree-l4" > < a class = "reference internal" href = "#global-functions" > Global functions< / a > < / li >
< li class = "toctree-l4" > < a class = "reference internal" href = "#instance-functions" > Instance functions< / a > < / li >
< li class = "toctree-l4" > < a class = "reference internal" href = "#main-code" > Main code< / a > < / li >
< / ul >
< / li >
< / ul >
< / li >
< li class = "toctree-l2" > < a class = "reference internal" href = "texture_nodes.html" > Texture nodes< / a > < / li >
< li class = "toctree-l2" > < a class = "reference internal" href = "remote_nodes.html" > Remote nodes< / a > < / li >
< li class = "toctree-l2" > < a class = "reference internal" href = "subgraph_nodes.html" > Subgraph nodes< / a > < / li >
< / ul >
< / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "base_library.html" > Nodes library< / a > < / li >
2020-03-15 09:55:36 +01:00
< li class = "toctree-l1" > < a class = "reference internal" href = "export.html" > Exporting Materials< / a > < / li >
< li class = "toctree-l1" > < a class = "reference internal" href = "command_line.html" > Command line arguments< / a > < / li >
2019-11-26 19:26:48 +01:00
< / 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 > < a href = "nodes.html" > Nodes overview< / a > » < / li >
< li > Shader nodes< / 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 = "shader-nodes" >
< h1 > Shader nodes< a class = "headerlink" href = "#shader-nodes" title = "Permalink to this headline" > ¶< / a > < / h1 >
< p > Most nodes in Material Maker are shader nodes. Their outputs are not defined as images,
2020-01-31 23:16:52 +01:00
but as shader programs that calculates< / p >
< ul class = "simple" >
< li > < p > the color of a pixel from its coordinates for greyscale, color and RGBA outputs< / p > < / li >
< li > < p > the signed distance of a 2D point from its coordinates for SDF2D outputs< / p > < / li >
< li > < p > the signed distance of a 3D point from its coordinates for SDF3D outputs< / p > < / li >
< / ul >
< p > When shader nodes are connected, Material Maker will combine their shader programs.
As a consequence, most shader nodes are resolution independant.< / p >
2019-11-26 19:26:48 +01:00
< p > Editing a shader node will show the < strong > Node Editor< / strong > window.< / p >
< div class = "section" id = "defining-a-shader-node-interface" >
< h2 > Defining a shader node interface< a class = "headerlink" href = "#defining-a-shader-node-interface" title = "Permalink to this headline" > ¶< / a > < / h2 >
< p > A shader node will always have outputs that will be connected to the inputs of other
nodes. It may also (and will probably) have parameters that can be modified in the
user interface, and inputs to receive data from other nodes.< / p >
< img alt = "_images/node_editor_general.png" class = "align-center" src = "_images/node_editor_general.png" / >
< p > Inputs and parameters can be added in the < strong > General< / strong > tab, but first, you may want to
choose a nice name for your new node.< / p >
< div class = "section" id = "parameters" >
< h3 > Parameters< a class = "headerlink" href = "#parameters" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > To add a parameter, just click on the green “+” button in the Parameters section.
A new parameter line will be created with a red “-” button on its left to delete
the new parameter. On this line:< / p >
< ul class = "simple" >
< li > < p > the first text field is the name of the parameter, that will be used in the shader code< / p > < / li >
< li > < p > the second text field is an optional label that will be displayed in the user interface.
There are a few tricks with this label that can help tweaking the UI.< / p > < / li >
< li > < p > the option button can be used to select a type for the parameter. The available types
are < strong > float< / strong > , < strong > size< / strong > , < strong > enum< / strong > , < strong > boolean< / strong > , < strong > color< / strong > and < strong > gradient< / strong > < / p > < / li >
< li > < p > on the right of the type selector, controls can be used to define a default value and
constraints for the parameter< / p > < / li >
2020-01-31 23:16:52 +01:00
< li > < p > < strong > float< / strong > parameters can be assigned a < strong > control< / strong > variable in the 2D preview< / p > < / li >
2019-11-26 19:26:48 +01:00
< / ul >
< p > To use a parameter in your shader code it is necessary to prefix it with a dollar sign.
So a < strong > foo< / strong > parameter can be refered to by < strong > $foo< / strong > or < strong > $(foo)< / strong > in the shader code.
Gradient parameters need to be used as functions with a single float parameter.
So < strong > mygradient< / strong > should be refered to as < strong > $mygradient($uv.x)< / strong > if you want to spread
the gradient on the x axis (< strong > $uv< / strong > is an implicit variable used by Material Maker for
UV coordinates).< / p >
< / div >
< div class = "section" id = "inputs" >
< h3 > Inputs< a class = "headerlink" href = "#inputs" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > Inputs can be added and removed, have a name and a label (but no label trick) just
like parameters. they also have a type that can be < strong > Greyscale< / strong > , < strong > Color< / strong > or
< strong > RGBA< / strong > .
Please note that Material Maker will convert automatically if you connect an input
to an output of a different type.< / p >
< p > On the right of the input type, you must define a default value that will be used
if the input is not connected. The default value is a GLSL expression that must
evaluate to a < strong > float< / strong > for < strong > Greyscale< / strong > , a < strong > vec3< / strong > for < strong > Color< / strong > or a < strong > vec4< / strong >
for < strong > RGBA< / strong > . Inputs default values can use the < strong > $uv< / strong > implicit variable. You may
want to define interesting default inputs for your nodes, so it is possible
to see their effect without connecting the inputs (the screenshot above is the
Blend filter and has a vertical and an horizontal gradient as default inputs).< / p >
2020-01-31 23:16:52 +01:00
< p > The “Function” checkbox changes the way the code is generated for this input.
When set to true, the input is generated as a function and can be used in the < em > Instance
functions< / em > section. If the parameter is false, the input code is inlined. is is not advised
to set this parameter to true when not required, because generating functions can have
an impact on performance.< / p >
2019-11-26 19:26:48 +01:00
< p > In shader code, inputs are used as functions that take a single < strong > vec2< / strong > parameter. For
example < strong > $myinput(2.0*$uv+vec2(0.2, 0.3))< / strong > refers to < strong > myinput< / strong > , scaled and translated.< / p >
< / div >
< div class = "section" id = "outputs" >
< h3 > Outputs< a class = "headerlink" href = "#outputs" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > Outputs are defined in the < strong > Outputs< / strong > tab and are very similar to inputs, but instead
of a default value, the generated value of the output should be specified as a
GLSL expression (< strong > float< / strong > for < strong > Greyscale< / strong > , a < strong > vec3< / strong > for < strong > Color< / strong > or a
< strong > vec4< / strong > for < strong > RGBA< / strong > ). This expression can use everything in the node (parameters,
inputs, main code, instance functions and global functions) except other outputs.
And generally, complex nodes mean complex output expressions. You may thus want to
write simple expressions in the < strong > Outputs< / strong > tab and keep complex code in the 3
remaining tabs.< / p >
< img alt = "_images/node_editor_outputs.png" class = "align-center" src = "_images/node_editor_outputs.png" / >
< / div >
< / div >
< div class = "section" id = "adding-the-actual-glsl-code" >
< h2 > Adding the actual GLSL code< a class = "headerlink" href = "#adding-the-actual-glsl-code" title = "Permalink to this headline" > ¶< / a > < / h2 >
< p > Now the parameters, inputs and outputs are defined, the code that will actually
generate the texture will be in the 3 remaining tabs.< / p >
< div class = "section" id = "global-functions" >
< h3 > Global functions< a class = "headerlink" href = "#global-functions" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > The Global functions tab is used to define the functions that are necessary to
implement the texture generator. Those functions will be included only once (when
the node is used of course) and cannot use parameters or inputs. This is
typically where you will paste the code you prepared in Shadertoy.< / p >
< img alt = "_images/node_editor_global.png" class = "align-center" src = "_images/node_editor_global.png" / >
< / div >
< div class = "section" id = "instance-functions" >
< h3 > Instance functions< a class = "headerlink" href = "#instance-functions" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > Instance functions are functions that are unique to an instance of the node.
They will typically depend on parameters, and those could either be used as
parameters when calling global functions, or to form global function names (as
shown in the screenshot below: the blend_type parameter is an enum whose value
is the suffix of one of the blend functions defined in the Global Functions pane).< / p >
< p > Instance functions must also have a unique name, and the name implicit variable
can be used to do this: whenever $name or $(name) is used, it will be replaced
with a unique name that depends on the node instance.< / p >
< img alt = "_images/node_editor_instance.png" class = "align-center" src = "_images/node_editor_instance.png" / >
< / div >
< div class = "section" id = "main-code" >
< h3 > Main code< a class = "headerlink" href = "#main-code" title = "Permalink to this headline" > ¶< / a > < / h3 >
< p > This tab contains code that will be inserted into the main combined shader and
can be used to define variables that will be used in the outputs expressions.
This can be useful either to simplify the outputs or to define variables that
will be used by several outputs (hence optimizing the shader code).< / p >
< p > Main code can use the node’
global functions.< / p >
< p > Since a node can be sampled for several different UV expressions in the same
combined shader, it is necessary for all variables declared in the main code section
to have a unique name for each (node instance, UV expression) pair. Material
Maker provides the name_uv implicit variable for this.< / p >
< img alt = "_images/node_editor_main.png" class = "align-center" src = "_images/node_editor_main.png" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< footer >
< div class = "rst-footer-buttons" role = "navigation" aria-label = "footer navigation" >
< a href = "texture_nodes.html" class = "btn btn-neutral float-right" title = "Texture nodes" accesskey = "n" rel = "next" > Next < span class = "fa fa-arrow-circle-right" > < / span > < / a >
< a href = "nodes_common.html" class = "btn btn-neutral" title = "Common properties of nodes" accesskey = "p" rel = "prev" > < span class = "fa fa-arrow-circle-left" > < / span > Previous< / a >
< / div >
< hr / >
< div role = "contentinfo" >
< p >
2020-01-31 23:16:52 +01:00
© Copyright 2018-2020, Rodz Labs.
2019-11-26 19:26:48 +01:00
< / 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 >
