how to use:


Baiban is 'whiteboard' in manderin. This was my project to try and make a web app that would scan whiteboards directly, but it would work for other documents too.


I wanted to make it easier to take a photo of a whiteboard or blackboard, because I sometimes take notes that way. Apps like this exist, but not any that exist in the browser alone. I wanted to make it so I could use GLSL to do the image procesing quickly and on the user's device.


The components involved would be:

Current Progress

I made javascript and shader code which allows a user to click the corners of a predefined image in order to choose what to 'scan.' Then, that information is sent to the shader to apply a transformation. Sometimes a transformation looks pretty good, other times the entire canvas is turned into a messy blur and I can't tell where the selection scanned is, although it is probably somewhere off canvas

Future Work

I'd like to implement the rest of the stuff, I want to make it so the selected transform is centered in the canvas first. One approach may involve doing some hand waving to properly zoom and offset the canvas so that the translated selection is centered. I already tried altering the target poly, and found that it's most helpful when it's the same size of the selection. Changing the origin had little to no effect. Another method may simply be just 'pulling out' the pixels inside the selection, performing the trnaslation just on those, and sending the new pixels to a seperate WebGL instance or canvas. I'm not sure what this would look like given how hard it is to debug GLSL shaders, but this may be how other methods may do it. Probably the transformed space looks a little like a rect bounded by the 'target' poly?

What I Learned


This article was pretty useful