Creating Blend4Web Materials. Leather and Glass


We are continuing to share the secrets of creating high-quality materials. The first lesson in this series was dedicated to matte materials, while the second one dealt with copper and chromed steel. Now, it is time to explain how glass and leather work.

Working with Fresnel Effect

As we know, some materials (such as leather, wood, plastics or rubber) reflect their surroundings unevenly, depending on the point of view.

Leather material with Fresnel effect

The Leather material from our library can be seen as one of the most simple examples of this. Let’s see how it can be built.

Simplified core of the Leather material

The core of the material is shown here is a simplified form to make its structure easier to comprehend. If you have read the previous article, you will probably notice that it is very similar to the core of the Copper material.

The core includes a normal map (1) to imitate inequalities of the surface of the leather. The alpha channel of this map contains a basal black and white texture that is then colored using a ColorMix node (4). This setup reduces the size of the resulting application and decreases loading time.

The main feature of this material is the Fresnel node (3). Using it, we can create a mix mask from the reflection map (2) and the base color of the material (4).

A Specular map is used to control the highlights. It is created from a black and white mask. If you want to know how exactly it is done, please watch the video below.

Transparency and Reflections

Glass material from the Blend4Web Material Library

Now, let’s make our task a little more complicated and make our material look more interesting by applying transparency, reflections and Fresnel effect to it.

Let’s start with simple thin glass. Sometimes, it’s better not to use refraction, as it is a rather performance-heavy effect, especially for low-tier mobile devices.

Simplified core of the Glass material

At the base of the material lies a cubemap (1) that is used to imitate reflection. This cubemap is tinted green (4) a little. A simple Matcap texture (2) is used to create realistic-looking highlights. Fresnel effect is connected to the input of the Material node, creating uneven transparency that changes depending on the view vector.

Now, let’s watch another video that shows the process of creating a transparent material. It, by the way, also contains several useful tips on Blender viewport setup.

Transparency and Refractions

Ribbed Glass material from Blend4Web Material Library

Our next step will be creating a ribbed glass that uses both transparency and refraction. Refraction effect is implemented using a special node developed by our team.

B4W_Refraction, a special-purpose Blend4Web node

All you have to do is to connect geometry normal or a Normal Map to the input socket of the B4W_Refraction node. Refractive power can be set using a dedicated numerical value. Unfortunately, refraction is only visible in Blend4Web viewport.

A transparent material that uses Refraction node

The picture above shows the Refraction node in action. To make the effect more complex, we will need to add a normal map.

A transparent material that uses a normal map

After a normal map is applied, we can now see how sphere distorts the objects behind it. The only thing left to make a realistic-looking glass is Fresnel effect.

Transparent material that uses a normal map and reflection with Fresnel effect

Now, the glass looks better, as reflections help to emphasize unevennesses of the surface. Now, if we mix the refraction with some color, we’ll get a colored glass.

The picture below shows the final version of the material core. The color is created using a ColorMix node and a couple of math node to control Fresnel mask.

The material with added transparency and color

Next time, we’ll get to the multi-layered materials.

30 may. 2023 05:24
Good job! The phenomenon of natural light refraction in physics.
Working space papa's burgeria of a hard-working chef and serving customers delicious food
30 may. 2023 13:33
We provide authenticbookkeeping service Melbourne in the form of well trained and highly experienced bookkeepers. Our Expert Bookkeeper provides services large to small business.
30 may. 2023 13:58
Choose from a wide range of Scissors Lift Singapore. We have it all covered, from lifting and transporting to stacking and tilting drums. Unipac is a custom manufacturer of material handling equipment for drum handling & barrel handling applications.
31 may. 2023 12:53
You may trust that our attorneys will help you through any legal matter. large, tiny, sophisticated, or elementary. The Chamberlains staff will spare no effort in achieving the finest outcome for you. Having a legal partner who is sensitive to both theLaw Firm Sydney NSW and your feelings is crucial.
31 may. 2023 13:18
Our goal is to provide professional plumbing services to our customers. We pride ourselves on our reliable and friendly service. Your Emergency Plumber Perth plumbing specialist. Experienced professionals for your plumbing repairs. Hot water system, clogged drains, burst pipes or more.
12 oct. 2023 07:55
stumble guys is now ranked in the top 10 of both the US and UK Google Play download lists. Since its introduction, the app has received over 163 million downloads and brought in $21.5 million stumble guys online
12 oct. 2023 19:48
22 dec. 2023 06:57
This year the Christmas weather is very cold, the game suika game will help me feel warmer than ever, I hope winter passes quickly because this is the 3rd day I have a cold.
06 feb. 2024 04:09
Connections Game is a puzzle-based game in which players must identify groups of objects that share a common quality or classification.
12 feb. 2024 10:18
I extend my heartfelt thanks to the dedicated team behind the creation and maintenance of this remarkable platform. Delhi Call Girls Service commitment to delivering high-quality, relevant content has undoubtedly made a positive impact on countless individuals, myself included.
Please register or log in to leave a reply.