关于 threejs-temporal-surfaces
面向 Three.js 屏幕空间效果的技能,指导实现湿玻璃光学效果与持久历史累积。它明确区分历史状态和解析程序状态,并提供实现参考与路由边界。
主要功能
- 01持久历史与程序演化的选择
- 02乒乓缓冲与模糊流程
- 03湿玻璃折射与光学法线
- 04历史衰减及重置规则
适用场景
- 01制作带累积霜层的玻璃效果
- 02实现带折射的窗面雨滴
- 03为屏幕空间效果管理历史状态
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-temporal-surfaces安装后在 Claude Code 中输入/threejs-temporal-surfaces确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlexamples/refractive-window-rain/rain-window.fragwindow-rain-effect.jsexamples/touch-history-frost/frost-surface-effect.jsreferences/refractive-window-rain.mdping-pong-accumulation.md详细介绍
时序表面
明确选择持久化历史记录,或程序化屏幕空间演变。不要用仅随时间变化的噪声伪造累积效果,也不要为状态完全可由时间解析计算的效果分配历史缓冲区。
此技能包含示范性示例和资源,不仅仅是描述性指南;值得仔细研究、参考,甚至直接复制。请在相关时充分利用它们,不要盲目跳过。
管线
persistent surface: input -> ping-pong state -> blur -> structure -> refraction
procedural surface: time/coverage -> analytic field -> optical normal -> refraction/blur
阅读 references/ping-pong-accumulation.md,了解精确的霜层渲染通道图、指针历史通道、模糊与折射的耦合,以及必须修正的实现缺陷。
阅读触控历史霜层实现,了解 previous/deposit/next 状态转换、降低分辨率的模糊、静态结构、霜层蒙版合成,以及双尺度折射。
阅读 references/refractive-window-rain.md 和折射窗户雨水实现,了解分层静态水滴和移动水滴、有限差分光学法线、背景折射、随机圆盘模糊、宽高比填充和最终呈现。
规则
- 将持久化状态、解析式程序化状态和场景颜色分开。
- 保留独立的可见蒙版通道和倾斜响应通道。
- 此历史路径使用半浮点格式,除非经过测量确认较低精度的格式效果相当。
- 将逐帧历史衰减转换为与帧率无关的衰减。
- 以较低分辨率运行双通道场景模糊。
- 将静态程序化纹理预先渲染一次。
- 定义并测试历史目标和静态目标在调整尺寸和重置时的行为。
- 不要在此处理世界空间印迹、对象 UV 绘制或模拟平面湿润效果;此技能面向视图对齐或屏幕空间效果。
路由边界
世界空间或对象空间的残留物和粒子,请使用 $threejs-procedural-vfx。世界空间的雨水、水坑、积雪和天气与表面的耦合,请使用 $threejs-precipitation-surfaces。当物体必须通过自身体积而非屏幕对齐的窗格来透射周围环境时,请使用 $threejs-procedural-materials。此技能负责视图对齐的湿玻璃光学效果和屏幕空间持久化历史。
评论
支持 Markdown