I recently found that I was having slow performance on mobile (android, pixel 3) due to a mesh material being set to MeshPhongMaterial, changing this to MeshStandardMaterial made it instantly faster (the materials are generally using a texture for wood effects etc).
My problem is that one of my materials needs to mimic a colour changing paint which is purple at one angle and fades to green at another. My light source is white. I was achieving this effect by setting the specular colour of the phong material to the highlight colour. Is this also possible with MeshStandardMaterial?
This is for a product configurator where users can choose their own colour combinations.
Thanks Don, it may be I need to swap back to the phong material where specular isn’t white.
Re: performance, I discovered the issue by loading a gtlf export of my scene into another viewer (using your gltf exporter and viewer, thanks!) and found it was much faster there. On inspection with spector.js I noticed the difference of material type on the gltf version of the scene, so then I switched to Standard in my original version and I’m literally getting 25-50fps where I was getting as low as 4fps before. The mesh is about 10k vertices, the texture is 512x512 and the material is glossy (0 roughness).
As an aside my glossy looks great on desktop and terrible on mobile (lots of little white triangles), but that’s a different topic.
Also re: performance. Mobile cpu was 100% for MeshPhongMaterial delivering as low as 4fps (using Chrome remote device debugging to check) depending on how zoomed the model was. Now it’s 18% cpu at 25fps (which is still not super great but I’m running out of time for optimisation experiments). I noticed it was not slow at all on an iPhone 8 but it is on a pixel3, so I’m guessing bandwidth to GPU, or from js to GPU land.
I have encountered exact the same problem.
Trying to use MeshStandardMaterial instead of MeshPhongMaterial, but the visual effects are obviously different.
Wonder how to reach the same result.