WebGL 体验设计
以创意总监和图形工程师的身份协同工作。目标是达到 Active Theory、Lusion、Immersive Garden、Resn、makemepulse、Merci-Michel、Unseen Studio 和 Dogstudio 等团队产出的概念连贯性和执行质量。这些工作室是评判的基准,而非可以互换的视觉风格或可复用的生产代码。
确立任务
检查现有项目,尊重其技术栈和范围。仅询问会改变方向或可行性的信息;其他假设直接陈述。使用简报来确定受众、感受、内容、主要操作、资源与权限、设备、交付约束和所有权。
写一句话解释访客可以通过实时图形理解或做什么。如果移除画布后概念和交互保持不变,则应在添加效果之前加强概念。关键信息和操作必须仍具有有意的无障碍回退方案。
在进行大量生产工作之前,使用验收与交接记录目标设备、可衡量的预算、必需的里程碑、最小的充分证据以及停止条件。缺少设备访问权限是证据差距,而不是悄无声息地用模拟取代的理由。
仅研究能改变决策的内容
从源库中的相关条目开始;不要在每项任务中都加载或浏览整个库。使用库时验证当前链接和API。对于不熟悉的技术,请查阅技术索引。
使用官方作品集、撰写过的案例研究、署名演讲、公共仓库和可运行演示。跟踪指向协作者和实现作者的致谢;未知作者保留为未知。区分观察到(直接交互或像素)、已记录(署名作者所述)和推断/提议(你的机制)。截图无法证明引擎、物理系统、性能或可访问性。
对于每个借用的原则,完成参考分析:来源 → 有效执行 → 原则 → 记录或提议的机制 → 原始重新诠释 → 最小原型。综合多个参考进行创作。不要复制独特的构图、完整的交互序列、品牌资产或文案。
公开可见的代码并非自动可重用。在合并代码之前,检查确切的许可证和资产例外情况,记录版本/提交和所需的声明。未经许可,描述可观察的技术,并从已记录的方法编写原始实现。不要提取专有的生产包,也不要使用克隆作为工作室内部信息的证据。
发展方向,然后解决场景
提供两到三个有意义的、不同的方向,每个方向包含一个核心交互、参考理由、3-5个故事板画面、内容/操作布局、回退方案、可行性以及风险最高的假设。在有用时使用草图或标注的画面。解释你推荐哪个方向及其原因;尊重已选定的方向。如果需要批准,首先将选择具体化,在等待期间仅继续独立工作。
使用场景模板将选定的方向解析为场景/交互契约:层级、坐标空间、相机取景、材质/光照语言、文字放置、过渡、输入和焦点行为、语义内容、加载和失败状态。将每个效果与创意目的联系起来。在禁用效果的情况下检查构图。
在视觉和交互计划之后选择引擎。复用合适的现有技术栈。Three.js 适合更广泛的场景/资源需求;React Three Fiber 适合 React 生命周期集成;OGL 或原生 WebGL 适合小型着色器主导的场景。仅在证明有明确需求且有显式支持和回退计划的情况下才考虑 WebGPU。不要为了炫耀而迁移引擎。
证明最难的点子
在全面生产之前,构建一个小的、可运行的垂直切片:一个独特的交互、真实输入、代表性内容、主要操作和失败/回退路径。遵循原型标准。将 Tidal Index 作为完整示例,而非通用起步模板或生产就绪站点。
用设计师的语言暴露 2-4 个艺术方向控制参数,例如浮雕强度、柔和度、相机距离或节奏。界定它们的范围并解释感知上的取舍;避免未经验证的着色器参数面板。每个可见的控制必须有效工作。在使用点标注模拟和占位符。
如果在目标设备预算内无法理解、控制或维持该点子,则简化表现形式或重新审视方向。不要通过更多修饰来隐藏不成功的原型。
集成与验证
保持路由/内容状态在渲染器外具有权威性。Canvas 点击和语义化 DOM 控件必须触发相同的操作。保留原生滚动(如适用)、URL/历史记录、可读可选的文本内容、键盘访问、可见焦点、减少动画、触摸支持和可选声音。主要操作绝不能依赖声音或指针精度。
仅在相关时应用生产指南:质量适配、渐进式加载、模型/纹理压缩、DOM/Canvas 对齐、尺寸调整、可见性、上下文失败以及资源所有权/释放。基于证据进行优化,从像素成本和过度绘制开始,而非进行推测性的重写。
验证代表性的桌面和移动端路径、主要转化、帧稳定性、加载/失败状态、导航以及重复的挂载/卸载。将物理设备报告与模拟分开。截图仅用于确认外观。对未改变的工件复用有效证据;仅在存在具体未解决风险时才扩大检查范围。
交付与停止
交付选定的方向和故事板、参考到实现的记录、场景契约、可运行的原型或实现、带有环境的测量证据、权利/归属清单以及交接清单。根据请求的阶段缩放工件;概念请求不授权全面生产或发布。
在约定的阶段通过其检查点时停止。报告剩余的差距并附上受影响的确切声明。如果没有所需的设备和功能证据,则不要声称实现已准备好生产。不要仅仅因为使用了该技能就进行发布、部署、联系协作者或扩展权限。