How to create bubble effect

Use shadertoy, see Little Shader Book ( :uk: a bit more complicated )
from the Collection of examples from

Try examples
Shader - Shadertoy BETA
Shader - Shadertoy BETA

1 Like

Thanks for your help
As you said, porting Shadertoy to Three.js is quite complicated, and I will try it out

Alternatively, you can use just small square planes with a flat texture applied to render the bubble - and a thicknessMap faking a spherical IOR on top of that.


Do you mean to use plane+thicknessMap to achieve the effect of a sphere, and then use shader to achieve ior, reflectivity, and so on, making it look more like a bubble.
This is easier to implement than fully using shader

Nope, you don’t need any custom shaders - you can just use MeshPhysicalMaterial. Even further - MeshPhysicalMaterial allows you to use .iridescenceMap / .dispersion if you’d ever want the bubbles to look soapy instead of just water.

Example of .thicknessMap distortion


I’d suggest also filtering through @prisoner849 's “resources” posts in the forum here, he’s done a few beer examples :beers::beers::stuck_out_tongue_winking_eye:

1 Like

Thank you very much, let me give it a try

Okay, thank you for your answer

It can be achieved by Particle System. Try, it has an editor to make what you need.

1 Like