Share a Shader!

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
User avatar
Ref
Party member
Posts: 702
Joined: Wed May 02, 2012 11:05 pm

Re: Share a Shader!

Post by Ref »

Just another simple Shader.
Splits a colored image into separate R,G,B images.
Attachments
split.love
color separation
(54.8 KiB) Downloaded 557 times
User avatar
pke1029
Prole
Posts: 1
Joined: Sat Mar 09, 2019 2:06 am

Re: Share a Shader!

Post by pke1029 »

My first shader! The Mandelbrot set and Julia set.
1580583395.png
1580583395.png (14.78 KiB) Viewed 55385 times
Attachments
mandelbrot.love
mandelbrot
(1.32 KiB) Downloaded 542 times
User avatar
Popolon
Prole
Posts: 25
Joined: Mon Nov 07, 2016 11:03 am
Location: France/Paris

Re: Share a Shader!

Post by Popolon »

Some first tries with shaders.
demo01_screenshot.png
demo01_screenshot.png (20.5 KiB) Viewed 51331 times
demo01.love
(1.42 KiB) Downloaded 287 times
glitchapp
Party member
Posts: 235
Joined: Tue Oct 05, 2021 10:34 am
Contact:

Re: Share a Shader!

Post by 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?
User avatar
GVovkiv
Party member
Posts: 668
Joined: Fri Jan 15, 2021 7:29 am

Re: Share a Shader!

Post by GVovkiv »

glitchapp wrote: Sat Mar 12, 2022 5:09 am 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
User avatar
Popolon
Prole
Posts: 25
Joined: Mon Nov 07, 2016 11:03 am
Location: France/Paris

Re: Share a Shader!

Post by Popolon »

glitchapp wrote: Sat Mar 12, 2022 5:09 am 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
Party member
Posts: 235
Joined: Tue Oct 05, 2021 10:34 am
Contact:

Re: Share a Shader!

Post by glitchapp »

Popolon wrote: Sat Mar 12, 2022 8:57 pm
glitchapp wrote: Sat Mar 12, 2022 5:09 am 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.
User avatar
Bigfoot71
Party member
Posts: 287
Joined: Fri Mar 11, 2022 11:07 am

Re: Share a Shader!

Post by 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
FJwD5PG.png (527.36 KiB) Viewed 46721 times
Attachments
FIRE.love
(1.16 KiB) Downloaded 137 times
My avatar code for the curious :D V1, V2, V3.
User avatar
Popolon
Prole
Posts: 25
Joined: Mon Nov 07, 2016 11:03 am
Location: France/Paris

Re: Share a Shader!

Post by 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.
Attachments
demo_vertex_fragements_01.love
(1.8 KiB) Downloaded 33 times
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 18 guests