ReddRadar
Agent skill
r3f-postprocessing
React Three Fiber post-processing - EffectComposer, bloom, depth of field, custom effects. Use when adding visual effects or enhancing rendered output.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/r3f-postprocessing
SKILL.md
React Three Fiber Post-Processing
Setup
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'
function Scene() {
return (
<Canvas>
<mesh>...</mesh>
<EffectComposer>
<Bloom luminanceThreshold={0.5} intensity={1.5} />
<Vignette offset={0.3} darkness={0.5} />
</EffectComposer>
</Canvas>
)
}
Common Effects
import {
Bloom,
DepthOfField,
Noise,
Vignette,
ChromaticAberration,
SMAA,
} from '@react-three/postprocessing'
<EffectComposer>
{/* Bloom/Glow */}
<Bloom
luminanceThreshold={0.5}
luminanceSmoothing={0.9}
intensity={1.5}
mipmapBlur
/>
{/* Depth of Field */}
<DepthOfField
focusDistance={0.01}
focalLength={0.02}
bokehScale={2}
/>
{/* Film grain */}
<Noise opacity={0.1} />
{/* Vignette */}
<Vignette offset={0.3} darkness={0.5} />
{/* Chromatic aberration */}
<ChromaticAberration offset={[0.002, 0.002]} />
{/* Anti-aliasing */}
<SMAA />
</EffectComposer>
Selective Bloom
import { Selection, Select, EffectComposer, Bloom } from '@react-three/postprocessing'
function Scene() {
return (
<Selection>
<EffectComposer>
<Bloom intensity={1} luminanceThreshold={0} mipmapBlur />
</EffectComposer>
{/* Only selected objects bloom */}
<Select enabled>
<mesh>
<boxGeometry />
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />
</mesh>
</Select>
{/* Not selected, no bloom */}
<mesh position={[2, 0, 0]}>
<boxGeometry />
<meshStandardMaterial color="blue" />
</mesh>
</Selection>
)
}
Outline Effect
import { Selection, Select, EffectComposer, Outline } from '@react-three/postprocessing'
<Selection>
<EffectComposer>
<Outline
blur
visibleEdgeColor={0xffffff}
edgeStrength={100}
width={1000}
/>
</EffectComposer>
<Select enabled={hovered}>
<mesh>...</mesh>
</Select>
</Selection>
N8AO (Ambient Occlusion)
import { N8AO } from '@react-three/postprocessing'
<EffectComposer>
<N8AO
aoRadius={0.5}
intensity={1}
distanceFalloff={1}
quality="high"
/>
</EffectComposer>
God Rays
import { GodRays } from '@react-three/postprocessing'
function Scene() {
const sunRef = useRef()
return (
<>
<mesh ref={sunRef} position={[0, 10, -20]}>
<sphereGeometry args={[2]} />
<meshBasicMaterial color="white" />
</mesh>
<EffectComposer>
<GodRays sun={sunRef} density={0.96} decay={0.92} weight={0.3} />
</EffectComposer>
</>
)
}
Custom Effect
import { Effect } from 'postprocessing'
import { forwardRef, useMemo } from 'react'
const fragmentShader = `
uniform float time;
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
vec2 offset = vec2(sin(uv.y * 50.0 + time) * 0.005, 0.0);
outputColor = texture2D(inputBuffer, uv + offset);
}
`
class WaveEffectImpl extends Effect {
constructor() {
super('WaveEffect', fragmentShader, { uniforms: new Map([['time', { value: 0 }]]) })
}
}
const WaveEffect = forwardRef((props, ref) => {
const effect = useMemo(() => new WaveEffectImpl(), [])
return <primitive ref={ref} object={effect} />
})
// Usage
<EffectComposer>
<WaveEffect />
</EffectComposer>
Performance
- Limit effect count
- Reduce multisampling on mobile
- Use conditional rendering
- Prefer SMAA over MSAA
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?