MeshPhongMaterial render environment map on top of normals


I really love the clearcoat property on the MeshPhysicalMaterial and was wondering if anyone knows a way to achieve this using MeshPhongMaterial?

I basically just want to change the order slots are calulated, so the environment map is rendered on top of the normal map. Could this be possible with using a Node Phong material perhaps

If anyone could point me where to start to look that we be fantastic


Any reasons for not using MeshPhysicalMaterial in the first place?

The clear coat shading model is part of three.js's PBR material implementation. MeshPhongMaterial is not a PBR material and thus does not provide clear coat properties.

If you want to add it, you can enhance MeshPhongMaterial via onBeforeCompile().

Yes, it is also possible to enhance a node material with this logic however the clear code implementation is hardwired in the PBR shader code. So there is no separate ClearCodeNode that you can add to an existing node material.

Thanks for the quick response Michael

Yes we think the physical material is amazing but we are now looking at mobile devices and vr versions of the project

We are finding frame rate becomes an issue if you get right up close to the mesh that has the physical material, so that it takes up the entire screen or most of it
Drops to about 30-40fps from 70-80

We think we can get a good result with phong if we can just swap the order of things
It looks like it applies the environment map and then adds the normals
We want it to add the normals and then apply the environment map reflection

Looks like node material may be the way to go then

Have a great weekend