360 Secure SkillHub
360 安全技能中心

threejs-postprocessing

该 Skill 面向 three.js Addon 后期处理，指导 EffectComposer、RenderPass 及 Bloom、SSAO、SSR、Outline 等 Pass 的链式配置、尺寸同步、性能与着色器模块引用，并区分核心 PostProcessing 与 node/TSL 管线；主要输出文档索引和注意事项。

full-stack-skills
热度 0.00
最近更新 2026-10-19 03:40:34
分类：开发依赖：纯提示词应用场景：概念解释 / 代码生成

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add full-stack-skills/threejs-skills/threejs-postprocessing
Metadata
name
threejs-postprocessing
license
Apache-2.0
description
Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules; contrasts with core PostProcessing class used in node/WebGPU stacks (see threejs-node-tsl and threejs-renderers). Use when building composer chains—not for basic renderer tone mapping alone (threejs-renderers).

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", "后期"
  • "泛光", "环境光遮蔽", "描边"

How to use this skill

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

See 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

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.

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.

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.

Agent response checklist

When answering under this skill, prefer responses that:

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

References

Keywords

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

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