参考自：http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html
效果图
precision mediumpfloat;
varying vec2 texCoord;
uniform sampler2D sourceTex;
uniform sampler2D targetTex;
uniformfloattime;// Ranges from 0.0 to 1.0
constfloatMIN_AMOUNT = -0.16;
constfloatMAX_AMOUNT = 1.3;
floatamount = time * (MAX_AMOUNT - MIN_AMOUNT) + MIN_AMOUNT;
constfloatPI = 3.141592653589793;
constfloatscale = 512.0;
constfloatsharpness = 3.0;
floatcylinderCenter = amount;
// 360 degrees * amount
floatcylinderAngle = 2.0 * PI * amount;
constfloatcylinderRadius = 1.0 / PI / 2.0;
vec3 hitPoint(floathitAngle,floatyc, vec3 point, mat3 rrotation) {
floathitPoint = hitAngle / (2.0 * PI);
point.y = hitPoint;
returnrrotation * point;
}
vec4 antiAlias(vec4 color1, vec4 color2,floatdistance) {
distance *= scale;
if(distance < 0.0)returncolor2;
if(distance > 2.0)returncolor1;
floatdd = pow(1.0 - distance / 2.0, sharpness);
return((color2 - color1) * dd) + color1;
}
floatdistanceToEdge(vec3 point) {
floatdx = abs(point.x > 0.5 ? 1.0 - point.x : point.x);
floatdy = abs(point.y > 0.5 ? 1.0 - point.y : point.y);
if(point.x < 0.0) dx = -point.x;
if(point.x > 1.0) dx = point.x - 1.0;
if(point.y < 0.0) dy = -point.y;
if(point.y > 1.0) dy = point.y - 1.0;
if((point.x < 0.0 || point.x > 1.0) && (point.y < 0.0 || point.y > 1.0))returnsqrt(dx * dx + dy * dy);
returnmin(dx, dy);
}
vec4 seeThrough(floatyc, vec2 p, mat3 rotation, mat3 rrotation) {
floathitAngle = PI - (acos(yc / cylinderRadius) - cylinderAngle);
vec3 point = hitPoint(hitAngle, yc, rotation * vec3(p, 1.0), rrotation);
if(yc <= 0.0 && (point.x < 0.0 || point.y < 0.0 || point.x > 1.0 || point.y > 1.0)) {
returntexture2D(targetTex, texCoord);
}
if(yc > 0.0)returntexture2D(sourceTex, p);
vec4 color = texture2D(sourceTex, point.xy);
vec4 tcolor = vec4(0.0);
returnantiAlias(color, tcolor, distanceToEdge(point));
}
vec4 seeThroughWithShadow(floatyc, vec2 p, vec3 point, mat3 rotation, mat3 rrotation) {
floatshadow = distanceToEdge(point) * 30.0;
shadow = (1.0 - shadow) / 3.0;
if(shadow < 0.0) shadow = 0.0;
elseshadow *= amount;
vec4 shadowColor = seeThrough(yc, p, rotation, rrotation);
shadowColor.r -= shadow;
shadowColor.g -= shadow;
shadowColor.b -= shadow;
returnshadowColor;
}
vec4 backside(floatyc, vec3 point) {
vec4 color = texture2D(sourceTex, point.xy);
floatgray = (color.r + color.b + color.g) / 15.0;
gray += (8.0 / 10.0) * (pow(1.0 - abs(yc / cylinderRadius), 2.0 / 10.0) / 2.0 + (5.0 / 10.0));
color.rgb = vec3(gray);
returncolor;
}
vec4 behindSurface(floatyc, vec3 point, mat3 rrotation) {
floatshado = (1.0 - ((-cylinderRadius - yc) / amount * 7.0)) / 6.0;
shado *= 1.0 - abs(point.x - 0.5);
yc = (-cylinderRadius - cylinderRadius - yc);
floathitAngle = (acos(yc / cylinderRadius) + cylinderAngle) - PI;
point = hitPoint(hitAngle, yc, point, rrotation);
if(yc < 0.0 && point.x >= 0.0 && point.y >= 0.0 && point.x <= 1.0 && point.y <= 1.0 && (hitAngle < PI || amount > 0.5)){
shado = 1.0 - (sqrt(pow(point.x - 0.5, 2.0) + pow(point.y - 0.5, 2.0)) / (71.0 / 100.0));
shado *= pow(-yc / cylinderRadius, 3.0);
shado *= 0.5;
}else
shado = 0.0;
returnvec4(texture2D(targetTex, texCoord).rgb - shado, 1.0);
}
voidmain(void) {
constfloatangle = 30.0 * PI / 180.0;
floatc = cos(-angle);
floats = sin(-angle);
mat3 rotation = mat3(
c, s, 0,
-s, c, 0,
0.12, 0.258, 1
);
c = cos(angle);
s = sin(angle);
mat3 rrotation = mat3(
c, s, 0,
-s, c, 0,
0.15, -0.5, 1
);
vec3 point = rotation * vec3(texCoord, 1.0);
floatyc = point.y - cylinderCenter;
if(yc < -cylinderRadius) {
// Behind surface
gl_FragColor = behindSurface(yc, point, rrotation);
return;
}
if(yc > cylinderRadius) {
// Flat surface
gl_FragColor = texture2D(sourceTex, texCoord);
return;
}
floathitAngle = (acos(yc / cylinderRadius) + cylinderAngle) - PI;
floathitAngleMod = mod(hitAngle, 2.0 * PI);
if((hitAngleMod > PI && amount < 0.5) || (hitAngleMod > PI/2.0 && amount < 0.0)) {
gl_FragColor = seeThrough(yc, texCoord, rotation, rrotation);
return;
}
point = hitPoint(hitAngle, yc, point, rrotation);
if(point.x < 0.0 || point.y < 0.0 || point.x > 1.0 || point.y > 1.0) {
gl_FragColor = seeThroughWithShadow(yc, texCoord, point, rotation, rrotation);
return;
}
vec4 color = backside(yc, point);
vec4 otherColor;
if(yc < 0.0) {
floatshado = 1.0 - (sqrt(pow(point.x - 0.5, 2.0) + pow(point.y - 0.5, 2.0)) / 0.71);
shado *= pow(-yc / cylinderRadius, 3.0);
shado *= 0.5;
otherColor = vec4(0.0, 0.0, 0.0, shado);
}else{
otherColor = texture2D(sourceTex, texCoord);
}
color = antiAlias(color, otherColor, cylinderRadius - abs(yc));
vec4 cl = seeThroughWithShadow(yc, texCoord, point, rotation, rrotation);
floatdist = distanceToEdge(point);
gl_FragColor = antiAlias(color, cl, dist);
}
翻页的“分块”结构：
