Refocus – PSIParser

So, I’ve taken a huge step back in terms of blogging.  I just haven’t felt like there’s been much to blog about.  I’m here to refocus because I’ve made what I consider “huge wins” with working on XB-PointStream.

I did feel like I didn’t have much to blog about.  I was having huge problems in the past.  I even approached certain knowledgeable people in the field and they couldn’t help.  It was all a very frustrating experience.  I found the problem and it was one of those really minor ones that can ruin your whole focus.  It was almost as bad as a missing semi-colon… but harder to debug because there were no actual errors being given by the program.  And now I’m sharing so there can be a bit of guidance for those that need it.

First, let me tell you about how I’ve gotten to this point.  I was able to make an example that provided me with the right data by taking binary information and translating it to something comprehensible.  Now, the next step was to use that knowledge and transcribe it into our XB-PointStream system.  This is the point where in I start to have problems.  While plugging in my knowledge and adapting it into parser form, I forget an integral part of reading binary.  Which was:

AJAX.overrideMimeType('text/plain; charset=x-user-defined');

The above code is very important… if missing, the binary values you’re receiving from your XmlHttpRequest will not be correct.  This little bug was my bane for a long while.  I could not understand how I could get it to work with one example and not my new parser.  This lead to my taking apart my parser in numerous points and not being able to see my problem.

After resolving that huge issue, fixing up this parser has been much easier.  I’ve got this example of mickey loading without any normal information.  If you click the picture above, you will see that I have also got it working with our acorn example.  This shows the dynamic properties instilled within the parser.  I’ll have more of our examples up soon.  Soon, lighting will also work as soon as we can adapt our framework to take unsynchronized vertex attributes.  That’s what is coming for our 0.6 Release.

XB PointStream at FSOSS 2010

The Free Software and Open Source Symposium has come and gone (nine days ago) and I’ve still yet to blog about my presentation.  In fact, I just plain haven’t blogged in a while.  I’ve fallen out of habit.  It could be that I’m too busy or that I still don’t like writing about things I haven’t completed.  Either reason is no good and inexcusable.  I’m here to rectify that and talk about my presentation at FSOSS 2010.  I may, also, provide an update (later on in the day) on what’s going on with XBPS.

It was, overall, a good experience.  I’m a little less scared when it comes to public speaking now.  My fellow CDOT workers and I had practice runs.  We also gave constructive feedback on how we can improve our presentations (special thanks to Mike Hoye for sitting through our presentations when he didn’t have to).

The actual presentation ran a lot shorter than I had wanted it to go.  It ended up being only fifteen minutes.  I didn’t want to really get into too much technical detail and was going more for a broad explanation.  The interest came through after when the question section matched the speaking time.  However, looking back, some of those questions should have really been included in the presentation.  By trying to slim down the presentation so much, I made it maybe a little too precise.  In any case, I think it went well and did generate some interest in the project.

My slides are on the web for you to view (they’re made with HTML5): click here.
If you wish to see the slides and hear my talk then follow this link:  click here.  (Also, maybe I should’ve repeated the questions asked.  I’ll go through the question and answer section and put down the questions asked in order on this blog for you to follow along).

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.

XB PointStream 0.4 Release!

So, I haven’t really talked about my new project a whole lot and now I’m going to change that. This is somewhat a pre-emptive release blog as the release isn’t really finalized and probably won’t be until early next week. I just really didn’t know what to name my blog.  I, also, apologize in advanced as this blog will not be very visual… but feel free to click on the links and I’ve also got a sample demo of the PSI file reader below.

Anyway, XB PointStream is on a good course and we’ve got some functionality working with it so far.  Andor Salga will be implementing items like streaming asc files and webgl arrays for this upcoming release.  As for myself, I’ve been working on PSI files and reading them for the past few releases.  I’ve included the framework for reading PSI files and the XML tags used for said files.  It reads the binary in the file and puts it in a variable for now.  I’ve got a sample demo of it in action (note: due to the size of the file, it does take several seconds… the “test” word will turn into ascii binary).

So I’ve implemented the framework, but the actual conversion of the binary will take a little while longer to implement.  Mainly, it’s due to the fact that I still have to decipher the reader they gave me and make better sense of it to finally convert it.  It’s probably going to take a few more releases before I get a finalized working version.  There’s also still plenty to do in the meantime though.  Like with the current release, I’ve also implemented a few easy functions.  One was a simple default function that sets some of the variables back to their default values.  The other was taking sephr‘s tinylog lite logger from Pjs and put it into XBPS, so that we have a simple logging mechanism.  This will probably be changed later to our own custom one, once we have time to implement it.

I’m going to leave you with a bunch of links relating to the project:

Wiki Page – clickity
Github Repo – clickity
Ticket System – clickity
Twitter – clickity
Blogs – clickity

Toronto WebGL Community

Left to Right: myself, Benoit, Andor and Matt

This is the Toronto WebGL Community!  Or at least the people we know that currently actively work on it…  if there’s more of you out there, feel free to let yourself known and get involved by posting on the comments of this blog.  I’ll make sure the right people see your stuff.

Anyway, this picture was taken at the Mozilla Toronto Offices.  Yesterday, I spent the afternoon with some of my co-workers talking to Benoit Jacob about the WebGL implementation within Minefield.  We were doing some profiling and giving feedback on what changes could be made to provide better support for those using the WebGL API through Firefox/Minefield.  So if any of you have suggestions, specifically more about how it’s implemented in Minefield and less about the actual WebGL standard, feel free to leave a comment below and I’ll do my best to get the idea to them.

I, also, learned a couple of neat tricks.  One such is a built in profiler in Linux that I could use on my desktop at work.  It will make bottlenecks a lot easier to find.  The command is perf record, which actually only came out to Ubuntu on a recent release.

We discussed other performance boosters, like TypedArrays.  This is a new proposal to the Javascript language and will be somewhat monumental considering JS is a type-less language.  This introduction will help improve WebGL code and will pave the way for the final release of WebGL.  It just has to be approved by the standards committee.

***NEW*** Toronto WebGL Mailing List (created by Benoit) – clickity

createGraphics 3D (PGraphics) working!

I actually got it working last Tuesday and the working example of it has been up since then.  I just wanted to polish it more and maybe make a different example to show the process in this writeup.  However, I’ve been busy since last Tuesday and prolonging this announcement seems unwise so I’m just going to go with what I have.

createGraphics now runs with a 3D environment!

Note: you need a webGL enabled browser to see 3D

After a couple of months of thinking and deciphering the brilliant hack that John Resig put in for createGraphics/PGraphics, I finally got its 3D counterpart working.  Actually, it wasn’t really a couple of months… maybe altogether about 2 straight weeks.  I’ve had to test whether it was possible first and the results were very good.  It also helped me file bug 571061 with Mozilla.  Once I had it working without Processing.js (PJS), I knew what the process was to get it working with PJS.  At first, I implemented it with pre-existing canvases.  Once that worked, I changed it to work with dynamically created ones.  It turns out that I was already really close and in the end the code only needed a few modifications.  And now we have createGraphics working with the 3D scope as well!  Maybe I’ll put up a better example sometime soon involving great uses for this new feature, like mirrors suggested by F1LT3R.

Curved lines in 3D context!

0.9.3 code freeze has come and gone.  Well, it’s not really a code freeze; more of the fact that the main PJS development team will be looking at other projects and sub-projects for a couple of weeks in the summer.  So, the development of PJS will be a little slower over the next month or so.  For 0.9.3, we pushed out as much working code as possible and moved the rest that we deemed unimportant enough before this freeze.  There are still a few major functions that we have to get to and probably will be taken care of before 1.0 is released.  Anyway, I just wanted to give you this brief update but what I really wanted to talk about are the bezier and curve functions.

These primitives are mainly used in 2D sketches for PJS; only because 3D didn’t support them yet.  Now, we can get sketches like the following working in browsers:

(Note: WebGL enabled Browser needed)

That demo is a little slow and needs major optimizations on our part.  Also, there are still known bugs that we are looking to get fixed at a later date.  Trying to fill curves or beziers right now does not work very well, so I would suggest not doing it (if anyone can provide information on this subject, it’ll make for a quicker fix).  Despite fills not working in curved lines, I was able to get it working (using a workaround) on 3D ellipses.  However, it does come with it’s own flaw where in pixels are fighting for space.  I, already, have a working idea on how to fix that.  It involves dynamically setting the polygon offset on each new created object to be 1 pixel higher than the previous one in those coordinates.  It sounds simple to explain but I have a feeling I will run into some expected and unexpected problems.  We’ll see.  Before I get to these new bugs though, I’m going to fix PGraphics slowly.

PGraphics cont’d…

I said I was finished with working on PGraphics; turns out I’m a liar.  I was working on it for a day more, with much encouragement from Dave.  Through our meeting yesterday, he helped me see the model of disassembly to see if it was possible to even do.  For debugging the issue, he suggested I strip PJS from the equation and see what we can do with just canvas.  So, I took the source code for one of the Learning WebGL examples and used it for my test case.  I was having more problems with it and was almost ready to give up.  Dave suggested that I strip down the example more; remove the movement from the objects and pre-render the initial canvases instead of writing them in the background.  In the end, I had a working test case.

(Note: need a WebGL enabled browser)

The problem I was starting to experience at the end of working last night was that when writing to a buffer (instead of a pre-rendered canvas), I was getting errors on Minefield.  The new example was working on Webkit/Safari though (with a few resize bugs).  I think the bugs/problem had some sort of size issue with the buffer but I couldn’t look into it more.  I’m moving past this problem for now as I have other items I need to fix (and a greater amount of them).  Hopefully, with this basis, it won’t be too hard to solve the problem the next time I look at it.