To have a good performance

Questions
1

What should I do to have a good performance on every device, every browser?

I know MS Browsers has really bad engine, but at least I need to let people can do some interact on the browsers.

I have 210,792 triangles, and low performance issue on not only MS browsers but low-spec device.

I guess may the problem is too many triangles to render, but I want to solve it without re-creating 3D objects(but if I have to, I will do. )

2

Please post more details about your scene? Or share code or a demo, if you can.

210K triangles could be fine, it depends on how many meshes, materials, textures, etc. you have.

3

sorry i’m not at office so I cannot attach the code or demo.

Only I can explain about the scene. It’s working fine on usual computers.

I load 9 objects with FBXLoader, and the biggest one’s size is about 7Mb.

and the others are about 150~200KB.

I am rotating the objects with object.rotation.y += 0.01;, and when I check the triangles with renderer.render.info.triangles, I got 210,792.

One big island explains about a city, which is the biggest file. and the others are clouds, tress, etc.

I’m rotating the city, and I have low performance issue.


function animate() {					
	animateObjects();  // let city rotate object.rotation.y += 0.01;
	var delta = clock.getDelta();
	if ( carmixer && window.location.hash == '#Main' && objectLoaded == 1 ){	
		carmixer.update( delta );	
	}
					
	stats.update();
				
	render();
	requestAnimationFrame( this.animate );
}

function render()
{			
    renderer.render( scene, camera );
}
4

Sorry, I can’t tell you how to improve performance without more information. 9 models and ~10MB of data could render very fast, or very slowly, depending on various issues.

One useful test would be to see how many meshes you have. Try:

var numMeshes = 0;
scene.traverse(function(o) {
  if (o.isMesh) numMeshes++;
});
console.log('There are ' + numMeshes + ' meshes in this scene.');

Ideally, with 9 models, that would be about 9. If you have 100+ that could be part of the performance issue. Note that the test needs to be run after all of your FBX models have finished loading.

5

Thanks.
I have 204 meshes in this scene. and it would be the reason models are including so many meshes.

6

There are still many variables to consider.

Reducing the number of those meshes to 1 would be ideal. Turning off scene.autoUpdate could another way to remedy this. It all depends on what you’re trying to do.

Also in the end, some devices will simply be incompatible with something you are trying to do. You could use some material, that triggers some shader to compile in such a way on a certain device to not play well together. It’s an overall drawback of WebGL.

7

Thanks for your advice.

I would check it after I redesigned 3D object if I still have low performance.

8

Do 6M triangles cause performance issues?

9

if after everything that was suggested to you here you still face problems …

we were in trouble over a major site that had to be fast on any device, from weakest to oldest. the problem was that if we had our full effects chain, highest res, etc, the app would just crumble on some devices, but ran perfectly fine on others. and the solution was this: https://twitter.com/0xca0a/status/1563958783805620225

drei#performancemonitor (source)

this would be simple to port into vanilla. what it does is allowing the app to find its sweet spot itself, it measures performance runtime and goes through gradual changes in quality (that you control) until the framerate is within a safe margin so as to not flip flop.

the twitter demo above btw deals with instanced meshes and just adapts drawrange to framerate performance. but it could be anything, from changing dpi to reducing lights or whatever.