How do I copy a Texture without reusing the Image part?

Questions
,
1

Three.js shares the images between multiple textures. I have a case where I want to “deep” copy a texture by storing a new image even if it’s the same.

What I’m trying to do is have a list of “screenshots” in an array so I can use the keyboard keys to go through them to spot rendering issues.

I’ve been fighting with this code below but no luck so far.

renderer.render( finalScene, camera );

var dataURL = renderer.domElement.toDataURL();
// var img = new Image();
// img.src = dataURL;
// document.body.appendChild(img); // Is this needed?

var rtTexture2 = textureLoader.load(dataURL);
rtTexture2.needsUpdate = true;

rtTextures.push(rtTexture2);

As it stands the array gets filled with new textures but they all reference the same image which gets stomped every time a new frame is rendered.

2

Hello fruki,

  • Can you share the context calling the image storing procedure (click event, loop)?

  • Have you set the renderer preserveDrawingBuffer=true?

  • Have you tried the code on a different browser to see if you get the same effect?

  • To get an image from the canvas (renderer), there is no need to use the textureLoader, you can directly store it into a DOM img object like this:

    var bufferimage = new Image();
    bufferimage.src = renderer.domElement.toDataURL();
    rtTextures.push(bufferimage);

For speed, you can try to store the data directly from the renderer:

rtTextures.push(renderer.domElement.toDataURL());

and retrieve it like this:

for(var i=0,l=rtTextures.length;i<l;i++){
var image = new Image();
image.src=rtTextures[i];
//use the image as needed (3D/HTML)
}

Hope this will help you move further…