How to improve performance on my site?

Questions
1

Hello,
I have created a page using THREE.js available at this link. Unfortunately, but it runs horribly without hardware acceleration enabled in the browser on computers. On phones the site is not very smooth, but it is tolerable.

How can I improve the performance of the site?
What I have done so far:
-I optimized the .glb model using DRACO
-Render call is only called when the camera is rotated or the building is highlighted.
-this.renderer.info.render.calls returns 34, so I belive it is a good number.
-pixel ratio I set to Math.min(window.devicePixelRatio, 1.5)
-I set object.matrixAutoUpdate to false for all objects.

I am using antialiasing.

2

Without hardware acceleration it is hard to get a good performance, except for unreasonably simple scenes.

The situation is like someone pushing a car by himself, because the car engine is turned off, and asking is it possible to move the car faster.

Here are some general hints:

  • if you have a lot of small objects, convert them to a texture
  • turn on all features that will reduce the number of rendered polygons (like frustum culling, back side culling etc)
  • use the simplest materials that produce the desired effect
  • use LOD
  • use less lights, or simpler lights, remove shadows and transparencies

And here is a huge list of other hints: Discover Three.js: Tips and Tricks

2 Likes
3

no you did not, lol. you reduced its storage size. it’s the same as saying that I optimized the text file by archiving it into a zip. it is still the same geometry and textures after unpacking.

1 Like
4

Strange, because I lost the details of the truck models.

5

that’s because the compression is lossy. but 4K jpeg is still 4K at 10% quality,

1 Like
6

Thanks @PavelBoytchev @makc3d,

  • Stripes on the parking lot from now on are a texture, not a separate material = less geometry
  • I reduced the number of triangles in the wheels of the trucks
  • I used this
  • Shadow casting is now enabled only for buildings
1 Like