Fisheye Zoom

[Ignavia]

I'm currently working on visualizing graphs. For this I'd like to implement a distortion similar to the cartesian distortion from http://bost.ocks.org/mike/fisheye/, so that you can view a larger part of the graph at the same time. At the moment I'm using a filter to achieve this effect. It works decently, but because I zoom into a fixed picture, I have issues with aliasing, as the attached screenshots show (the red dot represents the mouse position). Furthermore the text becomes blurry, because of all the stretching and compressing.

 

At the moment I'm slightly stuck as to how to solve it. Some options I considered so far:

• Put the distortion in the vertex shader
• Implement post-processing antialiasing
• Do the distortion in the main JavaScript

None of those is fully satisfying me yet. First, as far as I know Pixi does not support custom vertex shaders. Or is there a way to do this and would putting it in a vertex shader help anyway? Second, the post-processing antialiasing would not solve the blurry text problem. Third, doing the distortion in JavaScript would use up lots of CPU cycles, that I'd rather use for different stuff.

 

So, do you have any recommendations or other ideas? Thanks in advance.

 

 

 

[pongstylin]

Hey, I don't know much about the fisheye effect, but since you mention doing the distortion in javascript, I wanted to point out that it MIGHT be possible to do the distortion in C and compile the C code with javascript via WebGL.  Check out my amazing discovery in my "Sprite Whitening" thread.  I point out some JS code that creates convolution and colormatrix filters using compiled C code.  Maybe your filter can be done using the same technique and be pretty quick about it.

 

EDIT: Nevermind, I think you were talking about this in your first bullet (putting the distortion in the vertex shader).  That seems like a good option.

[msha]

I don't think shaders can help you here, the text will have to be redrawn when scaling.

 

"Third, doing the distortion in JavaScript would use up lots of CPU cycles"

You won't have to manipulate individual pixels in Javascript, you'll just have to scale and reposition some objects and the GPU will draw them, right? I don't think that would be too slow.