0.9.7 Contribution

Well, I was kind of distraught in my last few posts.  I didn’t know what I was doing differently from some of the things other people were doing.  The code was almost exactly the same (minus obviously different variable names).  I found out later, after taking apart Processing.js and reducing it to less than 4000 lines (it’s currently sitting at 11000+ lines), that the problem was not the way I coded the 3D texture.  The problem was the way we were redrawing 3D objects without a call to the background function.  Or at least, if we didn’t call background in the redraw loop.  I ended up changing my examples to working ones by adding background to the redraw loop.

After I did that, I made sure to make a ticket to fix the background redraw problemAndor said he’d fix it, so I assigned it to him.  It made it to the repository easily enough as the fix was one line but I’ve yet to test it with my work.  I have been working on other things to make it for the 0.9.7 release.  Hopefully, I can test out the examples soon though.

The other function I was working on was textMode.  One particular function of textMode, the default, was already implemented.  The other use of the function was something that I didn’t fully understand and needed the use of the beginRaw function that we will not put in until later.  This textMode function was the reason I was looking at createGraphics again.  The functionality I was working on was the textMode(SCREEN) parameter.  This is basically a heads-up display (HUD).  It writes the text you want on screen and removes / disallows any transformation changes affecting objects in the scene.  So, it becomes written to the screen and unchangeable through transformation like a heads-up display in video games.

To get this working, I used another Processing instance (which is what createGraphics was for) and rendered the text there.  I, then, textured that Processing instance/canvas onto a quad according to the coordinates given.  I made sure that the quad wasn’t affected by transformation calls through pushMatrix and popMatrix functions.  I did find a problem when using a white fill on a transparent background and filed a ticket for it.


Still lost (createGraphics)

Well, it looks like I’m still on my own for now.  I’m still currently in the dark on reasons as to why it’s not working.  My last post indicated most of the code and test cases I’ve done.  I haven’t changed the code very much but I have improved on more specific test cases to try to get to the root of the cause.  Much to my dismay, however, the new cases haven’t revealed much.

Since my test cases before proved that this worked without Processing.js, the next logical step would be to incorporate Pjs into the equation and see what happens.  My first test case (picture below) involves implementing Pjs on a canvas and then throwing that canvas as a texture on a 3D WebGL object; in this case it’s a cube/box.

No problems, so far.  My next test case switches roles for the two canvases.  It comprises of Pjs texturing a quad.  The texture comes from a native canvas with no Pjs on it.  Nothing broken, still.  The next test case was given to me by one of my CDOT co-workers, Matt Postill.  This test case entails that both canvases use Pjs.  However, instead of using createGraphics to implement a Processing.js instance through the original Pjs instance, both canvases already have Pjs and we’re connecting them through the texturing of the quad.

This still works.  At this point, I’m running out of ideas and I’m starting to grasp at straws.  I do still have an idea, though.  My theory, since the quad texture is picking up the supposed first frame of the second canvas, is that the texture is only seeing the original canvas state and not seeing any updates to the canvas through Pjs (this is actually a stupid theory in hindsight considering Pjs does all it’s drawing and filling through canvas functions).  I test this by drawing and filling a square in the sketch through the native canvas functions.  This is broken but I was hoping it would work in this instance.  And I’m still at the point I was at since my last post… lost.  My next step will probably be to strip Pjs of unnecessary components and try to see if it’s anything in Pjs that’s preventing the redraw of the little canvas in the big canvas.

Looking for help… (more createGraphics stuff)

I’m at a block here…

When I last talked about createGraphics, I said I had it working with 3D.  This was partly true.  I had an oversight and assumed all was done.  3D was working as long as the initial context for the sketch was 2D.  I figured this out last week as I was trying to use createGraphics for textMode.  My naïvety made me think this would just work while the context was originally 3D.  Of course, it didn’t.  Trying to render 2D or 3D on an original 3D context didn’t work.  That’s because we didn’t handle it.  Now, I’m trying to fix that to implement textMode.

Since I couldn’t get it to work, I started by stripping Processing.js from my test case.  I went with Learning WebGL lesson 5.  This was my initial test case and my objective at the beginning was to use another canvas as the texture.  That was simple enough to get working and the example of that can be seen below.

So after I got that working, I did a double objective test.  The first objective was to get the test working with a dynamically created canvas (like I did before).  The second objective was to try and make it interactive (kind of).  The interactivity, well isn’t really interactive.  I just basically got the background of the canvas to change colours.  I, also, compared code to another example much like the one I’m trying to create.  Anyway, here’s my example:

This seemed to work okay as well, so my next task is putting it in Pjs.  This is the portion I need advice/direction on.  I applied all my knowledge of the existing subject and am still having trouble.  The test case is a little different as I’m rendering a quad instead of a box and the actual object is more interactive than just the background of the canvas changing colours.  However, it should still work and for some reason the image inside isn’t refreshing.  Here’s the test case online:

Mouse over the middle of the left canvas

Now that I’ve given you background on what my objective is, I’ll start talking about the code.  First, we’ll begin with the Pjs sketch.  I’ve stripped out and commented the unnecessary code.  That’s why the background for the bigger canvas is defaulted to grey.  So, the only really working factor is the quad is getting drawn and it’s using the smaller canvas as it’s origin.  The important part of the sketch is the image() function… it’s the point where the smaller canvas is being rendered onto the quad.

I took the important part of the image function out and put it in this pastebin.  This is the part that applies to this subject.  Basically, it takes all the information from the p.texture and p.vertex calls and renders the quad at p.endShape.  p.texture is where the texture is binded to the quad.  Here’s the important part.  Now, the binding for this almost exactly the same as my Learning WebGL example above.  However, I’m still getting problems with the redraw/re-render.  So, it could be within the endShape that I’m getting problems.  The section that renders the quad is called fill3D.  That’s where the points and values get passed onto the program object which uses our shaders.  Now, if you’re wondering about the shaders… here they are.  Could anyone out there guide me on where I’m going wrong?  I am stumped.