平面设计
Voronoi 着色器设计
不规则彩色单元格在 WebGL2 画布上漂移，配合浅色发光边界、经过平滑处理的指针驱动形变和固定的大号排版。
Voronoi 艺术应用场景
- 交互式 WebGL 背景能够响应本地指针移动的全画布视觉场。
- 生成式艺术研究由着色器驱动、通过色彩、运动和空间划分构成的作品。
- 实验性落地页排版叠加在不断演化的图形之上，营造氛围感的开场首屏。
单元格网络亮点
- 全画布网络Voronoi 单元格填满视口，并位于叠加层之后。
- 按调色板着色的单元格蓝色、绿色、紫色、青绿色和棕色区域将整个场分隔开来。
- 发光边界浅色边框让相邻单元格清晰可辨。
- 光标影响指针移动被呈现为局部推动交互。
Voronoi 场的三个瞬间
1 / 3
全画布 Voronoi 场
Voronoi 着色器设计是 OpenDesign 的官方平面设计示例，以一个动态 WebGL 画布为核心。原作标题为“VORONOI CELLS”，说明文字描述了“drifting feature points, palette-keyed cells, glowing boundaries”。这些标签先确立视觉前提，再邀请观者参与交互。
该构图将画布作为页面表面，而不是把作品放入带边框的面板中。大型不规则单元格延伸到视口之外，因此整个场在边缘处具有连续感。代价是，作品能够提供氛围与尺度感，却几乎没有为次要内容或传统导航留下空间。
可见结构
浅色共享边界划分出颜色不同的多边形区域，让观者能够理解相邻关系与尺度。
阅读顺序
顶部标签标识预览信息，左下方的大号标题说明主题，右下方的提示引入交互。
该设计的适用场景
该设计适用于视觉探索比密集信息更重要的场景：实验性落地页的开场、生成式艺术研究或 WebGL 演示。“WEBGL PREVIEW”将作品标识为视觉预览，而“REAL-TIME · GPU”则在界面中定位了渲染技术。
由于源文件只展示了一个全画布，并且静态标记中没有作者定义的控件，因此最适合将其作为聚焦的视觉时刻，而不是控件密集型工具。添加菜单、指标或内容分区将需要重新设计信息架构，也可能与刻意放大的作品相互竞争。
开场首屏
当页面需要立即形成图形存在感并传达简短信息时，可将该构图用作第一个视觉场。
交互研究
使用指针提示来探索动画场中的局部坐标形变，但不要将这些单元格视为经过物理模拟的对象。
视觉参考
将调色板和边界处理用作基于着色器的背景研究，而不要将其视为生产性能的证明。
移动几何图形上的排版
排版经过有意放大，并固定在左下方。“VORONOI”占据主导行，“CELLS”位于其下方，说明句则以较小字号放在下面。这种尺度使主题在繁复的场景中仍然清晰可读，但也意味着作品必须在字形背后保持足够的对比度。
片元着色器检查特征点的三乘三邻域，这些特征点随时间漂移。最近的点决定每个单元格的配色，最近距离与次近距离之间的差值则突出显示共享边界。高斯加权的指针形变改变采样坐标；它不会移动物理网格，也不会模拟单元格碰撞。
标题尺度
即使单元格几何图形在标题背后发生变化，大号两行标题仍能让主题清晰可辨。
边缘标签
小型大写标签定义了预览语境和渲染概念，同时不会与主标题竞争。
叠加层定位
左上方的“OPENDESIGN · WEBGL PREVIEW”标签和右上方的“REAL-TIME · GPU”标签在画布周围形成宽阔框架。右下方的“MOVE THE CURSOR ↗”提示平衡了左下方的大号标题，并指向交互，而无需添加传统按钮流程。
可见运动与能力边界
这三张截图展示的是同一幅全画布构图在不同时刻的状态，而不是不同屏幕。源文件实现了连续的特征点漂移和局部指针形变。两个归一化后的指针坐标在影响着色器之前，每帧以 0.06 的系数平滑趋近目标值。右下方的光标徽标是静态提示，不是按钮，也不需要点击、拖动或配置面板。
现有证据无法证明存在连接的服务、存储的数据、经过测量的性能或生产部署情况。它也无法证明每一项所描绘的渲染声明都适用于各种设备。应将此作品理解为设计与实现示例，其可见优势在于着色器几何图形、色彩、叠加排版和局部输入之间的关系。
区分观察结果与行为
将可见的多边形场、浅色边界、色彩区域和叠加文字记录为设计决策；将光标响应和动画视为局部得到证据支持的行为，而不是服务能力。
保留这种取舍
调整构图时保持画布在视觉上占主导地位，但要测试当单元格边缘和色彩场在标题及说明文字下方移动时，它们是否仍然清晰可读。
如何在 OpenDesign 中创建 Voronoi 着色器设计
建立画布与叠加层
创建一个覆盖整个视口的 WebGL 画布，然后在左上方放置小型预览标签，在右上方放置渲染标签，并在左下方附近放置带说明文字的大号两行标题。
塑造单元格系统
围绕不规则多边形区域、浅色共享边界，以及包含蓝色、绿色、紫色、青绿色和棕色区域的调色板来细化 Voronoi 场。检查标题在最繁复的几何图形上方是否仍然清晰可读。
添加局部指针运动
让两个归一化后的指针坐标平滑趋近目标值，并使用按距离加权的形变影响采样场。保持右下方提示静止，并将效果描述为局部形变，而不是单元格的物理模拟。不要添加连接服务、存储状态或经过测量的性能声明。
建议提示词创建一个全画布 WebGL Voronoi Cells 设计：包含漂移的特征点、按调色板着色的蓝色、绿色、紫色、青绿色和棕色单元格、浅色发光边界、左上方的“OPENDESIGN · WEBGL PREVIEW”标签、右上方的“REAL-TIME · GPU”标签、左下方的大号“VORONOI CELLS”标题、介绍漂移特征点和光标驱动运动的说明文字，以及右下方的“MOVE THE CURSOR”提示。仅使用局部指针影响，不要虚构后端服务、存储数据、性能指标或额外控件。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
