跳转到使用指南
Three.js Post-Processing作者 CloudAI-X

Three.js Post-Processing Skill.

将屏幕特效视为有序的渲染管线,而非互不相关的滤镜。

  • 3D
  • Three.js
来源审查 · Three.js Post-ProcessingSKILL.md
任务 3D 产出 • 有序的合成器通道链 • 与视觉目的相对应的特效设置 • 尺寸调整处理与特效开销比较 开始之前 需要一个可运行的 Three.js 项目和渲染器;请对照已安装的版本核实来源示例。其他控件和加载器取决于所选方案。
编辑摘要 · 已审查来源 2026-10-07 · 并非生成的示例

01 功能说明

Three.js Post-Processing:构建屏幕特效管线

合成器设置、屏幕空间特效、自定义通道、渲染目标和尺寸调整。

基于来源的工作流程并非执行性能基准测试

工作方法

Three.js Post-Processing 涵盖 EffectComposer 以及用于转换已渲染场景的通道。示例包括辉光、抗锯齿、环境光遮蔽、景深、轮廓、调色和自定义屏幕空间着色器。

它与材质工作的区别在于作用范围:后期处理针对已渲染的图像进行操作,并可影响整个画面构图。通道顺序、目标分辨率、尺寸调整处理,以及与未处理场景的比较,都应纳入实施计划。使用示例中的构造函数和渲染器支持之前,请对照已安装的 Three.js 版本进行核实。

预期交付成果

  • 有序的合成器通道链
  • 与视觉目的相对应的特效设置
  • 尺寸调整处理与特效开销比较
查看示例简报

从简报到审查

  1. 01
    确定意图

    明确哪些内容应发光、保持清晰或得到强调。

  2. 02
    组装通道

    从场景渲染开始,只添加实现预期处理效果所需的通道。

  3. 03
    比较并进行性能分析

    在目标分辨率下检查无特效视图、调整尺寸后的输出和渲染开销。

02 适用场景

适用场景

需要一个可运行的 Three.js 项目和渲染器;请对照已安装的版本核实来源示例。其他控件和加载器取决于所选方案。

适合的场景

  • 展示效果完善在底层场景已经正常运行后,添加受控的辉光或焦点效果。
  • 选择项强调为选中的几何体添加轮廓,而不替换其基础材质。

需要检查的限制

  • 额外的渲染工作量每个通道都可能增加开销,而且可能只是掩盖场景问题,而非解决问题。
  • API 需要验证所采集的来源包含对版本敏感的构造函数和 WebGPU 模式。

请准备这些输入

  • 基准场景在添加特效之前,提供一个可正常工作的渲染结果。
  • 视觉处理描述所需的辉光、焦点、轮廓或调色效果。
  • 性能目标注明分辨率、像素比和目标设备。

03 关键决策

重要决策

  1. 管线逻辑

    通道顺序可以解释特效之间的相互作用,而孤立地调整特效可能会忽略这些作用。

  2. 可撤销的特效

    基准对比有助于移除对画面没有帮助的高开销通道。

04 示例任务

尝试一份聚焦的简报

以下示例简报尚未经过测试。使用前请检查该技能的设置。

检查设置

将相关的 threejs-skills 目录用作智能体指南。它不是 Three.js 运行时,也不会安装场景资源。

上游源文件
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

需要一个可运行的 Three.js 项目和渲染器;请对照已安装的版本核实来源示例。其他控件和加载器取决于所选方案。

从一项交付成果开始

运行该技能之前,请根据需要调整这份简报的范围、源材料和约束条件。

示例简报
使用 threejs-postprocessing 为此场景添加细微的轮廓和可选的辉光。保留无特效的对比版本,说明通道顺序,验证尺寸调整,并测量新增开销。使用前请对照已安装的版本检查构造函数。

检查结果

依据以下可观察标准检查实际输出。

  • 合成器是预期的最终渲染路径。
  • 调整尺寸和像素比后,特效仍能正常呈现。
  • 每个启用的通道都有明确用途。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其外部工具、凭据和软件依赖项已包含在内。

05 来源与许可证

来源和许可证

本页面描述的是下方链接所指向的固定来源修订版。上游行为和要求可能会发生变化。

来源所有者
CloudAI-X
许可证
尚未确认——重复使用前请查阅上游条款。
已审查的快照
2026-10-07 · b1c623076c66
编辑来源摘要
合成器设置、屏幕空间特效、自定义通道、渲染目标和尺寸调整。

由 OpenDesign 根据所链接来源编写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度信号,并不代表技能使用量或质量评分。

06 开始前的问题

开始之前的问题

这里的辉光是材质属性吗?

不是。此技能将辉光作为后期处理通道来介绍。

为什么要在调整尺寸时更新分辨率?

合成器目标和通道专用 uniform 需要与输出保持一致。

是否保证与当前 WebGPU 兼容?

不保证。必须检查渲染器和已安装的版本。

OpenDesign

为下一轮设计迭代留出空间。

将简报、源材料和设计工作集中保存在本地工作区中。将该技能加入工作流程之前,请检查其自身的设置。

上游源文件
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md