shader-effects
shader-effects provides ready-to-use shader implementations for common visual effects in graphics programming. Access code snippets for glow, bloom, chromatic aberration, and other post-processing techniques to enhance your rendering pipeline. Perfect for developers building interactive graphics or game engines.
shader-effects offers ready-to-use implementations for glow and bloom effects that enhance your rendering pipeline. These post-processing techniques create luminous halos around bright objects and diffuse light across the screen. The library includes GLSL code snippets you can integrate directly into your graphics engine or game project.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
shader-effects offers ready-to-use implementations for glow and bloom effects that enhance your rendering pipeline. These post-processing techniques create luminous halos around bright objects and diffuse light across the screen. The library includes GLSL code snippets you can integrate directly into your graphics engine or game project.
Use it when
- shader-effects includes chromatic aberration shader code that separates color channels to create a realistic lens distortion effect.
- Yes.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
Bbeierle12/Skill-MCP-Claude/shader-effects · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What shader glow bloom effects does shader-effects provide?
shader-effects offers ready-to-use implementations for glow and bloom effects that enhance your rendering pipeline. These post-processing techniques create luminous halos around bright objects and diffuse light across the screen. The library includes GLSL code snippets you can integrate directly into your graphics engine or game project.
How do I implement chromatic aberration in GLSL?
shader-effects includes chromatic aberration shader code that separates color channels to create a realistic lens distortion effect. The implementation demonstrates how to sample and offset RGB channels independently in your fragment shader, producing the characteristic color fringing seen in camera lenses and stylized visuals.
Can shader-effects help me add stylized rendering effects?
Yes. shader-effects provides code for stylized rendering effects including glitch, dissolve transitions, and scanlines for CRT-style aesthetics. These snippets let you layer multiple effects for polished visual output, whether you're building retro-inspired games or modern interactive graphics with artistic flair.
What post-processing shader effects are included?
shader-effects covers a comprehensive range of post-processing techniques: film grain, vignette, distortion waves, barrel distortion, heat haze, ripple effects, and color grading. Each effect includes GLSL implementations you can combine to create your desired visual style and enhance your rendering pipeline.
Does shader-effects include outline and rim light shaders?
shader-effects provides fresnel rim light shader code for creating edge-lit effects on 3D models. The library also includes outline techniques using signed distance fields (SDF) for clean silhouette rendering, giving you tools for stylized character and object rendering in your graphics projects.
What license does shader-effects use?
shader-effects is released under the MIT license, allowing you to freely use, modify, and distribute the shader code in your projects—both commercial and open-source. This permissive license makes it ideal for integrating visual effects into game engines and graphics applications.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Shader Effects
Visual effects that add polish, style, and atmosphere to shader output.
Quick Start
// Combine multiple effects
vec3 color = baseColor;
color = applyVignette(color, uv, 0.5);
color = applyGrain(color, uv, uTime, 0.1);
color = applyChromaticAberration(color, uv, 0.005);
Glow / Bloom
Simple Glow
// Distance-based glow
float glow(float d, float radius, float intensity) {
return pow(radius / max(d, 0.001), intensity);
}
// Usage
float d = sdCircle(uv, 0.2);
vec3 color = vec3(glow(d, 0.1, 2.0)) * glowColor;
Bloom (Multi-sample)
```glsl // Sample in cross pattern for cheap bloom vec3 bloom(sampler2D tex, vec2 uv, float radius) { vec3 color = vec3(0.0); float total = 0.0;
for (float x = -4.0; x <= 4.0; x += 1.0) { for (float y = -4.0; y <= 4.0; y += 1.0) { float weight = 1.0 / (1.0 + length(vec2(x, y))); color += texture2D(tex,
(truncated - see the full file via the links below)
File tree — 2 files
skills/shader-effects/SKILL.md
skills/shader-effects/_meta.json
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Find shader code for visual effects like glow, bloom, and chromatic aberration”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Glsl empowers developers to craft and validate shader code for graphics applications. Whether you're building visual effects, game engines, or interactive renderings, this skill streamlines the shader development workflow with hands-on testing capabilities. Ideal for graphics programmers seeking a focused environment to experiment with GLSL syntax and rendering logic.
This skill teaches you how to craft and deploy custom GLSL shaders within the Three.js graphics library. You'll explore shader fundamentals, material integration, and practical techniques for building sophisticated visual effects that run efficiently in the browser.
shader-sdf enables you to construct procedural geometry using signed distance functions directly in GLSL shaders. This approach lets you define complex 2D and 3D shapes through mathematical functions rather than traditional mesh data, making it ideal for real-time graphics, raymarching, and generative visual effects.
Dive into the core concepts of shader programming with this comprehensive guide to GLSL. Learn how vertex and fragment shaders work together to control rendering pipelines, explore essential techniques for lighting and color manipulation, and build the foundation needed to create custom visual effects in graphics applications.
R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. Access pre-built GLSL code and material definitions to accelerate your 3D graphics pipeline without reinventing visual effects from scratch.
This skill brings Shadertoy's shader library into your agent environment, letting you browse and run shader code with live rendering. Perfect for developers exploring GPU graphics, visual effects, or procedural art without leaving your workflow.
More skills shader-noise (MIT) · shader-programming (Apache-2.0) · shader-basics (MIT) · postfx-router (MIT) · shader-router (MIT) · webgl-card-effects (MIT)