关于 threejs-shadow-systems
面向 Three.js 开发者的定向光阴影贴图实现指南,适用于大型且持续移动的视野。重点介绍缓存式 clipmap 层级、按纹素对齐的更新,以及减少可见层级边界的过渡。
主要功能
- 01同心光空间 clipmap 层级
- 02各层按纹素对齐
- 03相邻层之间交叉淡化
- 04按帧预算缓存粗层
- 05投射物或地形变化时失效
适用场景
- 01构建大型世界的定向阴影
- 02在帧预算内更新阴影覆盖
- 03减少相机移动时可见的层级过渡
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ scottstts/ threejs-awesome-graphics-agent-skills --skill threejs-shadow-systems安装后在 Claude Code 中输入/threejs-shadow-systems确认已加载。
附带文件agents/openai.yamlreferences/cached-clipmap-shadows.md
详细介绍
阴影系统
仅当阴影接收区域确实有明确边界时,才使用单张阴影贴图。对于大范围移动视图,应将阴影覆盖范围明确划分为空间层级。
缓存裁剪贴图工作流
- 定义同心的光照空间正方形层级。
- 将每层中心对齐到各自的纹素网格。
- 在着色器空间中对相邻层级进行交叉淡化。
- 持续刷新近处层级。
- 缓存粗略层级,并在帧预算内更新。
- 重要投射体或流式加载地形发生变化时,使相交层级失效。
- 根据世界空间纹素宽度缩放法线偏移。
在实现大型世界中的方向光之前,请阅读 references/cached-clipmap-shadows.md。
阅读 cached shadow clipmaps,了解三个光照空间正方形层级、逐层纹素对齐、包含范围交叉淡化、粗略层级缓存更新、缩放偏移,以及未受阴影区域的权重。
失效条件
- 投影中心以小于一个纹素的幅度移动;
- 着色器中的包含范围与贴图已提交的中心不匹配;
- 没有证据表明需要刷新时,每帧仍刷新所有级联;
- 粗略层级无限期冻结移动的投射体;
- 深度纹理采样发生在存在分歧的片元控制流中;
- 纹素尺寸相差悬殊时仍使用相同的法线偏移;
- 摄像机移动时可见层级边界。
路由边界
此技能用于光照空间方向阴影贴图。视角相关的环境可见性请使用
$threejs-screen-space-ambient-occlusion;AO 不能替代投射阴影。
评论
支持 Markdown