threejs-postprocessing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用该技能

ALWAYS use this skill when the user mentions:

```
EffectComposer
```
,
```
RenderPass
```
, stacking passes, resize of composer
Bloom, SSAO, SSR, DOF, outline, glitch, film grain, TAA—addon pass names
```
ShaderPass
```
with shader modules from Addons Shaders group

IMPORTANT: postprocessing vs renderers vs node-tsl

Pipeline	Skill
Classic composer + passes	threejs-postprocessing
Renderer output color/tone only	threejs-renderers
Node/TSL post nodes	threejs-node-tsl

Trigger phrases include:

"EffectComposer", "RenderPass", "UnrealBloomPass", "SSAOPass", "后期"
"泛光", "环境光遮蔽", "描边"

当用户提及以下内容时，务必使用该技能：

```
EffectComposer
```
、
```
RenderPass
```
、Pass堆叠、组合器尺寸调整
泛光、SSAO、SSR、景深、描边、故障效果、胶片颗粒、TAA等附加Pass名称
搭配附加组件Shaders组中着色器模块使用的
```
ShaderPass
```

重要提示：后处理 vs 渲染器 vs node-tsl

技术管线	对应技能
经典组合器 + Pass模式	threejs-postprocessing
仅需渲染器输出色彩/色调	threejs-renderers
Node/TSL后处理节点	threejs-node-tsl

触发短语包括：

"EffectComposer"、"RenderPass"、"UnrealBloomPass"、"SSAOPass"、"后期"
"泛光"、"环境光遮蔽"、"描边"

How to use this skill

如何使用该技能

Chain:
```
RenderPass
```
→ effect passes → output; ensure size matches renderer and DPR changes.
Resize: call
```
composer.setSize
```
alongside renderer resize workflows.
Half-float: many passes expect appropriate render target types—cite docs for your version.
Performance: each pass has cost—profile with
```
renderer.info
```
sparingly.
Shader modules: link Addons Shaders list instead of inlining huge GLSL in SKILL.
Output: final pass should align color management with renderer (threejs-renderers).
Contrast: mention core
```
PostProcessing
```
class separately to avoid name collision confusion.

See examples/workflow-composer-bloom.md.

链路顺序：遵循
```
RenderPass
```
→ 效果Pass → 输出的顺序；确保尺寸与渲染器匹配，并适配设备像素比（DPR）变化。
尺寸调整：在渲染器调整尺寸的流程中同步调用
```
composer.setSize
```
。
半浮点精度：多数Pass需要适配的渲染目标类型——请查阅你所用版本的官方文档。
性能考量：每个Pass都有性能开销——可适度使用
```
renderer.info
```
进行性能分析。
着色器模块：请链接到附加组件的Shaders列表，而非在技能中内联大量GLSL代码。
输出处理：最终Pass的色彩管理需与渲染器保持一致（参见threejs-renderers）。
概念区分：需单独提及核心
```
PostProcessing
```
类，避免名称混淆。

参见examples/workflow-composer-bloom.md。

Doc map (official)

文档导航（官方）

Docs section	Representative links
Postprocessing	https://threejs.org/docs/EffectComposer.html
Postprocessing	https://threejs.org/docs/RenderPass.html
Postprocessing	https://threejs.org/docs/UnrealBloomPass.html
Shaders (addon modules)	https://threejs.org/docs/module-CopyShader.html

文档板块	代表性链接
后处理	https://threejs.org/docs/EffectComposer.html
后处理	https://threejs.org/docs/RenderPass.html
后处理	https://threejs.org/docs/UnrealBloomPass.html
着色器（附加组件模块）	https://threejs.org/docs/module-CopyShader.html

Scope

适用范围

In scope: Addon postprocessing passes and composer wiring; pointers to shader modules.
Out of scope: Custom full-screen pipeline design outside three docs; engine-level frame graphs.

适用范围： 附加后处理Pass与组合器搭建；着色器模块的相关指引。
不适用范围： three.js官方文档之外的自定义全屏管线设计；引擎级帧图实现。

Common pitfalls and best practices

常见陷阱与最佳实践

Forgetting composer resize produces smeared or low-res effects.
Pass order matters—bloom often after main scene pass, outline may need masks.
Some passes need depth—ensure depth buffer availability per pass docs.

忘记调整组合器尺寸会导致效果模糊或分辨率过低。
Pass顺序至关重要——泛光效果通常放在主场景Pass之后，描边效果可能需要遮罩。
部分Pass需要深度信息——请根据对应Pass的文档确保深度缓冲区可用。

Documentation and version

文档与版本

Addon passes live under Postprocessing and Shaders modules in three.js docs. Pass constructors and required buffers change across versions—link the specific pass page (e.g.

UnrealBloomPass

) rather than guessing uniform names.

附加Pass位于three.js官方文档的后处理板块和Shaders模块下。不同版本中Pass的构造函数和所需缓冲区可能存在差异——请链接到具体Pass的页面（例如

UnrealBloomPass

），而非猜测uniform变量的名称。

Agent response checklist

Agent响应检查清单

When answering under this skill, prefer responses that:

Link
```
EffectComposer
```
,
```
RenderPass
```
, or the named pass (
```
SSAOPass
```
, …).
Contrast addon composer stack with core
```
PostProcessing
```
+ threejs-node-tsl when users mix terms.
Require
```
setSize
```
on composer when threejs-renderers resizes.
Point to Shaders group for raw shader modules used by
```
ShaderPass
```
.
Warn about VR frame-time when stacking heavy passes (threejs-webxr).

在该技能范畴内回答问题时，优先输出满足以下要求的响应：

包含
```
EffectComposer
```
、
```
RenderPass
```
或具体Pass（如
```
SSAOPass
```
等）的文档链接。
当用户混淆术语时，明确区分附加组合器技术栈与核心
```
PostProcessing
```
+ threejs-node-tsl的差异。
当涉及threejs-renderers的尺寸调整时，提示需要对组合器调用
```
setSize
```
。
对于
```
ShaderPass
```
使用的原始着色器模块，引导用户查阅Shaders组。
当堆叠高开销Pass时，提醒注意VR帧时间限制（参见threejs-webxr）。

References

参考资料

Keywords

关键词

English: effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js

中文： 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js

英文： effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js

中文： 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js

能力边界

✅ 适用场景

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

当你需要使用此技能对应的技术栈时
当项目需要遵循最佳实践时
当需要快速上手或深入理解核心概念时

⚠️ 需要注意

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

复杂业务逻辑需要结合具体场景调整
性能优化需要根据实际数据量评估

❌ 不适用场景

不相关的技术栈或框架
需要完全自定义的特殊场景

不相关的技术栈或框架
需要完全自定义的特殊场景

常见陷阱 (Gotchas)

版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。