ShaderJoy ——一种可交互的翻页效果【GLSL】

已于 2024-12-25 20:57:44 修改
阅读量414 收藏
点赞数
分类专栏： ShaderJoy —— Shader 实例详解【重制版】 文章标签： 特效 图形渲染 游戏引擎
于 2024-12-25 10:44:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panda1234lee/article/details/144710795
版权

效果视频

Shader 特效——可与鼠标交互的翻页效果

效果图

完整代码

#define pi 3.14159265359
#define radius .1

#iChannel0 "file://./images/Woolly_3.png"
#iChannel1 "file://./images/Woolly_4.png"

void mainImage( out vec4 fragColor, in vec2 fragCoord
了解本专栏 订阅专栏 解锁全文
ShaderJoy ——螺旋线闪光粒子效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
12-04 1593
效果图 完整代码和注释 const float rad = 0.9; const float dots = 64.0; const float duration = 180.0; const vec3 colorsep = vec3(0, 2.09, 4.18); const float PI = 3.1415926535897932384626433832795; const float PI2 = 2.0 * PI; #iUniform float power = 1....
ShaderJoy —— 五种超实用的 GLSL 函数代码（二）
ShaderJoy 的兴趣技术杂货铺
12-13 1820
当我们标准化一个高斯分布的向量，我们得到一个均匀随机的单位向量【相对均匀】。换句话说，它创建的矩阵除了对角线之外都是零，对角线上的值就是你传入的值。该函数找到直线上最接近 p 点的点，然后返回到 p 点的距离。这是通过把这个点投影到直线上，然后截断它的投影，使它在端点之间。我们所做的是将两个 int 值放入一个特殊的多项式函数中，然后将其转换为浮点数，并将结果映射到 (- 1,1) 的范围内。假设我们直接将一个方框中的向量映射到一个球面上的向量，我们会得到的是。没有它，我们得到的值就不是随机的。
ShaderJoy ——“翻页” 效果的原理以及实现 【GLSL】
热门推荐
ShaderJoy 的兴趣技术杂货铺
08-23 1万+
参考自：http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html 效果图 precision mediump float; varying vec2 texCoord; uniform sampler2D sourceTex; uniform
ShaderJoy —— Tricky 的图像透视效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
09-24 1462
效果图 稍作修改后的效果 思路解析 首先针对纹理坐标进行变换 vec2 a = vec2(2.*I.x, I.x + I.y); ///< 右图 vec2 b = vec2(-2.0 * I.x, -I.x + I.y); ///< 左图 vec2 c = vec2(-I.x - I.y, I.x - I.y); ///< 下图 I.x + I.y 的示意图，颜色越白表示值越大 -I.x + I.y 的示意图 ...
ShaderJoy —— 简单的粒子雨特效【GLSL】
ShaderJoy 的兴趣技术杂货铺
02-07 2247
效果图 粒子雨效果 完整代码和注释 #define PI 3.14159 #define TAU 6.28318 #iUniform float A = 55. in {0., 300.} #iUniform float B = 35. in {0., 300.} #iUniform float C = .25 in {0., 1.} #iUniform float D = 64. in {0., 200.} #iUniform float E = 5. in {0., 20.} #...
ShaderJoy —— 40 种 Instagram 滤镜 【GLSL】
ShaderJoy 的兴趣技术杂货铺
06-29 4930
PS 一步一步制作 LUT3D 滤镜参考地址（戳它） 效果图 Amaro Nashville Sierra 1977 Brannan Hudson 处理后的 LUT3D 基准图 Amaro Nashville Sierra 1977 Brannan Hudson 完整代码 #iChannel0 "file://./image.jpg" // #iCha...
ShaderJoy —— 三种 USM 锐化算法和实现 【GLSL】
ShaderJoy 的兴趣技术杂货铺
06-21 2452
效果图 原图 weight = 0.3 0.5 0.8 算法简述 (源图像 – weight * 高斯模糊)/(1 - weight), 其中 weight 表示权重 [0.1, 0.9]，默认为 0.6 完整代码 BufferA: #iChannel0 "file://./images/yinkong.jpg" #iUniform float blurSizeA = 0.00195 in {0.0, 0.01} void mainImage( out ...
ShaderJoy —— EPM Blur 算法与实现 【GLSL】
ShaderJoy 的兴趣技术杂货铺
06-20 1407
算法参考 Trent1985 大佬的博客，由于他只提供了部分代码，而且是纯 C++ 的，所以我将它移植到了 OpenGL 上。实现的是基于RGB三通道的版本。 效果图 n=10, delta = 0.0074 n=5, delta = 0.0074 n=10, delta=0.0226 完整代码 BufferA: #iChannel0 "file://./images/yinkong.jpg" #iUniform int n = 10 in {1...
ShaderJoy —— 漫画 sketch 效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
08-14 1741
效果图 原图 核心算法思路 该效果的核心思路一共分为以下几步【参考 Photoshop 中的图层操作】 先根据图像的亮度，人为设定阈值，分为（6个）不同等级的灰度图； 然后构造（6个）不同旋转方向的 “木刻纹” 图像，如下图所示； 该核心的 “木刻纹” 是由以下正弦和取模函数搭配实现的 float dist = mod(rotuv.y - sin(rotuv.x * frecuencia) * amplitud, divisor); 函数示意图如下所示 等高线图如下所示 接着，将 “木刻
ShaderJoy —— 心形爆炸烟花效果【GLSL】
ShaderJoy 的兴趣技术杂货铺
07-18 2829
效果图 心形爆炸（上升到一定高度后）的核心代码 /// -------------------------------------------------- /// @note 根据（单位圆的）角度计算笛卡尔坐标 float x = cos(ang); //coords of unit circle float y = sin(ang); /// 心形公式 y = y + abs(x) * sqrt( (8. - abs(x)) / 50.0 ); /// 心形速度向量...
前端图形渲染 html+css、canvas、svg和webgl绘制详解，各个应用场景及其区别
警警的博客
05-15 1007
技术类型渲染方式交互性缩放性性能适用场景HTML+CSS声明式DOM 渲染高高中基础布局、简单图形SVG声明式矢量图形高高中图表、图标、地图等静态图形Canvas命令式像素渲染低低高动画、游戏、实时数据可视化WebGL命令式GPU 加速渲染中高极高3D 游戏、VR/AR、复杂数据可视化极客时间CSDN博客。
游戏引擎学习第285天:“Traversables 的事务性占用”
虾球
05-16 738
这一阶段完成了从“直接写入占用信息”到“事务式、安全验证”的过渡，实现了实体之间空间互斥的基础设施。避免多个实体占据同一位置；清晰管理占用和释放逻辑；为未来AI路径判断、阻挡检测提供了清晰入口；提高系统健壮性，避免非法访问和状态错误。接下来可进一步考虑将此机制融入移动控制器、导航系统中，实现完整的路径判断和动态调度能力。没有区分“移动中”与“占用中”；“头部”是否占用与逻辑模型不一致；解包操作引发副作用；“占用”机制需要被更精确地建模为一个状态机。
游戏引擎学习第288天:继续完成Brains
虾球
05-17 534
成功初始化了实体与大脑的绑定；已能通过大脑控制逻辑影响实体状态（如放置位置）；清理了一些无用遗留代码；下一步将重构实体移动系统，从“立即移动”改为“延迟执行”，由物理系统统一处理；为后续添加更复杂 AI 行为（如路径规划、状态机）奠定基础。整体思路正在朝模块化、解耦、数据驱动的方向稳步推进，后续还需逐步完善大脑与物理系统的接口设计和调度流程。我们目前进入了物理系统与大脑控制系统整合的关键阶段。
游戏引擎学习第276天:调整身体动画
虾球
05-13 885
键盘输入逻辑更接近最终游戏行为，输入更连贯且合理；操作行为更具容错性，能正确处理按键组合与释放的复杂情况；避免了输入状态卡住或角色原地停顿的状况；对未来整合美术资源及进一步优化动作系统打下坚实基础；“吸附机制”目前搁置，以维持操作自然性为优先。整体来说，我们对当前控制系统的状态感到满意，后续将继续在此基础上进行美术集成、碰撞检测等方面的进一步开发。居中吸附延迟机制已完成基本实现；输入触发、定时器更新和逻辑判断等流程已整合完毕；
游戏引擎学习第287天:加入brain逻辑
虾球
05-16 393
每个实体通过控制器类型、插槽编号和控制器实例 ID 进行动态组合；所有结构在模拟区域加载时按需拼装，无需静态绑定或生命周期管理；系统更加有机、模块化、无状态，允许实体被自由组合、断裂和重组。接下来将继续推进代码实现，通过先行编写具体控制器逻辑（例如 Hero Controller）进一步验证这一机制的实际效果。实体仅为物理/逻辑组件，没有固有类型；控制器承担逻辑聚合、行为协调和状态分发；结构变化实时同步、自动响应；彻底摆脱传统面向对象实体建模中“类型中心论”的束缚；
游戏引擎学习第289天:将视觉表现与实体类型解耦
最新发布
虾球
05-17 475
控制器成功识别输入，值正确。关键问题出在加速度没有从控制器状态传播到实体 DDP 的目标变量ddp_to上。一旦赋值修复为，实体应能按预期响应方向控制。本轮调试发现了导致实体无法获得加速度的根本问题：控制器输出的加速度变量没有被正确传递到实体逻辑中。修复方式为：明确将的值赋给实际用于计算的目标变量。这是当前最紧急的问题，修复后预计能恢复基本移动能力，后续将继续清理和改进整体结构。
游戏引擎学习第277天:稀疏实体系统
虾球
05-13 991
通过将每种属性存储在独立的表格中，行为反应模型避免了传统面向对象方法中可能出现的继承复杂性，并且通过分离关注点，可以更灵活、有效地处理游戏中的状态变化和复杂交互。单一继承：简单且高效，适用于简单的对象关系。多重继承：提供了更大的灵活性，但也引入了指针调整问题，导致访问内存时需要额外的复杂性。动态修改继承结构的局限性：C++ 不支持在运行时修改继承结构，这使得在运行时动态添加功能变得困难，特别是在多重继承的复杂情况下。
游戏引擎学习第281天:在房间之间为摄像机添加动画效果
虾球
05-15 1030
摄像机的控制不应影响玩家的方向感与操作判断力；避免画面切换时的突变，尤其在存在危险因素时尤为重要；引入迟滞机制，设置非对称的切换门槛，避免摄像机频繁抖动；结合视觉动画，实现房间之间的平滑过渡，提高体验连贯性；重视玩家感知路径，从视觉接收、控制反应、逻辑判断的完整链路出发优化系统设计。我们将基于这些理念，继续优化摄像机控制系统，确保最终游戏体验既舒适，又具备预期一致性和稳定的可控性。一个系统的当前状态不仅取决于输入值本身，还取决于它是如何达到该输入值的过程。也就是说，它不是“时间无关”的，而是具有。
游戏引擎学习第275天:将旋转和剪切传递给渲染器
虾球
05-13 1074
准确表达玩家真实操作意图；避免因物理模拟造成的视觉抖动或翻转；视觉效果更加自然连贯；提高游戏操作的响应性与流畅感。这是一次重要的结构优化，我们将朝向控制的权力还给了输入控制系统，而不是物理系统，从而更好地服务于游戏的“可控性”与“手感”。头部移动与回弹效果我们已经实现了头部可以在角色运动时略微脱离身体，并通过一个“弹簧”机制（spring）将其拉回。这种效果带来了更自然的动态表现，尤其在角色快速变向或突然停止时有不错的惯性反馈感。头部朝向控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShaderJoy

您的打赏是我继续写博客的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值