Jump to content

Fisheye Zoom


Ignavia
 Share

Recommended Posts

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.

 

 

 

post-12179-0-31609200-1418848342.png

post-12179-0-65944400-1418848358.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...