液态金属使用场景
- WebGL 艺术指导塑造由着色器驱动的表面，用于富有表现力的视觉研究。
- 生成式动态研究在不使用纹理资产的情况下比较不断演变的材质状态。
- 动画首屏背景探索适用于数字体验的全画布视觉处理方式。
类铬金属着色器设计亮点
- 数学材质域扭曲噪声场创建出表面结构。
- 虹彩调色板薰衣草紫、青色、绿色和洋红色在不同状态之间变化。
- 动态镜面高光明亮的高光使表面呈现出反射金属的观感。
- 三种截图状态不同帧展示了构图如何随时间变化。
金属场的三种状态
1 / 3
没有图像纹理的类铬金属表面
Liquid Metal 是 OpenDesign 官方平面设计示例，以单一的全画布着色器构图为核心。界面标题“Molten chrome, zero textures.”明确了核心约束：该画面展示的是材质研究，而不是由图像素材拼成的插画。
辅助文字描述了一个以金属方式着色的域扭曲噪声场，以及横扫式镜面高光和虹彩薄膜调色板。这些措辞与捕获画面直接对应：折叠流动的色带、锐利的白色反射，以及从薰衣草紫和紫罗兰色转向青色、绿色和洋红色的色彩。
这项设计适用于何处
当视觉画面需要营造氛围、又不应与更复杂的交互抢夺注意力时，这个示例最有参考价值。其完整画布可以作为 WebGL 首屏效果、生成式艺术研究或以动态为主导的视觉识别设计的参考。
源设计没有设置交互控件，注意力因而集中在渲染画面上。这让示例便于研究，但也意味着产品化适配需要自行定义交互、无障碍处理和内容关系，而不能假设这些决策已经解决。
着色器参考
借此设计研究噪声扭曲和镜面色带如何在不使用纹理图像的情况下营造液态观感。
动态方向
使用捕获状态比较调色板和流动方式如何改变同一构图的情绪特征。
视觉系统输入
将薰衣草紫、青色、绿色和洋红色之间的关系转化为更广泛界面的受控视觉方向。
构图如何变化
三个帧都保留了小号绿色 LIQUID METAL 引导标签、大得多的 “Molten chrome, zero textures.” 标题、辅助说明，以及右上方的 WebGL2 徽章。着色器在这一固定层级下方发生变化。六层噪声塑造高度场；相邻高度样本估算表面法线，而移动光源、锐利的镜面项和虹彩调色板共同营造出类铬金属外观。
在 view-1 中，淡薰衣草紫和白色占主导，狭窄的蓝色和紫色通道穿过场域。View-2 转向更深的绿色和蓝色色带，使表面显得更具方向性且更加延展。View-3 引入更强的洋红色、橄榄色和烟灰色区域。这些是不同的捕获状态，并不能证明存在用户可选择的调色板或经过测量的性能模式。
状态 1
薰衣草紫和紫罗兰色占主导，密集的白色高光营造出柔和的铬金属观感。
状态 2
绿色和深蓝色通道变得更加明显，形成更长的方向性色带。
状态 3
洋红色、橄榄色和烟灰色增强了色彩变化感。
稳定的文字与变化的场
大号白色标题位于视觉场的下方，而短小的绿色 LIQUID METAL 标签位于其前面。这一排列让观看者先识别主题，再阅读较长的材质说明。代价是文字占据了作品相当大的区域，减少了可供检查的无遮挡着色器表面。
反射对比度
明亮而狭窄的高光反复勾勒出扭曲形态。它们营造出抛光金属的视觉线索，而较暗的通道则为这些高光提供可循的边缘。由于该效果依赖对比度，即使较为平静的调色板或更低的高光强度能改善某些区域的文字对比度，也可能让材质变得不易辨识。
可见行为与边界
源代码实现了自动 WebGL2 渲染、按运行时长驱动的动画和画布尺寸调整，并未注册指针、点击或键盘控件。WebGL2 徽章中的本地帧率估算值大约每半秒更新一次；它反映本次渲染会话，而不是对 GPU 性能的保证。该效果以程序化方式近似呈现铬金属，并非物理熔融金属模拟。
静态 HTML 中没有交互控件，所提供的证据也不能证明已连接服务、存储用户数据、部署生产环境、提供交互输入或采用某个原始生成模型。复刻版本可以规划这些能力，但它们超出了当前设计已经验证的范围。
保持本地渲染
将着色器视为自包含的视觉层，并单独定义任何外部应用行为。
将捕获画面与指标分开
使用三个帧讨论视觉变化，同时在预期环境中独立测量运行时性能。
如何在 OpenDesign 中创建液态金属着色器设计
建立画布与文字
从一个覆盖整个画布的着色器表面开始，并保留参考中的排列顺序：小号的 LIQUID METAL 标签、大号的 Molten chrome, zero textures. 标题，然后是辅助说明。确保文字在最明亮的高光上方仍然清晰可读。
建议提示词创建一个覆盖整个画布的 WebGL2 液态金属着色器研究作品，在左下方固定叠放 LIQUID METAL、Molten chrome, zero textures.，以及一段关于域扭曲噪声、反射高光和虹彩薄膜调色板的简短说明。仅使用本地渲染；不要添加纹理、外部服务、控件或性能声明。
调节材质关系
协同优化域扭曲场、镜面反射响应和调色板。比较薰衣草紫与紫罗兰色、绿色与青色、洋红色与橄榄色等不同视觉状态，检查反射带是否仍然呈现连贯的液态表面。
检查截图状态
在预期画布尺寸下查看多个帧。确认标题始终清晰可读，着色器始终是主要视觉主体，并将任何 GPU、WEBGL2 或 FPS 标签呈现为本地显示信息，而非经过验证的基准测试结果。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
