Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/threejs-postprocessing
Three.js post-processing - EffectComposer, bloom, DOF, screen effects.
Passed 21 of 22 test cases with the skill, and 20 of 22 without it.
1 fixed20 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
I need to configure post-processing for a Three.js WebGPU project using the modern node-based system instead of EffectComposer. Please write a JavaScript snippet initializing the WebGPU post-processing pipeline, creating a scene pass, chaining a bloom node effect onto it, setting the final output node, and driving rendering via the renderer's animation loop.
| Checked | Without skill | With skill |
|---|---|---|
| Expects using named import { WebGPURenderer } from three/addons/renderers/webgpu/WebGPURenderer.js. | Missed | Passed |
| Expects awaiting renderer initialization with renderer.init() before post-processing setup. | Missed | Passed |
| Expects assigning the bloom node result directly to postProcessing.outputNode. | Missed | Passed |
The instructions your model reads when the skill loads.
EffectComposer, bloom, depth of field, color grading, blur, or custom passes.import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
// Setup composer
const composer = new EffectComposer(renderer);
// Render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// Add bloom
const bloomPass = new UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, // strength
0.4, // radius
0.85, // threshold
);
composer.addPass(bloomPass);
// Animation loop - use composer instead of renderer
function animate() {
requestAnimationFrame(animate);
composer.render(); // NOT renderer.render()
}
test cases passed, vs 20 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.