0

I'm trying to make an environement to train a neural network. At first I just made a 3d canvas and rendered that which worked fine (#canvas in the code), then I converted that to an image. Later I found out that I needed to convert the canvas to 2d to be able to get the image data I need to input into the AI (according to the advice I got here. I also discovered a bug which made me call animate() twice. The weird thing is that if I now try to remove either the image-rendering or the extra call to animate(), the 2d canvas wont render when the camera is moved in Chrome, while it renders irregularly in IE. Any idea how I can fix this?

I have cut down the code to the essentials in this fiddle, the animation loop is below:

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();

Edit: updated fiddlelink.

Bjathr
  • 85
  • 1
  • 10
  • 1
    Not sure what the issue you are talking about is (could be a lot of things given what you are doing) but all you need is to call `ctx.drawImage(canvas, 0,0)` just after `renderer.render()`: https://jsfiddle.net/2xLa6zqm/ Loading an is an async process, to draw a canvas on an other canvas, simply treat the source as an already loaded image. And for the why you can't grab the pixel data of your webgl context, read [this q/a](https://stackoverflow.com/questions/26783586/canvas-todataurl-returns-blank-image-only-in-firefox) – Kaiido Jan 23 '19 at 09:01
  • could it be that since loading an image is an async process, that the problem will be solved by using await? I've tried to read up on the whole async/await problems, but have a hard time grasping the concept.. – Bjathr Feb 20 '19 at 11:51
  • 1
    no es6 async/await is just syntactic sugar, it has nothing magic. – Kaiido Feb 20 '19 at 12:04

0 Answers0