Shader特效——“翻页”的实现 【GLSL】

2024-08-20 15:58
文章标签 实现 特效 shader 翻页 glsl

本文主要是介绍Shader特效——“翻页”的实现 【GLSL】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

参考自:http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html

效果图





[cpp] view plain  copy
  1. precision mediump float;  
  2.   
  3. varying vec2 texCoord;  
  4. uniform sampler2D sourceTex;  
  5. uniform sampler2D targetTex;  
  6. uniform float time; // Ranges from 0.0 to 1.0  
  7.   
  8. const float MIN_AMOUNT = -0.16;  
  9. const float MAX_AMOUNT = 1.3;  
  10. float amount = time * (MAX_AMOUNT - MIN_AMOUNT) + MIN_AMOUNT;  
  11.   
  12. const float PI = 3.141592653589793;  
  13.   
  14. const float scale = 512.0;  
  15. const float sharpness = 3.0;  
  16.   
  17. float cylinderCenter = amount;  
  18. // 360 degrees * amount  
  19. float cylinderAngle = 2.0 * PI * amount;  
  20.   
  21. const float cylinderRadius = 1.0 / PI / 2.0;  
  22.   
  23. vec3 hitPoint(float hitAngle, float yc, vec3 point, mat3 rrotation) {  
  24.     float hitPoint = hitAngle / (2.0 * PI);  
  25.     point.y = hitPoint;  
  26.     return rrotation * point;  
  27. }  
  28.   
  29.   
  30. vec4 antiAlias(vec4 color1, vec4 color2, float distance) {  
  31.     distance *= scale;  
  32.     if (distance < 0.0) return color2;  
  33.     if (distance > 2.0) return color1;  
  34.     float dd = pow(1.0 - distance / 2.0, sharpness);  
  35.     return ((color2 - color1) * dd) + color1;  
  36. }  
  37.   
  38. float distanceToEdge(vec3 point) {  
  39.     float dx = abs(point.x > 0.5 ? 1.0 - point.x : point.x);  
  40.     float dy = abs(point.y > 0.5 ? 1.0 - point.y : point.y);  
  41.     if (point.x < 0.0) dx = -point.x;  
  42.     if (point.x > 1.0) dx = point.x - 1.0;  
  43.     if (point.y < 0.0) dy = -point.y;  
  44.     if (point.y > 1.0) dy = point.y - 1.0;  
  45.     if ((point.x < 0.0 || point.x > 1.0) && (point.y < 0.0 || point.y > 1.0)) return sqrt(dx * dx + dy * dy);  
  46.     return min(dx, dy);  
  47. }  
  48.   
  49. vec4 seeThrough(float yc, vec2 p, mat3 rotation, mat3 rrotation) {  
  50.     float hitAngle = PI - (acos(yc / cylinderRadius) - cylinderAngle);  
  51.     vec3 point = hitPoint(hitAngle, yc, rotation * vec3(p, 1.0), rrotation);  
  52.   
  53.     if (yc <= 0.0 && (point.x < 0.0 || point.y < 0.0 || point.x > 1.0 || point.y > 1.0)) {  
  54.         return texture2D(targetTex, texCoord);  
  55.     }  
  56.   
  57.     if (yc > 0.0) return texture2D(sourceTex, p);  
  58.   
  59.     vec4 color = texture2D(sourceTex, point.xy);  
  60.     vec4 tcolor = vec4(0.0);  
  61.   
  62.     return antiAlias(color, tcolor, distanceToEdge(point));  
  63. }  
  64.   
  65. vec4 seeThroughWithShadow(float yc, vec2 p, vec3 point, mat3 rotation, mat3 rrotation) {  
  66.     float shadow = distanceToEdge(point) * 30.0;  
  67.     shadow = (1.0 - shadow) / 3.0;  
  68.     if (shadow < 0.0) shadow = 0.0;  
  69.     else shadow *= amount;  
  70.   
  71.     vec4 shadowColor = seeThrough(yc, p, rotation, rrotation);  
  72.     shadowColor.r -= shadow;  
  73.     shadowColor.g -= shadow;  
  74.     shadowColor.b -= shadow;  
  75.     return shadowColor;  
  76. }  
  77.   
  78. vec4 backside(float yc, vec3 point) {  
  79.     vec4 color = texture2D(sourceTex, point.xy);  
  80.     float gray = (color.r + color.b + color.g) / 15.0;  
  81.     gray += (8.0 / 10.0) * (pow(1.0 - abs(yc / cylinderRadius), 2.0 / 10.0) / 2.0 + (5.0 / 10.0));  
  82.     color.rgb = vec3(gray);  
  83.     return color;  
  84. }  
  85.   
  86. vec4 behindSurface(float yc, vec3 point, mat3 rrotation) {  
  87.     float shado = (1.0 - ((-cylinderRadius - yc) / amount * 7.0)) / 6.0;  
  88.     shado *= 1.0 - abs(point.x - 0.5);  
  89.   
  90.     yc = (-cylinderRadius - cylinderRadius - yc);  
  91.   
  92.     float hitAngle = (acos(yc / cylinderRadius) + cylinderAngle) - PI;  
  93.     point = hitPoint(hitAngle, yc, point, rrotation);  
  94.   
  95.     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)){  
  96.         shado = 1.0 - (sqrt(pow(point.x - 0.5, 2.0) + pow(point.y - 0.5, 2.0)) / (71.0 / 100.0));  
  97.         shado *= pow(-yc / cylinderRadius, 3.0);  
  98.         shado *= 0.5;  
  99.     } else  
  100.         shado = 0.0;  
  101.   
  102.     return vec4(texture2D(targetTex, texCoord).rgb - shado, 1.0);  
  103. }  
  104.   
  105. void main(void) {  
  106.     const float angle = 30.0 * PI / 180.0;  
  107.     float c = cos(-angle);  
  108.     float s = sin(-angle);  
  109.   
  110.     mat3 rotation = mat3(  
  111.         c, s, 0,  
  112.         -s, c, 0,  
  113.         0.12, 0.258, 1  
  114.     );  
  115.   
  116.     c = cos(angle);  
  117.     s = sin(angle);  
  118.   
  119.     mat3 rrotation = mat3(  
  120.         c, s, 0,  
  121.         -s, c, 0,  
  122.         0.15, -0.5, 1  
  123.     );  
  124.   
  125.     vec3 point = rotation * vec3(texCoord, 1.0);  
  126.   
  127.     float yc = point.y - cylinderCenter;  
  128.   
  129.     if (yc < -cylinderRadius) {  
  130.         // Behind surface  
  131.         gl_FragColor = behindSurface(yc, point, rrotation);  
  132.         return;  
  133.     }  
  134.   
  135.     if (yc > cylinderRadius) {  
  136.         // Flat surface  
  137.         gl_FragColor = texture2D(sourceTex, texCoord);  
  138.         return;  
  139.     }  
  140.   
  141.     float hitAngle = (acos(yc / cylinderRadius) + cylinderAngle) - PI;  
  142.   
  143.     float hitAngleMod = mod(hitAngle, 2.0 * PI);  
  144.     if ((hitAngleMod > PI && amount < 0.5) || (hitAngleMod > PI/2.0 && amount < 0.0)) {  
  145.         gl_FragColor = seeThrough(yc, texCoord, rotation, rrotation);  
  146.         return;  
  147.     }  
  148.   
  149.     point = hitPoint(hitAngle, yc, point, rrotation);  
  150.   
  151.     if (point.x < 0.0 || point.y < 0.0 || point.x > 1.0 || point.y > 1.0) {  
  152.         gl_FragColor = seeThroughWithShadow(yc, texCoord, point, rotation, rrotation);  
  153.         return;  
  154.     }  
  155.   
  156.     vec4 color = backside(yc, point);  
  157.   
  158.     vec4 otherColor;  
  159.     if (yc < 0.0) {  
  160.         float shado = 1.0 - (sqrt(pow(point.x - 0.5, 2.0) + pow(point.y - 0.5, 2.0)) / 0.71);  
  161.         shado *= pow(-yc / cylinderRadius, 3.0);  
  162.         shado *= 0.5;  
  163.         otherColor = vec4(0.0, 0.0, 0.0, shado);  
  164.     } else {  
  165.         otherColor = texture2D(sourceTex, texCoord);  
  166.     }  
  167.   
  168.     color = antiAlias(color, otherColor, cylinderRadius - abs(yc));  
  169.   
  170.     vec4 cl = seeThroughWithShadow(yc, texCoord, point, rotation, rrotation);  
  171.     float dist = distanceToEdge(point);  
  172.   
  173.     gl_FragColor = antiAlias(color, cl, dist);  
  174. }  


翻页的“分块”结构:









版权声明:涉猎过的知识都像是不断汇入大海的涓涓细流,你怎么知道是哪条汇入的溪流让海洋成为海洋呢【转载请注明出处】 https://blog.csdn.net/panda1234lee/article/details/52282741

这篇关于Shader特效——“翻页”的实现 【GLSL】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090521

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU