返回赛题列表
液态玻璃与光学焦散
挑战用 Three.js + 手写 GLSL Shader 模拟液态玻璃的折射、焦散与鼠标光线扭曲，为神经接口公司设计 Y3K 超未来主义官网 Hero Section，考察 WebGL 图形学与艺术直觉的跨模态翻译能力。
规则说明▼
phase1：直接给出完整的 Vibe 描述和技术要求，考察模型将抽象的美学意图（液态玻璃、Y3K 超未来主义）跨模态翻译为可运行 WebGL/GLSL 代码的能力
phase2：基于相同需求，先让模型自行撰写 PRD，再根据 PRD 输出代码；考察 PRD 中间步骤能否帮助模型更系统地规划 Shader 架构、交互逻辑和视觉分层，从而产出更完整的效果
Prompt▼
phase1：▼
你是一位2026年顶级的 WebGL 与图形着色器（Shader）创意开发者。请输出单个 HTML 文件。
**美学方向：** 液态玻璃（Liquid Glass）与 Y3K 超未来主义。
**详细 Vibe 描述：** 为一家神经接口设备公司设计官网 Hero Section。背景绝对不能是静态的、廉价的 CSS `backdrop-filter` 磨砂效果。它必须是一个有机的、像水银一样流动的玻璃表面。当用户移动鼠标时，玻璃的厚度和折射率应产生真实的物理焦散（Caustics）和光线扭曲。透过这层液态玻璃，看到的底层巨大且粗犷的无衬线标题字体（Typography）会随之发生动态的透视形变。
**技术要求：**
- 通过 CDN 引入 Three.js
- 手写核心的顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）来模拟折射、流体形变和基于鼠标位置的光线扭曲
- 所有的 HTML 布局、Three.js 初始化脚本和 Shader 字符串必须合并在这一个文件内
- 双击打开即呈现震撼的视觉效果
phase2(2 steps)▼
phase2 step1：▼
以下是一个设计需求：
"用 Three.js + 手写 GLSL Shader 为一家神经接口设备公司设计官网 Hero Section。美学方向是液态玻璃（Liquid Glass）与 Y3K 超未来主义。背景必须是像水银一样有机流动的玻璃表面，鼠标移动时产生真实的物理焦散（Caustics）和光线扭曲，透过玻璃层看到的底层标题字体会发生动态透视形变。输出单个 HTML 文件，通过 CDN 引入 Three.js，手写 Vertex/Fragment Shader。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase2 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS、JS 和 GLSL Shader 字符串）。要求完美还原 PRD 中描述的所有功能与视觉设计。通过 CDN 引入 Three.js，双击打开即呈现完整效果。
Deepseek Expert (Deepthink + Search On) (260408 ver.)
DeepSeek · DeepSeek Web