Slick Forums

Hi guys, I was looking for a good tutorial to start programming shaders in GLSL to use in 2d slick games. I learned how to import vertex and fragment shaders from the tutorial on slick wiki, but I'd like to find something to learn how to actually program shaders, and that gives a clear explanation of what I can do with both vertex and fragment shaders. Of course I'm not looking for something too complex, it is just because I'm curious to see what can be done with them (not going to implement anything right now, since it seems a very complex topic). Looking around, many tutorials deal with 3d graphics only, so I'm pretty confused on how to apply it in 2d. Do you know any good tutorial to start?

Since GLSL was built with 3D in mind, you'll probably have a hard time finding 2D-specific tutorials. However, there are plenty of code examples on the web that will translate easily to Slick.

You'll need to learn a few things about texture sampling with GLSL, as well as some basic math operations to perform certain processing. The wiki doesn't (yet) cover these things, so you're on your own.

For a 2D Slick game, shaders will mainly come in handy for "image processing." Examples:

• Horizontal/vertical blurs: See ShaderTestAdvanced for an example. It's based on this tutorial.
• Invert colors: See ShaderTest for an example.
• Photoshop Blend Modes: such as screen, color burn, multiply, overlay, etc. See here for a Slick implementation.
• "Polar Coordinates" filter: Pretty useless, but the code may help you get a better grasp on GLSL.
• Brightness/contrast: See here

-- splitting this post in 2 since the max URL count seems to be 8!??! --

More advanced effects can also be achieved with GLSL, such as:

• A shockwave effect
• Motion blur, bloom
• Color grading
• Anti-aliasing hard edges, i.e. using FXAA
• Soft shadows
• Bump mapping and lighting to give your 2D textures more depth and dynamism
• Anything else you can imagine...

A good place to start would be browsing through actual code, and hacking around with it.
http://www.iquilezles.org/apps/shadertoy/ (edit the code and hit Alt + Enter to recompile)
http://glsl.heroku.com/
http://webglplayground.net/

If you're stuck with a particular aspect of GLSL or the way to use it through Slick, let me know and I can update the wiki with more info.


P.S. For anyone who doesn't know, there is a GLSL intro on the wiki as well as some Slick tests in the dev branch.

Whoa, this was the best reply ever, thanks a lot!

A question I got: let's say I want to get the mouse coordinates into the fragment shader, I create a "uniform vec2 mouse" and then I have in the render method:

now where (I mean, where in the above code) do I pass the mouse position with the method setUniform2f(...)?

The shader needs to be "bound" before you can set a uniform. So it might look like this:


Then, in the fragment shader, you would simply use the "mouse" uniform to modify the output color.

The uniform type determines which method you should use:


(This is based on OpenGL/LWJGL naming, although in retrospect it might have been more Slick-like to simply overload setUniform.)

all clear, thank you very much i'll play around wirh it and see if i can learn something cool!