Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Previous page (Left to right) flip effect #2

Closed
M144-Coder opened this issue Feb 4, 2022 · 3 comments
Closed

Previous page (Left to right) flip effect #2

M144-Coder opened this issue Feb 4, 2022 · 3 comments

Comments

@M144-Coder
Copy link

Thank you for this great library @gsioteam .

How to achieve the same flip effect but from the opposite direction which is from bottom left to the bottom right direction (previous page flip effect).

@gsioteam
Copy link
Owner

gsioteam commented Feb 13, 2022

It is easy, in the gl_render.dart you can find the fragment shader

precision mediump float;
uniform sampler2D texture;
uniform float percent;
uniform float tilt;
uniform vec2 size;
varying vec2 uv;

float px(float uvx) {
    return uvx * size.x;
}

float py(float uvy) {
    return uvy * size.y;
}

vec2 to_uv(vec2 pos) {
    // Modified from vec2(pos.x / size.x, 1.0 - pos.y / size.y)
    return vec2(1.0 - pos.x / size.x, 1.0 - pos.y / size.y);
}

void main()
{
    const float roll_size = 6.0;
    // Modified from float x1 = px(uv.x)
    float x1 = px(1.0 - uv.x);
    float y1 = py(1.0 - uv.y);
    float per = px(percent);
    if (y1 / tilt + per < x1) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
    } else {
        float x0 = (x1 / tilt + y1 + per * tilt) / (tilt + 1.0/tilt);
        float off = x1 - x0;
        float dis = abs(off);
        float x2 = 2.0 * x0 - x1;
        float y2 = 2.0 * (x1 - x0) / tilt + y1;
        if (off > -roll_size && off <= 0.0) {
            y1 = y1 - (-sqrt(-off * off - 2.0 * roll_size * off) + roll_size);
        }
        if (y1 > 0.0) {
            off = x2 - x0;
            if (off > 0.0) {
                if (off < roll_size) {
                    y2 = y2 - (sqrt(-off * off + 2.0 * roll_size * off) + roll_size);
                } else {
                    y2 = y2 - 2.0 * roll_size;
                }
            }
            if (y2 > 0.0 && y2 < size.y && x2 < size.x) {
                vec4 shadow = mix(vec4(0.6, 0.6, 0.6, 1.0), vec4(0.98, 0.98, 0.98, 1.0), min(1.0, dis/20.0));
                gl_FragColor = texture2D(texture, to_uv(vec2(x2, y2))) * shadow;
            } else {
                vec4 shadow = mix(vec4(1.2, 1.2, 1.2, 1.0), vec4(1.0, 1.0, 1.0, 1.0), min(1.0, dis/20.0));
                float sha_off = pow(max(0.0, max(y2 - size.y, -y2)), 2.0) + pow(max(0.0, x2 - size.x), 2.0);
                shadow = shadow - (1.0 - smoothstep(0.0, 81.0, sha_off)) * vec4(0.3, 0.3, 0.3, 0.0);
                gl_FragColor = texture2D(texture, to_uv(vec2(x1, y1))) * shadow;
            }
        } else {
            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
        }
    }
}

I will add an option to implement this functionality.

@gsioteam
Copy link
Owner

Added leftToRight option a6e88cc

@M144-Coder
Copy link
Author

Thanks for the solution, I confirm it's working. But I think it will be better to pass the left to right parameter to the startFlip and/or flip function instead of the FlipWidget itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants