Towards Photorealism in the Watch Demo

Introduction

In this article I'll try to deal with the non-trivial issues which I have encountered while creating the Watch demo.

This article is aimed at those possessing basic knowledge in Blender's modeling and texturing tools as well as the node editor.

The photo on the right was used as a reference.

The following questions will be considered in this article:

• Creating the crocodile leather material, including a seamless texture and specular settings and
• Setting up the gold material.

It was very important to sustain a parametric approach while creating the scene. Especially it had to do with the two specified objects. I had to abandon many decisions and start looking for new ones, and this is why parametrization saved me a lot of time.

Crocodile Leather: Seamless Texture

In most cases it's possible to use textures taken from such resources as CGTextures. After searching for the right texture I finally understood that this was not an option. So I decided to create an image the pattern of which I would be able to control.

I took the photos of real leather watch wristbands as a reference as well as the original watch picture. Using all that I specified the pattern of scales in Inkscape:

The guidelines were needed to sustain the seamlessness of the texture.

Next, the corresponding masks for different details were created on the basis of this texture in Inkscape and GIMP:

In the process of creation these images were constantly being checked for seamlessness and when needed were corrected in Blender using the following simple method:

Create a plane, scale it and the corresponding UV by three times. Assign a material and texture to the plane. Create a second plane with parameters as on the fourth frame of the above picture. The second plane marks the image borders and moreover it is used for baking the final texture.

I used the shader nodes instead of compositing nodes in order to assemble the seamless texture. With a little creativity and using the shader nodes it's possible to achieve interesting effects which can be later reused in the material of the scene itself.

Texture nodes

The labels on the pictures above show how the texture changes after being mixed with other textures and masks.

This way, I created a material which looks like a texture. In order to get an image out of this material it has to be baked on a plane. An image of the necessary resolution should be applied to the plane's UV. After baking the such material-texture I got a grayscale image which was later used to create normal, color and specular maps.

The baked normal map and an alpha-channel with a grayscale texture inside:

At this stage the seamless texture is created. I will omit the tuning of the leather material (as it is an easy thing to do) and will proceed to the specular settings.

Crocodile Leather: Specular Settings

Working on the specular I wanted to show that this material is both strong and soft.

As you can see at the image the specular consists of three parts:

• Sharp central spec (1) - it highlights small details.
• Big grey spec (2) - being mixed with the first one, softens it, making the material visually smoother.
• Environment spec imitation (3) - this effect is easy to achieve by creating a mask as shown below:

We can create similar and more complicated specs by manipulating the Spec output from the Extended Material node. The examples as pictured below:

The spec for leather wristband material:

In Blend4Web starting from version 14.09 an additional node group - SMOOTHSTEP - has appeared. It's more effective to use this node instead of sophisticated combinations of Power, Multiply and Squeeze Value nodes.

The Gold Material

Blend4Web supports projecting textures towards the camera (Normal output of the Geometry node). This way we can create a "matcap" material (short for "material capture"). This is the principle used in the gold material in this scene.

In order for the material to look like a gold it's necessary to imitate the reflected environment. I've done this throw combining the texture with soft color gradients and a contrast texture.

The blending of color masks is done inside the "color" block of our gold material. The effect of these elements is shown on the animated picture above. The first and second frame shows the masks, the third one is color and the third - the contrast texture.

Conclusion

As shown in this tutorial, by using the node material you can create seamless textures as well materials which are sophisticated yet flexible in tuning, and which will look identically both in the browser and in Blender.

The source files of the "Watch" demo are part of the Blend4Web SDK commercial distribution.

[2014-10-20] Initial release.

[2015-09-15] Changed illustrations because of new interface.

[2016-06-03] Fixed a User Manual link.

[2017-01-12] Minor changes in the text.