Help me debug "Clipping" of reflectivity?

Hi!

This is my first post, for those reading it and considering helping me, thank you in advance for your time and effort!

I’ve got an interesting visual difference in Chrome vs Safari that I’m not so sure yet how to start debugging.

The site is: https://julia-neiva.com/

On chrome, the hand looks nicely and smoothly shaded.

On safari however, I am seeing what I would describe as “clipping”. Some hard edges are forming in certain parts of the mesh where the reflectivity suddenly changes quite drastically. And since I am quite new to this whole thing, Im wondering if anyone has any ideas what might be causing that.

The code is pretty much all in here: https://julia-neiva.com/wp-content/themes/base/js/main.js

Cheers, and thanks for any insights!

The only thing I can see is that you should not use MeshPhysicalMaterial or MeshStandardMaterial without PMREMGenerator. Check out webgl_loader_gltf to see the recommended usage.

Besides, you can remove all shadow configurations from your scene to improve clarity since you not enabled shadows in your app (via renderer.shadowMap.enabled = true;).

1 Like