lygia

lygia, it's a granular and multi-language shader library designed for performance and flexibility

Usage no npm install needed!

<script type="module">
  import lygia from 'https://cdn.skypack.dev/lygia';
</script>

README

Lygia: a multi-language shader library

Tired of reimplementing and searching for the same functions over and over, I started compiling and building a shader library of reusable assets (mostly functions) that can be include over and over. It's very granular, designed for reusability, performance and flexibility.

Join #Lygia channel on shader.zone discord to learn how to use it, share work or get help.

How does it work?

  1. Clone this repository in your project, where your shaders are.
git clone https://github.com/patriciogonzalezvivo/lygia.git
  1. In your shader #include the functions you need:
#ifdef GL_ES
precision mediump float;
#endif

uniform vec2    u_resolution;
uniform float   u_time;

#include "space/ratio.glsl"
#include "math/decimation.glsl"
#include "draw/circle.glsl"

void main(void) {
    vec3 color = vec3(0.0);
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st = ratio(st, u_resolution);
    
    color = vec3(st.x,st.y,abs(sin(u_time)));
    color = decimation(color, 20.);
    color += circle(st, .5, .1);
    
    gl_FragColor = vec4(color, 1.0);
}

How is it organized?

The functions are divided in different categories:

  • math/: general math functions and constants.
  • space/: general spatial operations like scale(), rotate(), etc.
  • color/: general color operations like luma(), saturation(), etc.
    • blend/: typical blend photoshop operations
    • space/: color space conversions
  • animation/: animation operations
    • easing/: easing functions
  • generative/: generative functions like random(), noise(), etc.
  • sdf/: signed distance field generation functions. Most of them ported from PixelSpiritDeck
  • draw/: functions that draw shapes, numbers, lines, etc. Most of them ported from PixelSpiritDeck
  • filters/: typical filter operations like different kind of blurs, mean and median filters.

Flexible how?

There are some functions that are "templated" using #defines. You can change how it behaves by defining a keyword before including it. For examples, gaussian blurs are usually done in two passes (and it defaults), but let's say you are in a rush you can specify to use

#define GAUSSIANBLUR_2D
#include "filter/gaussianBlur.glsl"

void main(void) {

    ...
    
    vec2 pixel = 1./u_resolution;
    color = gaussianBlur(u_tex0, uv, pixel, 9);

    ...
}

Acknowledgements

This library has been built over years, and most often than not on top of the work of brillant generous people like: Inigo Quiles, Morgan McGuire, Hugh Kennedy, Matt DesLauriers. I have tried to give according credits and correct license to each file. It's not perfect but it could be with your help! Please if you see something, say somthing.

Lygia is open sourced under the terms of the BSD license. You are free to use it, extend it and redistribute without charge, but I really appreciate if you can support improving it. That could be adding new functions, testing it, fixing bugs, translating the GLSL files to HLSL and Metal or just sponsoring me through GitHub to do it for you.

Design Principles

This library:

color/blend.glsl
// which includes
color/blend/*.glsl
  • It's multi language. Right now most of it is on GLSL (*.glsl) but the goal is to have duplicate files for HLSL (*.hlsl) and Metal (*.metal).
math/mix.glsl
math/mix.hlsl
  • Have embedded description, use, authorship and license in YAML style so eventually could be parsed easily. If you add new functions please use this template:
/*
author: <FULL NAME>
description: [DESCRIPTION + URL]
use: myFunc(<float> input)
options: none
license: |
  This software is released under the MIT license:
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.    
*/
  • Check for name collisions using the following pattern where FNC_ is followed with the function name:
#ifndef FNC_MYFUNC
#define FNC_MYFUNC

float myFunc(float in) {
    return in;
}

#endif
  • If the function have dependencies to other files, add them on the first lines of the file, before the authorship/description/license header and outside the #ifndef flag check. So once pre-compiled things are use/description/license are cristal clear and nicelly separated.
#include "../this/other/function.glsl"

/*
author: <FULL NAME>
...

#ifndef FNC_MYFUNC
#define FNC_MYFUNC
...
  • Have some templeting capabilities also through #defines probably the most frequent one is templating the sampling function for reusability. The #define options start with the name of the function, in this example MYFUNC_. They are added as options: in the header.
/*
author: <FULL NAME>
description: [DESCRIPTION + URL]
use: myFunc(<sampler2D> texture, <vec2> st)
options: |
   MYFUNC_TYPE: return type
   MYFUNC_SAMPLER_FNC: function use to texture sample 
license: ...
*/

#ifndef FNC_MYFUNC
#define FNC_MYFUNC

#ifndef MYFUNC_TYPE
#define MYFUNC_TYPE vec4
#endif

#ifndef MYFUNC_SAMPLER_FNC
#define MYFUNC_SAMPLER_FNC(POS_UV) texture2D(tex, POS_UV)
#endif

MYFUNC_TYPE myFunc(sampler2D tex, vec2 st) {
    return MYFUNC_SAMPLER_FNC(st);
}

#endif
  • Utilize function overloading. For that please sort your arguments accordingly so it defaults gracefully. When possible sort them in the following order: sampler2D, mat4, mat3, mat2, vec4, vec3, vec2, float, ivec4, ivec3, ivec2, int, bool
/*
author: <FULL NAME>
description: [DESCRIPTION + URL]
use: myFunc(<vec2> st, <vec2|float> x[, <float> y])
license: ...
*/

#ifndef FNC_MYFUNC
#define FNC_MYFUNC
vec2 myFunc(vec2 st, vec2 x) {
    return st * x;
}

vec2 myFunc(vec2 st, float x) {
    return st * x;
}

vec2 myFunc(vec2 st, float x, float y) {
    return st * vec2(x, y);
}
#endif