让平面画面受真实的光与影

这段影片是编辑器自己导出的，为网页压小了。由 Agent 把七张图片前后拉开、加上一盏暖色点光和一盏冷色环境光，再让点光在场景上移过去；每一步都是一份 Draft⁠ （在新标签页打开），预览后才应用。之后没有再画任何东西：每一道影子都是按前面那些图层的形状算出来的。

这些图片是在 Keyframe 之外用图片生成工具做的，画成平涂的彩色纸，不画光、明暗和影子，再作为七个图层导入。在 Keyframe 里，每一层都变成 3D 图层⁠ （在新标签页打开），各放在自己的远近，像纸雕灯箱里的一张张纸：天空在最后，蕨草在最前。小屋的窗格和一朵云上的圆孔是透明的，光会从里面穿过去。

• 点光、聚光和平行光都能投影；环境光不分方向，只把暗面提亮。每盏灯有颜色、亮度和衰减，都能打关键帧。
• 图层按不透明像素的形状在后面的层上投影，透明处让光穿过，所以镂空会投下光斑。影子的深浅和软硬是灯的设置。
• Viewer 和导出用同一个渲染器画同样的帧，做的时候看到的影子就是文件里的影子。
• 哪些图层投影、哪些接受影子、哪些根本不受光，在每层的材质选项⁠ （在新标签页打开）里分别设。

• 按轮廓倒圆让图层形状的边缘背着光卷过去，像厚纸的边。
• 法线图写明每个像素朝哪边。可以用自己的，也可以由画面生成：深度模型在你的设备上运行，免费，图片不上传。
• 自身投影让画面上凸起的部分给同一张画上低的地方投影，就像低角度的光下鼻子在脸颊上投影。
• 画面细节起伏从画面的明暗读出纸纹、布纹这类深度模型看不出的细小起伏。
• 全部设置写在使用文档的受光表面⁠ （在新标签页打开）一节。

Agent⁠ （在新标签页打开） 能把图层设成 3D 并拉开纵深、加灯并对准、选择表面、在你的设备上由深度生成法线图，还能给灯做动画。每一步都是一份 Draft：先在 Viewer 里看，再应用或让它改。它设好的光就是普通的图层和关键帧，之后可以手动再改。让 Agent 来做属于 Agent 订阅，订阅即将开放；自己打光免费。

在大多数 2D 动画里，光是画师的活：明暗画进每一张画，影子是把图层复制一份、压暗、模糊，再手动挪开。游戏引擎会算光，但算的是模型和材质，不是时间轴上一层层的画。Keyframe 把算出来的光放进 After Effects 式的图层编辑器，影子跟着你画的形状走，灯动它就动。

它是可选的。图层在你设成 3D 并加灯之前一直是 2D、不受光的，没有灯的合成看起来和原来一模一样。画上去的光照样能用：画里的明暗留着，只在需要的地方加灯；某一层要保持画好的样子，就关掉它的“接受灯光”。

• 没有光线追踪和全局光照：光不会从一层反弹到另一层，也没有体积光。
• 自身投影只朝灯的方向延伸画面长边的四分之一，更长的影子会被截短。
• 掠射光下，自身投影可能留下一条硬边，因为它依据的高度是由画面的坡度累加出来的。
• 画面细节起伏只看明暗，所以印花、雀斑和画上去的明暗也会被读成起伏。
• 照片里本来就有光：画面里的高光和影子会和新加的灯打架。不带光影画成的平面作品最适合。
• 阴影贴图有数量上限，超出的灯不投影。打光需要支持 WebGPU 的浏览器。