Texture reuse memory issue

[adevart]

texture-test.zip

Description of the problem

In the attached project, there are a set of sprites created using the same texture.

The first texture is created and it has an image object inside it. More textures are created from this image.

If I don't set needsUpdate = true in the loop, none of the textures display.
If I do set needsUpdate = true, it uploads each copy of the same texture separately to the GPU and with enough copies runs out of memory.

Why doesn't it display copied textures without setting needsUpdate = true and why does it keep uploading copies when needsUpdate is true?

I would expect the first texture displaying would mean subsequent copies would display ok without needsUpdate.
Once a base image is uploaded to the GPU, it doesn't need to be uploaded again. Can there be an internal method for tracking which webgl textures have already been created, perhaps based on the source URL so that it checks if it's already on the GPU and if it is, reuse that instead of uploading another copy.

In this example, the texture creation can be taken outside of the loop but the reason I want it to work inside is that I need to be able to change the parameters for each copy.

Three.js version

• r106

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

Once a base image is uploaded to the GPU, it doesn't need to be uploaded again.

It's not possible so far that textures share the internal WebGLTexture object, see #5821. One way to solve this issue is the introduction of THREE.Image like mentioned here: #5876 (comment)

I'm going to mark your issue as a duplicate of #5821, okay? Please proceed the discussion there.