Node Materials

Table of Content

Shader nodes extend significantly the potential of Blender’s standard materials by means of presenting shading as a batch of basic transformations.

_images/node_materials_title.png

Standard Nodes

Blend4Web supports all standard Blender nodes, but some of them do not work fast enough and are not recommended to use in real time applications. Creating very complex materials, especially using large numbers of Geometry and Texture nodes, is also not recommended.

The engine also has partial support for some of the Cycles nodes. This subject is more thoroughly described in the corresponding chapter.

Standard node performance and degree of support is described in the table.

Node’s Name Function Support Performance
Camera Data Used to obtain data from an active camera Full Average
ColorRamp Used to generate gradient B-Spline, Cardinal and Ease interpolation modes are not supported Average
Combine HSV Combines a color from the given Hue, Value and Saturation Full Average
Combine RGB Combines a color from the given red, green and blue channel values Full High
Extended Material Used to add a material to the node program. Has more input and output channels than the basic Material node Ambient and SpecTra inputs are not supported. AO output is not supported. Average
Gamma Used to set gamma of a given color Full High
Geometry Used to obtain information about object’s geometry Vertex Alpha output is not supported Using large numbers of these nodes is not recommended
Hue/Saturation Used to control Hue and Saturation of a given color Full Low
Invert Inverts a given color Full High
Lamp Data Used to obtain information from a given light source Shadow output is not supported Average
Mapping Used to transform texture coordinates Full Average
Material Used to add a standard material to the node program Full Average
Math Used to perform mathematical operations with given values Full High
MixRGB Mixes two given colors Full Low in the Burn, Dodge, Value, Saturation, Hue and Color modes, high in the rest of the modes
Normal Used to generate a normal vector Full High
Normal Map [1] Used to plug in normal map Full Average
Output Outputs the result of the node program Full Average
Particle Info Used to obtain information about particle system In the materials of the Emitter type particle systems Average
RGB Generates an RGB color Full High
RGB Curves Sets a curve to modify a given color Full Average
RGB to BW Desaturates a given RGB color Full High
Separate HSV Separates a given color into Hue, Saturation and Value Full High
Separate RGB Separates a given color into red, green and blue channels Full High
Squeeze Value Squeezes given value Full High
Texture Sets a texture Full Using large numbers of these nodes is not recommended
Value Generates a numeric value Full High
Vector Curves Sets a curve to modify a given vector Full Average
Vector Math Used to perform mathematical operations with two given vectors Full High
Vector Transform [2] Converts Vector, Point or Normal between World, Camera and Object coordinate spaces Full Average
[1]The Color Space parameter of a normal map used with this node should be set to Non-Color. Not doing so may lead to unpredictable results (although it won’t crash the engine).
[2]If at least one of the internal parameters, Space to convert from... or Space to convert to... is set to Object, then any object that uses the material will be considered dynamic.

Please keep in mind that node materials have certain limitations concerning the number of specific nodes in the material. These limitations are described here.

Engine-Specific Nodes

Engine-specific nodes extend functionality of the standard nodes to support extra features. These nodes are created as node groups (Node Groups or Node Tree) with specially determined names and input formats. For convenience, all special nodes are added to a blend file when it is opened.

_images/node_materials_nodes.png

Clamp (B4W_CLAMP)

The node limits the output value. As a result all the output vector components take values from 0 to 1 inclusive.

_images/node_materials_clamp.png

Input Parameters

Image
Incident vector.

Output Parameters

Image
Clamped vector.

Glow Output (B4W_GLOW_OUTPUT)

Applies the Glow effect to the node material. Besides the B4W_GLOW_OUTPUT node, the node material should have the Output node.

_images/node_materials_glow_output.png

Input Parameters

Glow Color
Glow color.
Factor

Glow ratio. Factor \(\in [0, 1]\).

  • Factor = 0 - no glow.
  • Factor \(\in (0, 1]\) - there is a glow, colored with Glow Color.

Levels of Quality (B4W_LEVELS_OF_QUALITY)

Sets up the output color based on the current image quality settings. Can be used to, for example, replace complex material with more simple one if the application is running on a mobile device.

_images/node_materials_levels_of_quality.png

See also

Quality Profiles

Input Parameters

HIGH
Node links this parameter to Color parameter in case of high and maximum quality usage.
LOW
Node links this parameter to Color parameter in case of low quality usage.
Fac
This value specifies what quality setting (HIGH or LOW) will be visible in the Blender viewport. Can change from 0 to 1. If the value is lower than 0.5, the HIGH setting will be visible, if it is 0.5 or higher, the LOW setting will be visible.

Parallax (B4W_PARALLAX)

The node implements the texture coordinates offset using a height map.

_images/node_materials_parallax.png

Input Parameters

UV
Source texture coordinates.
Height Map
RGBA texture with a height map packed into the alpha channel.
Scale
Texture coordinates offset factor.
Steps
The number of steps for iterative generation of texture coordinates offset. The bigger this value is the better is the final quality.
Lod Distance
Maximum distance from camera at which the effect is observed.

Output Parameters

UV
Resulting texture coordinates which are used as input for the texture nodes.

Reflect (B4W_REFLECT)

Calculates the reflection direction for an incident vector and a normal vector. Can be used to apply a cubemap to an object.

_images/node_materials_reflect.png

Input Parameters

Vector
Incident vector. Should be connected to the View socket of the Geometry node.
Vector
Normal vector. Should be normalized in order to achieve the desired result. Should be connected to the Normal socket of the Geometry node.

Output Parameters

Vector
Reflected vector. Should be connected to the Vector socket of the Texture node that contains the cubemap.

Refraction (B4W_REFRACTION)

Applies refraction effect to an object. This effect works only in the Blend4Web engine and not in the Blender’s viewport.

_images/node_materials_refraction.png

Input Parameters

Normal
A normal vector in camera space for adding perturbations.
Refraction Bump

Value of perturbation strength.

The default value is 0.001.

Output Parameters

Color
Rendered texture behind object with perturbations.

Note

It’s necessary to set the Refractions option from the Render > Reflections and Refractions panel to value AUTO or ON. The object’s transparency type must be set to Alpha Blend.

See also

Transparency

Replace (B4W_REPLACE)

The node replaces the inputs depending on the working environment (i.e. Blender viewport or Blend4Web). When working in Blender the Color1 input is connected to the Color output and the Color2 input is ignored. On the contrary when working in the engine the inputs are interchanged (the Color1 one is ignored and the Color2 one is connected to the output). The node is intended to display one node structure in the viewport and another - in the engine.

_images/node_materials_replace.png

As a rule it is used for normal mapping. Blender’s node materials do not support a tangent space of coordinates. Therefore, the only possible method to display normal maps in the viewport correctly is their usage inside the Material nodes.

Input Parameters

Color1
Node setup that will be visible in the Blender viewport.
Color2
Node setup that will be visible in the Blend4Web engine.

Output Parameters

Color
Should be connected to the Color socket of the Material or Extended Material node.

Smoothstep (B4W_SMOOTHSTEP)

Performs smooth interpolation between two input values based on first value.

_images/node_materials_smoothstep.png

Input Parameters

Value
Value which determines interpolation smoothness.
Edge0
First interpolation value.
Edge1
Second interpolation value.

Output Parameters

Value
Interpolated value.

Note

For the correct interpolation input Value had to be between Edge0 and Edge1.

Time (B4W_TIME)

Provides the timeline counting from the engine start (in seconds). Can be used for animating any parameters in node materials, such as UV coordinates, mixing factors, transparency etc.

_images/node_time.png

Input Parameters

None.

Output Parameters

Value
Time (in seconds) elapsed from the engine startup.

See also

Animation of Value and RGB Nodes

Translucency (B4W_TRANSLUCENCY)

The node implements a translucency effect (with respect to light sources only) for thin objects such as cloth, leaves, paper etc. The effect consists of two parts: 1) brightening of the object side which is opposite to the light source and 2) appearance of a light spot right in the light source place.

_images/node_materials_translucency.png

Input Parameters

Color
One-channel texture which defines material heterogeneity - the white color denotes maximum translucency effect while the black color denotes its absence. White color is used by default.
Backside Factor

Material color correction coefficient for the side which is opposite to the light source. It describes the color richness effect for the translucent areas.

  • Backside Factor < 1 - brightening
  • Backside Factor = 1 - no correction
  • Backside Factor > 1 - darkening

The default value is 1.

Spot Hardness
Light spot blurring factor. The bigger this value is the smaller is the spot and the sharper are the spot edges. The default value is 1000.
Spot Intensity
Light spot intensity. The bigger this value is the brighter is the light spot. The default value is 1.
Spot Diffuse Factor

Material diffuse color influence on the light spot color.

  • Spot Diffuse Factor = 0 - the light spot has the diffuse color
  • Spot Diffuse Factor = 1 - the light spot color is white

The default value is 1.

Output Parameters

Translucency
The output should be connected to the Translucency input of the Extended Material node.

Note

This node can work incorrectly, if the mesh normals were edited.

Vector View (B4W_VECTOR_VIEW)

The node transforms a vector into the camera’s space of coordinates. Transformation is necessary because the engine defines most vectors in the world space of coordinates. If normal vector is being transformed by this node it should be used only for effects and not for connecting to the output of the Material or Extended Material nodes.

_images/node_materials_vector_view.png

Input Parameters

Vector
Vector coordinates in the world-space.

Output Parameters

Vector
Vector coordinates in the camera-space.

Linear to SRGB and SRGB to Linear (Deprecated)

Converts colors from linear space to sRGB or vice versa. This function has been declared deprecated since the version 15.04. In the newer versions, the native Gamma node with the value of 2.200 should be used to convert color from sRGB to linear space, and the same node with the value of 0.455 to convert color from linear space to sRGB.

_images/node_materials_gamma.png

See also

Gamma in Node Materials

Cycles Nodes

Note

Cycles node support is an experimental feature that is not yet recommended for using in production environment.

It should also be noted that using Cycles nodes in Blend4Web will produce images similar, but not identical to the ones created using Cycles renderer itself.

The engine support the following Cycles nodes:

  • Material Output (only Surface and Displacement inputs are supported);
  • BSDF Diffuse;
  • BSDF Glossy (only GGX distribution is supported; the Roughness parameter does not influence the reflections);
  • Transparent BSDF;
  • Mix Shader;
  • Fresnel;
  • Layer Weight;
  • Image Texture;
  • Environment Texture;
  • Object Info;
  • Bump.

The following nodes are partially supported:

  • Principled BSDF

    _images/node_materials_principled_bsdf.png
    • Roughness, Metallic, Specular, Normal, Transmission and IOR inputs are supported;

  • Texture Coordinates (From Dupli parameter is not supported);

  • UV Map (From Dupli parameter is not supported);

  • Geometry (the Pointness and Parametric parameters are not supported).

  • Emission (does not influence the lighting of the scene).

Cycles nodes are also supported for World object. However, at the moment node material does not affect the colors of the environment.

Other Cycles nodes will not, in most cases, work in Blend4Web the same way they do in Blender. They also might not work at all or even cause material in which they are used to work incorrectly. However, using these nodes will not cause instabilities in the application workflow.

Limitations

Node materials can be complex, but their complexity is limited by the capabilities of the hardware you use. It might not be noticeable most of the time, but if you are making a very complex material, you might exceed the number of textures and varying vectors (vectors that are used by a vertex shader to hand over data to a fragment shader) that your system allows to use in one shader. And even if you won’t, some users of your application might not have devices as powerful as yours, so they can experience problems where you will not.

If you want to know how your scene would behave on a low-end device but don’t have one in your possession, there is also a very useful option called Min Capabilities Mode. It is native to Scene Viewer and can be found on the Tools & Debug panel.

The number of textures and varying vectors supported by your device can be viewed on the WebGL Report web page accessible from the SDK Index page.

The two following tables list various material nodes along with the numbers of textures and varying vectors the engine allocates to them.

Varying Vectors

Node/Effect Allocated Varying Vectors
Always reserved 3
Input -> Texture node (if the Normal output is used) 1
Blend4Web -> Parallax node 1
Vector -> Normal Map node 1
Input -> Material node (if the Shading -> Tangent Shading option is enabled on that material) 1
Input -> Geometry node (if the UV output is used) 1
Input -> UV Map cycles node 1
Input -> Texture Coordinate cycles node (if the UV output is used) 1
Input -> Geometry node (if the Vertex Color output is used) 1
Shadows on an object with the Alpha Blend material

1 - 4

(depending on the number of shadow cascades or shadow casters)

Shadows on an object with the``Opaque`` material

Refraction effect on a material

Plane Reflections enabled on an object

 1
Refraction effect on a material 2

Textures

Node/Effect Allocated Textures
Blend4Web -> Parallax node 1
Input -> Texture node 1
Texture -> Environment Texture cycles node 1

Vector -> Vector Curves node

Color -> RGB Curves node

Converter -> Color Ramp node

1

(the number of the nodes in the material doesn’t matter)
Shadows on an object with the Alpha Blend material

1 - 4

(depending on the number of shadow casters and/or shadow cascades)
Shadows on an object with an Opaque material 1
Refraction effect on a material 2
World -> Environment Lighting -> SkyTexture is enabled for a World 1
Reflection effect on an object 1