Insane ram usage when scrolling around the page

Questions
1

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: https://three-memory-demo.herokuapp.com/

‘multiple elements’ example: three.js examples

2

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.

3

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