Share a Shader!

[StoneCrow]

Dont mind at all, its actually good to see how its supposed to work I havent got a very good grasp of love-glsl yet

[Robin]

Well, I took StoneCrow's code to finish the adaptation of the film effect (I hope you don't mind )
It works pretty well, I think I will take some parts for my project. The desaturation/illumination that comes with the grain is really cool.

Oh, wow, that shader actually works on my computer! I thought none of them would work...

EDIT: so far all of them work. :O

[Ref]

Great!
Thanks for completing this.
Learning something with every example.

[Lafolie]

The film grain is very pretty! I love it.

[AaronWizard]

Simplex noise terrain generator, based on this project for GLSL noise.

There are two things I can't figure out though. One, I want the terrain to wrap horizontally and vertically for a preferably arbitrary pair of dimensions; e.g. the screen width and height. Two, I want to be able stick in a seed value somewhere (os.time() I guess) so that I can get different landscapes, plus different noise patterns to get things like rainfall. Both features apparently need lots of maths for me to implement even with regular simplex noise, not mentioning the GLSL optimized simplex noise code I copy-and-pasted.

[kexisse]

These effects are beautiful! I'm trying to create my first shader, but I still can't get my head around it. Are there any books or tutorials people can recommend?

Also, is there a way to apply a shader to everything on-screen? So far it seems to only apply to the way each of my individual objects are drawn.

(Edit: I think I answered my own question, you make a canvas object the size of the screen, draw all your stuff to it, apply a shader, then draw it to the screen. Right?)

[richapple]

you make a canvas object the size of the screen, draw all your stuff to it, apply a shader, then draw it to the screen. Right?

Or you can

Code: Select all

function love.load()
    blank = love.graphics.newImage(love.graphics.newImageData(1, 1))
end

and then

Code: Select all

function love.draw()
    love.graphics.setPixelEffect(effect)
    love.graphics.draw(blank, 0, 0, 0, love.graphics.getWidth(), love.graphics.getHeight())
    love.graphics.setPixelEffect()
end

This code creates a 1px image and then stretches it to the size of screen with pixels accesible through texture_coords. I'm doing it because many people say they don't support canvases but you are free to do anything.

Are there any books or tutorials people can recommend?

For sure:

1. glsl.heroku.com > 100 effects that are free to fork and learn from
2. duh
3. this thread. No, seriously the most helpful examples I've ever seen. I learned from totally zero.

Simplex noise terrain generator, based on this project for GLSL noise.

Ah, I remember playing around with it. Very awesome code. About randomness I did it this way:
(Please note I don't completely remember)

Code: Select all

effect = love.graphics.newPixelEffect([[
    extern number randx;
    extern number randy;
    vec4 effect(-some stuff-)
    {
        float x = -your coords- + randx;
        float y = -your coords- + randx;
        -your effect code-
    }
]])
effect:send("randx", math.random()*100)
effect:send("randy", math.random()*100)

or maybe if something like that will work:

Code: Select all

effect = love.graphics.newPixelEffect([[
    number randx = (]] .. math.random()*100 .. [[);
    number randy = (]] .. math.random()*100 .. [[);
    vec4 effect(-some stuff-)
    {
        float x = -your coords- + randx;
        float y = -your coords- + randx;
        -your effect code-
    }
]])

Because our shader is basically a string, we can concatenate it with anything

[Mandarancio]

God-Rays shader

From http://fabiensanglard.net/lightScattering/index.php
External variable (play with this parametrs):
decay (~0.5-0.8)
density (~0.2-0.4)
weight (~0.5-2)
lightPositionOnScreen (vec2 with the position of the light [using texture coordinate (0.0-1.0,0.0-1.0)])

Code: Select all

extern number decay;
extern number density;
extern number weight;
extern vec2 lightPositionOnScreen;
//uniform sampler2D firstPass;
const number NUM_SAMPLES = 100 ;

 vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords)
{

  vec2 deltaTextCoord = texture_coords - lightPositionOnScreen;
 
  deltaTextCoord *= 1.0 / float(NUM_SAMPLES) * density;
  number illuminationDecay = 1.0;
  vec2 textCoo=texture_coords;
 
  vec4 result=texture2D(texture, textCoo );
  for(int i=0; i < NUM_SAMPLES ; i++)
   {
     	  textCoo -= deltaTextCoord;
     	  vec4 sample = texture2D(texture, textCoo );
          sample *= illuminationDecay * weight;
          result += sample;
          illuminationDecay *= decay;
  } 
  return result;
}

Enjoy!

[Ref]

Thanks Mandarancio!
Hacked together a Love to try out all the parameters.
Not that easy to get the right combination so provided a random keyboard parameter selection - I know, no real no logic but at least I gave you a help screen and on-screen parameter setting display.
Found adding 'fog' made the effect a little more apparent.
Press <g> and <f> to toggle effects on/off.
Don't know exactly how you would use in a game but fun to play around with.
<New version of god_ray that doesn't recreate effect each cycle.>

[Ref]

Hi!
Anybody create a Sobel (edge detection) PixelEffect using the kernal:
1 2 1
0 0 0
-1 -2 -1