unrealBloomPass poor performance on MacOS Safari with Intel

Questions
,
1

Hi,
I experience a notable drop in FPS when using bloom effect with three.js animation in Safari.
Using this example by three.js on MBP 2020 with intel i7, it barely gets above 20 fps unless I decrease canvas size to like 400px wide (then it gets to 60).

It gets stable 60fps in Safari on a MacBook Air with M1 though.

Has anyone explored this? Maybe came up with some hacks?

2

This is full screen width

image
image1920×1007 86.5 KB

And that’s when I squeeze the canvas. Note that apparent size of glowing elements doesn’t even change that much.

image
image1920×1009 135 KB

Also worth noting that works perfectly fine in Chrome on the same machine.

3

Problem is reproducible on both 15.6 and 16.0 versions of Safari.

4

After doing some more research I found that Safari has experimental feature ‘WebGL via Metal’ enabled by default. When I turn it off, I get the desired 60fps.

And it seems to have problems on a big canvas even without Bloom (though bloom does exacerbate it greatly).

Unfortunately I found no workaround that would improve user experience for Safari users, short of asking them to disable the feature.
Would really appreciate if someone sends me a hack to make it work :hugs:

1 Like
5

I’ll be honest, I have no problems with bloom on iOS or any other browser that I’ve tested it on. A lot depends on what you are doing with it I guess but I run Models with bloom 60FPS all day. I had a model using it constantly and it was up on a public URL for months. It was using strong bloom and it ran at 60FPS on iPhones and Safari with no problem. With a shadowmap and standard materials and directional lighting following the camera. However, I’m using Bloom with instancing so maybe that’s the issue? I notice the example you provided is running far under optimal performance. Not sure why that is but I have no issues running bloom. Bloom can be tricky, I have had times when it was little slow, but it turns out that I really had bad understanding of lighting, color, and intensity. When I say “intensity”, I mean the overall stress you’re putting on the GPU with your light settings. Bloom is also increasing the frame rate so take that into consideration.

These are my Bloom settings for that model. Of course I have a renderPass and a Composer.

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.001, 5 );
  renderer = new THREE.WebGLRenderer( { antialias: false, powerPreference: "high-performance" } );   
            
  let bloomPass = new UnrealBloomPass(
      new THREE.Vector2( window.innerWidth, window.innerHeight ),
      1.0,
      0.4,
      1.25
      );

      bloomPass.threshold = 0;
      bloomPass.strength = 0.4;
      bloomPass.radius = 0.225;

I don’t know if I really answered your issue other than to say that it’s more performant than that. This model runs on iOS at 60FPS:

bloomdemo
bloomdemo1920×963 99.4 KB

1 Like