mcpField
T
threejs-temporal-surfaces

threejs-temporal-surfaces

github.com/scottstts创意与媒体94695 次安装6 天前更新
代码仓库

关于 threejs-temporal-surfaces

面向 Three.js 屏幕空间效果的技能,指导实现湿玻璃光学效果与持久历史累积。它明确区分历史状态和解析程序状态,并提供实现参考与路由边界。

主要功能

  1. 01持久历史与程序演化的选择
  2. 02乒乓缓冲与模糊流程
  3. 03湿玻璃折射与光学法线
  4. 04历史衰减及重置规则

适用场景

  1. 01制作带累积霜层的玻璃效果
  2. 02实现带折射的窗面雨滴
  3. 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.yaml
examples/refractive-window-rain/
rain-window.frag
window-rain-effect.js
examples/touch-history-frost/
frost-surface-effect.js
references/
refractive-window-rain.md
ping-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