shader-effects_skill

Overview

This skill provides a collection of visual shader effects for JavaScript/GLSL workflows, including glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. It bundles compact, reusable snippets and patterns for post-processing and stylized rendering. Use it to add polish, atmosphere, or retro/technical flair to real-time shaders and post-process pipelines.

How this skill works

Each effect is implemented as a small GLSL function or pattern that either modifies UVs, samples a texture with offsets, or blends color values. Effects are designed to be composed in a recommended order: distort UVs first, then color grading, then screen-space treatments (vignette, bloom), and film grain or dithering last. The code favors separable/constrained sampling (e.g., separable gaussian blur, cheap bloom kernels) to keep performance predictable for real-time use.

When to use it

• Add subtle bloom/glow to bright elements or emissive materials.
• Create retro or CRT looks with scanlines, grain, and chromatic aberration.
• Apply distortion effects (ripple, heat haze, barrel) for environmental or UI feedback.
• Use dissolve and glitch for transitions, VFX, or damage states.
• Add outlines or fresnel rim light for stylized silhouettes and readability.

Best practices

• Apply UV distortions before texture sampling to keep downstream effects consistent.
• Keep expensive sampling (large kernels, many taps) optional and controllable by quality presets.
• Use separable blur passes for bloom to reduce sample cost.
• Blend procedural noise/grain with low intensity and temporal animation to avoid distracting flicker.
• Order effects intentionally: distortion → color adjustments → chromatic splits → vignette → grain/dither.

Example use cases

• Cyberpunk HUD: chromatic aberration, scanlines, subtle bloom, and animated glitch blocks for data corruption effects.
• Character stylization: fresnel rim lighting plus SDF-based outlines for crisp silhouettes in toon shading.
• Retro film look: color remap, posterize, film grain, CRT scanlines, and slight vignette.
• Environmental heat: heat haze and ripple combined with color grading and screened film grain.
• Transition VFX: dissolve with edge glow and animated noise for material disintegration.