Before I begin let me explain what c3dl is. C3dl is a javascript library used to make writing 3D applications easier. Most notably it utilizing webGL for graphic accelerated rendering in your browser which is all the rage now.
Structure (before my upcoming rework) was taken from Processing.js. My goal was to take that test structure rip all signs of processing out of it and mash c3dl in. I've adjusted my scope a bit, currently my goal is to rework the tester so that it simply tests 2 canvases and spits the result into a third canvas. That way any method of rendering into a canvas can be used because a pixel by pixel comparison won't care how the pixels got there. Of course my contribution will inject c3dl into one canvas and an image into the other.
The purpose behind putting an image and a c3dl rendered scene is this. The reference images were taken at a point of time where that particular scene rendered properly. Comparing that to the same scene rendered now as you load the test. The idea is any changes that broke or changed the result of c3dl rendering would be apparent.
Some problems I encountered were:
- Wasted 2 weeks trying to generate the reference images. Until I realized you can either canvas.getPNG or even better right click "save as" and get a png.
- Learning c3dl, adding multiple canvases and multiple callback mains for each test case revealed many bugs, learning not to test everyone else code was a huge hurtle.
Future problems and goals:
- Break apart the tester and make it focus more on just the pixel arrays of canvases, not how the canvases were filled.
- Change the test case library to something friendly of a larger scale, based on feedback from David Humphrey. That I have no clue.
- Confirm that the pixel comparison and blurring actually work, so I can trust there results. It seems a bit questionable at the moment but it's out of my current abilities.
Links:
- Matrix hosting
- Github Repo