[SOLVED] Rendering multiple glass objects in front of each other - refraction of multiple layers shader

For now it does not seem possible to shadercode refraction with “render multiple glass objects in front of each other”, but sooner or later it is going to happen … so if anyone know or have skills, I am very interested.

This three.js/webgl article (Real-time Multiside Refraction in Three Steps | Codrops) explains the challenge for most of their examples, but we (playcanvas-community) do have an example capable of refracting objects as well as background.
The question is just; can we, for instance, do refraction on a double sided drinking glass in the near future?

This example; Refraction - PLAYCANVAS, should as such be able to refract both bakcground and elephant within/upon the surface of green and clear refractive objects.

It’s definitely doable even now, with a custom shader. Just a quick scanning of that linked document, you’d need to render your object to a texture before the main camera, to get the back normals rendered to it, and then update the refraction chunk to use it to do another refraction as the ray exists the mesh.


But as for multiple objects refracting each other, this is more complicated. When the object behind is rendered, we copy the framebuffer to a texture, allowing it to be used on an object in front as a refraction background. You’d need to execute this grab-pass between each object that needs refraction, which gets expensive very soon.

In theory this is doable as well, as you could copy out the surface inside the per object rendering callback, even though this would be more complicated to set up.


Ok, thanks @mvaligursky … I will grant your good argumentation, as ‘needed research’ for my further quest {and in this case as semi-solved → SOLVED}

Al though my skills are more graphical, I might be able to find a skilled shader-coder
[people within the community; might/could also find the time to make such B2B-effects as a viable/doable example targeted webconfigurators for Glass artists]

Me / myself; will already be able to prerender this, but as we all ‘know’. WebGL has strong IA advantages UX-/time-wise for most user / configurator setups:

1 Like