Realtime website refraction with fresnel effect

I have to create a website where by there is a 3D object using Babylon but the 3D object refracts the html text or image on the webpage with abit of the Fresnel rainbow effect.

Exactly like the website below.

I am still very new to WebGL and Shaders, could someone assist me of show me a simple way or example to achieve the exact way or similar to the website above.

Thank you

What’s the problem with the solution in your other thread:

You can add a sphere: https://playground.babylonjs.com/#JIL2C2#1

1 Like

You’ll have to render the website components inside WebGL as planes with images as texture and text as objects (or images too).
Set the webpage content to opacity:0 and use their current scroll position and dom size information to scale and position the objects within WebGL

Oh, or you render the website content in a 2d offscreen canvas (more speeeeeed) and use this canvas as one single texture

Thank You Very Much,

I shall have a play around with that and try to work it out :slight_smile:

The main thing would be calculations regarding the whole image, tricky but challenging.

Have to learn heaps

Thank you

i don’t know if links for threejs are tolerated or accepted in here, but here’s an example for calculations:

There’s no problem to link to 3js resources here.

1 Like

Ahhh yess I did have a look at that website but, the main thing is i need to learn react as well, i have no experience on that, which is why i gave up on that codrops project, i s should not have given up though.
I could not understand that project cod as but ill still give it a go

Thank You Very Much :slight_smile: