#Optimizing Model Material

13 messages · Page 1 of 1 (latest)

unique holly
#

I have a gltf Model with around 1200 Vertices for which I create a MeshPhoneMaterial. This looks and runs great in chromium based browsers but quite a bit worse in firefox and on mobile.

When changing the Material to a MeshBasicMaterial I get 60 fps on mobile but it obviously looks very bad. I've also tried out other materials but nothing looks goot except for MeshPhongMaterial and nothing runs great like MeshBasicMaterial.

What steps can I take to make it look "good" but run at 60fps at the same time?

young girder
#

1200 vertices + phong is nothing that can bring mobile down, it hints at the problem being else where, most likely your lights or shadows, since the main difference between basic and phong is that phong is lit.

#

A single point light that casts shadows will re render the scene 6 additional times for instance, so perhaps you just have too many

unique holly
#

I only have 1 pointlight affecting the model. I do have 4 or 5 more but they have a very small distance and do not affect or reach the model

#

Okay, interesting. I removed the main pointlight from the scene and it runs perfectly fine. So it's just that one pointlight that causes the lag.

Why could that be?

unique holly
#

Okay, disabling shadowMap did the trick but now I have no shadows 😦

#

I now set renderer.shadowMap.type to THREE.BasicShadowMap, which solved the problems and it now runs great on mobile. Thanks @young girder for your tip with the lighting.

young girder
#

i'd use as few lights as possible, there are better ways to light a scene

#

this comes at nearly 0 expense and looks a thousand times better than harsh point lights

#

i'd suggest one good envmap, use your own lightformers inside, not just an hdri off polyhaven bc that will never give you good results
an ambient or hemisphere light to brighten up shadows
and a single main light to cast shadow