CODEWITHSUNDEEP
javascriptgoogle-chromethree.js
codeisforeva
codeisforeva

Reputation: 469

Poor FPS performance with antialias:true in Threejs

Whenever I enable antialias on the WebGL renderer, the FPS goes from 60 to about 25.

this.renderer = new THREE.WebGLRenderer({
    antialias: true
});

This seemed to start occurring after I added multiple scenes and had to manually clear the depth. Of note I also hit 60 FPS on mobile safari just fine but not desktop or chrome.

What might cause this?

Upvotes: 1

Views: 2189

Answers (2)

Eerik Kivistik
Eerik Kivistik

Reputation: 176

The answer by mjanisz1 is probably correct, in that it has to do with your resolution and dpr combination, since most browsers use MSAA, which is basically upscaled render and expensive. I would suggest you take a look at FXAA here https://github.com/mattdesl/three-shader-fxaa. It offers a quality-performance trade-off that is usually worth it.

Upvotes: 1

mjanisz1
mjanisz1

Reputation: 1516

The one of the things may be the resolution of your scene on desktop.

Also check the device pixel ratio.

Upvotes: 1

Related Questions