Bubble effect with GLSL Shaders and Threejs

Hello. I recently came across this interesting image:

And am curious on any approaches to implement this with shaders.

My first thoughts would be to use something like the fresnel effect, since the sphere the colors get lighter around the edges of the sphere. However, I’m not sure where to start with the colors.

Any help is appreciated.

Let me rub salt into the wound. This is animation.

1 Like

Do you want it to be a 3D kind of effect or is 2D good enough?

If you’re happy with the 2D, you could achieve something that looks 80% like what Pabel posted by stacking a couple of sprites on top of each other with transparent PNG textures. Then you can add a bit of shader logic to do the shape morphing effect ( where all sprites are some kind of distorted wobbly circle ). And more logic to simulate the light coming from the top.

@Arthur fair enough, I could just stack sprites on top of each other. I think I’m more interested in creating a 3d effect, but I think I’ll end up doing this anyways (I like this effect and I’m not well-versed enough in shaders to make this in 3d). I’m open to any ideas on how to achieve something similar using 3d shaders.