GLSL Shaders, Where to start?

[jaooe]

Recently started learning c++ through playing around with cinder. I want to learn GLSL but all the resources I find tend to be boring, anyone know any decent GLSL tutorials? Or just where I should start in general?

[Darwin226]

[QUOTE=jaooe;41760772]Recently started learning c++ through playing around with cinder. I want to learn GLSL but all the resources I find tend to be boring, anyone know any decent GLSL tutorials? Or just where I should start in general?[/QUOTE]

GLSL is basically C. If you can program in any C-like language, you know GLSL and just need a reference. If you can't, you don't need GLSL.

[jaooe]

I wouldn't say I can't program in C but I wouldn't say I'm as proficient in it as other languages.

What would you suggest I do then? Learn the ins and outs of C++ first and then learn shaders?

[Darwin226]

[QUOTE=jaooe;41760935]I wouldn't say I can't program in C but I wouldn't say I'm as proficient in it as other languages.

What would you suggest I do then? Learn the ins and outs of C++ first and then learn shaders?[/QUOTE]

Well, usually learning a language unlocks a very universal tool. Learning GLSL can only be used for writing shaders. I guess that's why GLSL tutorials aren't too common.

At the first opportunity I actually needed shaders I knew GLSL without ever writing it (as I said, basically C).

I don't know the specifics of your work but I think that by the time you actually need to use shaders, you'll know enough to write them as well. In the mean time, you can keep learning C++ or whatever you feel like learning.

[Smashmaster]

[QUOTE=Darwin226;41760856]GLSL is basically C. If you can program in any C-like language, you know GLSL and just need a reference. If you can't, you don't need GLSL.[/QUOTE]

I think what he means is, he wants to learn how to [i]use[/i] GLSL, not how to program.

Best way to learn GLSL, assuming you already know how to program in general, is to just take the standard shaders that emulate fixed function OpenGL and add features to/experiment with them. Without further adieu, meet the standard shaders.

Standard vertex shader:
[cpp]
#version 120

varying vec2 texCoord;
varying vec4 color;

void main()
{
gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex;
texCoord = gl_MultiTexCoord0.xy;
color = gl_Color;
}
[/cpp]

Standard fragment shader:
[cpp]
#version 120

uniform sampler2D texture;

varying vec2 texCoord;
varying vec4 color;

void main()
{
gl_FragColor = color*texture2D(texture, texCoord);
}
[/cpp]

I assume you'll be learning deprecated OpenGL first, as is tradition.

[editline]8th August 2013[/editline]

First thing you probably want to know how to do, is to use GLSL's vectors properly. Try plugging the texture coordinates into the fragment color, like this:

[cpp]
#version 120

uniform sampler2D texture;

varying vec2 texCoord;
varying vec4 color;

void main()
{
gl_FragColor = vec4(texCoord, 0.0, 1.0);
}
[/cpp]

We're constructing a new vector, setting its R to texCoord.x, its G to texCoord.y, its B to 0.0, and its A to 1.0. Or you can mix around the components:

[cpp]
gl_FragColor = vec4(texCoord.y, 0.0, texCoord.x, 1.0);
[/cpp]

You can even flip the texCoord vector by swizzling its components as such:

[cpp]
gl_FragColor = vec4(texCoord.yx, 0.0, 1.0);
[/cpp]

Maybe we want to color our result based on the vertex color:

[cpp]
gl_FragColor = color*vec4(texCoord.yx, 0.0, 1.0);
[/cpp]

And that's pretty much it for stuff that's specific to GLSL. From there you should already start to see some possibilities. Try sampling from a texture and messing around with the texture coordinates.

[Darwin226]

[QUOTE=Smashmaster;41761224]I think what he means is, he wants to learn how to [i]use[/i] GLSL, not how to program.
[/QUOTE]

Oh. If that's the case, sorry for distracting you.

[jaooe]

Haha. Cheers for the info Smashmaster, but that stuff is way beyond me.

[editline]8th August 2013[/editline]

Thing is, I don't really know where to start.

I'm looking for an introduction/beginner tutorial on GLSL so to speak. Only just started using C++ but I've been using other languages for quite some time.

[robmaister12]

[QUOTE=jaooe;41761627]Haha. Cheers for the info Smashmaster, but that stuff is way beyond me.

[editline]8th August 2013[/editline]

Thing is, I don't really know where to start.

I'm looking for an introduction/beginner tutorial on GLSL so to speak. Only just started using C++ but I've been using other languages for quite some time.[/QUOTE]

That's quite literally as simple as it gets.

Learn about OpenGL, do some fixed-function stuff, and it should all start making more sense.

[Darwin226]

[QUOTE=jaooe;41761627]Haha. Cheers for the info Smashmaster, but that stuff is way beyond me.

[editline]8th August 2013[/editline]

Thing is, I don't really know where to start.

I'm looking for an introduction/beginner tutorial on GLSL so to speak. Only just started using C++ but I've been using other languages for quite some time.[/QUOTE]

Why do you even need OpenGL/GLSL then?

[Dienes]

I suspect OP doesn't really know what GLSL actually is and/or confuses something.

What are you expecting to be able to do with GLSL? What are your goals? Maybe we find out what you are really after.

[jaooe]

[URL="https://vimeo.com/33091601"]https://vimeo.com/33091601[/URL]

An example of an end goal, I guess... Nothing overly specific, just an example of what I want to do...

My idea, and correct me if I'm wrong is that shaders allow us to sort of add effects to our OpenGL applications?

[Dienes]

Kind of. But it sounds like you don't even have the knowledge to make the OpenGL application you'd need to apply your shaders to. Why start backwards?

[jaooe]

I have the knowledge to make basic OpenGL apps, I now want to extend this knowledge by learning some stuff about shaders.

[Dienes]

Okay, then I was wrong, sorry.

Still, this thread confuses me. Smashmaster's code examples are too heavy for you, you want beginner tutorials, but the ones you found are too "boring"? Not sure what to suggest, Hello World tutorials are never very exciting, that's not their purpose.

[jaooe]

I just want to make learning GLSL fun...

That's how I like to learn, by making it fun, an end goal that inspires me, not drawing a triangle or adding some lighting to a cube/cylinder.

[Darwin226]

[QUOTE=jaooe;41763375]I just want to make learning GLSL fun...

That's how I like to learn, by making it fun, an end goal that inspires me, not drawing a triangle or adding some lighting to a cube/cylinder.[/QUOTE]

Shaders are not added effects. They are the essential building blocks of a modern rendering pipeline. Shaders are what takes data from your memory and translates it to something the GPU can understand. Therefore, a basic shader will always be something simple and "boring" because that's what a basic shader does. Boring stuff.

[jaooe]

My question still stands,

does anyone know any decent resources for learning GLSL.

[editline]8th August 2013[/editline]

I'm just wondering if anyone has any recommendations on learning GLSL.

I know what can be achieved by shaders, just not how to achieve it.

I want to go from point A to point B.

I want to learn how I can turn the circles in my particle system into metaballs.

[Richy13]

Clearly he wants to make games with some glsl [url]https://glsl.heroku.com/e#424.12[/url]

[acpm]

no what you want is people to hand over glsl code to you on a silver platter, if you want to study advanced glsl code, go study advanced glsl code

the algorithms used in glsl code to perform what you desire are probably above your head anyway

it's mostly pure mathematics

[jaooe]

You're deeply misunderstanding me if you think I want code handed to me on a silver platter.

[editline]8th August 2013[/editline]

[QUOTE=Richy19;41764050]Clearly he wants to make games with some glsl [url]https://glsl.heroku.com/e#424.12[/url][/QUOTE]

Thanks, I remembered seeing that playground somewhere before but couldn't find it. Cheers!

[Smashmaster]

[QUOTE=jaooe;41761627]...that stuff is way beyond me.

[editline]8th August 2013[/editline]

Thing is, I don't really know where to start.[/QUOTE]

EDIT: Whoops read your post as the opposite of what you meant. My bad.

[chimitos]

"Shaders" aren't a magical tool that you can use to write pretty graphics on their own.

You need a base knowledge of OpenGL first.
After that, [URL="https://www.google.com/search?q=GLSL+tutorial"]try this[/URL]. First link.

[dajoh]

If you can't figure out GLSL just by looking at it, you don't know C++ or OpenGL well enough.

[Perl]

[QUOTE=dajoh;41769986]If you can't figure out GLSL just by looking at it, you don't know C++ or OpenGL well enough.[/QUOTE]

While this may seem rude or something, he's very very right. GLSL is pretty much self explanatory and if you can't figure the concept out by looking at it, you're starting from the wrong place.

[jaooe]

Okay, well thanks for all the feedback guys.

[adnzzzzZ]

I disagree with most people here (although I'm shit at graphics programming. Also disregard the rest if you wanna program exclusively in C++). LÖVE has a pretty nice wrapper for fragment shaders ([url]http://www.love2d.org/wiki/PixelEffect[/url], and 0.9 (which will be released in some months I think) will also have vertex shaders) that you can start with and it's pretty easy to learn. Some pretty simple ones:

-- Get red channel
red = love.graphics.newPixelEffect[[
    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        vec4 c = Texel(tex, tc);
        return vec4(c.r, 0, 0, c.a);
    }
]]

-- Get green channel
green = love.graphics.newPixelEffect[[
    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        vec4 c = Texel(tex, tc);
        return vec4(0, c.g, 0, c.a);
    }
]]

-- Get blue channel
blue = love.graphics.newPixelEffect[[
    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        vec4 c = Texel(tex, tc);
        return vec4(0, 0, c.b, c.a);
    }
]]

-- Screen mode blending
screen = love.graphics.newPixelEffect[[
    extern Image img;
    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        vec4 base = Texel(tex, tc);
        vec4 blend = Texel(img, tc);
        return vec4(1-((1-base)*(1-blend)));
    }
]]

-- Simple 3x3 box blur
simple_blur = love.graphics.newPixelEffect[[
    extern vec2 image_size;
    extern number intensity = 1.0;

    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        vec2 offset = vec2(1.0)/image_size;
        color = Texel(tex, tc);

        color += Texel(tex, tc + intensity*vec2(-offset.x, offset.y));
        color += Texel(tex, tc + intensity*vec2(0.0, offset.y));
        color += Texel(tex, tc + intensity*vec2(offset.x, offset.y));

        color += Texel(tex, tc + intensity*vec2(-offset.x, 0.0));
        color += Texel(tex, tc + intensity*vec2(0.0, 0.0));
        color += Texel(tex, tc + intensity*vec2(offset.x, 0.0));

        color += Texel(tex, tc + intensity*vec2(-offset.x, -offset.y));
        color += Texel(tex, tc + intensity*vec2(0.0, -offset.y));
        color += Texel(tex, tc + intensity*vec2(offset.x, -offset.y));

        return color/9.0;
    }
]]

simple_sobel = love.graphics.newPixelEffect[[
    extern vec2 image_size;
    extern number intensity = 1.0;

    float lookup(Image tex, vec2 p, float dx, float dy) {
        vec4 color = Texel(tex, p + vec2(intensity*dx, intensity*dy)/image_size);
        return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b;
    }

    vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
        float gx = 0.0;
        gx += -1.0*lookup(tex, tc, -1.0, -1.0);
        gx += -2.0*lookup(tex, tc, -1.0,  0.0);
        gx += -1.0*lookup(tex, tc, -1.0,  1.0);
        gx +=  1.0*lookup(tex, tc,  1.0, -1.0);
        gx +=  2.0*lookup(tex, tc,  1.0,  0.0);
        gx +=  1.0*lookup(tex, tc,  1.0,  1.0);

        float gy = 0.0;
        gy += -1.0*lookup(tex, tc, -1.0, -1.0);
        gy += -2.0*lookup(tex, tc,  0.0, -1.0);
        gy += -1.0*lookup(tex, tc,  1.0, -1.0);
        gy +=  1.0*lookup(tex, tc, -1.0,  1.0);
        gy +=  2.0*lookup(tex, tc,  0.0,  1.0);
        gy +=  1.0*lookup(tex, tc,  1.0,  1.0);

        float g = gx*gx + gy*gy;
        color = Texel(tex, tc);
        color += vec4(g, 0.0, g, 1.0);
        return color;
    }
]]

function love.load()
    local w, h = love.graphics.getWidth(), love.graphics.getHeight()
    gaben = love.graphics.newImage('gaben.jpg')
    simple_blur:send("image_size", {gaben:getWidth(), gaben:getHeight()})
    simple_blur:send("intensity", 3)
end

function love.update(dt)

end

function love.draw()
    love.graphics.setPixelEffect(simple_blur)
    love.graphics.draw(gaben, 0, 0)
end