Threejs performance [Car Visualization]

[davodesign84]

Hey folks, I’m new to Three.js and I had a couple of questions in regards to performance. I’m building a little visualisation app for car liveries for a game called Assetto Corsa Competizione.

I have a couple of questions in regarding to performance and one potential hint request as for the quality of the rendering.

A simplified fiddle is available here https://jsfiddle.net/pwjd7vz0/191/

1. Performance seems to degrade significantly with zooming, is this one of those “overdrawn” examples I’ve stumbled across the web? If so, is there any simple / clear resource explaining how to overcome it?

2. Performance seems significantly worse on Firefox, is it something that can be addressed? How?

3. I’d like to provide some glow to headlights and rearlights. What do you suggest to achieve that? I did try the Unreal Bloom pass, but A) has a strong effect on performance (might not be too bad if fixing the 2 issues above) and B) the reflections on the body of the car also bloom, making the image blurry.

Ideas and feedback are super welcome

[felixmariotto]

A few hints :

• 121846 tris for this model seems a bit too high in my opinion, consider reducing it bellow 20000 and use normal maps to render the details and textures.

• Dynamic shadows cost a lot with 3 lights in the scene and so many polygons, if you only need this shadow on the ground, consider just making a plane with a texture and disabling dynamic shadows. You can also bake the lights in Blender, you model is static anyway so you definitely don’t need dynamic shadows. You could also use image-based lighting, have a look at this example : three.js examples

[davodesign84]

I guess it coul work without lights and just the env map (or maybe an ambient/hemi light, so no shadows), however I do see the 2 issues above even without lights.

As for the model, I have little control on it, as it comes straight from the game and it will require to keep the UV intact so that decals layers can fit correctly. I am not experienced in blender is there a way to reduce triangle count while keeping UVs intact? @felixmariotto

[felixmariotto]

When Blender decimates a mesh, it interpolates the UVs, so the UV map is roughly the same

[davodesign84]

Thanks @felixmariotto just using IBL seems to improve load, however the texture show up desaturated when applied:
IBL

Regular Lights

Also do you have any suggestion as to how to create an effect similar to this?

[donmccurdy]

Performance seems to degrade significantly with zooming…

I would guess this means you have a performance bottleneck in the fragment shader. Some materials are more expensive than others, and the more pixels shaded with an expensive material the slower your scene will be. Zooming in on a slow material illustrates this well. In order of cost:

• MeshPhysicalMaterial (slowest)
• MeshStandardMaterial
• MeshPhongMaterial
• MeshLambertMaterial
• MeshBasicMaterial (fastest)

Currently this scene appears to use MeshPhysicalMaterial heavily, consider replacing some materials with simpler ones if it will still look “good enough”. Another option is to decrease canvas resolution.

[local_dev]

In addition to what @donmccurdy and @felixmariotto suggested, If it’s a static scene with no animation don’t use requestAnimationFrame, use the OrbitControls change event with the right throttling.

This may not help with the overall performance but it will definitely stop the fans from going crazy, even if you have some animations, like an opening door or somethings like that, you can trigger the rendering only during those animations.

I made some changes to your fiddle, it will render only when the orbit change.