Отрисовка холста зависит от несвязанных элементов?

Question

Я пытаюсь создать среду для обучения нейронной сети. Сначала я просто сделал 3d-холст и отрисовал то, что хорошо работало (#canvas в коде), затем я преобразовал это в изображение. Позже я узнал, что мне нужно преобразовать холст в 2d, чтобы иметь возможность получать данные изображения, которые мне нужно ввести в AI (согласно совету, который я получил здесь . Я также обнаружил ошибку, из-за которой я дважды вызывал animate (). Странная вещь в том, что если я сейчас попытаюсь удалить либо рендеринг изображений, либо дополнительный вызов animate (), 2d canvas не будет рендериться при перемещении камеры в Chrome, тогда как в IE это происходит нерегулярно. Любая идея, как я могу это исправить?

Я сократил код до необходимого в этом скрипка , цикл анимации ниже:

function animate(){
requestAnimationFrame( animate );
movement(); 
hudUpdate();
//fps-calculation
newTime = Date.now();   
sumTime += (newTime - oldTime);

if(framesElapsed === 60){
    document.getElementById("fps").innerHTML= 
(Math.floor(600000/sumTime))/10;
    framesElapsed = 0;
    sumTime = 0;
} else {
    framesElapsed+=1;
}

oldTime = newTime;


//Converts the canvas to an image and then draws it on a 2d surface. 
//  CHECKT THIS! Has to be run before renderer.renderer, but will be blank 
if movvement occurs and the segment below is left out.
var image = convertCanvasToImage(drawingSurface);
var AIInputImage = convertImageToCanvas(image);

renderer.render(scene, camera); 




// CHECK THIS! the above conversion stops working while moving unless the 
the line below is present, no idea why..

$("#interim-img").attr("src",drawingSurface.toDataURL("image/png"));

}; 
animate();
animate(); 

Редактировать: обновлена ​​ссылка на фиддл.