Hello,
Is there a way to obtain something similar to this:
with babylon.js
I have a glb file that needs be similar to the above animation whereby refraction is involved and also real time content refraction if possible otherwise just an image.
I am new to this, kindly please let me know if there is a way.
Thank you
Welcome aboard!
You can do refraction in Babylon.js:
They are giving the shader code in the link you provided, so it’s technically possible to do the same thing in Babylon.js, but it will be a bit more involved.
Hello,
Thank you very much for the references,
I am getting stuck on where to add a simple jpg file as background, as i want that and not a full 360 background, a flat jpg as the example website i put above.
Also might there be an example of this, kindly let me know.
Thank you
I think you can try to use a 2D texture with the PBR material and see how it goes.
Also, it may be easier to help you further if you setup an example in the PG (https://playground.babylonjs.com/).
I have added the code i have used on the playground,
I have used the glb from the examples and two textures,
one .dds env and the other earth.jpg for testing,
how would i go about now?
You should put the link to this PG in this thread so that we can have a look.
Is it possible to have the red and white ground be a background image or rather have a back ground image…
mainly i have a project where by a i have a glass 3d glb object or just a mesh, i have to reflect/refract the content behind. e.g the text or image on the website shall be refracted/reflected on the glass/mesh 3d glb object.
is there a way to do this with the playground i provided
https://playground.babylonjs.com/#CFM43Z#5
If you replace the boombox by your object it should work.
If not, please provide a repro Playground so that we can more easily help with the matter.
I have replicated the exact project i am working on with the object, the above url, so it shows the text i have added the environment dds as well as the jpg.
Basically currently its reflecting the dds file, is there a way to reflect or refract the Big text on the page as well as maybe the text below when you scroll down, so as you scroll depending on the text it shows upp on the 3d object.
Kindly let me know if you have any questions
thank you
I have replicated the exact project i am working on with the object, the above url, so it shows the text i have added the environment dds as well as the jpg.
Basically currently its reflecting the dds file, is there a way to reflect or refract the Big text on the page as well as maybe the text below when you scroll down, so as you scroll depending on the text it shows upp on the 3d object.
Kindly let me know if you have any questions
thank you
Your text is in the regular HTML page, it can’t interact so easily with the 3D scene that is drawn in the canvas.
You can try something like this to start with:
https://playground.babylonjs.com/#JIL2C2
You may comment the setting of the environment texture to better see what’s going on.
I think you would need to capture the html rendering in some way and copy this in the texture applied to the wall…