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进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并