Shader特效——“翻页”的实现 【GLSL】
2016-08-23 01:20
1561 查看
参考自:http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html
效果图
翻页的“分块”结构:
效果图
precision mediump float; varying vec2 texCoord; uniform sampler2D sourceTex; uniform sampler2D targetTex; uniform float time; // Ranges from 0.0 to 1.0 const float MIN_AMOUNT = -0.16; const float MAX_AMOUNT = 1.3; float amount = time * (MAX_AMOUNT - MIN_AMOUNT) + MIN_AMOUNT; const float PI = 3.141592653589793; const float scale = 512.0; const float sharpness = 3.0; float cylinderCenter = amount; // 360 degrees * amount float cylinderAngle = 2.0 * PI * amount; const float cylinderRadius = 1.0 / PI / 2.0; vec3 hitPoint(float hitAngle, float yc, vec3 point, mat3 rrotation) { float hitPoint = hitAngle / (2.0 * PI); point.y = hitPoint; return rrotation * point; } vec4 antiAlias(vec4 color1, vec4 color2, float distance) { distance *= scale; if (distance < 0.0) return color2; if (distance > 2.0) return color1; float dd = pow(1.0 - distance / 2.0, sharpness); return ((color2 - color1) * dd) + color1; } float distanceToEdge(vec3 point) { float dx = abs(point.x > 0.5 ? 1.0 - point.x : point.x); float dy = 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)) return sqrt(dx * dx + dy * dy); return min(dx, dy); } vec4 seeThrough(float yc, vec2 p, mat3 rotation, mat3 rrotation) { float hitAngle = 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)) { return texture2D(targetTex, texCoord); } if (yc > 0.0) return texture2D(sourceTex, p); vec4 color = texture2D(sourceTex, point.xy); vec4 tcolor = vec4(0.0); return antiAlias(color, tcolor, distanceToEdge(point)); } vec4 seeThroughWithShadow(float yc, vec2 p, vec3 point, mat3 rotation, mat3 rrotation) { float shadow = distanceToEdge(point) * 30.0; shadow = (1.0 - shadow) / 3.0; if (shadow < 0.0) shadow = 0.0; else shadow *= amount; vec4 shadowColor = seeThrough(yc, p, rotation, rrotation); shadowColor.r -= shadow; shadowColor.g -= shadow; shadowColor.b -= shadow; return shadowColor; } vec4 backside(float yc, vec3 point) { vec4 color = texture2D(sourceTex, point.xy); float gray = (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); return color; } vec4 behindSurface(float yc, vec3 point, mat3 rrotation) { float shado = (1.0 - ((-cylinderRadius - yc) / amount * 7.0)) / 6.0; shado *= 1.0 - abs(point.x - 0.5); yc = (-cylinderRadius - cylinderRadius - yc); float hitAngle = (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; return vec4(texture2D(targetTex, texCoord).rgb - shado, 1.0); } void main(void) { const float angle = 30.0 * PI / 180.0; float c = cos(-angle); float s = 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); float yc = 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; } float hitAngle = (acos(yc / cylinderRadius) + cylinderAngle) - PI; float hitAngleMod = 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) { float shado = 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); float dist = distanceToEdge(point); gl_FragColor = antiAlias(color, cl, dist); }
翻页的“分块”结构:
相关文章推荐
- Shader特效——“翻页”的实现 【GLSL】
- Shader特效——“Distance Estimation 距离估计”的实现 【GLSL】
- Shader特效——“素描 Pencil Sketch”的实现【GLSL】
- Shader特效——实现“噪声”【基于ShaderToy】【GLSL】
- Shader特效——“径向模糊”的实现 【GLSL】
- Shader特效——“雪花飞舞 ”的实现 【GLSL】
- Shader特效——“马赛克”的实现【GLSL】
- Shader特效——“帧动画效果”的实现 【GLSL】
- Shader特效——“Bilateral Filter”的实现 【GLSL】
- Shader特效——“旋转粒子”的实现【GLSL】
- Shader特效——“Invaders Invaders(火星文雨)效果”的实现 【GLSL】
- Shader特效——“Kuwahara Filter”的实现 【OpenCV】【GLSL】
- Shader特效——实现“闪电”【GLSL】
- Shader特效——“Simple 3D Raymarch”的实现 【GLSL】
- Shader特效——实现“火苗”【GLSL】
- Shader特效——实现“HDR”效果【GLSL】
- Shader特效——"Floyd Steinberg 抖动” 的实现 【OpenCV】【GLSL】
- Shader特效——“Canny边缘检测”的实现 【GLSL】
- Shader特效——“Gamma校正”的实现 【GLSL】
- Shader特效——“Simple RayTrace”的实现 【GLSL】