Flip the page like a book for foldable phone?

[Andersonong-github]

Add on the flip feature to support foldable phone like a real book?

[gsioteam]

This is a pretty challenging task. I have been researching how to implement this effect for serval days. and I already have some results, see flip_widget.

I think we can implement the effect through a single shader. My shader is here:

precision mediump float;
uniform sampler2D texture;
uniform float percent;
uniform float tilt;
varying vec2 uv;
void main()
{
    float x1 = uv.x;
    float y1 = 1.0 - uv.y;
    if (tilt * (x1 - percent) > y1) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
    } else {
        float x0 = (x1 / tilt + y1 + percent * tilt) / (tilt + 1.0/tilt);
        float x2 = 2.0 * x0 - x1;
        float dis = abs(x1 - x0);
        float y2 = 2.0 * (x1 - x0) / tilt + y1 - max(0.0, x2 - percent) * (1.0 - x2) / (1.0 - percent);
        if (y2 > 0.0 && x2 < 1.0) {
            vec4 val = mix(vec4(0.6, 0.6, 0.6, 1.0), vec4(0.98, 0.98, 0.98, 1.0), min(1.0, dis/0.1));
            gl_FragColor = texture2D(texture, vec2(x2, 1.0 - y2)) * val;
        } else {
            gl_FragColor = texture2D(texture, vec2(x1, 1.0 - y1));
        }
    }
}

If someone could give some advice on the shader, it would be a great help.