Share some Shader info

[liquid8d]

The other day, I started to mess with shaders, which was... fun? I have done practically no C programming and zero graphics or game development, so this was all new to me. There was only one example I saw in the orbit layout (bloom) so I started looking around..

This has a couple cool things that I was able to implement:
http://www.geeks3d.com/shader-library/

Here is a site where you can play around with stuff:
https://www.shadertoy.com/new#

And here is a site where people have played around (WARNING: no joke, some of these could probably induce an epileptic seizure):
http://glsl.heroku.com/

Here is the ones I thought were pretty cool and maybe useful:

pixelate.frag

Code: [Select]

//http://www.geeks3d.com/20101029/shader-library-pixelation-post-processing-effect-glsl/
uniform sampler2D texture;
void main()
{   
    float rt_w = 480.0;
    float rt_h = 360.0;
    float pixel_w = 4.0;
    float pixel_h = 2.0;
   
    vec2 uv = gl_TexCoord[0].xy;

    vec3 tc = vec3(1.0, 0.0, 0.0);
    float dx = pixel_w*(1./rt_w);
    float dy = pixel_h*(1./rt_h);
    vec2 coord = vec2(dx*floor(uv.x/dx),
                      dy*floor(uv.y/dy));
    tc = texture2D(texture, coord).rgb;
    gl_FragColor = vec4(tc, 1.0);
}

ripple.frag

Code: [Select]

//http://www.geeks3d.com/20110316/shader-library-simple-2d-effects-sphere-and-ripple-in-glsl/
uniform sampler2D texture;
uniform float ttime;

void main()
{   
    float time = ttime / 1000.0;
    vec2 tc = gl_TexCoord[0].xy;
    vec2 p = -1.0 + 2.0 * tc;
    float len = length(p);
    vec2 uv = tc + (p/len)*cos(len*12.0-time*4.0)*0.03;
    vec3 col = texture2D(texture,uv).xyz;
    gl_FragColor = vec4(col,1.0);
}

Ripple requires you to send a parameter, ttime, so your layout.nut would look something like:

Code: [Select]

local fshader = fe.add_shader(Shader.Fragment, "pixelate.frag");
fshader.set_texture_param("texture");

local snap = fe.add_artwork("snap", 50, 50, 480, 360);
snap.shader = fshader;

fe.add_ticks_callback("onTick");

function onTick( ttime ) {
    fshader.set_param("ttime", ttime);
}



scanlines.frag

Code: [Select]

//http://glsl.heroku.com/e#15689.0

uniform sampler2D texture;

void main()
{
    vec4 pixel = texture2D(texture, gl_TexCoord[0].xy);
    gl_FragColor = pixel - vec4( step(1.0,mod(gl_FragCoord.y,2.0)) );
}


I tried to convert these as best I could and I only really grasped a little about fragment shaders - vertex is still a bit of a mystery to me. So, I guess.. share your shader info??

[Luke_Nukem]

Some of those are pretty cool!

Vertex shaders are used for doing things like editing the dimensions.
An example would be, you have an image on screen, which when proccessed, is really 2 polygons together to make a square/rectangle etc. You can then use a vertex shader to maybe throw a sine wave on each vertex (dot in the corner where poly lines meet) to move the position over a time scale.
Or just change the positions so the image looks stretched/pulled on one side.

I actually just pushed to my branch of attract-extras, it has an excellent blur shader. I can't remember where I got it from though.
https://github.com/Luke-Nukem/attract-extra/tree/master/layouts/Swapper

What languages are you proficent in?

[liquid8d]

Ah, that blur is cool.. I do understand vertices in the context of graphics, I guess I just need to see a few in action to understand how it can modify it.

Pretty much anything except for C stuff I am fine with. I probably should put some effort into it though

contrast.frag

Code: [Select]

//https://code.google.com/p/ewigehoffnung/source/browse/lib/glsl/contrast.frag
uniform sampler2D texture;
void main()
{   
    float contrast = 2.0;
    vec4 color = texture2D(texture, gl_TexCoord[0].xy);

    color = (color-0.5)*contrast + 0.5;

    gl_FragColor.rgb = color.rgb;
    gl_FragColor.a = 1.0;
}

sepiatone.frag

Code: [Select]

//https://code.google.com/p/ewigehoffnung/source/browse/lib/glsl/sepia.frag
uniform sampler2D texture;
void main()
{   
    vec4 Sepia1 = vec4( 0.2, 0.05, 0.0, 1.0 );   
    vec4 Sepia2 = vec4( 1.0, 0.9, 0.5, 1.0 );

    vec4 Color = texture2D(texture, vec2(gl_TexCoord[0]));

    float SepiaMix = dot(vec3(0.3, 0.59, 0.11), vec3(Color));
    Color = mix(Color, vec4(SepiaMix), vec4(0.5));
    vec4 Sepia = mix(Sepia1, Sepia2, SepiaMix);

    gl_FragColor = mix(Color, Sepia, 1.0);
}

I tried to modify this screen flicker one, because it would be a cool effect, but I couldn't quite get what I wanted:
http://glsl.heroku.com/e#17112.0

[raygun]

Here's a neat one to mess around with guys:  I modified the "basic" layout to run it through a CRT emulation shader (I believe it's from the bsnes project).  So you can get the CRT effect on an LCD in the frontend.  It's even got a barrel effect that you can adjust... You can do this with any layout by drawing everything to a surface first and then applying this shader to the surface.

Here's a sample:


And here's the link to modified layout (including the shader files in crt.vert and crt.frag respectively):

https://github.com/mickelson/attract-extra/tree/master/layouts/basic-crt