Love2d GLSL Shaders

[spynaz]

I have looked through lots of examples of love2d glsl shaders but I still don't get how they work and how I would make my own. I'm a total noob at shaders.

[xXxMoNkEyMaNxXx]

Have you seen this one?

[spynaz]

Have you seen this one?

Yea. I saw you show that to someone in another forum post. But when I tried making my own, I completely failed.

[spynaz]

I just need to know these things to understand it a little better:

What is "t" used for?
Why do you need to get love.timer.getTime()? I'm guessing it's how much to wait every time.
What is "vec4 colour", "Image img", "vec2 txy", and "vec2 sxy" arguments used for? I think that "vec4 colour" is the color and "Image img" is the image, but I'm not sure. And I don't know what you use txy and sxy for.

[daviddoran]

For the types (such as vec4) this does a great job of explaining: http://en.wikibooks.org/wiki/GLSL_Progr ... Operations

[spynaz]

So basically...
vec2 = (x, y)
vec3 = (x, y, z)
and vec4 is 4d?

[retrotails]

If you look at shader.lua in my Funky Fishing clone, I don't understand half the shit in those shaders. But they work. I just took existing examples and altered them.

Code: Select all

[[
            extern number t      = 0.0;
            uniform sampler2D tex0;
            vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
            {
                vec2 uv         = vec2(
                    mod((texture_coords.x - .5)/atan(texture_coords.y/2) + mod(t/4,1),1),
                    1-texture_coords.y
                );
                vec3 col        = vec3(
                    texture2D(tex0,uv).x,
                    texture2D(tex0,uv).y,
                    texture2D(tex0,uv).z
                );
                //texture2D(tex0,uv).xyz*50.0/cLength;
             return vec4( col, 1.0 );
            }
        ]]

Here's what I have figured out:
'extern number t = 0.0' is a variable you can send to the GPU. If you don't send it one with effect:send('t', dt) it'll default to 0.0 instead of crashing. Also, you have to use that variable somewhere or else the compiler complains.
Tables are in vec() things. vec3(r, g, b) is a table with 3 things in it, usually color information. texture2D(tex0,uv) actually stores 3 things, an X a Y and a Z, so instead of putting them in a vec3() you can just put texture2D(tex0,uv).xyz.
Most importantly don't forget this code is being run for every pixel, so you have to think a bit backwards. The variables that are most useful are the color of that pixel, the position of that pixel, and the UV coordinates. If you mess with the UV coordinates a bit you might get wavy water, for example.
gl_FragCoord.xy will tell you what pixel its on, but most things such as UV coordinates say the screen is 1 wide and 1 tall, so .5x.5 is half the entire screen size. That does in fact mean there is usually no aspect ratio correction.

[spynaz]

Ok so I tried to test the how the color works but I got an error msg saying that it can't compile it.

Here is my script:

Code: Select all

function love.load()
    effect = love.graphics.newPixelEffect [[
            extern number t      = 0.0;
            uniform sampler2D tex0;
            vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
            {
                vec3 col {
					(10, 20, 10) 
				}
             return vec4( col, 1.0 );
            }
        ]]
end

function love.draw()
    love.graphics.setPixelEffect(effect)
    love.graphics.rectangle('fill', 10,305,790,285)
end

local t = 0
function love.update(dt)
    t = t + dt
    effect:send("t", dt)
end

[retrotails]

Ok so I tried to test the how the color works but I got an error msg saying that it can't compile it.

Code: Select all

[[
    extern number t      = 0.0;
    uniform sampler2D tex0;
    vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
    {
        vec3 col = vec3(10, 20, 10);
        return vec4( col, 1.0 );
    }
]]

This will work, but here's a hint - colors, like screen coordinates, go from 0 to 1, and since those are way above 1 it'll just make anything you draw white.
Also, there's no point in having "extern number t = 0.0;" because that's a variable and you aren't using it anywhere. You could do

Code: Select all

[[
    extern number t      = 0.0;
    uniform sampler2D tex0;
    vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
    {
        vec4 col = vec4(1, 1, 1, t);
        return vec4( col);
    }
]]

and then in love.update

Code: Select all

effect:send('t', math.mod(dt, 1))

for example, to make the alpha flash once per second.

[spynaz]

That didn't do anything except just the rectangle was invisible.