SuperAPI AI 工具集

threejs-scene-composition

通用与其它

查看项目

更新于 10-15 20:10

技能介绍

用途:当深度、相机、灯光、材质响应、几何或空间动画承载媒体创意,且浏览器渲染场景是合适交付面时,使用该技能。它从资产需求与创意意图确定后开始,到产出可复现的渲染场景包结束。不涉及网格建模、重拓扑、绑定、物理模拟、WebXR 产品设计或游戏逻辑,可消费外部产出的 glTF 资产、动画片段、贴图、环境贴图、字体、数据与音频线索。

主要能力:判断 Three.js 是否为合适渲染器;锁定场景契约(输出尺寸、帧率、时长、alpha、色彩/HDR、镜头表、资产、确定性输入、性能包络、无障碍约束、评审门);按制作角色组织场景层级与相机装置;导入并校验 glTF 资产;管理色彩、材质与灯光;组合导入动画、morph 目标与程序化运动;实现确定性逐帧渲染;编写自定义着色器与后处理;管理性能与资源释放;处理无障碍与观看安全;记录权利与来源;执行渲染 QA 与交付。

使用方式:先定义场景契约与场景清单,将远程资产本地冻结;用稳定命名分离相机装置、主体变换、导入动画与程序化效果;对每个导入资产用 Khronos glTF Validator 校验并记录扩展;色彩关键流程中区分颜色贴图与数据贴图,设定渲染器输出色彩空间与色调映射;程序化状态尽量写成合成时间的纯函数,避免逐帧累加状态;固定媒体捕获时由请求帧推导整个场景状态,例如 renderAtFrame(frame, fps) 中先算 time = frame / fps,再设置 mixer、程序化状态、更新矩阵并渲染一次;重复压力帧两次干净运行并比较。

适用场景:需要真实 3D 相机、视差、深度、遮挡或空间连续性;用浏览器 PBR 材质渲染 glTF 场景或产品资产;骨骼、morph、关键帧或程序化 3D 动画;自定义着色器、粒子、实例化或后处理;从浏览器合成系统确定性捕获帧;一套场景适配多种宽高比或相机取景。

限制:2D 合成器能更清晰廉价表达、任务是为下游引擎准备网格、需要离线路径追踪或 DCC 原生交接、已有静态产品渲染且无 3D 修订价值、目标依赖浏览器交互而非渲染媒体交付时,应选择其他方案。不要仅为让合成显得昂贵而添加 3D 场景。Three.js 发布频繁,示例与插件路径或 API 可能变化,需固定并记录安装版本、查看迁移说明,并在交付前测试确切目标浏览器与渲染器;WebGPU 支持与渲染器一致性尤其易变。资料未提供具体价格、平台或效果承诺。