Finally. Something.

Well… I got it working.
I was messing around just trying to make it save anything that wasn’t a 0’d array.
So I stuck alert(“stuff”); everywhere, in a mad stab at a timing based issue.

Who would have guessed…:
An Alert
what
Oh wow… It Works.
hey it worked...

 
If I call alert(); AFTER rendering to a canvas, and BEFORE saving the pixels it works fine.
setTimeout() works too:

function makePNG() {
   var image = pCtx.createImageData(p.width, p.height);
   arr = new Uint8Array(r.width * r.height * 4);
   rCtx.readPixels(0, 0, r.width, r.height, rCtx.RGBA, rCtx.UNSIGNED_BYTE, arr);
      for (var y = 0; y < p.height; y++){
        for (var x = 0; x < p.width; x++){
          var index = (y * p.width + x) * 4;
          var index2 = ((p.height-1-y) * p.width + x) * 4;
          for(var z = 0; z < 4; z++){
            image.data[index2 + z] = arr[index + z];
          }
        }
      }
   pCtx.putImageData(image, 0, 0);   
}
setTimeout("makePNG()", 500);

 
All three methods to save a 3Dcanvas to 2D work if I do this!
The other 2 being:

   // 1. get data url and write to canvas B
   //var data = r.toDataURL("image/png");
   //var img = new Image();
   //img.src = data;
   //pCtx.drawImage(img, 0, 0);
   // in case you want to try pasting the url in a new window
   //alert(data);

   // 2. draw 3Dcanvas to 2Dcanvas,
   //pCtx.drawImage(r, 0, 0);

 
 
Evidentially this is a time issue.
Speaking with ccliffe on IRC shed slightly more light on this.
He thinks its the RequestAnimationFrame call running *before* drawing the current frame.
(I have no idea what this means either, its o.k. :P)
Apparently it was done this way to workaround a timing bug in Firefox.

 
 
Applying my newfound knowledge to the sundae test suite:

   if (test.secondCanvas.src) 
      sourceLoader(test.secondCanvas, b, function () {
      alert("hax");
      whenDone('second');
      });
   }

Same Deal
Same Deal
Cool
Cool
Really Cool
Really Cool

 
 
It works, but this posed a new problem.
Sundae tries to run every test as fast as possible – all at once (multi-threaded too).
CubicVR can only render to ONE canvas at a time.
It just stays “running…” forever on the second test.
Was good while it lasted...

 
 
What has to happen next:

--> Sundae may not be the best framework for this, or needs to be heavily modified.
- The processing.js ref tester looked fantastic for this, I wonder if I can just use that?
 
--> Using setTimeout() is an extremely hacky way of making this work, It may not even work the same on every server/computer.
- Ideally this is an issue that can be fixed within CubicVR?
- Is this a bug, or just me incorrectly setting all this up?
 
--> What exactly does the "Test Creator" need to do, other then run code and give you a PNG back?
- How can I run the code that you paste in a text-box WITHOUT eval();

 
 
Is this enough for 0.2? I don’t even know.
What I do know is I’m going to keep working on this till Friday 😛

Leave a comment