I am currently working on implementing an undo/redo feature for a 3D paint tool. The process involves storing the texture in an array after each draw using the following code:
var image3 = mesh.material.map.image;
var testCanvas = image3.getContext('2d').canvas;
var canvasData = testCanvas.toDataURL("image/jpeg");
undoArray[undoArrayCursor] = canvasData;
To restore the texture, I have developed the following code snippet:
var canvasimg = mesh.material.map.image;
var img = new Image();
img.src = srcimg;
var tmpcanvas = document.createElement('canvas');
tmpcanvas.width = canvasimg.width;
tmpcanvas.height = canvasimg.height;
var tmpctx = tmpcanvas.getContext('2d');
tmpctx.drawImage(img,0,0);
var pMap = new THREE.Texture( tmpcanvas );
pMap.flipY = true;
pMap.needsUpdate = true;
pMaterial = new THREE.MeshLambertMaterial( { map:pMap } );
mesh.material = pMaterial;
Although this implementation works well on Chrome and IE, it is encountering issues on Firefox. I am experiencing some latency where undo/redo clicks randomly display full black or correct textures. After a period of time (around 15-20 seconds), all textures are eventually displayed correctly as I cycle through undo/redo actions. It seems like Firefox may be taking longer to load the textures. Is there something that I might have overlooked in my code?