Does anyone know any techniques for faking refraction?
1 Like
Studio supports refractions by default, you might need to change the environment map to see it better.
The model I’m testing with is from Khronos: glTF-Sample-Assets/Models/TransmissionRoughnessTest/README.md at main · KhronosGroup/glTF-Sample-Assets · GitHub
Ok but what I don’t see in the gltf material is what’s controlling the refraction and opacity? What does transmission relate to?
Take a look at this video posted by TheKhronosGroup: https://youtu.be/MFzmj1TUEKk. It explains it better than I could ever hope to. 
Thanks @GeorgeButler
So the problem with this method is it only works if there’s a background behind the object to show the refraction. I want a glass in world space on its own so this technique isn’t going to work. Also you can’t make any changes to the material in the editor as it breaks because there isn’t any support for the IOR or transmission.
Using the camera feed for reflections is something we’re looking into. Also I’ll let the team know about the missing IOR / transmission properties.
You could always write a custom component that overrides the object materials with a custom MeshPhysicalMaterial which has support for editing the IOR, etc: three.js docs
The problem is there’s little to no documentation to help me to achieve this. Could you give me some insight how I would do this?
The Animated Shaders sample project replaces the existing material on an object with a custom threejs ShaderMaterial. You could do the same approach but instead of ShaderMaterial use MeshPhysicalMaterial:
I’m still going to need some help on the syntax here - your example is using fragment shader rather than setting a physical material. I would appreciate a simple example of the code customised to show a basic physical material being set.
Nice work so far! Not sure why the refraction isn’t working as expected. I’ll have to look more into this.