mcpField
T
threejs-shadow-systems

threejs-shadow-systems

github.com/scottstts创意与媒体946101 次安装6 天前更新
代码仓库

关于 threejs-shadow-systems

面向 Three.js 开发者的定向光阴影贴图实现指南,适用于大型且持续移动的视野。重点介绍缓存式 clipmap 层级、按纹素对齐的更新,以及减少可见层级边界的过渡。

主要功能

  1. 01同心光空间 clipmap 层级
  2. 02各层按纹素对齐
  3. 03相邻层之间交叉淡化
  4. 04按帧预算缓存粗层
  5. 05投射物或地形变化时失效

适用场景

  1. 01构建大型世界的定向阴影
  2. 02在帧预算内更新阴影覆盖
  3. 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

详细介绍

阴影系统

仅当阴影接收区域确实有明确边界时,才使用单张阴影贴图。对于大范围移动视图,应将阴影覆盖范围明确划分为空间层级。

缓存裁剪贴图工作流

  1. 定义同心的光照空间正方形层级。
  2. 将每层中心对齐到各自的纹素网格。
  3. 在着色器空间中对相邻层级进行交叉淡化。
  4. 持续刷新近处层级。
  5. 缓存粗略层级,并在帧预算内更新。
  6. 重要投射体或流式加载地形发生变化时,使相交层级失效。
  7. 根据世界空间纹素宽度缩放法线偏移。

在实现大型世界中的方向光之前,请阅读 references/cached-clipmap-shadows.md。

阅读 cached shadow clipmaps,了解三个光照空间正方形层级、逐层纹素对齐、包含范围交叉淡化、粗略层级缓存更新、缩放偏移,以及未受阴影区域的权重。

失效条件

  • 投影中心以小于一个纹素的幅度移动;
  • 着色器中的包含范围与贴图已提交的中心不匹配;
  • 没有证据表明需要刷新时,每帧仍刷新所有级联;
  • 粗略层级无限期冻结移动的投射体;
  • 深度纹理采样发生在存在分歧的片元控制流中;
  • 纹素尺寸相差悬殊时仍使用相同的法线偏移;
  • 摄像机移动时可见层级边界。

路由边界

此技能用于光照空间方向阴影贴图。视角相关的环境可见性请使用 $threejs-screen-space-ambient-occlusion;AO 不能替代投射阴影。

评论

支持 Markdown