Image Effects

Newbie & Debugging Questions
#1

This is not GLSL and it doesn’t really have to do with games either…

I was just bored recently so I thought I might make a simple light weight image effect program where developers can make their own image effects…

It is done per pixel where each effect has a method:

public Color filter(Image img, int x, int y);

But I want my own default image effects which are built into the program but every time I search on how to do an image effect I just get some Photoshop or Gimp tutorials…

Is there any website where they teach you (not show you, there is a difference) how to make certain image effects?

#2

Usually you can find code for any image effect by searching glsl or hlsl shader code. Then just convert that to java code.

#3

You could make your life a lot easier and use GLSL to create these effects. Actually, that’s a really good way to learn GLSL and how to link, validate, and use shaders.

#4

But that might get problematic…
I would load the BufferedImage, convert it to an openGL texture, use the shader, get the data, convert back to bufferedImage, then save the image…

I just found it easier to use bufferedimages directly instead of openGL

#5

http://www.jhlabs.com/ip/filters/

  • Tons of filters: BlurFilter, GlowFilter, MotionBlurFilter, ImageRotationFilter, OpacityFilter and around 30+ more epic filters.

Example:
1). Take your BufferedImage.
2). Create the filter for it.
3). Apply the filter to it. (bufImage = customFilter.filter())
4). Any rendering calls to this “filter enhanced” image will have the filter applied.

  • Sorry if this is irrelevant, hope it helps :slight_smile:

(Made a few sexy filters work for my game :3 and was pleased with the performance :slight_smile: & sexy image enhancements)

#6

A port of Paint.NET done in Java by our very own HeroesGraveDev. Check it out if you want to consider using OpenGL Java2D to create your program.

#7

Yeah P.J is currently a midst a big refactoring, although it doesn’t use any OGL, so I’m confused by your recommendation…

#8

Damn, it doesn’t? Oops… I thought it did. Sorry.

#9

A search for “image pixel filter”
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=image%20pixel%20filter
gives many interesting results
e.g.
http://lodev.org/cgtutor/filtering.html


http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Filters-Pixel.html
https://processing.org/tutorials/pixels/

Also useful are affine transforms for scaling, shearing, rotating, etc.


http://docs.oracle.com/javase/7/docs/api/java/awt/geom/AffineTransform.html

#10

Why not apply GLSL to Java? I mean, you can always take the pixel, convert to rgba, store it in a vec4 and you can pass to your GLSL-alike java method which transforms it? Finally you can recombine that pixel and replace it in the bufferedimage.

#11

But really… That just seems a bit too much for just a simple light weight image effects program…

Also I might add JS scripting for the image effects…

#12

Btw, at the moment im using ‘effects’ but was is the best word for it?

  • filter - I see this more as removing items from a list
  • shader - this is more graphics and GLSL
  • effect - I think this is the best word as this is probably what the ‘general public’ would call it…
#13

So actual shaders (which is what this sounds like, you said it yourself, but effect also works) are outside the scope or over-complicated, but JS scripting isn’t?

#14

Let me show you. Any filtering API should work on the pixel directly. So, you might create methods that can retrieve a pixel from the source image and set a pixel in the resulting image. Just add some vecmath to that, and you can simply create filters directly using Java. For example (using undefined API to demonstrate), this could colorise the image into any color.


public Image colorise(Image source, Vector4f color)
{
    Image fImg = new Image(source.width, source.height);

    // Loop over every pixel and process it
    for (int x=0; x<source.width; x++)
    {
        for (int y=0; y<source.height; y++)
        {
            // Get the pixel
            Vector4f pixel = source.pixelAt(x, y);

            float avg = (pixel.r + pixel.g + pixel.b)/3f;
            pixel.setTo(avg, avg, avg, 1.0);

            // Calculate the final pixel
            Vector4f fPixel = pixel.cross(color);

            fImg.setPixel(x, y, fPixel);
        }
    }

    return fImg;
}

The above code is an example, but it simply demonstrates the usefulness. Hope this clarifies.

#15

Sry SHC, I didn’t understand your original question properly…

But that is similar to what I am doing anyways… The only difference is instead of having just ‘color’, I have ‘image’, ‘x’ and ‘y’ which is better IMO…

JS scripting was an idea and it would be easier for both me and the dev (well… Beginning devs) then GLSL IMO…

#16

GLSL would be much easier. From what I’ve seen, you haven’t delved much into OpenGL development yet but I can assure you, GLSL is the way to go. Its built for stuff like this, modifying individual pixels fast.

#17

I agree with @opiop65 completely. GLSL is built specifically for this purpose, it makes manipulating vertices and fragments a lot easier and a lot fast. I just said the idea since OP is asking for a non-GLSL solution, but I really prefer GLSL for these type of applications.

#18

The post processing in my photo / video engine is of course all GLSL based. Consider backing the Kickstarter… http://kck.st/1sk0lN4

I highly recommend this approach especially if applying more than one filter is desirable in series. My efforts are pretty neat since you can have on and off screen buffers and apply up to 8 effects in series which can be used for blending and other compound effects all controlled by a simple GUI that fits on an Android phone screen running at 30FPS or better depending on the camera for modern Android devices.

Big hint here for those interested in GLSL based image processing… Take a gander at the iOS GPUImage open source project. There is a treasure trove of GLSL image processing shaders there. Of course most of the work is done in fragment shaders.

GPUImage gave me a head start in building my video engine / post processing pipeline. There is no shared software architecture between my efforts and GPUImage, but the shader code helped a bit. I have since upgraded everything to OpenGL ES 3.0 and built much more comprehensive support for modern GL into my post processing pipeline that GPUImage does not have, but I wouldn’t have been able to focus on all of that if I didn’t have all the fundamental image operation shader code on hand out of the gate. It also gave me plenty of time to wrestle with the Android MediaCodec API.

GPUImage is well worth checking out for those interested in GLSL image processing (just for the shader code!)

Also another big hint for Android. With the Snapdragon 800 / Adreno 330 this was the first mobile GPU in phone form factor to unleash the “FBO bonanza”. I do upwards of 30 FBO passes in the post processing pipeline without significant penalties. Previously mobile GPUs had harsh performance penalties on using many FBO passes. Even 2 would cripple performance. Not so anymore!

#19

Be carefull by chaining many effects serially if you output them to 8bit texture, you will lose precision of original image every time and these errors just accumulate up and might cause horrible banding. Using ± half bit dither and/or srgb/higher precision after every effect will help with this.

#20

I’m starting to consider GLSL… I just want to know two things first:

  • can you somehow ‘extend’ other shaders? In the Java code I have a ‘KernalEfffect’ which other effects (like blur and edge detect) can extend and add a kernal (sry if I’m not using the right terms)
  • can you have arrays? I would need an array for the kernal shader