{"id":"83cd4c7a-54c4-4ac0-945b-e83326a400f4","shortId":"kEcxAu","kind":"skill","title":"threejs-postprocessing","tagline":"Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.","description":"# Three.js Post-Processing\n\n## When to Use\n- You need screen-space visual effects in a Three.js render pipeline.\n- The task involves `EffectComposer`, bloom, depth of field, color grading, blur, or custom passes.\n- You are enhancing the final rendered image rather than base scene setup alone.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\nimport { EffectComposer } from \"three/addons/postprocessing/EffectComposer.js\";\nimport { RenderPass } from \"three/addons/postprocessing/RenderPass.js\";\nimport { UnrealBloomPass } from \"three/addons/postprocessing/UnrealBloomPass.js\";\n\n// Setup composer\nconst composer = new EffectComposer(renderer);\n\n// Render scene\nconst renderPass = new RenderPass(scene, camera);\ncomposer.addPass(renderPass);\n\n// Add bloom\nconst bloomPass = new UnrealBloomPass(\n  new THREE.Vector2(window.innerWidth, window.innerHeight),\n  1.5, // strength\n  0.4, // radius\n  0.85, // threshold\n);\ncomposer.addPass(bloomPass);\n\n// Animation loop - use composer instead of renderer\nfunction animate() {\n  requestAnimationFrame(animate);\n  composer.render(); // NOT renderer.render()\n}\n```\n\n## EffectComposer Setup\n\n```javascript\nimport { EffectComposer } from \"three/addons/postprocessing/EffectComposer.js\";\nimport { RenderPass } from \"three/addons/postprocessing/RenderPass.js\";\n\nconst composer = new EffectComposer(renderer);\n\n// First pass: render scene\nconst renderPass = new RenderPass(scene, camera);\ncomposer.addPass(renderPass);\n\n// Add more passes...\ncomposer.addPass(effectPass);\n\n// Last pass should render to screen\neffectPass.renderToScreen = true; // Default for last pass\n\n// Handle resize\nfunction onResize() {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  camera.aspect = width / height;\n  camera.updateProjectionMatrix();\n\n  renderer.setSize(width, height);\n  composer.setSize(width, height);\n}\n```\n\n## Common Effects\n\n### Bloom (Glow)\n\n```javascript\nimport { UnrealBloomPass } from \"three/addons/postprocessing/UnrealBloomPass.js\";\n\nconst bloomPass = new UnrealBloomPass(\n  new THREE.Vector2(window.innerWidth, window.innerHeight),\n  1.5, // strength - intensity of glow\n  0.4, // radius - spread of glow\n  0.85, // threshold - brightness threshold\n);\n\ncomposer.addPass(bloomPass);\n\n// Adjust at runtime\nbloomPass.strength = 2.0;\nbloomPass.threshold = 0.5;\nbloomPass.radius = 0.8;\n```\n\n### Selective Bloom\n\nApply bloom only to specific objects.\n\n```javascript\nimport { UnrealBloomPass } from \"three/addons/postprocessing/UnrealBloomPass.js\";\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\n\n// Layer setup\nconst BLOOM_LAYER = 1;\nconst bloomLayer = new THREE.Layers();\nbloomLayer.set(BLOOM_LAYER);\n\n// Mark objects to bloom\nglowingMesh.layers.enable(BLOOM_LAYER);\n\n// Dark material for non-blooming objects\nconst darkMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });\nconst materials = {};\n\nfunction darkenNonBloomed(obj) {\n  if (obj.isMesh && !bloomLayer.test(obj.layers)) {\n    materials[obj.uuid] = obj.material;\n    obj.material = darkMaterial;\n  }\n}\n\nfunction restoreMaterial(obj) {\n  if (materials[obj.uuid]) {\n    obj.material = materials[obj.uuid];\n    delete materials[obj.uuid];\n  }\n}\n\n// Custom render loop\nfunction render() {\n  // Render bloom pass\n  scene.traverse(darkenNonBloomed);\n  composer.render();\n  scene.traverse(restoreMaterial);\n\n  // Render final scene over bloom\n  renderer.render(scene, camera);\n}\n```\n\n### FXAA (Anti-Aliasing)\n\n```javascript\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\nimport { FXAAShader } from \"three/addons/shaders/FXAAShader.js\";\n\nconst fxaaPass = new ShaderPass(FXAAShader);\nfxaaPass.material.uniforms[\"resolution\"].value.set(\n  1 / window.innerWidth,\n  1 / window.innerHeight,\n);\n\ncomposer.addPass(fxaaPass);\n\n// Update on resize\nfunction onResize() {\n  fxaaPass.material.uniforms[\"resolution\"].value.set(\n    1 / window.innerWidth,\n    1 / window.innerHeight,\n  );\n}\n```\n\n### SMAA (Better Anti-Aliasing)\n\n```javascript\nimport { SMAAPass } from \"three/addons/postprocessing/SMAAPass.js\";\n\nconst smaaPass = new SMAAPass(\n  window.innerWidth * renderer.getPixelRatio(),\n  window.innerHeight * renderer.getPixelRatio(),\n);\n\ncomposer.addPass(smaaPass);\n```\n\n### SSAO (Ambient Occlusion)\n\n```javascript\nimport { SSAOPass } from \"three/addons/postprocessing/SSAOPass.js\";\n\nconst ssaoPass = new SSAOPass(\n  scene,\n  camera,\n  window.innerWidth,\n  window.innerHeight,\n);\nssaoPass.kernelRadius = 16;\nssaoPass.minDistance = 0.005;\nssaoPass.maxDistance = 0.1;\n\ncomposer.addPass(ssaoPass);\n\n// Output modes\nssaoPass.output = SSAOPass.OUTPUT.Default;\n// SSAOPass.OUTPUT.Default - Final composited output\n// SSAOPass.OUTPUT.SSAO - Just the AO\n// SSAOPass.OUTPUT.Blur - Blurred AO\n// SSAOPass.OUTPUT.Depth - Depth buffer\n// SSAOPass.OUTPUT.Normal - Normal buffer\n```\n\n### Depth of Field (DOF)\n\n```javascript\nimport { BokehPass } from \"three/addons/postprocessing/BokehPass.js\";\n\nconst bokehPass = new BokehPass(scene, camera, {\n  focus: 10.0, // Focus distance\n  aperture: 0.025, // Aperture (smaller = more DOF)\n  maxblur: 0.01, // Max blur amount\n});\n\ncomposer.addPass(bokehPass);\n\n// Update focus dynamically\nbokehPass.uniforms[\"focus\"].value = distanceToTarget;\n```\n\n### Film Grain\n\n```javascript\nimport { FilmPass } from \"three/addons/postprocessing/FilmPass.js\";\n\nconst filmPass = new FilmPass(\n  0.35, // noise intensity\n  0.5, // scanline intensity\n  648, // scanline count\n  false, // grayscale\n);\n\ncomposer.addPass(filmPass);\n```\n\n### Vignette\n\n```javascript\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\nimport { VignetteShader } from \"three/addons/shaders/VignetteShader.js\";\n\nconst vignettePass = new ShaderPass(VignetteShader);\nvignettePass.uniforms[\"offset\"].value = 1.0; // Vignette size\nvignettePass.uniforms[\"darkness\"].value = 1.0; // Vignette intensity\n\ncomposer.addPass(vignettePass);\n```\n\n### Color Correction\n\n```javascript\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\nimport { ColorCorrectionShader } from \"three/addons/shaders/ColorCorrectionShader.js\";\n\nconst colorPass = new ShaderPass(ColorCorrectionShader);\ncolorPass.uniforms[\"powRGB\"].value = new THREE.Vector3(1.2, 1.2, 1.2); // Power\ncolorPass.uniforms[\"mulRGB\"].value = new THREE.Vector3(1.0, 1.0, 1.0); // Multiply\n\ncomposer.addPass(colorPass);\n```\n\n### Gamma Correction\n\n```javascript\nimport { GammaCorrectionShader } from \"three/addons/shaders/GammaCorrectionShader.js\";\n\nconst gammaPass = new ShaderPass(GammaCorrectionShader);\ncomposer.addPass(gammaPass);\n```\n\n### Pixelation\n\n```javascript\nimport { RenderPixelatedPass } from \"three/addons/postprocessing/RenderPixelatedPass.js\";\n\nconst pixelPass = new RenderPixelatedPass(6, scene, camera); // 6 = pixel size\n\ncomposer.addPass(pixelPass);\n```\n\n### Glitch Effect\n\n```javascript\nimport { GlitchPass } from \"three/addons/postprocessing/GlitchPass.js\";\n\nconst glitchPass = new GlitchPass();\nglitchPass.goWild = false; // Continuous glitching\n\ncomposer.addPass(glitchPass);\n```\n\n### Halftone\n\n```javascript\nimport { HalftonePass } from \"three/addons/postprocessing/HalftonePass.js\";\n\nconst halftonePass = new HalftonePass(window.innerWidth, window.innerHeight, {\n  shape: 1, // 1 = dot, 2 = ellipse, 3 = line, 4 = square\n  radius: 4, // Dot size\n  rotateR: Math.PI / 12,\n  rotateB: (Math.PI / 12) * 2,\n  rotateG: (Math.PI / 12) * 3,\n  scatter: 0,\n  blending: 1,\n  blendingMode: 1,\n  greyscale: false,\n});\n\ncomposer.addPass(halftonePass);\n```\n\n### Outline\n\n```javascript\nimport { OutlinePass } from \"three/addons/postprocessing/OutlinePass.js\";\n\nconst outlinePass = new OutlinePass(\n  new THREE.Vector2(window.innerWidth, window.innerHeight),\n  scene,\n  camera,\n);\n\noutlinePass.edgeStrength = 3;\noutlinePass.edgeGlow = 0;\noutlinePass.edgeThickness = 1;\noutlinePass.pulsePeriod = 0;\noutlinePass.visibleEdgeColor.set(0xffffff);\noutlinePass.hiddenEdgeColor.set(0x190a05);\n\n// Select objects to outline\noutlinePass.selectedObjects = [mesh1, mesh2];\n\ncomposer.addPass(outlinePass);\n```\n\n## Custom ShaderPass\n\nCreate your own post-processing effects.\n\n```javascript\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\n\nconst CustomShader = {\n  uniforms: {\n    tDiffuse: { value: null }, // Required: input texture\n    time: { value: 0 },\n    intensity: { value: 1.0 },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n\n    void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform sampler2D tDiffuse;\n    uniform float time;\n    uniform float intensity;\n    varying vec2 vUv;\n\n    void main() {\n      vec2 uv = vUv;\n\n      // Wave distortion\n      uv.x += sin(uv.y * 10.0 + time) * 0.01 * intensity;\n\n      vec4 color = texture2D(tDiffuse, uv);\n      gl_FragColor = color;\n    }\n  `,\n};\n\nconst customPass = new ShaderPass(CustomShader);\ncomposer.addPass(customPass);\n\n// Update in animation loop\ncustomPass.uniforms.time.value = clock.getElapsedTime();\n```\n\n### Invert Colors Shader\n\n```javascript\nconst InvertShader = {\n  uniforms: {\n    tDiffuse: { value: null },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n    void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform sampler2D tDiffuse;\n    varying vec2 vUv;\n\n    void main() {\n      vec4 color = texture2D(tDiffuse, vUv);\n      gl_FragColor = vec4(1.0 - color.rgb, color.a);\n    }\n  `,\n};\n```\n\n### Chromatic Aberration\n\n```javascript\nconst ChromaticAberrationShader = {\n  uniforms: {\n    tDiffuse: { value: null },\n    amount: { value: 0.005 },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n    void main() {\n      vUv = uv;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    uniform sampler2D tDiffuse;\n    uniform float amount;\n    varying vec2 vUv;\n\n    void main() {\n      vec2 dir = vUv - 0.5;\n      float dist = length(dir);\n\n      float r = texture2D(tDiffuse, vUv - dir * amount * dist).r;\n      float g = texture2D(tDiffuse, vUv).g;\n      float b = texture2D(tDiffuse, vUv + dir * amount * dist).b;\n\n      gl_FragColor = vec4(r, g, b, 1.0);\n    }\n  `,\n};\n```\n\n## Combining Multiple Effects\n\n```javascript\nimport { EffectComposer } from \"three/addons/postprocessing/EffectComposer.js\";\nimport { RenderPass } from \"three/addons/postprocessing/RenderPass.js\";\nimport { UnrealBloomPass } from \"three/addons/postprocessing/UnrealBloomPass.js\";\nimport { ShaderPass } from \"three/addons/postprocessing/ShaderPass.js\";\nimport { FXAAShader } from \"three/addons/shaders/FXAAShader.js\";\nimport { VignetteShader } from \"three/addons/shaders/VignetteShader.js\";\nimport { GammaCorrectionShader } from \"three/addons/shaders/GammaCorrectionShader.js\";\n\nconst composer = new EffectComposer(renderer);\n\n// 1. Render scene\ncomposer.addPass(new RenderPass(scene, camera));\n\n// 2. Bloom\nconst bloomPass = new UnrealBloomPass(\n  new THREE.Vector2(window.innerWidth, window.innerHeight),\n  0.5,\n  0.4,\n  0.85,\n);\ncomposer.addPass(bloomPass);\n\n// 3. Vignette\nconst vignettePass = new ShaderPass(VignetteShader);\nvignettePass.uniforms[\"offset\"].value = 0.95;\nvignettePass.uniforms[\"darkness\"].value = 1.0;\ncomposer.addPass(vignettePass);\n\n// 4. Gamma correction\ncomposer.addPass(new ShaderPass(GammaCorrectionShader));\n\n// 5. Anti-aliasing (always last before output)\nconst fxaaPass = new ShaderPass(FXAAShader);\nfxaaPass.uniforms[\"resolution\"].value.set(\n  1 / window.innerWidth,\n  1 / window.innerHeight,\n);\ncomposer.addPass(fxaaPass);\n```\n\n## Render to Texture\n\n```javascript\n// Create render target\nconst renderTarget = new THREE.WebGLRenderTarget(512, 512);\n\n// Render scene to target\nrenderer.setRenderTarget(renderTarget);\nrenderer.render(scene, camera);\nrenderer.setRenderTarget(null);\n\n// Use texture\nconst texture = renderTarget.texture;\notherMaterial.map = texture;\n```\n\n## Multi-Pass Rendering\n\n```javascript\n// Multiple composers for different scenes/layers\nconst bgComposer = new EffectComposer(renderer);\nbgComposer.addPass(new RenderPass(bgScene, camera));\n\nconst fgComposer = new EffectComposer(renderer);\nfgComposer.addPass(new RenderPass(fgScene, camera));\nfgComposer.addPass(bloomPass);\n\n// Combine in render loop\nfunction animate() {\n  // Render background without clearing\n  renderer.autoClear = false;\n  renderer.clear();\n\n  bgComposer.render();\n\n  // Render foreground over it\n  renderer.clearDepth();\n  fgComposer.render();\n}\n```\n\n## WebGPU Post-Processing (Three.js r183)\n\nThe WebGPU renderer uses a node-based `PostProcessing` class instead of `EffectComposer`. Note that `EffectComposer` is **WebGL-only**.\n\n```javascript\nimport * as THREE from \"three\";\nimport { pass, bloom, dof } from \"three/tsl\";\nimport { WebGPURenderer } from \"three/addons/renderers/webgpu/WebGPURenderer.js\";\n\nconst renderer = new WebGPURenderer({ antialias: true });\nawait renderer.init();\n\n// Create post-processing\nconst postProcessing = new THREE.PostProcessing(renderer);\n\n// Scene pass\nconst scenePass = pass(scene, camera);\n\n// Add bloom\nconst bloomPass = bloom(scenePass, 0.5, 0.4, 0.85);\n\n// Set output\npostProcessing.outputNode = bloomPass;\n\n// Render\nrenderer.setAnimationLoop(() => {\n  postProcessing.render();\n});\n```\n\n### Key Differences from EffectComposer\n\n| EffectComposer (WebGL)          | PostProcessing (WebGPU)          |\n| ------------------------------- | -------------------------------- |\n| `addPass(new RenderPass(...))`  | `pass(scene, camera)`            |\n| `addPass(new UnrealBloomPass)` | `bloom(scenePass, ...)`          |\n| `composer.render()`             | `postProcessing.render()`        |\n| Chain of passes                 | Node graph with `outputNode`     |\n| GLSL shader passes              | TSL node-based effects           |\n\n## Performance Tips\n\n1. **Limit passes**: Each pass adds a full-screen render\n2. **Lower resolution**: Use smaller render targets for blur passes\n3. **Disable unused effects**: Toggle passes on/off\n4. **Use FXAA over MSAA**: Less expensive anti-aliasing\n5. **Profile with DevTools**: Check GPU usage\n\n```javascript\n// Disable pass\nbloomPass.enabled = false;\n\n// Reduce bloom resolution\nconst bloomPass = new UnrealBloomPass(\n  new THREE.Vector2(window.innerWidth / 2, window.innerHeight / 2),\n  strength,\n  radius,\n  threshold,\n);\n\n// Only apply effects in high-performance scenarios\nconst isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);\nif (!isMobile) {\n  composer.addPass(expensivePass);\n}\n```\n\n## Handle Resize\n\n```javascript\nfunction onWindowResize() {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n  const pixelRatio = renderer.getPixelRatio();\n\n  camera.aspect = width / height;\n  camera.updateProjectionMatrix();\n\n  renderer.setSize(width, height);\n  composer.setSize(width, height);\n\n  // Update pass-specific resolutions\n  if (fxaaPass) {\n    fxaaPass.material.uniforms[\"resolution\"].value.set(\n      1 / (width * pixelRatio),\n      1 / (height * pixelRatio),\n    );\n  }\n\n  if (bloomPass) {\n    bloomPass.resolution.set(width, height);\n  }\n}\n\nwindow.addEventListener(\"resize\", onWindowResize);\n```\n\n## See Also\n\n- `threejs-shaders` - Custom shader development\n- `threejs-textures` - Render targets\n- `threejs-fundamentals` - Renderer setup\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","postprocessing","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-postprocessing","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-postprocessing","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (15,637 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.706Z","embedding":null,"createdAt":"2026-04-18T21:46:21.471Z","updatedAt":"2026-04-22T06:52:01.706Z","lastSeenAt":"2026-04-22T06:52:01.706Z","tsv":"'/iphone':1313 '0':667,695,699,738 '0.005':426,861 '0.01':478,782 '0.025':472 '0.1':428 '0.35':502 '0.4':124,231,984,1190 '0.5':248,505,892,983,1189 '0.8':250 '0.85':126,236,985,1191 '0.95':998 '0x000000':300 '0x190a05':703 '0xffffff':701 '1':273,369,371,383,385,642,643,669,671,697,965,1028,1030,1237,1355,1358 '1.0':533,539,574,575,576,741,756,829,847,876,927,1002 '1.2':565,566,567 '1.5':122,226 '10.0':468,780 '12':657,660,664 '16':424 '2':645,661,973,1248,1297,1299 '2.0':246 '3':647,665,693,988,1258 '4':649,652,1005,1265 '5':1012,1275 '512':1045,1046 '6':604,607 '648':508 'aberr':851 'ad':15 'add':112,172,1183,1242 'addpass':1207,1213 'adjust':242 'alias':351,391,1015,1274 'alon':74 'also':1370 'alway':1016 'ambient':408 'amount':481,859,883,903,918 'android/i.test':1315 'anim':130,138,140,801,1102 'anti':350,390,1014,1273 'anti-alias':349,389,1013,1272 'antialia':1163 'ao':442,445 'apertur':471,473 'appli':253,1304 'ask':1420 'await':1165 'b':913,920,926 'background':1104 'base':71,1130,1233 'better':388 'bgcompos':1076 'bgcomposer.addpass':1080 'bgcomposer.render':1110 'bgscene':1083 'blend':668 'blendingmod':670 'bloom':9,52,113,211,252,254,271,279,284,286,293,333,344,974,1151,1184,1187,1216,1288 'bloomlay':275 'bloomlayer.set':278 'bloomlayer.test':308 'bloompass':115,129,219,241,976,987,1096,1186,1195,1291,1362 'bloompass.enabled':1285 'bloompass.radius':249 'bloompass.resolution.set':1363 'bloompass.strength':245 'bloompass.threshold':247 'blur':20,58,444,480,1256 'bokehpass':458,462,464,483 'bokehpass.uniforms':487 'boundari':1428 'bright':238 'buffer':448,451 'camera':109,169,347,420,466,606,691,972,1055,1084,1094,1182,1212 'camera.aspect':199,1335 'camera.updateprojectionmatrix':202,1338 'chain':1220 'check':1279 'chromat':850 'chromaticaberrationshad':854 'clarif':1422 'class':1132 'clear':1106,1395 'clock.getelapsedtime':804 'color':18,56,299,544,785,791,806,840 'color.a':849 'color.rgb':848 'colorcorrectionshad':552,559 'colorpass':556,579 'colorpass.uniforms':560,569 'combin':928,1097 'common':209 'compos':96,98,133,156,961,1071 'composer.addpass':110,128,170,175,240,373,405,429,482,513,542,578,592,610,627,674,711,797,968,986,1003,1008,1032,1319 'composer.render':141,337,1218 'composer.setsize':206,1342 'composit':437 'const':97,104,114,155,164,193,196,218,270,274,295,301,361,397,415,461,498,525,555,587,600,619,635,682,727,792,809,853,960,975,990,1020,1041,1060,1075,1085,1159,1171,1178,1185,1290,1311,1326,1329,1332 'continu':625 'correct':545,581,1007 'count':510 'creat':23,715,1038,1167 'criteria':1431 'custom':24,60,327,713,1374 'custompass':793,798 'custompass.uniforms.time.value':803 'customshad':728,796 'dark':288,537,1000 'darkennonbloom':304,336 'darkmateri':296,314 'default':185 'delet':324 'depth':53,447,452 'describ':1399 'develop':1376 'devtool':1278 'differ':1073,1200 'dir':890,896,902,917 'disabl':1259,1283 'dist':894,904,919 'distanc':470 'distancetotarget':490 'distort':776 'dof':10,455,476,1152 'dot':644,653 'dynam':486 'effect':12,17,42,210,613,721,930,1234,1261,1305 'effectcompos':8,51,84,100,144,148,158,933,963,1078,1088,1135,1138,1202,1203 'effectpass':176 'effectpass.rendertoscreen':183 'ellips':646 'enhanc':64 'environ':1411 'environment-specif':1410 'expens':1271 'expensivepass':1320 'expert':1416 'fals':511,624,673,1108,1286 'fgcompos':1086 'fgcomposer.addpass':1090,1095 'fgcomposer.render':1116 'fgscene':1093 'field':55,454 'film':491 'filmpass':495,499,501,514 'final':66,341,436 'first':160 'float':762,765,882,893,897,906,912 'focus':467,469,485,488 'foreground':1112 'fragcolor':790,845,922 'fragmentshad':757,830,877 'full':1245 'full-screen':1244 'function':137,191,303,315,330,378,1101,1324 'fundament':1384 'fxaa':348,1267 'fxaapass':362,374,1021,1033,1351 'fxaapass.material.uniforms':366,380,1352 'fxaapass.uniforms':1025 'fxaashad':358,365,949,1024 'g':907,911,925 'gamma':580,1006 'gammacorrectionshad':584,591,957,1011 'gammapass':588,593 'gl':750,789,823,844,870,921 'glitch':612,626 'glitchpass':616,620,622,628 'glitchpass.gowild':623 'glow':21,212,230,235 'glowingmesh.layers.enable':285 'glsl':1227 'gpu':1280 'grade':19,57 'grain':492 'graph':1224 'grayscal':512 'greyscal':672 'halfton':629 'halftonepass':632,636,638,675 'handl':189,1321 'height':197,201,205,208,1330,1337,1341,1344,1359,1365 'high':1308 'high-perform':1307 'imag':68 'import':78,83,87,91,147,151,214,260,264,353,357,393,411,457,494,517,521,547,551,583,596,615,631,678,723,932,936,940,944,948,952,956,1144,1149,1155 'input':734,1425 'instead':134,1133 'intens':228,504,507,541,739,766,783 'invert':805 'invertshad':810 'involv':50 'ipad':1314 'ismobil':1312,1318 'javascript':77,146,213,259,352,392,410,456,493,516,546,582,595,614,630,677,722,808,852,931,1037,1069,1143,1282,1323 'key':1199 'last':177,187,1017 'layer':268,272,280,287 'length':895 'less':1270 'limit':1238,1387 'line':648 'loop':131,329,802,1100 'lower':1249 'main':747,771,820,838,867,888 'mark':281 'match':1396 'materi':289,302,310,319,322,325 'math.pi':656,659,663 'max':479 'maxblur':477 'mesh1':709 'mesh2':710 'miss':1433 'mode':432 'modelviewmatrix':753,826,873 'msaa':1269 'mulrgb':570 'multi':1066 'multi-pass':1065 'multipl':929,1070 'multipli':577 'navigator.useragent':1316 'need':37 'new':99,106,116,118,157,166,220,222,276,297,363,399,417,463,500,527,557,563,572,589,602,621,637,684,686,794,962,969,977,979,992,1009,1022,1043,1077,1081,1087,1091,1161,1173,1208,1214,1292,1294 'node':1129,1223,1232 'node-bas':1128,1231 'nois':503 'non':292 'non-bloom':291 'normal':450 'note':1136 'null':732,814,858,1057 'obj':305,317 'obj.ismesh':307 'obj.layers':309 'obj.material':312,313,321 'obj.uuid':311,320,323,326 'object':258,282,294,705 'occlus':409 'offset':531,996 'on/off':1264 'onres':192,379 'onwindowres':1325,1368 'othermaterial.map':1063 'outlin':676,707 'outlinepass':679,683,685,712 'outlinepass.edgeglow':694 'outlinepass.edgestrength':692 'outlinepass.edgethickness':696 'outlinepass.hiddenedgecolor.set':702 'outlinepass.pulseperiod':698 'outlinepass.selectedobjects':708 'outlinepass.visibleedgecolor.set':700 'output':431,438,1019,1193,1405 'outputnod':1226 'pass':61,161,174,178,188,334,1067,1150,1177,1180,1210,1222,1229,1239,1241,1257,1263,1284,1347 'pass-specif':1346 'perform':1235,1309 'permiss':1426 'pipelin':47 'pixel':594,608 'pixelpass':601,611 'pixelratio':1333,1357,1360 'posit':751,755,824,828,871,875 'post':6,31,719,1119,1169 'post-process':5,30,718,1118,1168 'postprocess':3,1131,1172,1205 'postprocessing.outputnode':1194 'postprocessing.render':1198,1219 'power':568 'powrgb':561 'process':7,32,720,1120,1170 'profil':1276 'projectionmatrix':752,825,872 'quick':75 'r':898,905,924 'r183':1122 'radius':125,232,651,1301 'rather':69 'reduc':1287 'render':46,67,101,102,136,159,162,180,328,331,332,340,964,966,1034,1039,1047,1068,1079,1089,1099,1103,1111,1125,1160,1175,1196,1247,1253,1380,1385 'renderer.autoclear':1107 'renderer.clear':1109 'renderer.cleardepth':1115 'renderer.getpixelratio':402,404,1334 'renderer.init':1166 'renderer.render':143,345,1053 'renderer.setanimationloop':1197 'renderer.setrendertarget':1051,1056 'renderer.setsize':203,1339 'renderpass':88,105,107,111,152,165,167,171,937,970,1082,1092,1209 'renderpixelatedpass':597,603 'rendertarget':1042,1052 'rendertarget.texture':1062 'requestanimationfram':139 'requir':733,1424 'resiz':190,377,1322,1367 'resolut':367,381,1026,1250,1289,1349,1353 'restoremateri':316,339 'review':1417 'rotat':655 'rotateb':658 'rotateg':662 'runtim':244 'safeti':1427 'sampler2d':759,832,879 'scanlin':506,509 'scatter':666 'scenario':1310 'scene':72,103,108,163,168,342,346,419,465,605,690,967,971,1048,1054,1176,1181,1211 'scene.traverse':335,338 'scenepass':1179,1188,1217 'scenes/layers':1074 'scope':1398 'screen':11,26,39,182,1246 'screen-spac':25,38 'see':1369 'select':251,704 'set':1192 'setup':73,95,145,269,1386 'shader':28,807,1228,1373,1375 'shaderpass':265,354,364,518,528,548,558,590,714,724,795,945,993,1010,1023 'shape':641 'sin':778 'size':535,609,654 'skill':1390 'skill-threejs-postprocessing' 'smaa':387 'smaapass':394,398,400,406 'smaller':474,1252 'source-sickn33' 'space':27,40 'specif':257,1348,1412 'spread':233 'squar':650 'ssao':407 'ssaopass':412,416,418,430 'ssaopass.kernelradius':423 'ssaopass.maxdistance':427 'ssaopass.mindistance':425 'ssaopass.output':433 'ssaopass.output.blur':443 'ssaopass.output.default':434,435 'ssaopass.output.depth':446 'ssaopass.output.normal':449 'ssaopass.output.ssao':439 'start':76 'stop':1418 'strength':123,227,1300 'substitut':1408 'success':1430 'target':1040,1050,1254,1381 'task':49,1394 'tdiffus':730,760,787,812,833,842,856,880,900,909,915 'test':1414 'textur':735,1036,1059,1061,1064,1379 'texture2d':786,841,899,908,914 'three':80,82,1146,1148 'three.js':4,29,45,1121 'three.layers':277 'three.meshbasicmaterial':298 'three.postprocessing':1174 'three.vector2':119,223,687,980,1295 'three.vector3':564,573 'three.webglrendertarget':1044 'three/addons/postprocessing/bokehpass.js':460 'three/addons/postprocessing/effectcomposer.js':86,150,935 'three/addons/postprocessing/filmpass.js':497 'three/addons/postprocessing/glitchpass.js':618 'three/addons/postprocessing/halftonepass.js':634 'three/addons/postprocessing/outlinepass.js':681 'three/addons/postprocessing/renderpass.js':90,154,939 'three/addons/postprocessing/renderpixelatedpass.js':599 'three/addons/postprocessing/shaderpass.js':267,356,520,550,726,947 'three/addons/postprocessing/smaapass.js':396 'three/addons/postprocessing/ssaopass.js':414 'three/addons/postprocessing/unrealbloompass.js':94,217,263,943 'three/addons/renderers/webgpu/webgpurenderer.js':1158 'three/addons/shaders/colorcorrectionshader.js':554 'three/addons/shaders/fxaashader.js':360,951 'three/addons/shaders/gammacorrectionshader.js':586,959 'three/addons/shaders/vignetteshader.js':524,955 'three/tsl':1154 'threej':2,1372,1378,1383 'threejs-fundament':1382 'threejs-postprocess':1 'threejs-shad':1371 'threejs-textur':1377 'threshold':127,237,239,1302 'time':736,763,781 'tip':1236 'toggl':1262 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':1403 'true':184,1164 'tsl':1230 'uniform':729,758,761,764,811,831,855,878,881 'unrealbloompass':92,117,215,221,261,941,978,1215,1293 'unus':1260 'updat':375,484,799,1345 'usag':1281 'use':13,35,132,1058,1126,1251,1266,1388 'uv':749,773,788,822,869 'uv.x':777 'uv.y':779 'valid':1413 'valu':489,532,538,562,571,731,737,740,813,857,860,997,1001 'value.set':368,382,1027,1354 'vari':743,767,816,834,863,884 'vec2':744,768,772,817,835,864,885,889 'vec4':754,784,827,839,846,874,923 'vertexshad':742,815,862 'vignett':515,534,540,989 'vignettepass':526,543,991,1004 'vignettepass.uniforms':530,536,995,999 'vignetteshad':522,529,953,994 'visual':16,41 'void':746,770,819,837,866,887 'vuv':745,748,769,774,818,821,836,843,865,868,886,891,901,910,916 'wave':775 'webgl':1141,1204 'webgl-on':1140 'webgpu':1117,1124,1206 'webgpurender':1156,1162 'width':194,200,204,207,1327,1336,1340,1343,1356,1364 'window.addeventlistener':1366 'window.innerheight':121,198,225,372,386,403,422,640,689,982,1031,1298,1331 'window.innerwidth':120,195,224,370,384,401,421,639,688,981,1029,1296,1328 'without':1105","prices":[{"id":"f925c60b-0010-4d1a-aaa5-484fa27db44d","listingId":"83cd4c7a-54c4-4ac0-945b-e83326a400f4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:21.471Z"}],"sources":[{"listingId":"83cd4c7a-54c4-4ac0-945b-e83326a400f4","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-postprocessing","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-postprocessing","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:21.471Z","lastSeenAt":"2026-04-22T06:52:01.706Z"}],"details":{"listingId":"83cd4c7a-54c4-4ac0-945b-e83326a400f4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-postprocessing","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"c955d47d299700f80e1f427b2406141091eeb5b7","skill_md_path":"skills/threejs-postprocessing/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-postprocessing"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-postprocessing","description":"Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-postprocessing"},"updatedAt":"2026-04-22T06:52:01.706Z"}}