Focusing On Refractions


Many wait in anticipation for the next release of Blend4Web, as it is slated to introduce PBR to the engine. This exceptional rendering technique, however, is not yet fully suited to handle certain types of materials such as glass, water and other objects that refract light.

Because of this, I would like to talk about creating several interesting effect using some of my apps as examples. I will focus on practical side and not on theories and big words. I am an artist myself, so I’ll try to keep scientific stuff to a minimum.

Rainbow Head (click to open the scene in a new window)

To create a simple glass material, you only need reflection and transparency. But if you want to implement light refraction effect, everything becomes a little more complicated. If you are a programmer or a mathematician, you’ll probably won’t have troubles creating such an effect yourself. However, Blend4Web includes a ready-made node specifically for working with refraction. In my materials, I use both this B4W_REFRACTION node and a custom node group.

So, let’s start with a most simple example and create a light dispersion effect using several refraction nodes. I’ve created three node groups to work with refraction, each one of them handles one color channel. Each Vector input is connected to different coordinates to displace image in each channel . After this, the channels are combined using the Combine RGB node.

Node material for creating light dispersion effect

A very important point! To make a glass object look more real, we need to add transparency to it, so the reverse side of it would be visible. If we don’t do this, only the surface will be rendered, while entire inner structure will be omitted.

Another moment: glass reflects its surrounding very clear, especially when its surface is placed at an acute angle to the viewer. This effect can be recreated with ease by mixing reflections and refraction with Fresnel node as the mixing factor.

Also, take into account thickness of the glass! For example, if you look at the edge of a glass can, you can see the color of the glass itself. Implementing this effect might very well be the most difficult aspect of creating glass materials. Thankfully, it isn’t always very noticeable.

Rain (click to open the scene in a new window)

Another effect that uses refraction is rain.

At first, I wanted to create a sheet of glass with raindrops falling on it. Later, I decided to try and create the rain itself. This effect is done with refraction and really not much else. There are no reflections and no transparency.

Node material for creating rain (click to see full-size image)

Using Time node (B4W_TIME), we set directions (with different velocities) for moving two normal maps that are them mixed together using a mask. The mask itself also moves with its own speed. All of this make the streams of rain look uneven and constantly changing. This rain refraction looks especially great when combined with lightning flashes; these are done using a moving texture that becomes visible from time to time.

Next, we have an even more simple, but no less impressive scene with crying Suzanne (the monkey from Blender). The author’s idea is then she’s upset at everyone for them mercilessly using her as a test subject. The scene is done using the same technique as the rain scene.

Suzanne (click to open the scene in a new window)

And finally we get to the last demo scene, a simple, yet arguably the most beautiful one in the article: a still life scene with a glass can. The glass can itself is created using methods described above, only it is a little more sophisticated because of its inner structure. I won’t be repeating the process of creating glass material. Instead, let’s touch another important subject: shadows cast by transparent objects.

Still life with a glass can (click to open the scene in a new window)

No matter how much real-time web engines want to ignore shadows cast by transparent objects or to make them flat and black, we all know how they really should look.

So, to add a proper shadow to an object with Alpha Blend, Alpha Sort or Add-type transparency, we need to use a duplicated geometry with a different type of transparency, namely Alpha Clip, as only this type supports shadows. Let’s go with it.

A material for creating shadows cast by glass objects.

First, let’s take our transparent object and duplicate it (you can also create a simplified geometry). Then, create a new material with Alpha Clip transparency type. Add a tiled texture to imitate noise. Using any means you like (vertex colors, baked texture, vector values or math operations) make it unevenly fill our object. Pay attention to the fact that the noise should be more thick at the bottom of the object and more thin at the top of it. This will give us soft cascade shadows.

Check the Cast Only box in the Shadow settings. On the Render tab, set Shadows -> Soft Shadows -> Blur Radius to 3 or higher.

That’s it! Now your glass casts an exceptionally beautiful shadow. And no other web-based engine has something like this!

A shadow cast by the glass

I continue to experiment with refractions and plan to write an article on creating liquids in glass cans (a refraction within a refraction!) soon enough.

A glass can filled with liquid

If you have any questions, feel free to ask on our forum. There, by the way, you can also find blend files used in this article.

10 jan. 2018 11:22
Head - spectr1.blend
05 sep. 2022 10:29
When you focus on refractions, it is because you have a problem with your vision. You can see the world through different ways and that's why refractions are important. Go to this site for more help. If I look at my hand and then at the window, I may see that both my hand and the window are in front of me. However, if I focus on refractions, I can see that my hand is behind the window.
07 sep. 2022 01:35
07 sep. 2022 14:15
Web-based Entertainment Marketing in India office will perpetually recommend that few posts be highlighted on various events to guarantee routinely sincere clear quality. This is finished in a huge framework for helping with really looking at straightforwardness.
Social Media Marketing Companies in Delhi
Social Media Marketing Company India
Social Media Marketing Companies in India
Social Media Marketing in India
Social Media Marketing Company
Social Media Marketing Services
Social Media Marketing Companies
Social Media Marketing Agency
Social Media Marketing Services India
Social Media Management
Social Media Marketing Packages

Social Media Marketing
07 sep. 2022 23:32
19 jan. 2023 10:20
This is a really well-written piece. This page contains really high-quality and useful information. Soda Club Red Jacket
19 jan. 2023 14:58
I found your blog via Google while searching for such kind of informative post and your post looks very interesting for me, check this Top Gun G-1 Flight Maverick Jacket
28 sep. 2023 18:42
Such a very well defined and creative blog. All words are so impressive and meaningful.
Spirited 2022 Shearling Jacket
29 sep. 2023 05:15
ORDER NOW>>> <<<<<<<
Welcome to our online pharmacy website, where convenience meets quality healthcare. We offer a wide range of prescription medications, over-the-counter drugs, and health products, all easily accessible from the comfort of your own home. With our user-friendly interface, you can browse and compare prices, read detailed product information, and place your order with just a few clicks. Our licensed pharmacists ensure that all medications are sourced from reputable manufacturers, guaranteeing safety and efficacy. Enjoy fast and discreet shipping, excellent customer service, and the peace of mind that comes with knowing you are getting the medications you need from a trusted online pharmacy.
29 sep. 2023 17:05
Hello to everyone who is seeking proxies for their requirements! I'm an experienced forum user and would like to suggest the buy proxy website. They have a very sound stance on security and dependability. I appreciate that proxies may be rented for any period of time and that they provide addresses in several nations. This comes in helpful for many different things. Also keep in mind that you may always use them to test proxies for free!
Please register or log in to leave a reply.