Formatting and special variables

[woudsma]

Promising project! I've been struggling with creating procedural textures and ping-pong shaders using Processing, JS (with three, react-three-fiber, drei, etc). This project does it out-of-the-box!

I'm trying to get up to speed with swissgl's workflow, but I'm still a bit dazed by all the magic / special variables, and what each glsl call actually does. For example in the Particle Life demo. The following creates and stores a WebGLTexture:

const F = glsl(`
    float(I.x==I.y) + 0.1*float(I.x==I.y+1)`,
    {size:[K,K], format:'r16f'});

This renders the texture to the canvas:

glsl({F}, `F(I/20).x*3.0`);

Here we call glsl two more times to update points - without using the i variable (is this intentional?):

for (let i=0; i<2; ++i) {
    glsl({K, seed:123}, `
        vec2 pos = (hash(ivec3(I, seed)).xy-0.5)*10.0;
        float color = floor(P.x*K);           // why is uv renamed to P?
        out0 = vec4(pos, 0.0, color);`,
        points);
}

Then we call glsl again, providing only a fragment shader function and points as target.
To render to the screen, glsl is called again but this time with a vertex and fragment shader function.
It's somewhat confusing what each glsl() is doing to the stored variables like F, points and the canvas.

The README.md mentions:

invitation to discuss compact and expressive graphics library design

I hope I can provide some constructive initial feedback:

• I think the project could benefit from some JS / GLSL code formatting for better readability, I could create a PR for that. Please let me know what you think.
• Maybe more descriptive (and less terse) variable names? K, I, P, F, etc.
• I'm missing an overview and description of the special variables that can be used with swissgl
• This really is very nice, but makes the examples quite hard to read sometimes when a texture is called F or S:

  Uniform textures can be accessed with usual GLSL functions, or with a helper macro that has the same name as the texture uniform.

[znah]

Thank you for the feedback! I'll make a table of special variables with their scopes, and try to make names used in examples more descriptive.

[woudsma]

Let me know if I can assist anywhere!
Running all code through a formatter/linter wouldn't take me much time/effort for example.