I’ve recently built a raindrop-covered glass material using transmission via MeshPhysicalMaterial. Here’s how it ended up looking when added to my scene:
It ended up turning out very well in my opinion, so I wrote up a pretty detailed overview of my whole process of creating it:
I hope it might be useful or interesting to some people here.
This was the first time I’ve seriously used Three.JS’s transmission support in a serious project, and I was very impressed with how capable it is for this kind of material.
Thanks for sharing this work. The description could be used as a tutorial.
I’m interested in two aspects:
Does your material display realistic raindrops when there is a bright light on any side of the glass? In such cases the light is refracted (and/or reflected) through every drop, like this.
How hard would be to use the same approach to animate the drops as they glide down the glass by joining other drops, like this.
Does your material display realistic raindrops when there is a bright light on any side of the glass?
Three.JS’s transmission material implementation does indeed have full lighting integration. I added a white point light to the scene and left everything as-is and this is how it looks:
It would probably look better if I tuned some of the material parameters to account for it, but the specular highlights are clearly there.
One other issue I’d have to figure out is that the raindrops are actually on the wrong side of the glass since the front faces of the windows are rendered. There’s probably a way to work around that using DoubleSided mode or something similar. I might also have to invert the normals or do some other handling. It should be possible though.
How hard would be to use the same approach to animate the drops as they glide down the glass by joining other drops?
That would likely be a pretty big undertaking. The approach I’d go for would be to create an custom shader to determine the shapes of the raindrops rather than reading them from a texture. Depending on how realistic/in-depth you get, that could end up being a very difficult task.
Some people have done it though. Here’s a shadertoy which looks like it does what you were imagining: Shader - Shadertoy BETA
Once you had a shader that returns the height of the raindrop on the surface at every point, I think it would be comparatively easy to compute the normal, thickness, roughness, and other parameters based off of that.
