Fx: 0.35
Fy: 0
a: 0.964
b: 1
scale: 1.087

Seems to do pretty well,

Using Chrome on a Windows 10 computer, I can operate the Fisheye correction software as instructed and save the correction to the Previous panel by dragging a new image intothe software, again, as instructed. The problem I have is that I can't download or export the edited image. Here's what I've observed:

Putting the cursor over the the edited image in Previous panel creates a pointer-icon that suggests it can be launched or downloaded, but left-clicking and left double-clicking does nothing (and the browser produces no warning about pop-ups). Right clicking produces Save and Save As options, but attempts to use either results in a Failure on Network warning. I see no option from a right-click to open in a new window or anything else that might work.

Fisheyegl is the only software I've found that adequately corrects the extreme distortion from a drone's spherical images and so I do hope I can get this to work. Thanks in advance.

Hi @jywarren, I'm using your lib to calibrate images on browser dynamically. My website is developed based on React framework and when I try to load an image by its URL, the chrome dev tool throws this type of error

So I dug in node modules and modified a little bit in function loadImageFromUrl by appending a cross-origin property to it and everything works fine! (the value is anonymous in my case)

Just take a look in your free time! Cheers!

This would be great in the demo: https://jywarren.github.io/fisheyegl/example/

along with the current version which triggers when you drag in an image.

Code links

The code for that is here:

https://github.com/jywarren/fisheyegl/blob/master/example/main.js#L104-L142

And here's an example of updating based on a file select button:

https://github.com/publiclab/image-sequencer/blob/master/examples/index.html#L196-L205

They're not too dissimilar; we need the handler to respond to both button-based and drag-based file selection. Any help appreciated!

Note that it's not identical -- the current code uses:

    var files = e.dataTransfer.files;

Whereas the example i linked to uses:

          var file = e.target.files[0];

Both use a FileReader() and reader.readAsDataURL(f);

Hi @ccpandhare, can you post a PR of your changes which make shader loading automatic? Thanks!

In example code -- so, for a: 1, b: 1, Fx: 0.16, Fy: 0.16, scale: 1.087, x: 1, y: 1

it'd be: https://jywarren.github.io/fisheyegl/example/#Fx=0.16&Fy=0.16&scale=1.087

(the rest would default)

Then update these as you adjust the sliders.

(Maybe move example to root directory or add intro text to readme.)

Have list of URLs for camera presets

Interesting project.

Do you have plans to support streams? I have a fisheye stream setup on a Raspberry pie and would like to correct the image in the browser.

the slides are very inaccurate

Hello, first thanks for the hard work on this library!

I wanted to know how it would be possible to reuse the vertex & fragment shaders in a THREE.js postprocessing pass. My attempt at it resulted in a compilation error of the shader.

THREE.FisheyeShader = {
  uniforms: {
    tDiffuse: { type: 't', value: null },
    uLens: { type: 'v4', value: new THREE.Vector4(1, 1, 0.0, 0.0) },
    uFov: { type: 'v2', value: new THREE.Vector2(1, 1) }
  },

  vertexShader: [
    '#ifdef GL_ES',
    'precision highp float;',
    '#endif',
    'attribute vec3 aVertexPosition;',
    'attribute vec2 aTextureCoord;',
    'varying vec3 vPosition;',
    'varying vec2 vTextureCoord;',
    'void main(void){',
    'vPosition = aVertexPosition;',
    'vTextureCoord = aTextureCoord;',
    'gl_Position = vec4(vPosition,1.0);',
    '}'
  ].join('\n'),

  fragmentShader: [
    'precision highp float;',
    '#ifdef GL_ES',
    '#endif',
    'uniform vec4 uLens;',
    'uniform vec2 uFov;',
    'uniform sampler2D tDiffuse;',
    'varying vec3 vPosition;',
    'varying vec2 vTextureCoord;',
    'vec2 GLCoord2TextureCoord(vec2 glCoord) {',
    'return glCoord  * vec2(1.0, -1.0)/ 2.0 + vec2(0.5, 0.5);',
    '}',
    'void main(void){',
    'float scale = uLens.w;',
    'float F = uLens.z;',
    ,
    'float L = length(vec3(vPosition.xy/scale, F));',
    'vec2 vMapping = vPosition.xy * F / L;',
    'vMapping = vMapping * uLens.xy;',
    'vMapping = GLCoord2TextureCoord(vMapping/scale);',
    'vec4 texture = texture2D(uSampler, vMapping);',
    'if(vMapping.x > 0.99 || vMapping.x < 0.01 || vMapping.y > 0.99 || vMapping.y < 0.01){',
    'texture = vec4(0.0, 0.0, 0.0, 1.0);',
    '} ',
    'gl_FragColor = texture;',
    '}'
  ].join('\n')
};

Thanks for your time :)

Hi, could you please remove the fish eye lense distortion of this picture?

I've created a video player with your fisheyegl library, works great! But sometimes I get this error in the JS console:

[.WebGL-0x7fbec70c7e00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

Any ideas of what's happening?

The live demo is fantastic, thanks for making this available.

I am trying to understand the math/algorithm going on behind the scenes. I want to calibrate a Raspberry Pi wide FOV camera using your approach, then use these lens parameters in an OpenCV loop to dewarp a video stream.

Your live demo does everything I want in terms of finding the parameters, now I'm struggling with how to apply this to a video feed in OpenCV.

Could you point me in the right direction?

Thanks,

via Andy at the AREN project

https://jywarren.github.io/fisheyegl/example/

We're handling the drop event here: https://github.com/jywarren/fisheyegl/blob/master/example/main.js#L151

I believe this works, from another project: https://publiclab.github.io/PublicLab.Editor/examples/ (the main image upload)

That code is here:

https://github.com/publiclab/PublicLab.Editor/blob/master/src/modules/PublicLab.MainImageModule.js#L62

    _module.dropEl.bind('drop',function(e) { ... });

https://github.com/marcodiiga/lens_distortion_filtering

The param in fragment shaders " uniform vec2 uFov "
uFov is never used, and the value from "fov x y" cannot work!
Can you help to fix it?

We want this integrated on our FTP files. Can you let us know the costs?

hi there ! thx for this project,
anyway on how to implement this in threejs ?
thx

Problem

The distortion only works properly for square images -- if the height and width are different, it doesn't correctly remove the lens distortion.

We need to account for the dimensions of the image. #2 links to another project which does this properly. Note that in the fragment shader, field of view is present, but never used:

https://github.com/jywarren/fisheyegl/blob/master/shaders/fragment.glfs#L21-L23

	float L = length(vec3(vPosition.xy/scale, F));

	vec2 vMapping = vPosition.xy * F / L;

F should be applied differently vertically and horizontally, or something. (guessing here)

Theory: maybe the image is "clamped" to the edges of a square WebGL buffer before being distorted, so any non-square image is smushed before being distorted. This actually makes a bit more sense to me but I'm not sure it's what's going on.

In any case, until we can apply F differently for x vs. y, we won't be able to correctly undistort images.

Possible solutions

I believe the key is "length" calculated on this line, but am not sure: https://github.com/jywarren/fisheyegl/blob/master/shaders/fragment.glfs#L21

I think it might also work to not cover the entire square WebGL working area, and to crop out "letterboxing" after WebGL's done it's work.

fisheyegl.js:176 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

./src/fisheyegl.js can be required in Node,
but ./dist/fisheyegl.js can't. I am not sure how to instruct browserify to make this work.