threejs-postprocessing
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).
- Installs
- 404
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-postprocessing- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads threejs-postprocessing automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
ShaderPasswith 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
- Chain:
RenderPass→ effect passes → output; ensure size matches renderer and DPR changes. - Resize: call
composer.setSizealongside 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.infosparingly. - 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
PostProcessingclass 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:
- Link
EffectComposer,RenderPass, or the named pass (SSAOPass, …). - Contrast addon composer stack with core
PostProcessing+ threejs-node-tsl when users mix terms. - Require
setSizeon 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).
References
- https://threejs.org/docs/#Postprocessing
- https://threejs.org/docs/EffectComposer.html
- https://threejs.org/docs/RenderPass.html
Keywords
English: effectcomposer, renderpass, bloom, ssao, ssr, outline, postprocessing, three.js
中文： 后期、EffectComposer、泛光、SSAO、SSR、屏幕空间、three.js
FAQ
What does the threejs-postprocessing skill do?
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).
How do I install threejs-postprocessing?
Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-postprocessing in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-postprocessing/ (personal) or .claude/skills/threejs-postprocessing/ (project).
Which AI agents can use threejs-postprocessing?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is threejs-postprocessing safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains threejs-postprocessing?
It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 404 recorded installs.
More from full-stack-skills/threejs-skills
threejs-materials
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
threejs-animation
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
threejs-renderers
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
threejs-lights
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
threejs-camera
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
threejs-scenes
full-stack-skills/threejs-skills
Open the skill to read its SKILL.md instructions.
Popular business & finance skills
sales-enablement
coreyhaines31/marketingskills
When the user wants to create sales collateral, pitch decks, one-pagers, objection handling docs, or demo scripts. Also use when the user mentions 'sales deck,' 'pitch deck,' 'one-pager,' 'leave-behind,' 'objection handling,' 'deal-specific ROI analysis,' 'demo script,' 'talk track,' 'sales playbook,' 'proposal template,' 'buyer persona card,' 'battle card,' 'battlecard,' 'competitive one-pager,' 'win-loss analysis,' 'why are we losing deals,' 'loss reasons,' 'how do I respond to this objection,' 'prospect just said,' 'help my sales team,' 'sales materials,' or 'what should I give my sales reps,' 'cold call script,' or 'voicemail script.' Use this for any document or asset that helps a sales team close deals. For public competitor comparison pages, see competitors. For running buyer interviews or churn research, see customer-research. For marketing website copy, see copywriting. For cold outreach emails, see cold-email. For the offer being sold (bonuses, guarantees, pricing structure),
revops
coreyhaines31/marketingskills
When the user wants help with revenue operations, lead lifecycle management, or marketing-to-sales handoff processes. Also use when the user mentions 'RevOps,' 'revenue operations,' 'lead scoring,' 'outbound pipeline stages,' 'lead routing,' 'MQL,' 'SQL,' 'pipeline stages,' 'deal desk,' 'CRM automation,' 'marketing-to-sales handoff,' 'data hygiene,' 'leads aren't getting to sales,' 'pipeline management,' 'lead qualification,' or 'when should marketing hand off to sales.' Use this for anything involving the systems and processes that connect marketing to revenue. For cold outreach emails, see cold-email. For email drip campaigns, see emails. For pricing decisions, see pricing.
sales-funnel-blueprint
autonnel/autonnel-skills
Turn an offer into a concrete multi-step sales funnel spec - page-by-page structure, price ladder, copy outline and the metrics each step must hit. Use when asked to build a sales funnel, marketing funnel, landing page flow, lead magnet funnel, webinar funnel, tripwire or VSL funnel, when planning a product launch page flow, or when someone asks "what pages do I need" for selling something online.
pricing
coreyhaines31/marketingskills
When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' 'monetization,' 'how much should I charge,' 'my pricing is wrong,' 'pricing page,' 'annual vs monthly,' 'per seat pricing,' 'should I offer a free plan,' 'pricing page teardown,' 'pricing page audit,' 'is my pricing page AI-readable,' or 'can AI read my pricing.' Use this whenever someone is figuring out what to charge, how to structure their plans, or wants to audit a pricing page (for humans and for the AI agents that shortlist tools). For in-app upgrade screens, see paywalls. For offer construction (bonuses, guarantees, value framing, naming) on services/courses/coaching/high-ticket B2B, see offers.
cross-border-ecommerce
nexscope-ai/ecommerce-skills
Cross-border e-commerce expansion advisor. Scores target markets on 8 weighted dimensions (market size, ecommerce penetration, competition, regulatory complexity, logistics infrastructure, payment ecosystem, cultural distance, IP protection), compares 5 fulfillment models with cost and transit data, provides country-by-country tax/duty compliance guides (EU VAT/IOSS, UK VAT, US sales tax, CA GST, AU GST, JP consumption tax), maps local payment preferences by market, and builds a phased expansion roadmap. No API key required.
pricing-strategy
coreyhaines31/marketingskills
When the user wants help with pricing decisions, packaging, or monetization strategy. Also use when the user mentions 'pricing,' 'pricing tiers,' 'freemium,' 'free trial,' 'packaging,' 'price increase,' 'value metric,' 'Van Westendorp,' 'willingness to pay,' 'monetization,' 'how much should I charge,' 'my pricing is wrong,' 'pricing page,' 'annual vs monthly,' 'per seat pricing,' or 'should I offer a free plan.' Use this whenever someone is figuring out what to charge or how to structure their plans. For in-app upgrade screens, see paywall-upgrade-cro.