Barrel distortion effect for image (JavaFX)

Question

I'm looking for some way to set background image with barrel distortion effect(FishEye/FOV) for node using JavaFX. I found algorithm with pixel manipulation, but I want to find some another way(some hack) for reach it. This effect will be use for create node background high definition image changing animation(animation wil be change factor(power/value/degree?)) of this effect.

mipa · Accepted Answer · 2022-01-20T16:23:02.040

4

I'd like to offer an alternative approach which is much more efficient (real-time capable). Any solution which is based on direct pixel manipulations is doomed to be very inefficient especially for a "high definition image".

Instead I'd propose to use a TriangleMesh for this and use the image as its texture. You can then apply any kind of distortion you like by just manipulating the texture coordinates. This approach can be easily integrated into any 2D graphics via the JavaFX scene graph.

I am actively using this concept for on-the-fly reprojection of raster map tiles, so I know it works.

edited Jan 20 '22 at 16:23

answered Jan 20 '22 at 12:10

mipa

10,369
2
16
35

For high-performance situations, I agree that the 3D mesh approach is preferable to the proposed pixel manipulation approaches outlined in my answer. In such cases, it is better to let the dedicated hardware accelerators in the GPU do the heavy lifting of the pixel rendering work. – jewelsea Jan 20 '22 at 19:53
Some additional [resources for texture mapping](https://stackoverflow.com/questions/69305387/how-to-color-some-triangles-in-a-trianglemesh) and [3d surfaces with animation](https://stackoverflow.com/questions/37225197/3d-surface-javafx) in case it is needed. – jewelsea Jan 20 '22 at 22:21

jewelsea · Answer 2 · 2022-01-19T23:35:38.873

I will answer this question in the spirit that it was asked, i.e. no code.

JavaFX has an effect framework.

There is no in-built fisheye effect.

You could create your own custom fisheye effect implementation and plug it into the effect framework if you are a skilled developer.

Easier would be to apply your algorithm using a WritableImage with a PixelWriter or Canvas. Perhaps that could even plug into the effect framework (if you actually needed to do that, which you probably don't) using an ImageInput.

For an example of applying an algorithm to the pixels in an input image see:

Reduce number of colors and get color of a single pixel

Of course, you would use a fisheye algorithm (coded for JavaFX instead of the linked implementations) for a fisheye transform.

To animate use an AnimationTimer or, again for skilled developers, create a custom transition that plugs into the JavaFX animation framework.

You can add properties to your custom effect and manipulate them using additional properties defined on the custom transition you create.

Providing a complete solution is out of scope for a StackOverflow answer. To get help with individual tasks, split the problem up into different pieces, e.g. creating a custom effect, manipulating pixels to create a fisheye, animating an effect on an image or timeline, etc. Write the code and ask questions about the actual code with a minimal example for the problem portion you are trying to solve when you get stuck.

Barrel distortion effect for image (JavaFX)

2 Answers2