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!

4 Responses to Drawing a 3D Canvas on top of a 2D Canvas

  1. We have code for this now, if you look at tools/processing-helper.html and test/ref/index.html. We take a 3D canvas and get pixel data out, which you could just as easily put into another canvas.

  2. Tim Anderson says:

    I believe that the data property of a imageData object is read-only if it’s created with createImageData. I have drawn a 3d scene onto a 2d canvas with the following code.

    data:glContext.readPixels(0,0,w,h,glContext.RGBA, glContext.UNSIGNED_BYTE),

    Only problem is that is draws with a flipped y axis

  3. aSydiK says:

    Thanks for the tip. I was able to get it working… I talked more about it in my next blog.


  4. Pingback: PGraphics cont’d… « The Crazed Mind of an Aspiring Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: