google / swissgl Goto Github PK

Hi,

Is there a way to send an array as uniform to a shader? (which don't have the size of a vec or a mat)
If no, is there an other way to send a list of values to the shader? Thanks!

Thanks for making this.

Is there any interest in creating an ESM package? This would allow users to use SwissGL with build systems and bundlers.

I'm wondering if we can do some transform feedback with swissgl. I use it in other environements for particle simulations. Is there an example of it ?

First off, i love what you are doing with this project.

I might be missing something, but is there a way to pass an array of vectors
as a uniform array ie. uniform vec4 colors[count]; ?
I don't want to inline them because they might be animated and
the cost recompiling the fragment shader on every frame seems high.

Just looking at the code and it is only 600 lines so would seem viable to port to Haxe and then more viable to also compile for webgl and also opengl in a possible future.
Features that would be ideal - to split up the code a little, adding proper typing. I guess in haxe it is easy to split up files cleanly without horrible webpack stuff.

While haxe supports module level functions
https://haxe.org/blog/module-level-fields/

might be worth having the odd class and abstract type.
https://code.haxe.org/category/abstract-types/

But certainly a lot of the magic strings could be abstract enums making it cleaner.
https://haxe.org/manual/types-abstract-enum.html

It is a little daunting to port in it's current form. Do you have any thoughts or opinions or cut down versions.
certainly is would atleast be easier to port if each function had a comment above on it's input and output types.

I am not too sure on the gls_template stuff workings is that like a shader string so effectively c/c++.

things like vec3 could be implemented in haxe as @:structInit class with abstract type over the top?

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.