Potree中HTML5 Canvas与图片内存泄漏/占用过高问题求助

Hey there, let's break down how to tackle that memory leak/overconsumption issue you're hitting with Canvas and map tiles in your Potree project. I've worked through similar Three.js texture memory problems before, so here are practical, actionable fixes to try:

Common Culprits & Solutions #

1. Failing to Dispose Three.js Textures & WebGL Resources #

This is the #1 cause of memory leaks in Three.js projects. When you load new tiles and discard old ones, if you don't explicitly clean up the associated Texture objects, the WebGL context will hold onto them indefinitely—even if you remove the Canvas or Image from the DOM.

• Fix steps:
  • When a tile is no longer needed (e.g., it's outside the current viewport after zoom), call texture.dispose() to free the WebGL texture memory.
  • Immediately set the texture reference to null afterward to let the garbage collector pick it up:

    // Example cleanup for a tile's texture
    if (tile.texture) {
      tile.texture.dispose();
      tile.texture = null;
    }
    

  • For the Canvas element used to generate the texture: clear its context first, then remove it from the DOM and nullify the reference:

    if (tile.canvas) {
      const ctx = tile.canvas.getContext('2d');
      ctx.clearRect(0, 0, tile.canvas.width, tile.canvas.height);
      tile.canvas.remove(); // If it's attached to DOM
      tile.canvas = null;
    }
    

2. Not Cleaning Up Image Objects #

OSM tiles are loaded as Image objects, and even if you don't keep a direct reference, browsers may cache these images or hold onto them if the Canvas still has a drawing of the image.

• Fix steps:
  • When discarding a tile, reset the source of its associated Image and nullify the reference:

    if (tile.image) {
      tile.image.src = '';
      tile.image = null;
    }
    

  • Avoid reusing Image objects for different tiles without resetting them first—this can lead to unintended memory retention.

3. Lack of a Tile Resource Pool/Cache Limit #

If you're creating new Canvas and Texture objects every time the user zooms, without reusing existing ones or limiting the number of active tiles, memory will balloon quickly.

• Fix steps:
  • Implement a tile cache pool with a maximum size (e.g., limit to 50 active tiles at a time). When you need a new tile, check if there's an unused one in the pool you can repurpose instead of creating a new Canvas/Texture.
  • Use an LRU (Least Recently Used) eviction policy: when the cache hits its limit, dispose of the resources for the least recently accessed tile first.

4. Oversized or Unnecessary Canvas Elements #

Even small Canvas objects take up memory proportional to their pixel dimensions. If you're creating larger Canvases than needed for your tiles, this adds up fast.

• Fix steps:
  • Ensure your cropped Canvas dimensions exactly match the tile's required size (don't leave extra empty space).
  • Avoid creating hidden Canvas elements that aren't actively being used—remove them from the DOM immediately when they're no longer needed.

5. Using DevTools to Pinpoint Leaks #

Before diving into code changes, use browser tools to confirm what's causing the memory growth:

• Chrome DevTools Memory Panel: Take heap snapshots before and after zooming in/out. Compare the snapshots to see which objects (Canvas, Image, Three.js Texture) are accumulating without being garbage collected.
• Performance Panel: Record a session while zooming repeatedly. Look for steady memory increases that don't drop off when zooming stops—this confirms a leak rather than just temporary usage.

Final Notes #

Start with the texture/Canvas cleanup steps first—those are the quickest wins for most cases. If you're still seeing issues after implementing those, move on to the cache pool and size optimization.

内容的提问来源于stack exchange，提问作者SImonThrane