-
Notifications
You must be signed in to change notification settings - Fork 16
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
Comments
It is easy, in the 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. |
Added leftToRight option a6e88cc |
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
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).
The text was updated successfully, but these errors were encountered: