To have a good performance

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. )

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.

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 );
}

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.

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

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.

Thanks for your advice.

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