mcpField
T
threejs-image-pipeline

threejs-image-pipeline

github.com/scottstts创意与媒体95199 次安装1 周前更新
代码仓库

关于 threejs-image-pipeline

用于协调 Three.js 中多个图像空间效果及共享缓冲区的技能。它规定处理阶段顺序和职责边界,并将单一效果的工作指向相应的专用技能。

主要功能

  1. 01协调共享图像空间缓冲区
  2. 02明确处理阶段顺序
  3. 03确保 HDR 泛光在色调映射前处理
  4. 04依据亮度目标测量曝光
  5. 05使用深度和法线感知权重升采样
  6. 06提供阶段开关和单效果视图

适用场景

  1. 01组合多个图像空间效果
  2. 02规划生产级渲染阶段图
  3. 03协调深度与法线缓冲区约定
  4. 04通过独立视图和开关调整效果

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-image-pipeline

安装后在 Claude Code 中输入/threejs-image-pipeline确认已加载。

附带文件agents/openai.yamlreferences/production-image-pipeline.md

详细介绍

图像处理流水线

仅当需要组合多个图像空间系统或定义共享缓冲区时,才使用此技能。对于单个效果,请改用对应的原子技能。

加载:

  • 使用 $threejs-screen-space-ambient-occlusion 处理 GTAO、弯曲法线、降噪或 AO 应用;
  • 使用 $threejs-bloom 处理 HDR 提取和泛光;
  • 使用 $threejs-exposure-color-grading 处理测光、自适应、色调映射、LUT 和输出转换。

流水线必须明确其信号和顺序。不要安装一堆效果后,再盲目调整最终画面。

信号顺序

scene HDR color + depth + normals + albedo where required
  → lighting-related screen effects
  → atmosphere/transparency composition
  → bloom
  → exposure
  → tone mapping
  → grading
  → lens/presentation effects
  → output conversion

请阅读 references/production-image-pipeline.md,了解四种生产级渲染通道图、它们的缓冲区/分辨率约定,以及整个场景图与效果局部图之间的所有权边界。

规则

  • 仅进行一次色调映射。
  • 在色调映射前处理 HDR 泛光。
  • 从小型亮度目标测量曝光,而不是从最终的 8 位屏幕画面测量。
  • 尽可能在应用弯曲法线环境色调前,分离直接光照和间接光照。
  • 使用深度/法线感知权重对低分辨率效果进行上采样。
  • 在调整前,先构建通道开关和仅显示效果的视图。
  • 在同一渲染目标中绘制的 UI 需要明确的保护策略。
  • 默认不要加载所有原子后期处理技能。仅调用实际需要的效果。

路由边界

当多个图像空间系统需要共享缓冲区、处理顺序或输出所有权时,使用此技能。对于单独的效果,请使用其对应的原子技能,不要加载此协调技能。

评论

支持 Markdown