Hi, I'm looking for help with a glsl shader. I want to only output a specific srgb range with smoothstep. But I have no idea how to implement it. I need only the peak information so like smoothstep 230/245-255 srgb.

Any help would be appreciated :)

This is the shader

//!PARAM L_hdr
//!TYPE float
//!MINIMUM 0
//!MAXIMUM 10000
1000.0

//!PARAM L_sdr
//!TYPE float
//!MINIMUM 0
//!MAXIMUM 1000
203.0

//!PARAM sigma
//!TYPE float
//!MINIMUM 0.0
//!MAXIMUM 1.0
0.5

//!HOOK OUTPUT
//!BIND HOOKED
//!DESC tone mapping (reinhard)

const float pq_m1 = 0.1593017578125;
const float pq_m2 = 78.84375;
const float pq_c1 = 0.8359375;
const float pq_c2 = 18.8515625;
const float pq_c3 = 18.6875;

const float pq_C  = 10000.0;

float Y_to_ST2084(float C) {
    float L = C / pq_C;
    float Lm = pow(L, pq_m1);
    float N = (pq_c1 + pq_c2 * Lm) / (1.0 + pq_c3 * Lm);
    N = pow(N, pq_m2);
    return N;
}

float ST2084_to_Y(float N) {
    float Np = pow(N, 1.0 / pq_m2);
    float L = Np - pq_c1;
    if (L < 0.0 ) L = 0.0;
    L = L / (pq_c2 - pq_c3 * Np);
    L = pow(L, 1.0 / pq_m1);
    return L * pq_C;
}

vec3 RGB_to_XYZ(vec3 RGB) {
    mat3 M = mat3(
        0.6369580483012914, 0.14461690358620832,  0.1688809751641721,
        0.2627002120112671, 0.6779980715188708,   0.05930171646986196,
        0.000000000000000,  0.028072693049087428, 1.060985057710791);
    return RGB * M;
}

vec3 XYZ_to_RGB(vec3 XYZ) {
    mat3 M = mat3(
         1.716651187971268,  -0.355670783776392, -0.253366281373660,
        -0.666684351832489,   1.616481236634939,  0.0157685458139111,
         0.017639857445311,  -0.042770613257809,  0.942103121235474);
    return XYZ * M;
}

vec3 XYZ_to_LMS(vec3 XYZ) {
    mat3 M = mat3(
         0.3592832590121217,  0.6976051147779502, -0.0358915932320290,
        -0.1920808463704993,  1.1004767970374321,  0.0753748658519118,
         0.0070797844607479,  0.0748396662186362,  0.8433265453898765);
    return XYZ * M;
}

vec3 LMS_to_XYZ(vec3 LMS) {
    mat3 M = mat3(
         2.0701522183894223, -1.3263473389671563,  0.2066510476294053,
         0.3647385209748072,  0.6805660249472273, -0.0453045459220347,
        -0.0497472075358123, -0.0492609666966131,  1.1880659249923042);
    return LMS * M;
}

vec3 LMS_to_ICtCp(vec3 LMS) {
    LMS.x = Y_to_ST2084(LMS.x);
    LMS.y = Y_to_ST2084(LMS.y);
    LMS.z = Y_to_ST2084(LMS.z);
    mat3 M = mat3(
         2048.0 / 4096.0,   2048.0 / 4096.0,    0.0 / 4096.0,
         6610.0 / 4096.0, -13613.0 / 4096.0, 7003.0 / 4096.0,
        17933.0 / 4096.0, -17390.0 / 4096.0, -543.0 / 4096.0);
    return LMS * M;
}

vec3 ICtCp_to_LMS(vec3 ICtCp) {
    mat3 M = mat3(
        0.9999999999999998,  0.0086090370379328,  0.1110296250030260,
        0.9999999999999998, -0.0086090370379328, -0.1110296250030259,
        0.9999999999999998,  0.5600313357106791, -0.3206271749873188);
    ICtCp *= M;
    ICtCp.x = ST2084_to_Y(ICtCp.x);
    ICtCp.y = ST2084_to_Y(ICtCp.y);
    ICtCp.z = ST2084_to_Y(ICtCp.z);
    return ICtCp;
}

vec3 RGB_to_ICtCp(vec3 color) {
    color *= L_sdr;
    color = RGB_to_XYZ(color);
    color = XYZ_to_LMS(color);
    color = LMS_to_ICtCp(color);
    return color;
}

vec3 ICtCp_to_RGB(vec3 color) {
    color = ICtCp_to_LMS(color);
    color = LMS_to_XYZ(color);
    color = XYZ_to_RGB(color);
    color /= L_sdr;
    return color;
}

float curve(float x, float w) {
    float simple = x / (1.0 + x);
    float extended = simple * (1.0 + x / (w * w));
    return extended;
}

vec3 tone_mapping_ictcp(vec3 ICtCp) {
    float I2  = Y_to_ST2084(curve(ST2084_to_Y(ICtCp.x) / L_sdr, L_hdr / L_sdr) * L_sdr);
    ICtCp.yz *= mix(1.0, min(ICtCp.x / I2, I2 / ICtCp.x), sigma);
    ICtCp.x   = I2;
    return ICtCp;
}

vec4 hook() {
    vec4 color = HOOKED_texOff(0);

    color.rgb = RGB_to_ICtCp(color.rgb);
    color.rgb = tone_mapping_ictcp(color.rgb);
    color.rgb = ICtCp_to_RGB(color.rgb);

    return color;
}

I am not sure whether you have the Koch curve added already. I haven't found anything by that name, but maybe it is under a different name? I have used the Koch curve code from The Art of Code to create some really fun sketches.

Could all of the shaders in /color/blend/* be under a MIT license (they're currently "TODO")? Looks to be a copy of https://github.com/jamieowen/glsl-blend which is under MIT.

Just a quick suggestion here, I made a function for creating triangular tiles as I thought it could be a nice addition to the existing hex and square tiles. The code is based on FabriceNeyret2's hexagonal tiling tuto.

As the code probably can be improved I just included it here instead of filing a PR. If you prefer a PR @patriciogonzalezvivo, I can definitely do that as well.

I'm not sure whether the barycentric coords should be optional as an bool argument or that we should just prefer one over the other. Alternatively, we could have triTile() and triTileBaryCentric()?

vec4 triTile(vec2 st) {
  // based on 
  // FabriceNeyret2 hexagonal tiling tuto
  // https://www.shadertoy.com/view/4dKXR3
  st *= mat2(1,-1./1.73, 0,2./1.73);         // conversion to hexagonal coordinates 
  vec3 g = vec3(st,1.-st.x-st.y);
  vec3 id = floor(g);                        // cell id
  g = fract(g);                              // diamond coords
  return length(g) > 1. ? vec4(g.xy, id.xy) : vec4(g.xy, id.yz);
  // barycentric coords, should this be optional?
  // return length(g) > 1. ? vec4(g.xy, id.xy) : vec4(1. - g.xy, id.yz);
}

Here's an example:

Here is a p5 sketch with my 2D gear curve. The number and size of spokes are parameters to the function. Please let me know if this is something you would like and I can add it.

https://editor.p5js.org/kfahn/sketches/1J-NMQG8h

At the bottom of the README.md there is a link to https://shader.zone/ but when I try to join this server discord tells me that the invite has expired.

"smooth" is a reserved keyword in GLSL

I'm having trouble using the OKLAB/RGB conversions, and this is the cause as best I can tell. The matrix values used match the source implementation for linear sRGB to OKLAB.

This is fine, but an incorrect name introduces confusion. I recommend changing the names from rgb2oklab and oklab2rgb to srgb2oklab and oklab2srgb, respectively. Granted I am by no means a color expert and my grasp on these subjects is tenuous at best, so please check my work.

I'm getting this error
undeclared identifier 'rgb2srgb' at Assets/Shaders/lygia/color/mixBox.hlsl(76) (on d3d11)

Not really sure what's going on. The issue goes away if I create a new file that is a copy of rgb2srgb with renamed defines and methods, but that's not a good solution to whatever the underlying issue is.

Assembly Definitions are for C# code, not Graphics, so we can delete this file 👍

Assembly for Assembly Definition File 'Assets/Shaders/lygia/Lygia.asmdef' will not be compiled, because it has no scripts associated with it.

Hi,
this issue appears specifically on Safari on Mac, using the p5 example on
https://editor.p5js.org/patriciogonzalezvivo/sketches/hwBn0i0qw
I don't know if it extends to other coding languages or OSs

I wouldn't know how to describe other than it works fine on Firefox and Chrome, but when run on Safari, the dragon seems to project its own silhouette on itself. As a solid shadow across its chest, on the front and back

Images 1 and 2 show the example run on Firefox and Chrome - working right

Images 3 and 4 show what happens when it's run on Safari - silhouetted shadow

If there's an obvious solution that I clearly missed, please let me know :)

Thanks in advance

I believe that u_LightColor should be replaced with LIGHT_COLOR:

#include "../../space/nearest.glsl"

which is 404 :)

Is there a way to get lygia to be compatible with https://github.com/oframe/ogl ?

Issue: Many Lygia shaders stop working on WebGL 2.0 with this error:

sample: Illegal use of reserved word

How to reproduce: run an updated version of lygia_threejs_examples.

Hardware: tested on a MacBook Air with M1 chip.

The issue is not related to ThreeJS as I managed to replicate the error even with a basic WebGL project. Apparently sample is a reserved word in WebGL 2.0, even though I didn't manage to find any reference in the GLSL ES 3.00 spec.

Hello, got inspired today and created this sandbox as a starter template for lygia and react three fiber. Will use it for sure in the upcoming days and I would love anyone could use it as well:

https://codesandbox.io/s/lygia-react-starter-fftx6p

Do you think it is a good idea to add it to the templates?

Warm regards.

Has anyone made a lygia integration/example for use in a regl project?

I often find when trying around some of the provided functions that the usage is different because some return floats, others vectors etc.. While the argument types and the options are always clear, return types are most of the time missing in the docs, and that information would be helpful for the user. Unless they are clear by context, in which case Im probably missing something.

Sorry to make a fuss, but your license information for "psrdnoise" is wrong in several ways. The MIT license is not "non-commercial", it's free for any use as long as you include the license information (which you do not, hence you are actually in violation of the license). Furthermore, whereas the code was written by me and Ian, the company Ashima Arts has not existed for a decade, and I never worked there, so please include the proper license header, as found in our original code: https://github.com/stegu/psrdnoise/tree/main/src

Also, consider providing a link back to the original repo, as we will (hopefully) keep maintaining that code for quite some time.

Our livelihoods as researchers depend entirely on citation and reputation. This is why I am being so picky about the terms of the MIT license. It's the most permissive license we could find while still making sure we get credit for the code.

I just noticed NPM package hasn't been updated for years

Hi,
I have a creative coding helper package create-ssam that comes with LYGIA + OGL or Three.js templates for a fullscreen shader. Will it be helpful to add the link to the examples in README?

It comes with a few extra helpful features such as video(gif, webm, mp4) exports, git image snapshot for archival, etc. which might be useful for some people.

Hi @patriciogonzalezvivo,

Thanks for working on this fantastic library!

Do you have plans to release it in a more web-friendly version? What would be the best pattern if that's the case, do you need help?
I'm not much familiar at all, but it seems like Threejs uses ShaderChunks a bunch of export defaults and merges. Would you have a suggestion?

Here is my very hacky experiment, made inside an Observablehq Notebook. I fetch all the source code from the Github repo, parse and remove all "#includes" then add the required modules manually.

https://observablehq.com/d/e4e8a96f64a6bf81

It would be awesome to have an npm package and a more straightforward and automatic way to load the modules.

Ps: I'm also big fan of Lygia Clark's work! 🇧🇷

Hi @patriciogonzalezvivo, quick question on Lygia, if you do not mind:
How to use the f0 parameter of a PBR material? Is it a library value, or do I need to calculate it myself?

Here is a sample of usage in my rendering pipeline:

vec4 materialPbr(
    const Hit hit,
    float ior, float f0, float density, float blendCoeff,
    sampler2D samplerAlbedo, sampler2D samplerMetallic,
    sampler2D samplerRoughness, sampler2D samplerNormal,
    sampler2D samplerAO, sampler2D samplerEmission)
{
    vec3 blend = triPlanarBlend(hit.normal, blendCoeff);

    surfacePosition         = hit.point;

    Material pbrMaterial    = materialNew();
    pbrMaterial.position    = hit.point;

    pbrMaterial.normal      = whiteoutBlend(hit.point, hit.normal, blend, density, samplerNormal);

    pbrMaterial.albedo      = triPlanarMapping(samplerAlbedo, hit.point, blend, density);
    pbrMaterial.roughness   = triPlanarMapping(samplerRoughness, hit.point, blend, density).r;
    pbrMaterial.metallic    = triPlanarMapping(samplerMetallic, hit.point, blend, density).r;
    pbrMaterial.ambientOcclusion = triPlanarMapping(samplerAO, hit.point, blend, density).r;
    pbrMaterial.emissive    = triPlanarMapping(samplerEmission, hit.point, blend, density).rgb;

    pbrMaterial.ior         = vec3(ior);         // Index of Refraction (refractive materials only)
    pbrMaterial.f0          = vec3(f0);          // reflectance at 0 degree

    //pbrMaterial.shadow      = 1.0;             // default 1.0
    //pbrMaterial.clearCoat   = 0.9;
    //pbrMaterial.clearCoatRoughness = 0.9;

    return pbr(pbrMaterial);
}

Hi,
thank you for this wonderful project (and many others from you).

This is not an issue but a suggestion.

I often find that I don't need to keep the git history of the library I'm using, and thought it would be great to have that option displayed for Lygia in addition to git clone instruction.

npx degit https://github.com/patriciogonzalezvivo/lygia.git lygia

..will save about 9MB of the project size and download faster.

Not to use degit package, below could be another way (with or without --recurse-submodules):

git clone --depth 1 --no-tags --single-branch --branch=main https://github.com/patriciogonzalezvivo/lygia.git

I've included this command to the Lygia templates in the Ssam canvas wrapper package I'm developing and it seems to work fine so far.

I don't see a license mentioned for fbm.glsl, what should that be?

I'm getting this error when using the gaussian blur filter.

ERROR: 0:370: 'j' : Loop index cannot be compared with non-constant expression
ERROR: 0:466: 'i' : Loop index cannot be compared with non-constant expression

pointing to these lines:

369:     vec2 xy = vec2(0.0);
370:     for (int j = 0; j < GAUSSIANBLUR2D_KERNELSIZE; j++) {
371:         #if defined(PLATFORM_WEBGL)
...
465:     const float k = 0.39894228;
466:     for (int i = 0; i < kernelSize; i++) {
467:         float x = -0.5 * ( kernelSizef -1.0) + float(i);

I'm importing the filter using vite-glsl-plugin like this:

precision highp float;

uniform sampler2D tMap;
uniform vec2 uResolution;

varying vec2 vUv;

#define GAUSSIANBLUR_2D
#include "../../experience/shaders/lygia/sample/clamp2edge.glsl"
#define GAUSSIANBLUR_SAMPLER_FNC(TEX, UV) sampleClamp2edge(TEX, UV)
#include "../../experience/shaders/lygia/filter/gaussianBlur.glsl"

void main() {
    vec2 pixel = 1. / uResolution;
    vec3 color = vec3(0.);
    color = gaussianBlur(tMap, vUv, pixel, 20).rgb;

    gl_FragColor = vec4(color, 1.);
}

Am I doing something wrong here? Anything specific thing I need to do to make this work? Thanks :)