how to convert shadershop formula into glsl

问题

I have been learning some basic of shaders recently and I came up with a great visual tools : shadershop

But I am having trouble to convert the formula I created in this site into glsl.

A simple example, I created a formula in this site:

And I am able to convert this in glsl:

And then I moved on, I created a two dimension formula on shadershop :

But this I just have no clue how to convert this formula into glsl just like I did before.

Any advice will be appreciated, thanks :)

UPDATE

I tried again to convert the formula according to @Rabbid76 's advice:

But still I am having trouble to understan :

how to split the formula to U and V
how to deal with the matrix in the formula

回答1:

The formula of shadershop can be expressed as follows:

vec2  x1x2 = inverse(m) * vec2(x1, x2);
float x    = -sin(x1x2.x - x1x2.y);

where m is a 2x2 matrix.

e.g.

mat2 m = mat2(
    0.1, 0.0,
    0.5, 1.0
);

For the formula for the inverse matrix see www.mathwords.com (in GLSL ES 1.00 there is no function for the inverse matrix) :

float det_m = m[0][0]*m[1][1] - m[0][1]*m[1][0];
mat2  inv_m = mat2(m[1][1], -m[0][1], -m[1][0], m[0][0]) / det_m;

The full fragment shader code may look like this:

void main()
{
    vec2 st = 2.0 * gl_FragCoord.xy / resolution.xy - 1.0;

    vec2 scale = vec2(1.5, 1.5);
    st *= scale;

    mat2 m = mat2(
        0.1, 0.0,
        0.5, 1.0
    );

    vec2 x1x2 = vec2(st.x, 0.0);
    float det_m = m[0][0]*m[1][1] - m[0][1]*m[1][0];
    if ( det_m != 0.0 )
    { 
      mat2 inv_m = mat2(m[1][1], -m[0][1], -m[1][0], m[0][0]) / det_m;
      x1x2 = inv_m * st.xy;
    }
    float x = -sin(x1x2.x - x1x2.y);

    vec3 color = vec3( x, x, abs(x) );
    gl_FragColor = vec4(color, 1.0);
}

See the preview:

来源：https://stackoverflow.com/questions/50821891/how-to-convert-shadershop-formula-into-glsl

标签

glsl

shader