three.js: Maybe a memory leak when using canvas to show images.

I think it should work with makePowerOfTwo() because only gets called on single map upload. But clampToMaxSize() is used by cubemaps and this approach would definitely break.

https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLTextures.js#L248

I do like the solution though, I think it makes sense to only have one canvas.

I’ll clean this all up.

For those who need workaround before patch is released. Add this code before your threejs code:

// See https://github.com/mrdoob/three.js/pull/14483
const consoleWarn = window.console.warn;
window.console.warn = function() {
  // filter "image is not power of two" and "image is too big" warnings from three.js
  if (typeof arguments[0] === 'string' &&
     (arguments[0].includes('image is not power of two') || arguments[0].includes('image is too big'))) {
    // log it to console without second argument, which contains reference to `image`
    consoleWarn.call(null, arguments[0]);
  } else {
    // pass other warnings without changes
    consoleWarn.apply(null, arguments);
  }
};

It seems like this issue is still exist in r92, I changed canvas size to 1000 * 1000 in webgl_test_memory.html , chrome crash the page after 10s

When I go to that link my page memory stays stable and does not rise. ( latest Chrome, OSX )

Unless I open the console. I believe it is the console messages that are consuming the memory. Try it with the console closed.

@tommytee An online little test using your fix: http://139.196.28.110/npot/index.html

You can see the warning: [Modified] THREE.WebGLRenderer: image is not power of two (240x260). Resized to 256x256 Notice that I added a “[Modified]” in front of this warning sentence to make sure that your fix is in use.

This page’s memory usage increased rapidly.