shader-dev
Shader Craft — Techniques de shaders GLSL
Générez des shaders GLSL complets et prêts pour la production pour des effets visuels en temps réel — des scènes 3D par ray marching aux simulations de fluides — fonctionnant tous dans le navigateur avec WebGL2.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "shader-dev". Créer un motif de kaléidoscope en utilisant une manipulation polaire des UV avec une palette de couleurs Voronoï
Résultat attendu:
- Page HTML complète avec canvas WebGL2
- Shader de fragment avec transformation de coordonnées polaires/log-polaires
- Fonction de bruit Voronoï/Worley pour la génération de motifs cellulaires
- Mappage de palette de couleurs cosinus pour des couleurs vibrantes
- Symétrie kaléidoscope par répétition angulaire (ex: symétrie 8 plis)
- Rotation animée basée sur le temps pour un effet visuel dynamique
Utilisation de "shader-dev". Construire une scène avec illumination globale par path tracing avec ombres douces et saignement de couleurs
Résultat attendu:
- Path tracer complet avec échantillonnage Monte Carlo
- Définition de scène SDF avec plusieurs objets et matériaux
- Échantillonnage BSDF diffus et spéculaire
- Terminaison de chemin par roulette russe
- Buffer d'accumulation pour le rendu progressif
- Mappage de tons et affichage pour l'image convergée
Audit de sécurité
SûrThis skill consists entirely of GLSL shader reference documentation (36 markdown files in techniques/ and reference/ directories). Detected risk factors (external_commands, scripts, filesystem, network) are false positives triggered by code examples in markdown documentation. The skill contains no executable scripts, no network requests, no filesystem operations, and no external command invocations. All code samples are GLSL shader snippets for educational/reference purposes. Safe to publish.
Score de qualité
Ce que vous pouvez construire
Art shader interactif et demoscene
Créez des œuvres d'art visuel fascinantes, des productions demoscene ou des installations d'art génératif en utilisant des shaders GLSL qui fonctionnent en temps réel dans un navigateur web. Combinez des techniques comme le ray marching, le bruit procédural et le domain warping pour produire des visuels uniques.
Effets et shaders pour jeux WebGL
Implémentez des effets visuels prêts pour les jeux, notamment des surfaces d'eau/d'océan, du rendu de terrain, des systèmes de particules pour le feu/étincelles/neige, des pipelines de post-traitement et un éclairage atmosphérique — fonctionnant tous côté client en WebGL2.
Visualisation scientifique et simulation
Construisez des visualisations accélérées par GPU pour des données scientifiques : simulations de dynamique des fluides, simulations de gravité N-corps, automates cellulaires, motifs de réaction-diffusion et rendu volumétrique de nuages/brouillard.
Essayez ces prompts
Créez une page HTML autonome avec une scène SDF par ray marching featuring plusieurs objets géométriques (sphères, boîtes, tore) combinés avec un smooth minimum (smin). Ajoutez des ombres douces, une occlusion ambiante et un modèle d'éclairage extérieur à trois lumières. Incluez des contrôles de rotation de caméra via la souris.
Générez un shader WebGL2 qui rend un paysage procédural. Utilisez du ray marching par heightfield avec un terrain FBM (6 octaves avec dérivées pour des détails d'érosion). Ajoutez une texturation biplanaire, une diffusion atmosphérique basée sur la hauteur avec Rayleigh/Mie, et un océan à vagues de Gerstner au niveau de la mer. Appliquez un mappage de tons ACES et un SSAA 2x.
Construisez une simulation de fluides en utilisant un solveur Navier-Stokes en GLSL avec des framebuffers ping-pong multi-passes. Incluez l'advection, la diffusion, la projection de pression (itération de Jacobi) et l'interaction souris pour ajouter du colorant/vélocité. Utilisez une palette de couleurs pour visualiser le champ d'écoulement.
Créez un shader de système de particules sans état pour un effet de feu. Utilisez du bruit procédural pour la turbulence, une palette de couleurs chaudes pour le dégradé du jaune brillant au rouge profond, et un mélange alpha approprié. Incluez une deuxième couche d'étincelles utilisant un système de particules séparé avec la gravité.
Bonnes pratiques
- Respectez toujours les budgets de performance : ≤ 128 étapes de ray march, ≤ 32 échantillons de volume, ≤ 6 octaves FBM, ≤ 1000 itérations de boucles imbriquées par pixel
- Déclarez les fonctions avant leur utilisation en GLSL — contrairement à C/C++, GLSL ne supporte pas les déclarations anticipées dans toutes les implémentations
- Utilisez la technique des tampons multi-passes pour les effets nécessitant une persistance d'état entre les trames (simulation de fluides, path tracing, systèmes de particules)
- Adaptez correctement le code ShaderToy : enveloppez mainImage() dans main(), utilisez gl_FragCoord au lieu de fragCoord, déclarez la sortie out vec4 fragColor
- Préférez const à #define pour les valeurs — les macros GLSL ne peuvent pas utiliser d'appels de fonctions et ont des limitations
Éviter
- Dépasser les budgets de performance — les boucles de plus de 1000 itérations par pixel geleront le navigateur
- Utiliser des macros #define pour des valeurs calculées — le préprocesseur GLSL ne peut pas évaluer les appels de fonctions dans les macros
- Accéder à des uniforms qui peuvent être optimisés par le compilateur — assurez-vous toujours que les uniforms sont utilisés dans la sortie du fragment
- Imbriquer du ray marching ou de l'échantillonnage de volume dans une autre boucle — cela multiplie la complexité et dépasse les limites de temps GPU