Share a Shader!

[Ref]

Just another simple Shader.
Splits a colored image into separate R,G,B images.

[pke1029]

My first shader! The Mandelbrot set and Julia set.

1580583395.png (14.78 KiB) Viewed 71796 times

[Popolon]

Some first tries with shaders.

demo01_screenshot.png (20.5 KiB) Viewed 67742 times

demo01.love

(1.42 KiB) Downloaded 361 times

[glitchapp]

oh amazing, I want to learn that! till now I'm just using external shaders and I don't dare to try to do it myself because all that math looks like a magic spell to me. Do you know any good resources or tutorials to attempt doing such nice shaders?

[GVovkiv]

oh amazing, I want to learn that! till now I'm just using external shaders and I don't dare to try to do it myself because all that math looks like a magic spell to me. Do you know any good resources or tutorials to attempt doing such nice shaders?

learn match (since there so much ways to create cool effects using only sine, cosine, etc)
have good imagination
learn c (C The Programming Language book is nice for that, since GLSL (is what love use for shaders, https://www.khronos.org/opengl/wiki/Ope ... g_Language) is C-styled language)
use examples from https://www.shadertoy.com/ to learn how other people do stuff with shaders
and, don't forget learn about https://love2d.org/wiki/Shader how love works with shaders, since there slight differences

[Popolon]

oh amazing, I want to learn that! till now I'm just using external shaders and I don't dare to try to do it myself because all that math looks like a magic spell to me. Do you know any good resources or tutorials to attempt doing such nice shaders?

I only get the coordinates of the point and change color depending on it. sinus, cosinus and their friend exponential (that is like a combination of both) are the base to create model of so much things on universe ^ ^. I made an easy to understand interactive tutorial https://tic80.com/play?cart=1739 in Lua too with TIC-80 (a fantasy console). I think both LÖVE and TIC-80 are complementary tools, with same language but different goals. cos & sin and e (and so ln) are some of the really convenient math tool, but you can also make nice effect without it, everything depend on reading the doc, let try several things with tool you learn and let your own imagination go as wild as possible.

[glitchapp]

oh amazing, I want to learn that! till now I'm just using external shaders and I don't dare to try to do it myself because all that math looks like a magic spell to me. Do you know any good resources or tutorials to attempt doing such nice shaders?

I only get the coordinates of the point and change color depending on it. sinus, cosinus and their friend exponential (that is like a combination of both) are the base to create model of so much things on universe ^ ^. I made an easy to understand interactive tutorial https://tic80.com/play?cart=1739 in Lua too with TIC-80 (a fantasy console). I think both LÖVE and TIC-80 are complementary tools, with same language but different goals. cos & sin and e (and so ln) are some of the really convenient math tool, but you can also make nice effect without it, everything depend on reading the doc, let try several things with tool you learn and let your own imagination go as wild as possible.

thank you! that's an amazing piece of software! I think many teachers would find it very useful! thanks for sharing, it's time to relearn some math if I want to make my own shaders, I think it worth the effort.

[Bigfoot71]

Small flame effect in "pure code", which I adapted from here and modified slightly so that it runs better (because the original was ramming to death and was glitched on Löve2d)

Code: Select all

#define fireMovement    vec2(0.01, 0.2) // SPEED & DIRECTION
#define normalStrength  10.0            // INTENSITY OF FIRE

extern float time;

float rand(vec2 co) {
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

vec2 hash( vec2 p ) {
    p = vec2( dot(p,vec2(127.1,311.7)),
            dot(p,vec2(269.5,183.3)) );

    return -1.0 + 2.0*fract(sin(p)*43758.5453123);
}

float noise( in vec2 p ) {

    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;

    vec2 i = floor(p + (p.x+p.y)*K1);

    vec2 a = p - i + (i.x+i.y)*K2;
    vec2 o = step(a.yx,a.xy);    
    vec2 b = a - o + K2;
    vec2 c = a - 1.0 + 2.0*K2;

    vec3 h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );

    vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0)));

    return dot( n, vec3(70.0) );

}

float fbm ( in vec2 p ) {
    float f = 0.0;
    mat2 m = mat2( 1.6,  1.2, -1.2,  1.6 );
    f  = 0.5000*noise(p); p = m*p;
    f += 0.2500*noise(p); p = m*p;
    f += 0.1250*noise(p); p = m*p;
    f += 0.0625*noise(p); p = m*p;
    f = 0.5 + 0.5 * f;
    return f;
}

vec4 effect(vec4 color, Image tex, vec2 texCoords, vec2 screenCoords) {

    vec2 uv = texCoords;

    vec2 uvT = (uv * vec2(1.0, 0.5)) + time * fireMovement;
    float n = pow(fbm(8.0 * uvT), 1.0);    
    
    float gradient = pow(1.0 - (1.0 - uv.y), 2.0) * normalStrength;
    float finalNoise = n * gradient;
    
    vec3 pixel = finalNoise * vec3(2.*n, 2.*n*n*n, n*n*n*n);
    return vec4(pixel, 1.);

}

FJwD5PG.png (527.36 KiB) Viewed 63132 times

[Popolon]

I made a tutorial about how to mix vertex and fragment (pixel) shader on very simple example. That was hard to found any, and I was limited to fragment shaders until last months due to that. Hope it could help.

A relatively complete explanation is here: https://framagit.org/popolon/love_shade ... ents_01.md
And the associated example here: https://framagit.org/popolon/love_shade ... 1/main.lua

In attachement, the packaged .love of the example.