Java-Gaming.org Hi !
Featured games (90)
games approved by the League of Dukes
Games in Showcase (744)
Games in Android Showcase (225)
games submitted by our members
Games in WIP (825)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1] 2
  ignore  |  Print  
  Image Effects  (Read 8478 times)
0 Members and 1 Guest are viewing this topic.
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Posted 2014-10-30 22:41:18 »

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:
1  
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?

Is it sad that I still get a fright when the computer beeps at me...
Offline pitbuller
« Reply #1 - Posted 2014-10-30 23:49:35 »

Usually you can find code for any image effect by searching glsl or hlsl shader code. Then just convert that to java code.
Offline Opiop
« Reply #2 - Posted 2014-10-30 23:56:12 »

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.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #3 - Posted 2014-10-31 00:37:35 »

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

Is it sad that I still get a fright when the computer beeps at me...
Offline TehJavaDev

JGO Knight


Medals: 17
Projects: 3
Exp: 7-9 months


Java is so dope they wanna >:D


« Reply #4 - Posted 2014-10-31 00:45:10 »

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 ^__^

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

Checkout my new easy to use java networking library: GNetLib
Offline Opiop
« Reply #5 - Posted 2014-10-31 00:49:08 »

https://github.com/PaintDotJava/Paint.JAVA

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.
Offline BurntPizza

« JGO Bitwise Duke »


Medals: 485
Exp: 7 years



« Reply #6 - Posted 2014-10-31 00:50:57 »

Yeah P.J is currently a midst a big refactoring, although it doesn't use any OGL, so I'm confused by your recommendation...
Offline Opiop
« Reply #7 - Posted 2014-10-31 00:52:37 »

Damn, it doesn't? Oops... I thought it did. Sorry.
Offline DrZoidberg

JGO Coder


Medals: 19



« Reply #8 - Posted 2014-10-31 01:20:14 »

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://www.html5rocks.com/en/tutorials/canvas/imagefilters/
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://en.wikipedia.org/wiki/Affine_transformation
http://docs.oracle.com/javase/7/docs/api/java/awt/geom/AffineTransform.html
Offline SHC
« Reply #9 - Posted 2014-10-31 02:37:11 »

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.

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #10 - Posted 2014-10-31 02:51:53 »

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...

Is it sad that I still get a fright when the computer beeps at me...
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #11 - Posted 2014-10-31 02:59:38 »

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...

Is it sad that I still get a fright when the computer beeps at me...
Offline BurntPizza

« JGO Bitwise Duke »


Medals: 485
Exp: 7 years



« Reply #12 - Posted 2014-10-31 03:57:35 »

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?
Offline SHC
« Reply #13 - Posted 2014-10-31 04:20:12 »

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.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
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.

Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #14 - Posted 2014-10-31 10:53:42 »

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...

Is it sad that I still get a fright when the computer beeps at me...
Offline Opiop
« Reply #15 - Posted 2014-10-31 12:21:02 »

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.
Offline SHC
« Reply #16 - Posted 2014-10-31 13:16:34 »

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.

Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #17 - Posted 2014-10-31 21:54:15 »

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.
https://github.com/BradLarson/GPUImage

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!

Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Offline pitbuller
« Reply #18 - Posted 2014-10-31 23:00:24 »

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.
http://loopit.dk/banding_in_games.pdf
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #19 - Posted 2014-10-31 23:05:48 »

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

Is it sad that I still get a fright when the computer beeps at me...
Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #20 - Posted 2014-11-01 02:59:31 »

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


1. You don't extend shaders, but you can make multiple passes via FBO rendering to an intermediate texture. Some of the "effects" I expose to users of my video engine are composite effects themselves made up of two or more passes internally. Basically you can make whatever architecture makes sense on the Java / control side as long as you are making separate passes rendering to a texture for each shader / IE "kernel".

2. Not exactly sure what you mean by "can you have arrays"... So describe it better. That can mean many things I suppose.

For instance in OpenGL ES 3.0 you can have "texture arrays" I'm soon implementing that into the pipeline / engine to store the last X output frames rendered. This will allow easy access in shader code to say do actual real motion blurring with past frame data without having to pass in bespoke texture data as separate samplers; IE just one texture array is passed in..


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.
http://loopit.dk/banding_in_games.pdf

Good to keep in mind. I haven't gotten there yet as there are other engine upgrades to make first, but OpenGL ES 3.0 has sRGB textures and framebuffers so that you can address this problem.. OpenGL ES 3.0 is well worth moving to if you can since it is a major update.

Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #21 - Posted 2014-11-01 21:47:13 »

1. But how can the developer tell they want to use another shader before or after with just "a shader". Also I want to send data from one shader to the other.
2. I mean number arrays. So I can have an image kernal. Like so (in Java):
1  
2  
3  
4  
5  
6  
7  
8  
public Color filter(Image img, int x, int y) {
    setKernal(new int[] {
        -1,-1,-1,
        -1, 8,-1,
        -1,-1,-1,
    }
    return super.filter(img, x, y);
}

This will do some sort of edge detect. Again, sry if I'm using the wrong term here.

Is it sad that I still get a fright when the computer beeps at me...
Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #22 - Posted 2014-11-02 21:37:32 »

1. But how can the developer tell they want to use another shader before or after with just "a shader". Also I want to send data from one shader to the other.
2. I mean number arrays. So I can have an image kernal. Like so (in Java):
This will do some sort of edge detect. Again, sry if I'm using the wrong term here.

1. You have CPU side control over the whole pipeline one builds for post-processing. You don't control the pipeline between shaders in shader code itself as it's done on the CPU side. You can share data directly between shaders via CPU side control such as FBO (textures) which are shared between shaders and you can share uniform data (variables in the shader code) between shaders. OpenGL ES 3.0 also enables a lot more in regard to general buffer objects as input / output from shaders (PBO is an example). But in the case of uniform data there are UBO (Uniform Buffer Objects). These are interesting because they allow setting uniform data of a shader efficiently in one call, but can also share data across multiple shaders. See the following for (OpenGL ES 3.0 feature):
https://www.opengl.org/wiki/Uniform_Buffer_Object
http://www.lighthouse3d.com/tutorials/glsl-core-tutorial/3490-2/

2. Most definitely you can do convolution based kernels. See this code example for fragment shaders which do a Laplacian edge detection:
https://github.com/BradLarson/GPUImage/blob/master/framework/Source/GPUImageLaplacianFilter.m

The line in the fragment shader "uniform mediump mat3 convolutionMatrix;" stores the 3x3 matrix and would be filled with the desired coefficients.

It should be noted that doing convolution based filters is generally expensive due to dependent texture reads. IE setting the color of the current pixel being processed is dependent on reading other pixel values surrounding it. You'll want to be careful in your implementation to reduce "dependent texture reads" in your fragment shaders. A good article on optimizations for this from Brad Larson regarding the Gaussian blur filter in GPUImage:
http://www.sunsetlakesoftware.com/2013/10/21/optimizing-gaussian-blurs-mobile-gpu

In short.. Yes, you can do convolution based filtering with OpenGL. There is nothing you can do in Java / CPU side that you can't do in OpenGL.

Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #23 - Posted 2014-11-02 22:55:53 »

Is there a max size on the matrix in OpenGL? So can I do something like 21x21 or something?

Is it sad that I still get a fright when the computer beeps at me...
Offline HeroesGraveDev

JGO Kernel


Medals: 382
Projects: 11
Exp: 4 years


┬─┬ノ(ಠ_ಠノ)(╯°□°)╯︵ ┻━┻


« Reply #24 - Posted 2014-11-02 23:10:40 »

Is there a max size on the matrix in OpenGL? So can I do something like 21x21 or something?

I think mat4 (4x4) is the largest you can get. Anything higher and you're probably doing something wrong.

If you need lots of data, there's always arrays, but 441 elements is a large amount and there's probably better ways to do whatever you're trying to do.

Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #25 - Posted 2014-11-03 00:10:04 »

Is there a max size on the matrix in OpenGL? So can I do something like 21x21 or something?

For built in variable types the max matrix size is 4x4. It's handy to review the reference cards for OpenGL ES 3.0 & 3.1 for built in types and GLSL functions:
https://www.khronos.org/files/opengles3-quick-reference-card.pdf
https://www.khronos.org/files/opengles31-quick-reference-card.pdf

also

https://www.opengl.org/wiki/Data_Type_(GLSL)

Also there is a max array size for uniform variables depending on the OpenGL implementation. More to the point there is max uniform storage across all data types defined in a shader. See this link and "Implementation limits" section on how to query for the max sizes; usually 512 and greater is supported:
https://www.opengl.org/wiki/Uniform_(GLSL)

You can aggregate basic types in arrays and structs. For a "21x21" matrix an array of 441 floats, but you'll have to deal with the indexing yourself and of course built in matrix operations don't apply to a bespoke array. Not all OpenGL implementations support multidimensional arrays in GLSL. I understand that OpenGL 4.3+ should support or where the ARB_arrays_of_arrays extension is available. I understand OpenGL ES 3.1 has multidimensional arrays / ARB_arrays_of_arrays support.

Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #26 - Posted 2014-11-03 00:14:51 »

So can I have some sort of shader with something like:
#use <shader here> <args>
#use <another shader> <more args>

And then when my program reads the shaders it checks for lines like that and it will pass the image through those shaders first?

EDIT: just reading through this, and I have done GLSL before (Codea on iPad) but I just thought it would just be a bit over complicated for just a small little fun project.

Is it sad that I still get a fright when the computer beeps at me...
Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #27 - Posted 2014-11-03 00:24:15 »

So can I have some sort of shader with something like:
#use <shader here> <args>
#use <another shader> <more args>
And then when my program reads the shaders it checks for lines like that and it will pass the image through those shaders first?

No.. There is no embedding or continuation of shader code that is controlled GPU side*. You need to control the succession of shaders in a post-processing pipeline on the CPU side in addition to whatever variables / textures are set up / shared across executing various shader code.

* OpenGL ES 3.1 introduced indirect draw functionality that can be paired up nicely with compute shaders which allows drawing to occur after computation without CPU intervention, but this is not the same as bespoke GPU continuation like you are asking about.

At this point it may be good to get into trying some OpenGL yourself. There is a learning curve no doubt, but it will be worth it. If you happen to have an iOS device perhaps take a look at GPUImage example apps and source code. I guess for some examples there (modifying a static image) the simulator could work. I guess GPUImage also works on the desktop. I've never actually ran any GPUImage apps... Just snarfed* all the fragment shader code then improved it for OpenGL ES 3.0+ and my own custom pipeline.. Cheesy *will attribute of course!


Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Offline matanui159

JGO Coder


Medals: 11
Projects: 1
Exp: 10-12 months


Aww... So cute...


« Reply #28 - Posted 2014-11-03 00:42:17 »

No, not on GPU side...
When I read the shader, line by line, I will check for a line starting with #, check what it does, remove it...

Then I will have a shader object which has the compiled shader, and all the shaders it requires...

Is this a good idea or is there another way? Again, this just seems to over complicate things when I already know about GLSL and this is supposed to be a simple little and fun project...

(Lol, my Safari on my iPad froze twice while I was typing this... Srsly, how do people think iOS is amazing?)

Is it sad that I still get a fright when the computer beeps at me...
Offline Catharsis

JGO Ninja


Medals: 73
Projects: 1
Exp: 21 years


TyphonRT rocks!


« Reply #29 - Posted 2014-11-03 01:24:12 »

Then I will have a shader object which has the compiled shader, and all the shaders it requires...

(Lol, my Safari on my iPad froze twice while I was typing this... Srsly, how do people think iOS is amazing?)

Technically you can do whatever you want in regard to pre-processing your own shader code before linking it. You might be able to do some sort of limited chaining of what should be independent shader passes that don't require doing any sort of convolution kernel operations on intermediate state, but that would really make your post processing pipeline rather rigid and with no practical speed improvements. There are other fish to fry basically for performance.

By building a composable pipeline of independent image operations where each one writes to a successive FBO you can then allow the user to mix and match on the fly image operations to perform.

One of the really cool things my post-processing pipeline allows is a built in preset editor where users can interactively drag horizontally on the screen and the GL component shows dragging between between shaders / image operations by rendering the pipeline twice and combining. There is also interactive dragging between complete presets (renders the pipeline twice with each preset and combines).

Indeed... The GLSL direction is a lot to take in for what is a simple image processing API. Take what you learned from the Java side of things though and consider a GLSL implementation as it's useful in game dev or general media based apps.

Check out the TyphonRT Video Suite:
http://www.typhonvideo.com/

Founder & Principal Architect; TyphonRT, Inc.
http://www.typhonrt.org/
http://www.egrsoftware.com/
https://plus.google.com/u/0/+MichaelLeahy/
Pages: [1] 2
  ignore  |  Print  
 
 

 
Ecumene (149 views)
2017-09-30 02:57:34

theagentd (214 views)
2017-09-26 18:23:31

cybrmynd (301 views)
2017-08-02 12:28:51

cybrmynd (288 views)
2017-08-02 12:19:43

cybrmynd (297 views)
2017-08-02 12:18:09

Sralse (291 views)
2017-07-25 17:13:48

Archive (968 views)
2017-04-27 17:45:51

buddyBro (1094 views)
2017-04-05 03:38:00

CopyableCougar4 (1670 views)
2017-03-24 15:39:42

theagentd (1430 views)
2017-03-24 15:32:08
Java Gaming Resources
by philfrei
2017-12-05 19:38:37

Java Gaming Resources
by philfrei
2017-12-05 19:37:39

Java Gaming Resources
by philfrei
2017-12-05 19:36:10

Java Gaming Resources
by philfrei
2017-12-05 19:33:10

List of Learning Resources
by elect
2017-03-13 14:05:44

List of Learning Resources
by elect
2017-03-13 14:04:45

SF/X Libraries
by philfrei
2017-03-02 08:45:19

SF/X Libraries
by philfrei
2017-03-02 08:44:05
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!