GLSL and Shader-based Tutorials for LWJGL / LibGDX

OpenGL Development
#1

I’m writing a short tutorial series on GLSL and OpenGL programming in LWJGL and LibGDX. It’s aimed at programmers with little or no OpenGL/GLSL experience, but it will also cover advanced topics.

You can see some of the GLSL lessons here:

The first three lessons should cover all the basics you need to start your own shader programming.

The tutorials use the minimal lwjgl-basics API, but the concepts can easily be applied to any OpenGL-based library (such as LibGDX, Love2D, Pyglet, MonoTouch, etc). Each GLSL lesson includes a LibGDX port at the end.

The wiki also includes other tutorials and code snippets for LWJGL/LibGDX/GLSL:

Comments and criticisms are welcome.

Note: The API itself will continue to grow as a separate entity; however, this thread will be contained to the tutorial series.

#2

ShaderLesson3 : Step 2 : “If x is between the two values, it will linearly interpolate between zero and one.” Not linear…it’s a cubic hermite (a la the noise wiki page), or s-curve or ease function.

#3

Nice set of tutorials, simply written and nicely laid out. :slight_smile:

Couple of suggestions:

  1. The tutorials are using attribute, varying, etc. rather than #version, vertex layout descriptors, in/out, etc. Might be worth adding a more advanced lesson that covers layouts, uniform blocks, etc. and explains the differences between the core and compatibility profiles as far as shaders are concerned.

  2. Explain the notion of the various built-in values, i.e. gl_Position, gl_FragColor, etc.
    It’s implicit and probably obvious to most people, but might be worth pointing them out.

Other than that looks very good to me, keep up the good work. I’ll be adding this to my personal list of tutorials.

#4

Thanks, will fix.

  1. My Mac Snow Leopard only supports GL 2.1 and thus GLSL 120, so that’s all I can use.

It’s more than sufficient for advanced 2D games (the focus of this series), and core profile doesn’t add too many things that aren’t already present in extensions (e.g. framebuffers). For maximum support across versions (see Mac versions here) you should not rely on the core profile. Minecraft stats at one point listed only 51% of all users running OpenGL 3+.

Also, OpenGL ES (Android, iOS, WebGL) doesn’t use GLSL 330, and often doesn’t even support #version 120. I’m aiming for cross-platform code rather than bleeding edge. :slight_smile:

At a later stage I may include an “appendix” that details some of the changes, such as in/out, “location” qualifier, etc.

  1. Thanks, I will try to add more details on built-ins.
#5

As long as you’ve got a github account, you can edit the wiki yourself with a commit message :slight_smile:
I fixed a typo from “Valuse” to “Values”, for example.

#6

Great stuff, something we can point our folks to to start learning GLSL. Nice that you keep it “crossplatform”, wouldn’t mind the appendix you talked about.

#7

Thanks for the feedback.

Added several more articles:
[]Lesson 4: Multiple Texture Units
[]Lesson 5: Gaussian Blurs
[]Blurs for Mobile Applications in LibGDX
[]Intro to Sprite Batchers and batching rectangles and lines
[*]Intro to Frame Buffer Objects (FBO)

I’ve also added basic BMFont support to the API. It already supports unicode strings and multiple texture pages, unlike Slick’s AngelCodeFont utility. :slight_smile:

#8

Really nice!
Easy to follow and well explained, going to learn alot from this :slight_smile:

#9

Another update: next lesson is finished.

Shader Lesson 6 - Normal Mapping for 2D Games

The tutorial takes a regular texture, like this:

And applies illumination to it in real-time:

#10

a quick note about light attenuation, the formular with constant linear and quadratic factors is of course right. But just using random values for them isn’t that easy and right.

So for a spherical area light the attenuation equation looks like this:

attenuation = 1 / (d / r + 1)²
=> constantFactor = 1;
     linearFactor = 2/r;
     quadraticFactor = 1/r²;

where d is the distance to the surface of the light sphere and r the radius of it.