skills.rest
Rosetears520
Rosetears520COMMUNITY
Explore all skills by this author →
GitHub

shader-dev

Build ShaderToy-compatible GLSL/WebGL2 shader effects with WebGL2 adaptation guardrails.

2|Updated May 3, 2026
Search Tags:#debugging#glsl#procedural graphics#sdf#shader#webgl2#ray marching
One-click install
npx skills add https://github.com/Rosetears520/aili-workflows --skill shader-dev-rosetears520
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shader-dev
Source: https://github.com/Rosetears520/aili-workflows/tree/main/skills/shader-dev
Command: npx skills add https://github.com/Rosetears520/aili-workflows --skill shader-dev-rosetears520

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you build correct, production-minded GLSL/WebGL2 shader effects without getting stuck on template mismatches, routing errors, or common WebGL2 pitfalls.

Core Features & Use Cases

  • Shader authoring & routing: Guides when to use GLSL/WebGL/ShaderToy-compatible techniques vs. generic UI animation, ensuring the right approach is selected.
  • Technique-driven implementations: Breaks down effects into named modules (ray marching/SDF, CSG booleans, domain warping, particles, fluids, post-processing, anti-aliasing, camera effects, etc.).
  • WebGL2 adaptation guardrails: Provides required version/output conventions, ShaderToy-to-WebGL2 wrapper rules, and common compiler error fixes.
  • Debugging & performance budgets: Includes practical validation visuals (normals, step counts, distance checks) and recommended loop/step limits to avoid browser freezes.

Quick Start

Use the shader-dev skill to generate a ShaderToy-compatible WebGL2 fragment shader for a raymarched 3D SDF scene with soft shadows and ambient occlusion.

Frequently Asked Questions about shader-dev

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

FAQPage Schema
How do I write a WebGL2 fragment shader that is compatible with ShaderToy?▼

ShaderToy-compatible WebGL2 shaders require #version 300 es declaration, correct main entry wrapping, fragColor output, and proper gl_FragCoord usage to ensure successful compilation and rendering.

What is the best way to build a raymarched SDF scene in GLSL?▼

Building a raymarched SDF scene in GLSL involves selecting ray marching technique modules from a routing table, applying CSG booleans and domain warping, and adding anti-aliasing for production-ready real-time rendering.

Why does my WebGL2 shader compile to a black screen?▼

Your WebGL2 shader renders a black screen due to template mismatches or incorrect output conventions. Apply debugging guardrails like validating normals, step counts, and distance checks to identify and fix rendering errors.

How do I prevent browser freezes when running procedural graphics shaders?▼

To prevent browser freezes when running procedural graphics shaders, adhere to recommended performance budgets and enforce strict loop and step limits within your ray marching algorithms.

When should I use procedural shader techniques versus generic UI animation?▼

Use procedural shader techniques for real-time GLSL effects like particles, fluids, and post-processing, while routing to generic UI animation when these complex WebGL rendering modules are not required.

Can I add post-processing effects to an existing raymarched scene?▼

Yes, you can add post-processing effects to an existing raymarched scene by selecting the appropriate post-processing and camera effect technique modules from the routing table and applying them to your rendered output.

Related Skills

Explore More Design & Creative Skills→
duc01226duc01226

shader

Develop GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Intermediate
lioenskylioensky
2.2k

shader-dev

Create real-time visual effects with GLSL shader techniques.

Community
Advanced
adamhjkadamhjk
2

pixijs-math

Perform geometric calculations and hit testing in PixiJS scenes.

Community
Intermediate
bfollingtonbfollington
52

shadertoy

Write and edit Shadertoy GLSL fragment shaders with syntax references and patterns.

Community
Basic