虹彩着色器使用场景
- 生成式 WebGL 实验探索由着色器驱动的运动，而不依赖导入的图像纹理。
- 交互式视觉背景研究由本地指针输入塑造的全屏色彩场。
- 创意编程参考观察排版如何为富有表现力的画布构建框架。
液态色彩场亮点
- 数学驱动的表面波纹通过不使用图像纹理的视觉计算呈现。
- 光标响应指针位置使画布中的流动发生弯曲。
- 虹彩调色板紫罗兰、青色、粉色和玫瑰色流带营造出对比。
- 编辑式叠加层大号文字锚定了原本连续的视觉场。
虹彩色彩场的三种状态
1 / 3
由数学构建的水面油膜质感
Iridescent Liquid 是一个官方 OpenDesign 示例，围绕单个 WebGL 预览构建，而不是一组应用界面。其设计的标题“LIQUID IRIDESCENCE”叠加在由流动的紫罗兰、青色、粉色和玫瑰色形态组成的高饱和色彩场上。该构图让画布成为主体，同时将说明文案保持在靠近左下阅读路径的位置。
辅助文案将该效果称为“living oil-on-water field”。实现通过程序化噪声渲染全屏三角形，而不是球体网格或照片纹理。这使其能够暗示流体材质，而不描绘一个字面意义上的物体。材质语言是一种视觉隐喻，并不能证明这是物理准确的油或水模拟。
顶部的“OPENDESIGN · WEBGL PREVIEW”标识上下文，“REAL-TIME · GPU”则框定渲染方式。这些标签在读者阅读大号标题之前提供定位，但应被视为描述性界面文案，而不是经过测量的帧率或生产性能的证明。
连续画布
视觉场填满整个构图，因此运动成为主要内容，而不是独立面板的背景。
纹理化对比
大号白色字将编辑信息与密集的色彩场分隔开来，但随着背景变化，文字位置必须保持稳定。
设计适用的场景
这项作品最适合作为交互式视觉背景、生成艺术研究和创意编程演示的参考。它展示了页面如何仅凭简短描述、大号标题和直接的交互提示来传达一项视觉实验。它不太适合信息密集型界面，因为动态表面会与小型标签和详细内容争夺注意力。
“MOVE THE CURSOR ↗”这一提示将观看者从被动观察者变为参与者。提供的状态展示了同一画布，其中颜色边界和波纹排列各不相同，而叠加层保持一致。这种配对使状态变化变得易于理解：构图发生了变化，但阅读框架没有变化。
视觉演示
当行为本身就是主题，且稳定的编辑式叠加层能够解释这项实验时，可以采用这种排列。
富有氛围感的落地页首屏
将该色彩场调整为聚焦的开场区域，同时接受密集内容应移到动态区域之外这一限制。
着色器研究
利用无纹理这一前提，在不改变页面框架的情况下，将程序化表面与基于图像的材质进行比较。
构图与运动
该设计采用清晰的纵向阅读顺序：顶部是上下文标签，左下附近是超大号“LIQUID IRIDESCENCE”标题，其下方是说明文案，右下方是光标提示。这种安排在宽阔画布上分散了注意力，同时将主要信息保持在一个易读的区块中。
这些截图展示的是同一着色器画布的三种状态，而不是相互独立的屏幕。在这些状态中，标题和辅助文案保持原位，而周围的流带从以青色为主的区域转变为更多洋红、粉色、青绿色和赭色的区域。稳定的叠加层为运动提供了参照点；代价是背景可能会降低部分文案的对比度。
片元着色器通过两个串联的扭曲场使用六层噪声。指针施加按距离加权的拉力，使采样坐标发生弯曲；余弦调色板配合明亮的脊线项形成虹彩流带。两个指针坐标每帧以 0.06 的系数平滑趋近各自目标值，同时经过的时间会继续改变该场。右下角提示是固定文本，而不是可点击控件。
作为结构的色彩
配色并不是单一渐变，而是由宽阔的彩色流带和其边缘浅色、发光的轮廓组成。青色和青绿色穿插在占主导地位的洋红与紫罗兰色场中，形成冷色间隔；浅粉色线条则显现流动方向。这种变化使画布无需增加实际几何形体也能呈现立体感。
稳定的阅读框架
重复出现的叠加层展示了一种实用的交互模式：在允许作品变化的同时保留标题和提示。复刻时应保持这种关系不变，然后测试所选调色板是否能在文字下方留下足够的对比度。
能力边界
该作品是一个设计与渲染示例。所提供的证据支持可见的 WebGL 画布状态、本地指针响应处理、尺寸调整和动画循环，但没有验证连接服务、存储、生产部署、经过测量的帧率或原作使用的生成模型。因此，这三张截图应被理解为同一构图的视觉状态，而不是独立工作流或经过测试的性能的证明。
如何调整它
要创建新版本，请保留程序化运动与编辑式构图之间的关系，然后一次只改变一个变量：调色板、波纹比例、标题位置或指针影响。让变化能够在画布中被观察到，并将提议的行为描述为提议的行为，而不是现有能力。
如何在 OpenDesign 中创建虹彩液态着色器设计
设置画布与阅读框架
从一个全屏 WebGL 画布开始，加入顶部上下文标签、左下标题块和右下光标提示。确保标题在最亮和最暗的区域上方都清晰可读。
定义程序化表面
构建一个不使用图像纹理的程序化场，其中包含宽阔的紫罗兰、洋红、青色、粉色和青绿色流带，以及发光的脊线。匹配源设计中由本地时间驱动并响应指针的运动，同时将任何关于物理材质准确性或生产性能的声明分开处理。
建议提示词创建一个名为 LIQUID IRIDESCENCE 的全屏 WebGL 着色器构图。使用无纹理的程序化油浮水面场，其中包含紫罗兰、洋红、青色、粉色和青绿色流带。在左上角加入 OPENDESIGN · WEBGL PREVIEW，在右上角加入 REAL-TIME · GPU，在左下角加入大号标题，加入关于数学波纹的辅助文案，并在右下角加入 MOVE THE CURSOR ↗。允许本地指针移动影响该场，但不要声称存在连接服务、存储、经过测量的性能，或 Video 或 Audio 能力。
完善运动与对比度
比较多个指针位置和视口尺寸。检查色彩场变化时叠加层是否保持固定，浅色轮廓是否会影响说明文案的可读性，以及不同状态是否仍呈现为同一幅构图。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
