Three.js: refraction is broken in MeshStandardMaterial?

[robertoranon]

Description of the problem

In the webgl_materials_cubemap_refraction example, I tried to change the materials from MeshPhong to MeshStandard, and the refraction effect was gone (the statue on the left still uses the MeshPhongMaterial, the other two use a MeshStandardMaterial):

Is there something I am missing to enable refraction? from the documentation, it doesn't look so.

Three.js version

• [X] r92

Browser

• [X] Chrome
• [X] Safari

OS

• [X] macOS

[WestLangley]

MeshStandardMaterial is a physically-based (PBR) material. Refraction, as implemented in MeshPhongMaterial is not a PBR technique. Granted, it is reasonably convincing.

In MeshStandardMaterial, if you set material.metalness = 1; and material.roughness = 0; you can achieve an effect you are looking for, but I am not aware of any metals that are transparent. I do not think support for refraction was intended.

You can also study the work-around used in http://threejs.org/examples/webgl_materials_reflectivity.html.

[robertoranon]

Thanks a lot! I'll try to come up with an update to the documentation to explain this and submit a PR, if you are interested

[WestLangley]

It might be more appropriate to revisit the code, instead, and see if changes are warranted.

[ManishJu]

I think refractionRatio should be removed from the documentation of MeshStandardMaterial here:
https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.refractionRatio

[mrdoob]

@ManishJu Would you like to do a PR with the fix?

[ManishJu]

The solution is to set the correct texture mapping constant. For me it was cubeUVRefractionMapping. Refraction ratio does work but not correctly

[Mugen87]

Related #19623