In-Browser View Reconstruction with WebGL

Michael Lapadula (mlapadul)

Your browser does not support HTML5 Canvas :(.

Load example Reset perspective Pick image
MORE EXAMPLES: Living Room Alley Monet Hallway




Single View Reconstruction is pretty well documented (Horry et. al 1997, Criminisi & Zisserman 1999), but doing this in JavaScript was way more than I bargained for. I ended up with nearly 2000 lines of JavaScript, split roughly evenly between math, GUI code, and WebGL code. The pipeline goes something like this:

  1. Given a photo, have the user select a rear wall and vanishing point
  2. Extract our five faces from the input (rear wall + four trapezoids, one on each side)
  3. Morph trapezoids to rectangles to construct a rectangular prism, with the image "painted" on the inside of it
  4. Find the view from an arbitrary position within this rectangular box, via WebGL

Difficult things: