箔片着色器使用场景
- WebGL 首屏实验探索醒目的编辑式排版背后由着色器驱动的表面。
- 交互式艺术指导研究指针移动如何影响视觉构图。
- 创意编程研究查看一个在本地渲染动画纹理的精简示例。
全息表面亮点
- 褶皱箔片场不规则轮廓营造出具有触感且持续变化的背景。
- 超大字号HOLOGRAPHIC FOIL 以两行排版锚定整个构图。
- 指针倾斜该提示将光标移动与变化中的色彩分布联系起来。
- GPU 预览一个小型状态标签将作品定位为 WebGL 预览。
箔片首屏的三种状态
1 / 3
无需图像纹理的箔片表面
全息箔片着色器设计是一个官方 OpenDesign 示例，围绕全视口 WebGL 构图构建。可见表面将洋红色、青绿色、绿色、紫罗兰色和黄色区域与纤细的轮廓式高光结合起来，呈现出褶皱箔片的外观，而不是平坦的色彩场。
该构图被明确介绍为“褶皱箔片表面上的薄膜干涉”，同时配色随观看角度变化。这一表述描述的是预期的视觉模型；截图验证了渲染后的外观及配套交互提示，但不能证明光学准确性或 GPU 性能。
这套设计适用于何处
该作品最适合作为交互式落地页首屏、生成式艺术研究和创意编程演示的视觉参考。它最重要的启示在于构图：丰富的动画背景可以承载氛围，而克制的叠加层则负责提供方向感。
可见标签“OPENDESIGN · WEBGL PREVIEW”标识了示例环境，“REAL-TIME · GPU”则提示了预期的渲染方式。这些标签有助于向观看者说明作品定位，但不应被理解为基准测试，也不能视为已部署到生产环境的证据。
编辑式首屏
当页面需要由视觉本身进行介绍时，可在简短标题后方使用响应指针的着色器场。
创意编程演示
展示本地指针位置如何影响持续渲染的表面。
视觉指导研究
对比不同截图状态中的色彩运动、纹理密度和文字位置。
构图如何运动
在提供的三种状态中，阅读顺序保持一致：小型 OpenDesign 预览标签位于左上角，GPU 状态位于右上角，大号“HOLOGRAPHIC FOIL”标题占据左下区域，而“TILT THE FILM ↗”出现在右下附近。这种稳定的叠加层让背景可以发生变化，同时不会让界面感觉像是另一个屏幕。
标题第一行采用粗体大写字母，第二行字重较细。这种对比让“HOLOGRAPHIC”立即形成视觉重量，同时使“FOIL”在运动表面前保持轻盈、开放的视觉感受。代价是背景可能与较细的字形争夺注意力，因此每次着色器配色变化时，都需要检查对比度和文字位置。
着色器通过六层噪声构建扭曲的厚度场，估算其梯度，并将由厚度与倾斜共同决定的相位映射到余弦调色板中。独立的脊线和闪光项会增加类似箔片的闪烁高光。两个轴上的指针位置用于模拟倾斜，经过的时间则改变该场。这些计算无需图像纹理或场景网格即可生成轮廓式色彩区域；它们是对视觉材质的近似，而不是经过测量的薄膜光学效果。
稳定叠加层
固定的标签和标题在动画场于下方变化时保持方向感。
双行强调
粗体第一行和字重较细的第二行，将材质主题与描述语分隔开来。
动态对比
不断变化的色彩分布可能提升或降低可读性，使对比度成为构图的一部分。
能力边界
源文件创建了一个本地 WebGL2 画布并监听指针移动，在每一帧中让两个坐标逐渐趋近其目标值。它将这些坐标用作模拟观看角度的输入，而不是实际的设备姿态或 3D 摄像机控制。“TILT THE FILM”是静态说明，不是按钮。截图展示的是同一个首屏的不同时刻，并不能证明存在连接服务、存储数据、光学准确性、经过测量的性能或原作的生成过程。
如何在 OpenDesign 中创建全息箔片着色器设计
构建全视口构图
从全视口 WebGL 画布开始，并为左上角预览标签、右上角 GPU 标签、双行标题和右下角倾斜提示预留稳定的叠加区域。
塑造箔片表面
创建带有不规则轮廓式变化和不断变换调色板的动画场，其中包含青绿色、绿色、紫罗兰色、洋红色和黄色。不要依赖单帧静止画面，而应在多种色彩分布下检查标题效果。
建议提示词创建一个名为 HOLOGRAPHIC FOIL 的全视口 WebGL2 首屏。使用不断变化的青绿色、绿色、紫罗兰色、洋红色和黄色区域，构建程序化的褶皱箔片外观。使用扭曲噪声场和余弦调色板生成色彩变化，并加入脊状高光。固定 OpenDesign 预览标签、粗体第一行标题、字重较细的第二行标题以及右下角的倾斜说明。将两个轴上的指针坐标作为经过平滑处理的模拟视觉倾斜的输入，同时让时间改变表面。不要添加可点击的倾斜按钮、设备姿态感应声明、已连接服务、存储数据、经过物理验证的光学效果或性能保证。
检查动态效果与可读性
随时间变化并沿两个轴移动指针，对比箔片场，同时保持叠加层顺序不变。检查字重较细的 FOIL 字样在明亮和暗色区域中的表现。源文件实现了本地指针处理；请在改编版本中验证其行为，但不要声称具备光学准确性或保证性能。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
