Has anyone made a lygia integration for regl?

[snibbe]

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

[patriciogonzalezvivo]

Shouldn't be a problem. You just need to resolve the #include dependencies. For that you can do it locally, so before you bundle you regl app. For that depends on what you are using, there is a vite plugin, webpack and esbuild that support's it.

The other way to do it is dynamically when loading the shaders (it's slower and depends on https://lygia.xyz server) for it add this to your HTML (note this is the way P5.js examples for LYGIA are working):

    <!-- as a JavaScript source -->
    <script src="https://lygia.xyz/resolve.js"></script>

    <!-- Or as a ES6 module -->
    <script type="module">
        import resolveLygia from "https://lygia.xyz/resolve.esm.js"
    </script>

And then in JS when loading a shader as a string call resolveLygia() functions which return a string resolved:

    // 1. FIRST

    // Sync resolver, one include at a time
    vertSource = resolveLygia(vertSource);
    fragSource = resolveLygia(fragSource);

    // OR.

    // ASync resolver, all includes in parallel calls
    vertSource = resolveLygiaAsync(vertSource);
    fragSource = resolveLygiaAsync(fragSource);

    // 2. SECOND

    // Use the resolved source code 
    shdr = createShader(vertSource, fragSource);

If all this fail, you can drag&drop a shader file (.glsl, .frag, .vert) with dependencies to #include "lygia/something/something.glsl" and will return it (will automatically download on your computer) with all dependencies resolved.