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
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 
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.
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