平面设计
Caustic Pool 着色器设计
青绿色 WebGL 光场将明亮的焦散光丝与固定排版结合，按下鼠标或触点时触发涟漪，让图案短暂弯曲。
焦散着色器应用场景
- WebGL 视觉实验探索由着色器驱动的运动，将其作为全屏视觉构图呈现。
- 交互式落地页将克制的信息传达与能响应操作的本地画布结合起来。
- 创意编程研究研究涟漪、折射与光线如何共同创造不断演变的形态。
水光构图亮点
- 域扭曲涟漪分层的水面般扭曲会产生不断变化的发光结构。
- 全屏画布视觉场域为着色器提供持续展开的空间。
- 直接涟漪提示可见的点击说明将指针输入与运动联系起来。
- 编辑排版叠加层大号文字与小型元数据为抽象场域建立框架。
焦散场的三种状态
1 / 3
发光的水面场域
Caustic Pool 是一个官方 OpenDesign WebGL2 示例，以完整画布而非屏幕序列的形式呈现。其编写的标题“CAUSTIC POOL”位于左下方，叠加在由浅色分支丝线构成的深青绿色场域之上。两行大号标题首先确立主题；辅助文字则将效果称为“domain-warped ripples”和“caustic filaments”。
这种阅读顺序使作品在交互开始前就具备可读性。上边缘左侧显示“OPENDESIGN · WEBGL PREVIEW”，右侧显示“REAL-TIME · GPU”，为原本抽象的表面提供紧凑的技术框架。这一取舍是有意为之：这些标签能够帮助观者定位，但固定叠加层也会在一定程度上干扰不中断的氛围感。
先有标题，再谈技术
“CAUSTIC POOL”在说明文字引入域扭曲涟漪之前，先为视觉世界命名，使该效果保持表现力，而不只是技术展示。
位于边缘的说明
“CLICK THE WATER ↗”位于右下方，远离标题区，因此这一邀请易于发现，同时不会打断主要阅读路径。
构图适合哪些场景
该设计适合将运动作为主题，而不是作为辅助装饰的场景。创意编程研究可以用它比较涟漪场与光线聚集；交互式落地页则可以利用同一结构，让简短信息获得空间感。当没有产品界面需要浏览时，全屏画布尤其有用。
只要周围的体验能够容纳 GPU 渲染表面，该构图也可以作为活动、装置或实验性网页功能的视觉背景。它的主要限制在于焦点：由于静态标记中没有编写控件，交互被有意收窄，而视觉承担了大部分沟通工作。
研究与演示
使用该构图研究折射线条如何聚集成明亮丝线，同时保留标题和说明文字作为阅读锚点。
氛围入口
将画布用作开场视觉，只需一个指针手势即可邀请参与，而无需引入更大的控件系统。
涟漪与文字如何共享空间
这些隔离环境中的截图展示的是一个处于不同视觉状态的完整画布，而不是多个独立屏幕。在这些状态中，青绿色背景保持连续，浅色网络则改变位置与密度。这种连续性让运动看起来像水面场域本身的属性，而不是页面过渡。其视觉结果是平静而持久的表面；取舍在于，状态变化通过细微的图案移动来传达，而不是通过明确的状态文字来说明。
着色器通过五轮折叠坐标计算形成明亮的网络。触发指针按下事件时，它会重置涟漪位置及经过时长；随后，正弦径向波会弯曲采样坐标，并随着距离和经过时长增加而淡出。这样无需网格、外部纹理或物理流体求解器，也能产生水光般的效果。固定在左下方的标题与位于对侧边缘的说明，让观者能够将不断变化的场域与稳定文字进行比较。
锚定
将标题和说明文字保持在稳定的左下方区块中，让观者能够以固定参照比较不断变化的着色器状态。
对比
使用明亮丝线对照较暗的青绿色场域，使折射网络清晰可读，而无需添加图表、控件或装饰面板。
邀请
在相对的下方边缘放置一条简洁的指针说明，将本地手势与可见的水面隐喻联系起来。
一个表面，多种状态
备选截图保留了相同的标签、标题、说明和点击提示，同时发光线条发生变化。这种重复的叠加层将内容与动画状态分离：观者无需重新学习界面，就能比较场域。复刻时应保留这一稳定的编辑层，同时允许下方的着色器输出发生变化。
能力边界
源代码实现了本地 WebGL2 渲染、指针按下事件输入、尺寸调整处理和绘制循环。每次按下都会替换之前的涟漪，而不是累积多个独立波形。涟漪的经过时长在每个动画帧中增加 1/60，因此其衰减时间取决于实际帧率。三张截图展示的是同一画布的不同状态；在没有记录输入轨迹的情况下，它们不能独立证明点击响应。
这是一种视觉上的焦散近似，而不是经过验证的水体模拟。源代码并未证实已连接的服务、存储的用户数据、经过测量的 GPU 性能、通用输入兼容性或最初使用的生成模型。用于生产环境前，应在目标环境中测试本地输入和计时行为，而不要将 GPU 标签或作者设定的水面隐喻视为验收依据。
如何在 OpenDesign 中创建 Caustic Pool 着色器设计
设置画布构图
创建一个全屏青绿色 WebGL 画布：左下方放置标题区，显示“CAUSTIC POOL”、关于域扭曲涟漪的简短说明，以及画布上边缘用于标识 OpenDesign 和预览语境的小型标签。
建议提示词创建一个全屏 WebGL 焦散水池构图：深青绿色水面般的场域、浅色的域扭曲涟漪丝线、左下方的大号 CAUSTIC POOL 标题、下方的说明文字、左上方的 OPENDESIGN · WEBGL PREVIEW、右上方的 REAL-TIME · GPU，以及右下方的 CLICK THE WATER ↗。仅使用本地画布行为；不要添加服务、存储、视频、音频或未经验证的性能声明。
塑造涟漪场
细化可见的线条网络，使其呈现折射水面的感觉，而不是平面纹理。在宽阔的云状弯曲与更窄、更明亮的丝线之间进行比较，同时保留足够的暗色场域，确保白色叠加层仍然清晰可读。
检查交互提示
通过指针按下事件设置一个局部涟漪位置，并重置涟漪的经过时长，同时保留固定叠加层。如果改编源代码，请依据实际经过时间计时，以确保不同帧率下的衰减保持一致。让提示文字与按钮明确区分，不要声称其具备物理模拟精度。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
