Drawing a 3D Canvas on top of a 2D Canvas
May 28, 2010 4 Comments
… 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> 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
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!