Pointers on approximating a ‘glass ball’ shader in a 2D project?

Godot Version



I’d like to try to create a ‘glass ball’ effect in front of the screen of a 2d project. I’ve found some ‘bubble’ and ‘magnifier’ type shaders, but they only affect what is directly behind the circle.

I’m trying to get closer to something like this: Shader - Shadertoy BETA - that refracts the whole scene like an actual glass ball would.

That’s just a trick, it’s rendering the same image several times, but projecting it onto a sphere. There is no “room” being rendered.
You could do the same thing by using a viewport/FBO, but that’s limited to a 2D texture. If you want to have more than a texture, this is not the way.
If you are fine with this, you can just use the shader you linked almost intact by feeding it the viewport as the texture replacing the first channel.

1 Like

Just making it look like a ball is in front of a flat 2d screen is exactly what I’m after — so thanks for the guidance. I’m really new to shaders in general, but I’ll see if I can muscle through based on what you said!

Unnecessary sidebar: It’s for a pinball machine based on the Jim Henson Movie “labyrinth” - so I want to make it look like crystal balls are floating in front of the score display, which is a 2D godot scene.

That sounds awesome and I hope you succeed, but maybe leave the eye candy for later when you have the rest of the game =P
Nothing wrong with learning shaders, tho.

The game already exists. Built entirely in Godot. Communicates with the hardware via serial — https://www.youtube.com/watch?v=q5xNseu0ffo

Back on the shader point - I’ve been trying to get the sphere look for a while and at one point was using a back buffer copy to get the contents of the active 2d scene to use as a texture; is a viewport preferable over that?

I don’t need any of the rotation that’s in the original shader, I just want the ball to float up past the running 2d scene, so there’s some decent chunks of that other one that I can carve out to simplify it a bit — if that method really will work.

Well, the back buffer is just the viewport of the window, afaik. Using your own viewport gives you more control over what gets draw to it, tho. After you have the FBO, just give it as the first channel to that shader and render the result on the quad or viewportview you want. Or faces of a mesh if it’s a material. Any way you do it, the idea is simple. Draw a texture, pass it to the shader, render that on your main scene. If you want more than one orb that’s a different story, but step by step.

1 Like

I’d start creating a rectangular texture with pixels using UV coordinates (e.g. red from 0 on the left to 255 on the right and possibly green being 0 at the top and 255 at the bottom).

Then use your preferred 2D photo editor (or maybe even Blender?) to render that glass sphere with its distortion right onto said texture. But ideally only the distortion, no extra blending/color.

One could then use this texture as a lookup table to update the UV coordinates and using those to render the screen texture.