Creating Blend4Web Materials. From Simple to Complex

Blend4Web Material Library features 32 high-quality prefabs for rendering 3D models at close range. A real-life environment, however, might very well include many more types of objects and materials. Thus, we decided to share with you basic principles of creating Blend4Web materials, with items from the library as examples. By reading this guide, you will learn how to create your own materials suited for practical tasks.

Material Library Blend4Web SDK Pro

You might already be familiar with the chapter in the Blend4Web manual that describes the structure of Material Library and lists some tips on using it. If not, we recommend to read it first.

In the Blend4Web team we usually separate materials into several types depending on effect they are using:

Simple materials do not use textures, reflection maps or Matcaps. Examples of such materials would be glossy plastic, chrome or glass. Some of them only use Noise-type textures.

Medium materials may include simple textures as well as normal maps or baked procedural textures. Gypsum, matte plastic, rubber and simple cloth are examples of this type.

Complex materials use normal maps, diffuse and noise textures, masks and heavy node trees (examples: bronze, cast iron, leather).

Very complex materials utilize complete sets of textures and heavy node setups. Some of these materials are carbon, car paint, snow and ice.

Special materials use baked textures, multi-layered geometry, postprocessing effects and animations. This type of materials include gems and fur.

Let’s examine each one of these categories using some of the materials from the library as our examples.

Simple Matte Materials

Knitted material from Blend4Web library

In this article, we will take a look on first two types of materials. In terms of complexity, their only real difference is the textures they use and time that you have to spend preparing them. We will start with knitted material, as it does not use reflections or complex node trees.

Node structure of the knitted material.

The picture shows simplified structure of the material with most important elements contained in the core. This is done in order to make setting up the material more convenient. We will get to the core itself later, but for now, let’s take a look on its inputs and outputs.

1. The RGB node sets the color of the material. How this is done, I’ll explain a little later.

2. Color output after all transforms. It is plugged into Color input of the Material node (this is how the color of the material is defined).

3. The Specular output is connected to the Specular input of the Material node. It can be used to define shiny parts of the material.

4. The Normal output contains information about the normal vectors of the object. In Blend4Web materials, you can mix the main Normal Map with a Detail Normal map to add small details to the material. This feature, however, remains unused in this particular material. The Normal input of the core is connected to the Geometry node, meaning that material is using basic normal vector of the object’s geometry. This way object and material normals can be mixed.

5. Baked Ambient Occlusion map that is applied to the output of the Material node. It is used to created shading effect on the dents, seams and holes of the object.

1 – the color plugged to the Color input; 2 – Diffuse texture of the material; 3 – Specular map; 4 – Normal map; 5 – the resulting shading.

Now, let’s take a look at the heart of the material – its core.

The core of the knitted material.

1.The texture slot that contains a Normal map. The Alpha channel of the map contains a black and white texture.

2. The SmoothStep node. It is very similar to the ColorRamp node, only it works faster and is controlled with numeric values. It is used to compress the black and white mask contained in the Alpha channel of the normal map.

3. The ColorMix node colors the black and white texture with a set color.

4. The ColorMix node applies a gradient to the black and white texture that is then used as a Specular map. Using one texture twice makes our material more performance-friendly.

5. The ColorMix mixes Deatil Normal map with the base Normal map. The output is connected to the Normal input of the Material node.

The video below shows the process of creating a material core as well as some other interesting things. Feel free to watch!

And this concludes our first article. In the next one we will talk about using reflections with chromed steel and bronze materials as examples.