3

i want to implement the barrel shader for the oculus rift in javascript.

according to this video (http://youtu.be/B7qrgrrHry0?t=11m26s) the radius function for barrel distortion is:

newr = 0.24*r^4+0.22*r^2+1

The result:

Reference Image: enter image description here After Shader: enter image description here

if i change the function to newr = r i get the orginal image.


If I set the function to: newr = 0.022*r^2 i get:

enter image description here This one is close but not the right solution (tested with oculus)

So its not the fault of the programm...the radius function is the problem.

Here you can try it in a fiddle: http://jsfiddle.net/s175ozts/2/

Why does the orginal function not work??

thanks :)

Cracker0dks
  • 2,422
  • 1
  • 24
  • 39

2 Answers2

4

After trying a lot of stuff... i finally got the solution. The trick was to normalize r first and then multiply the barrelfunction with orginal r

var sf = pr / rMax; //Scaling factor
var newR = pr*(0.24*Math.pow(sf,4)+0.22*Math.pow(sf,2)+1); //barrel distortion function

See fiddle here: http://jsfiddle.net/s175ozts/4/

Result: enter image description here

Cracker0dks
  • 2,422
  • 1
  • 24
  • 39
1

Cracker0dks@: I was playing a little bit with your fiddle, and optimized it significantly:

http://jsfiddle.net/mqau9ytv/2/

/*int*/ var x_off = xmid-x;
/*int*/ var y_off = ymid-y;
/*int*/ var pr2 = x_off*x_off + y_off*y_off; //radius from pixel to pic mid, squared.
/*float*/ var sf2 = pr2 * rMax2_inv;  // Scaling factor squared.
/*float*/ var scale = zoom *(0.24*sf2*sf2 + 0.22*sf2 + 1.0); //barrel distortion function
/*float*/ var new_x_off = scale * x_off;
/*float*/ var newx = xmid - new_x_off;
/*float*/ var new_y_off = scale * y_off;
/*float*/ var newy = ymid - new_y_off;

It could probably be optimized even more, like not actually producing some of the variables, like new_y_off, or pix2D temporary array.

Not that it matters a lot in this situation, but still it is useful thing.

Witek
  • 11
  • 1
  • Your solution appears to give the wrong effect, as demonstrated in the OP's question. Also: http://jsperf.com/testing-js-variable-declaration-speed – Daedalus Sep 22 '15 at 04:13
  • yeah nice. I think this solution is correct too. It may seems different because of the zoom added. Good work! – Cracker0dks Sep 22 '15 at 18:07