Performance issues with bloom

Questions
1

When using bloom in this code, everything just grinds to a halt, trying to move the camera takes about 10 seconds. Even without the bloom (just using a render pass) the performance is horrible. I have a gtx 1650 gpu so I don’t think power is the problem but I might be wrong. If someone could have a look and see if there’s an obvious fix, that would be great, thanks! https://github .com/x-464/Web-Design
(its not letting me post a github link for some reason so I put a space between github and .com)

2

A super simple way of checking whether the issue is with your code or with your hardware is just to try running an equivalent official example - since these usually run at top performance.

If this is your code - then it doesn’t contain bloom / postprocessing / even the effect composer?

(An unrelated side note - your installed three and @types/three versions are mismatched.)

1 Like
3

Sorry, Github decided to not commit my changes so I just made a whole new repo with the updated files, all the bloom code should be in now, if you could have another look that would be great.
I can’t get it to let me post a github link but the repo name is the same as the old one just without the dash (x-464/WebDesign)

4 
function animate() {
  requestAnimationFrame(animate);

  // ...

  requestAnimationFrame(animate);
}

You fork bomb the rendering loop by requesting multiple frames after each frame is rendered. So for the first frame render you get only one call of animate, but for the second you already get 2, for the third you get 4, 8, 16, and so on and so on.

You should have only a single render loop - so only one requestAnimationFrame necessary in this case.

1 Like
5

I see thank you so much, I’ve been going through this for a few hours now but im still pretty new to threejs so I just missed it. I’ve gotten rid of and now it runs smooth. :pray:

2 Likes