Insane ram usage when scrolling around the page

Hi all!
I’ve been trying to figure out why my code’s memory usage is horrible when scrolling the page.
What I have is a page with a single canvas and multiple cameras & scenes (based on the ‘multiple elements’ example)
What happens is when I scroll the page the memory usage jumps from a few hundred megabytes to 3-5 gigabytes.

What I tried:

  • Switch from render on demand to normal loop rendering. Memory usage was fine when not scrolling, went insane as soon as I started scrolling.

Browsers I tried it in:

  • Chrome
  • Edge

Repository with code: GitHub - Degubi/Three-Memory-Demo: ThreeJS demo repo
Demo hosted on Heroku:

‘multiple elements’ example: three.js examples

The problem is that you are creating for each scene three shadow casting point lights with 1024x1024 shadow maps. I’m afraid this setup does not properly scale.

Decreasing the shadow resolution from 1024 to 256 solved it!
Thank you!