FisheyeGL is a new online tool for removing lens distortion ("fisheye" effect or "barrel distortion") from images, especially those taken with a #GoPro or Mobius Action Cam (Public Lab's Infragram Point & Shoot). Note that another way to do this is to install a different lens on your camera if that's possible (see #lens-swapping).
For example, the left image below has a characteristic "bulge" from a wide-angle lens. FisheyeGL can (like other #lens-distortion techniques) remove this, resulting in a "flatter" image, like the one to the right, below.
This work was made possible in part by by NASA through the AREN project.
With a real image, the effect is as shown below, again left/before, right/after. This is especially useful for making maps in MapKnitter, because distorted images make it extremely difficult to stitch images together into a map -- it's like trying to flatten a bunch of orange peels into a flat surface (or something).
Note that the corners of the image are cropped out when you do this, however!
Settings
The distortion varies for different lenses. Sliders are provided, and while each has a meaning in the formula used to correct the distortion, the easiest way to find the right settings is to take a picture of a grid (a checkerboard or graph paper, or a tiled wall) and play with the sliders until the lines are straight. Then you can use the URL of the page (it'll change as you tweak the sliders) to open to that exact setting again.
Processing lots of images
If you drag a different image onto the canvas, it'll save the previous one (distorted) below for download. So you can drag a set of these onto the page one by one, and download them later. But be careful; sometimes large images can make the page crash, so save your images periodically so you don't lose them!
Presets
The settings for a given camera and lens stay the same, so we've collected some for common cameras used at Public Lab here:
- Mobius Action Cam (default lens): https://jywarren.github.io/fisheyegl/example/#a=1.048&b=1.059&Fx=0.09&Fy=0.22&scale=1.087&x=1&y=1
- GoPro alternatives: (many are almost identical) - https://jywarren.github.io/fisheyegl/example/#a=1&b=1&Fx=0.16&Fy=0.16&scale=1.087&x=1&y=1
Please help submit more presets for different cameras!
Get started
Here's the link to the online tool; please leave comments/suggestions below here, and help one another use and refine this technique!
https://jywarren.github.io/fisheyegl/example/
Video
This got cut off at the first few seconds of audio, but is not a bad walkthrough of the process:
Help out with presets!
If you have a camera not on the presets list, please help out by:
- Taking a picture of some kind of grid -- a chessboard, a tile floor or brick wall.
- Uploading the original photo in full (in the comments below).
- Upload the image and try correcting it using FisheyeGL: https://jywarren.github.io/fisheyegl/example/
- Download the corrected version and upload it here alongside the original
- Copy in the URL (which now has the corrections you've made in it) into the comment too for others to use.
Thanks!
8 Comments
Nice Jeff. Here is a replication, but didn't think it warranted a note, see results in slides
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Awesome! I'll just copy in your notes so they're searchable on the site:
Thanks for giving it a go. It uses the web browser's WebGL system which uses your computer's graphics card to do the distortion. I don't know that all computers do this equally (esp. with higher resolution images), so would you mind mentioning what type yours was?
I'll also add a note about using different lens types, for those who choose that route, which I agree is great too!
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Thanks Jeff, I did my test on iMac (24-inch, Early 2009) with Graphics shown as: NVIDIA GeForce GT 120 256 MB.
Reply to this comment...
Log in to comment
Thanks, Pat. Also, I found a good example of lens distortion with straight lines (a parking lot) on MapKnitter just now:
https://mapknitter.org/maps/test--175
Here's the image as-is (left) and my attempt to correct it (right) -- i used a credit card on my screen for straight-line references since it's not perfectly rotated so they're vertical/horizontal:
Reply to this comment...
Log in to comment
Ah! And i realized another feature i forgot to mention -- you can now see the model of camera used to take the photos, which is extracted from the EXIF metadata of the image file. This last one said:
The great part is now that we have a URL to correct that particular model of camera (and lens) -- at least a pretty decent attempt as I've made:
GoPro, HERO3+ Black Edition: https://jywarren.github.io/fisheyegl/example/#a=1.048&b=1.059&Fx=0.13&Fy=0.34&scale=1.087&x=1&y=1
Reply to this comment...
Log in to comment
Folks on the #nasa #aren project sent in this image and we corrected it on the call:
Lightdow LD6000 WiFi 1080P HD Sports Action Camera
https://www.amazon.com/gp/product/B00XC46S84/ref=ox_sc_act_title_1?smid=A27W2Z6R7RNEOR&psc=1
Here's the correction we came up with (results below):
https://jywarren.github.io/fisheyegl/example/#a=1&b=1&Fx=0.09&Fy=0.21&scale=1.021&x=1&y=1
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
This is Awesome!!! Just getting to test it out now. Thanks so much for putting this together and posting the walk through :)
Reply to this comment...
Log in to comment
OK, we just did the GitUp 1 --
https://jywarren.github.io/fisheyegl/example/#a=0.989&b=0.98&Fx=0.05&Fy=0.14&scale=1.036&x=1.001&y=1
Original:
Corrected:
Is this a question? Click here to post it to the Questions page.
Reply to this comment...
Log in to comment
Login to comment.