Drawing a 3D Canvas on top of a 2D Canvas

… is apparently not yet possible on Minefield (as per my conversation on Mozilla IRC).  It’s not possible in other browsers yet either.

<aSydiK`work> does anyone know when trying to change data in an ImageData object, if the data values have to be exactly the same?
<aSydiK`work> I’m reading data that comes out as Uint8Array and need to put it into a Uint8ClampedArray and it’s not going through
<bz> hmm?
<bz> how so?
<aSydiK`work> I’m using canvas.context.createImageData and I’m trying to change the data in there but it’s of type Uint8ClampedArray and I’m trying to throw in a type Uint8Array
<aSydiK`work> I was just wondering if it was even possible
<vlad> aSydiK`work: why would you want do that?
<vlad> the ImageData object requires the semantics of Uint8ClampedArray
<aSydiK`work> well basically, I’m trying to get a webgl-context canvas into a 2d-context canvas
<vlad> to draw from one to the other?
<vlad> in theory drawImage will take any canvas, but that’s broken currently for webgl canvas sources
<aSydiK`work> I’m trying to draw the 3d canvas onto the 2d one
<vlad> I could just fix that for you 🙂
<aSydiK`work> that would be awesome… it’s for processing.js 😀
<aSydiK`work> vlad: what should I do to expedite the process?  did you need me to file a bug or something?
<vlad> there is one already I believe
<aSydiK`work> awesome

After spending the day trying to get a workaround with the image part of the library, I ran into a roadblock.  Unfortunately, this means that the 3D functionality of PGraphics will have to be delayed until canvas.context.drawImage is implemented within the 3d scope.  I’ve been trying to imitate what the already existing 2D PGraphics does in PJS.  2D PGraphics was written to take a new canvas, plaster pixel data on it and then draw the canvas on top of an existing canvas.  I tried doing the same thing through WebGL’s readPixel function.  readPixel returns a Uint8Array data object.  I needed to use an ImageData format… so I built a 2D canvas, called createImageData and tried to set the data.  My final outcome was the following (note – you need a WebGL enabled browser to see):

This is where I was running into formatting issues.  It just wouldn’t render the middle canvas.  So I asked for help, which led me to the #jsapi channel in Mozilla IRC.  And that’s where Vlad told me they were working on it.  Hopefully, it gets in soon so I can work put PGraphics in PJS!


0.7 release

I was a little hard-pressed for this week’s release.  Mainly because I thought the release to be next week.  I did have some stuff done before but I wasn’t in much of a rush to finish it, until I found out it was to be out this Monday morning.  I got in gear but still had much trouble with beginCamera() and endCamera().  The functions you see there seem pretty simple but having to use the inverse of camera threw me for a loop.  I had to look for the problem everywhere in the code.  At one point, I rewrote the whole invert function only to find out it was working properly.  Some key objects I was missing were dependent on deprecated functions.  At least, the code within the Processing native said they were to be removed from the future.  In that sense, my colleague decided it wasn’t needed in PJS.  I quite agree with him still.  It’s not completely needed, some of those inverse functions anyway.  I could and will probably recycle some of the regular functions and just apply the inverse.  I did add them all for now though.

That’s not all there is to it either.  As I was submitting an example through git, I found a bug that still currently resides with my checked-in code.  It may seem like it works properly, but insert a camera() function in there and the changes don’t take.  That is definitely a problem because suppose it’s put in a draw{} statement.  It wouldn’t have an anchor that can put it back to place… it’ll just continue to transform.  It’s somewhat of a big bug that I can’t finish tonight.  I’m leaving it up to the reviewers to pass or fail.  I doubt it’s going to pass… I’m not sure I would pass it either.

On a lighter note, I was able to finish the dist-3d days ago.  I was just so wrapped up with beginCamera() and endCamera() that I never wrote the tests for it.  I wrote my first unit tests earlier today and it was a breeze.  I’m definitely glad that was added to the PJS scope.  It definitely makes unit tests much easier.

Anyway, off to bed.  Maybe someone will have read this blog and figured out a way to help me with the camera.  Dave was right.  It was my fault for waiting til the last second to ask for help.  I’ll blog more soon… still have to get PGraphics off the ground.

Back to work

I’ve just finished reading week and it’s time to get back to work.  Getting back into the groove is always hard, including blogging again.  I realize it’s been a while since my last post and it was mostly due to midterms and hell week.  This is going to be a long post due to having to wrap up previous releases and talking about the upcoming 0.7 release.  I won’t make this intro too long so I’ll just get on with it…


In this release, we got 3D up and running!  It’s fairly old news but exciting nonetheless.  I’ve taken some of Corban‘s examples (which he was using to show if the functions were working or not) and put them on my matrix account.  This first demo was a test with translate and how it was working improperly when first put in (please note that you’d need a WebGL enabled browser to view 3D… like Mozilla’s Minefield).  It has been fixed and is currently working within that demo.

The picture above is a comparison of Processing and Processing.js.  It links to the other demo that previews the ortho() function is working as intended.  And by that, we mean it’s working exactly how Processing is doing it.


I didn’t do too much for the 0.6 release.  Like I said, I was a bit busy with midterms and assignments.  I did try to do what I could and pitch in where I could help.  I did more than half the peer reviews submitted.  I’m not going to list them all since there were so many… but almost all of them did end up getting checked-in so you can look through this list if you wish.

I did add one function, applyMatrix().  It wasn’t a tough one to add… it was mostly just a simple wrapper but I didn’t expect some of the complications I did have.  I ended up making a demo/example to make sure it worked properly.  More details about my problems can be found here.


For this upcoming release, I’m going to finish beginCamera() and endCamera().  So, we can have some 3D Camera movement.  I’ve already got an idea of how this can be implemented involving the modelView and cam matrices.  There maybe even some use of the 3d matrix stack that I’ve previously created.

I’ve also added two more items to put in for this release.  One is to implement a working dist for 3d.  This should be fairly simple by using an existing PVector.dist() function and wrapping that to work with this.  The second is an important function which I’ve yet to determine if it will be easy or hard.  Mainly due to my not having that much experience with this particular problem.  I’m going to implement the much needed PGraphic.  Now, this could be very elaborate or as simple as recalling the p object into a buffer.  I’m going to talk to Corban/F1LT3R/humph more about this particular function/object.  I’m not exactly sure on where to start either.  So, that would be some good advice to begin with.

Well enough chit-chat… that’s my update and it wasn’t as long as I thought it would be.  Now back to work…

Testing camera, frustum and perspective

Anna, our new project manager, was doing a follow-up on me yesterday.  She brought up a valid point of me not blogging enough (which everyone already knows as well, if you’ve been following anyway).  I was stuck on a problem the past few days and just let it go, as I was busy with other things.  But I realize that if I blogged about it, I could have gotten the answer while I left it alone.  I did find the problem when I threw it out on IRC and people read it and provided feedback.  I ended up filing a bug (267) for the problem to get looked at in the future.

Anyway, I did get my tests done and the results were working as intended… and by that I mean my matrices were lining up with what Processing has…

I’m still thoroughly testing PMatrix3DStack… as there’s not default tests with that, I’m just plugging in some random numbers.  The biggest concern is mult… if it’s being multiplied properly.  If I can finished PMatrix3DStack testing tonight, I should be able to write a test for ortho() as well.