Merge pull request #5 from SpaVec/alt-algo#3

Alternative algorithm for separate x y corrections

dist/fisheyegl.js

@@ -2,7 +2,7 @@
 
   if (typeof module === 'undefined')
     exports = FisheyeGl;
-  else 
+  else
     module.exports = FisheyeGl;
 
 })(typeof exports === 'undefined'? this['FisheyeGl']={}: exports);
@@ -39,7 +39,8 @@ var FisheyeGl = function FisheyeGl(options){
   var lens = options.lens || {
     a : 1.0,
     b : 1.0,
-    F : 1.0,
+    Fx : 0.0,
+    Fy : 0.0,
     scale : 1.5
   };
   var fov = options.fov || {
@@ -52,15 +53,16 @@ var FisheyeGl = function FisheyeGl(options){
   var gl = getGLContext(selector);
 
   var vertexSrc = loadFile(options.vertexSrc || "../shaders/vertex.glvs");
-  var fragmentSrc = loadFile(options.fragmentSrc || "../shaders/fragment.glfs");
+  var fragmentSrc = loadFile(options.fragmentSrc || "../shaders/fragment3.glfs");
 
   var program = compileShader(gl, vertexSrc, fragmentSrc)
   gl.useProgram(program);
 
   var aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
   var aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
   var uSampler = gl.getUniformLocation(program, "uSampler");
-  var uLens = gl.getUniformLocation(program, "uLens");
+  var uLensS = gl.getUniformLocation(program, "uLensS");
+  var uLensF = gl.getUniformLocation(program, "uLensF");
   var uFov = gl.getUniformLocation(program, "uFov");
 
   var vertexBuffer,
@@ -234,12 +236,12 @@ var FisheyeGl = function FisheyeGl(options){
   }
 
   options.runner = options.runner|| function runner(dt){
-    
+
     gl.clearColor(0.0, 0.0, 0.0, 1.0);
     gl.enable(gl.DEPTH_TEST);
 
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-    
+
     gl.enableVertexAttribArray(aVertexPosition);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
@@ -254,7 +256,8 @@ var FisheyeGl = function FisheyeGl(options){
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.uniform1i(uSampler, 0);
 
-    gl.uniform4fv(uLens, [lens.a, lens.b, lens.F, lens.scale]);
+    gl.uniform3fv(uLensS, [lens.a, lens.b, lens.scale]);
+    gl.uniform2fv(uLensF, [lens.Fx, lens.Fy]);
     gl.uniform2fv(uFov, [fov.x, fov.y]);
 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

example/index.html

@@ -47,17 +47,23 @@
     <p id="display">
       a: <span class="a"></span>,
       b: <span class="b"></span>,
-      F: <span class="F"></span>,
+      Fx: <span class="Fx"></span>,
+      Fy: <span class="Fy"></span>,
       scale: <span class="scale"></span>,
       x: <span class="x"></span>,
       y: <span class="y"></span>
     </p>
     <p>Use the sliders to adjust the correction.</p>
     <dl>
-      <dt>F</dt>
+      <dt>Fx</dt>
       <dd>
-        <input id="F" type="range" min="0.0" max="4.0" value="1.0" step="0.01"/>
-        <span id="F_label"></span>
+        <input id="Fx" type="range" min="0.0" max="2.0" value="1.0" step="0.01"/>
+        <span id="Fx_label"></span>
+      </dd>
+      <dt>Fy</dt>
+      <dd>
+        <input id="Fy" type="range" min="0.0" max="2.0" value="1.0" step="0.01"/>
+        <span id="Fy_label"></span>
       </dd>
       <dt>a</dt>
       <dd>

example/main.js

@@ -12,14 +12,16 @@ jQuery(document).ready(function($) {
   function adjustLens(e) {
     distorter.lens.a = $("#a_label")[0].innerHTML = $("#a").val();
     distorter.lens.b = $("#b_label")[0].innerHTML = $("#b").val();
-    distorter.lens.F = $("#F_label")[0].innerHTML = $("#F").val();
+    distorter.lens.Fx = $("#Fx_label")[0].innerHTML = $("#Fx").val();
+    distorter.lens.Fy = $("#Fy_label")[0].innerHTML = $("#Fy").val();
     distorter.lens.scale = $("#scale_label")[0].innerHTML = $("#scale").val();
     distorter.fov.x = $("#fovx").val();
     distorter.fov.y = $("#fovy").val();
     distorter.run();
     $("#display .a")[0].innerHTML = distorter.lens.a;
     $("#display .b")[0].innerHTML = distorter.lens.b;
-    $("#display .F")[0].innerHTML = distorter.lens.F;
+    $("#display .Fx")[0].innerHTML = distorter.lens.Fx;
+    $("#display .Fy")[0].innerHTML = distorter.lens.Fy;
     $("#display .scale")[0].innerHTML = distorter.lens.scale;
     $("#display .x")[0].innerHTML = distorter.fov.x;
     $("#display .y")[0].innerHTML = distorter.fov.y;
@@ -29,8 +31,10 @@ jQuery(document).ready(function($) {
     $("#a_label")[0].innerHTML = distorter.lens.a;
   $("#b").val(distorter.lens.b);
     $("#b_label")[0].innerHTML = distorter.lens.b;
-  $("#F").val(distorter.lens.F);
-    $("#F_label")[0].innerHTML = distorter.lens.F;
+  $("#Fx").val(distorter.lens.Fx);
+    $("#Fx_label")[0].innerHTML = distorter.lens.Fx;
+  $("#Fy").val(distorter.lens.Fy);
+    $("#Fy_label")[0].innerHTML = distorter.lens.Fy;
   $("#scale").val(distorter.lens.scale);
     $("#scale_label")[0].innerHTML = distorter.lens.scale;
   $("#fovx").val(distorter.fov.x);
@@ -65,7 +69,7 @@ jQuery(document).ready(function($) {
         });
       }
       reader.readAsDataURL(f);
- 
+
     }
   }
 

shaders/fragment3.glfs

@@ -0,0 +1,36 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform vec3 uLensS;
+uniform vec2 uLensF;
+uniform vec2 uFov;
+
+uniform sampler2D uSampler;
+
+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 = uLensS.z;
+	vec3 vPos = vPosition;
+	float Fx = uLensF.x;
+	float Fy = uLensF.y;
+
+	vec2 vMapping = vPos.xy;
+	vMapping.x = vMapping.x + ((pow(vPos.y, 2.0)/scale)*vPos.x/scale)*-Fx;
+	vMapping.y = vMapping.y + ((pow(vPos.x, 2.0)/scale)*vPos.y/scale)*-Fy;
+	vMapping = vMapping * uLensS.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;
+}