一段视频可以成为一个你能亲手改变的世界的起点。把参考视频交给编程 Agent,让它研究画面帧,然后要求它用程序化代码重建这个场景。接着,你可以调整摄像机、光照、材质或运动,再重新渲染一次。
这就是 Video 2 GLSL 背后的理念——一套我围绕 shader-skills 开发的“参考视频到着色器”工作流。最有意思的地方在于,这个过程有多少经验能直接复用到下一个视频上。
https://x.com/gokayfem/status/2111907592129671505
相辅相成的两个部分
shader-skills 为编程 Agent 提供了一个图形技术库、可运行的示例,以及构建和校验程序化着色器的流程。Video 2 GLSL 则增加了一个以参考视频驱动的任务:研究片段、推导规格说明、构建场景,最后将结果与原片对比。
该技能支持 Claude Code、Codex、Cursor、Gemini 等编程 Agent。它的可复用模块涵盖形状、噪声、材质、地形、建筑、水面、云层、光照和色彩。你可以用它们创作原创场景、交互式实验,或者复刻视频画面。
对于独立的 Video 2 GLSL 目标,最终交付物是一个兼容 Shadertoy 的片段着色器。几何体用数学方式描述,表面是程序化生成的,动画由时间驱动。参考视频提供视觉规格说明;它的画面帧并不会在着色器内部播放。



先把视频转化为规格说明
第一步是可靠地提取画面帧。只给 Agent 一个视频 URL 或文件名,它能做的事情非常有限。它需要检查画面里到底出现了什么,以及这些内容随时间如何变化。
可复用的提示词要求在编写场景代码前先输出一份 REFERENCE.md:片段基本信息、镜头时间线、物体清单、主体比例、运动、摄像机构图、光照以及采样色板。它还要求 Agent 标出自己无法精确还原的部分,并提出替代方案等待确认。
观察重点会随片段而变化。角色镜头需要关注接触点、步幅和次级运动。建筑镜头需要关注比例、透视和摄像机移动。水面镜头则需要留意表面流动、反射和深度。同样的拆解流程能为每一种情况提供具体的切入点。
给 Agent 经过验证的图形构建块
一个看起来合理的公式,依然可能产生不安全的距离场、不稳定的噪声或错误的颜色。一旦这些错误被埋进大型场景中,排查起来会更加困难。
shader-skills 目前包含分布在 20 个 GLSL 模块中的 186 个函数。Agent 可以搜索某项技术,按名称调用库函数,并使用打包工具将其依赖整合到一个自包含的着色器中。
该库包含用于形状的有符号距离函数、组合操作符、程序化噪声与图案、光线步进辅助函数、着色、大气效果和颜色变换。模板则展示了这些组件如何在完整场景中协同工作。
验证环节涵盖 WebGL2 编译以及 GPU 上的数值特性:距离场的符号与边界、噪声导数、颜色往返转换以及其他可检查的行为。渲染示例则提供了视觉层面的校验。这些检查让各个组件更可靠,但最终场景仍然需要人工审查。

围绕渲染器建立反馈循环
整个工作流依次经历白模与节奏、运动、主体细节、环境细节、光影与色彩、参考匹配以及性能优化。每个里程碑都会产出可供评判的可见成果。
参考视频和渲染结果应在相同的时间点和构图下进行对比。用全画幅检查构图,用裁切区域检查物体形状和材质,用连续帧检查运动。一张好看的静帧可能会掩盖滑步、镜头跳切或过早发生的交互。
提示词要求进行反复评审:找出五个最大的差异,修复它们,然后重新渲染。量化数据能支撑这一过程。主体尺寸和地平线位置有助于诊断摄像机错误;采样颜色有助于诊断调色;运动探测有助于发现不连贯之处。
快速迭代在这里至关重要。低分辨率预览和独立物体视图能让你在投入高成本渲染前修正比例。先检查剪影和物体比例,再去打磨材质和光照。

按职责拆分复杂场景
更大的场景可以让多个 Agent 分别处理不同部分:主体、环境、道具、运动或光照。拆分方式应取决于场景的实际需求。
共享接口能保证各方工作相互兼容。统一比例、坐标系、时间节奏和材质标识符,让每个 Agent 负责自己的文件,并要求提供实际渲染的证据。协调者可以整合各部分,并将合成后的画面与参考视频进行对比。
其中可复用的经验是评审结构:必须有人评估整个镜头。一栋细节丰富的建筑或一个逼真的角色,放在整体构图中仍可能是错的。
这些实验验证了什么
目前的工作包括一段动作不断变化的浮岛序列、一段带交互的村庄序列,以及一个无限循环的街道。它们的需求各不相同:事件时序、落地的接触点、镜头过渡和精确重复,各自需要不同的场景逻辑。它们的完成度和视觉质量也存在差异。
贯穿其中的是同一套依然有效的流程:提取、测量、组装、渲染、对比、修正。仓库中还包含程序化城市、地形和水面的示例,而另一些独立的交互实验则在探索有机形态和黑洞图像。
哪些变得可编辑,哪些仍不确定
一旦场景变成代码,你就可以暴露出控制项,用来调节摄像机位置、光照方向、色板、时间节奏和程序化细节。街道实验就演示了从同一个搭建好的场景中获取不同摄像机视角的效果。
这些新视角也暴露了重建的局限性。参考视频只能展现世界的一部分。被遮挡的表面必须靠推测补全,而 AI 生成的视频可能包含不断变化的几何体或不一致的运动。某个角度下令人信服的匹配,并不意味着整个场景已经完整且准确。
性能则是另一个因场景而异的结果。精细的光线步进几何体、植被、阴影和反射都可能带来高昂开销。要在目标机器上测量帧耗时,检查镜头中的不同时刻,并在报告剩余视觉差异的同时汇报未达标的性能指标。
Video 2 GLSL 是一套可复用的创作工作流。它在任意素材上的可靠性还需要更广泛的评估。目前的工作为我们提供了几个具体的实验案例,以及一套可以持续改进的通用方法。

用你自己的参考视频试一试
对于 Claude Code,添加市场并安装插件:
claude plugin marketplace add gokayfem/shader-skills
claude plugin install shader-skills@shader-skills
对于其他支持的 Agent:
npx skills add gokayfem/shader-skills
使用 prompts/video-to-shader-prompt.md,提供参考片段、输出名称和目标机器,并指明哪些内容必须保留、哪些可以跳过。在开始实现之前,先审查拆解方案。
我希望继续推进这项工作,把它打造成一种可靠的、能将视觉参考转化为可编辑程序化场景的方法。每一次重建都应该留下更好的工具、更好的测试,以及下一个项目可以复用的技术。





