shader-dev

Create GLSL shader techniques for visual effects in WebGL2.

Updated Jun 22, 2026

Search Tags:#visual effects #shader #GLSL #ray marching #WebGL2

Ready to run

npx skills add https://github.com/xuyannan0321/math-ai-edu-site --skill shader-dev-xuyannan0321

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shader-dev
Source: https://github.com/xuyannan0321/math-ai-edu-site/tree/main/.agents/skills/shader-dev
Command: npx skills add https://github.com/xuyannan0321/math-ai-edu-site --skill shader-dev-xuyannan0321

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of GLSL shader techniques to create and render complex visual effects for graphics and animation.

Core Features & Use Cases

36+ Shader Techniques: Ray marching, SDF modeling, fluid simulation, particle systems, procedural generation, lighting, post-processing, and more.
Technique Routing: Easy navigation and selection of specific shader techniques based on user requirements.
Detailed Guides: In-depth explanations and tutorials for each technique, including mathematical derivations and advanced patterns.
WebGL2 Adaptation: Guidance for adapting techniques to the WebGL2 environment for standalone HTML page generation.

Quick Start

To create a raymarched SDF scene with soft shadows, use the following command:

/shader-dev create-raymarched-sdf-scene --soft-shadow

Frequently Asked Questions about shader-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create WebGL2 visual effects using GLSL shaders?▼

To create WebGL2 visual effects using GLSL shaders, you can utilize a comprehensive set of techniques including ray marching, SDF modeling, and procedural generation. It provides detailed guides and technique routing to generate standalone HTML pages.

What is the best way to set up a raymarched SDF scene with soft shadows?▼

The best way to set up a raymarched SDF scene with soft shadows is by using specific shader technique commands. You can quickly generate this scene by invoking the create-raymarched-sdf-scene command with the soft-shadow flag.

Do I need prior knowledge of GLSL and WebGL2 to use these shader techniques?▼

Yes, you need existing knowledge of GLSL and WebGL2 to use these shader techniques. The provided guides cover mathematical derivations and advanced patterns for fluid simulation and particle systems, requiring an advanced understanding of shader programming.

Does this shader technique collection support fluid simulation and particle systems?▼

Yes, this shader technique collection supports fluid simulation and particle systems. It covers over 36 shader techniques, providing in-depth explanations and tutorials for adapting these visual effects to the WebGL2 environment.

What limitations should I expect when adapting procedural generation to WebGL2?▼

When adapting procedural generation to WebGL2, limitations depend on your environment's capabilities and mathematical complexity. The collection provides specific guidance for adapting advanced patterns and lighting techniques to ensure proper standalone HTML page generation.

Can I use this for lighting and post-processing in graphics and animation?▼

Yes, you can use this for lighting and post-processing in graphics and animation. It solves the problem of rendering complex visual effects by providing comprehensive GLSL shader techniques across a wide range of rendering scenarios.