<p dir="auto"><a href="https://github.com/mrdoob/three.js/files/3685544/texture-test.zip">texture-test.zip</a></p>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">In the attached project, there are a set of sprites created using the same texture.</p>
<p dir="auto">The first texture is created and it has an image object inside it. More textures are created from this image.</p>
<p dir="auto">If I don't set needsUpdate = true in the loop, none of the textures display.<br>
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.</p>
<p dir="auto">Why doesn't it display copied textures without setting needsUpdate = true and why does it keep uploading copies when needsUpdate is true?</p>
<p dir="auto">I would expect the first texture displaying would mean subsequent copies would display ok without needsUpdate.<br>
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.</p>
<p dir="auto">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.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r106</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">I use the Texture.clone() function a lot in my code, because I need to set the UV coordinates differently on every model, and this slows down the initiation of the page considerably. If I don't clone the texture, then the scene renders instantly. So something is not optimal in the rendering pipeline.</p>
<p dir="auto">It seems that the Texture.clone() function indeed creates a shallow clone that reuses the image, but then when data is sent to the graphics card these two textures are seen as having two separate images, sending the same image twice. Is this correct? Perhaps this is where the bottleneck is.</p>
<p dir="auto">Coming from XNA and DirectX, where textures are not much more than containers for bitmap data, I wonder why Three.js also includes UV data in them, instead of specifying UV once the texture is applied to a mesh?</p>