Compétences shader-programming-glsl
📦

shader-programming-glsl

Sûr

Écrire des shaders GPU avec GLSL

Créez des effets visuels époustouflants et optimisez le rendu graphique avec les shaders GPU. Ce guide enseigne la syntaxe GLSL, les vertex et fragment shaders, et les mathématiques des shaders pour les graphiques en temps réel.

Prend en charge: Claude Codex Code(CC)
📊 70 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "shader-programming-glsl". Create a shader that makes a pulsing glow effect centered on the screen

Résultat attendu:

Un fragment shader utilisant smoothstep et des fonctions sin basées sur le temps pour créer une animation de dégradé radial avec interpolation de couleur du centre vers les bords

Utilisation de "shader-programming-glsl". How do I optimize this shader loop that runs 100 iterations?

Résultat attendu:

Recommandations pour réduire le nombre d'itérations, utiliser la terminaison anticipée, précalculer les constantes sur le CPU, et remplacer les branchements par des fonctions step/mix pour de meilleures performances GPU

Audit de sécurité

Sûr
v1 • 2/25/2026

All 33 static analysis findings are false positives. The SKILL.md file is educational documentation about GLSL shader programming. Backtick-quoted text represents GLSL code examples in markdown format, not shell command execution. C2 keywords and system reconnaissance patterns are GLSL built-in variables (gl_Position, gl_FragColor, varying) and shader language syntax. No actual security risks detected.

1
Fichiers analysés
122
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
31
Communauté
100
Sécurité
83
Conformité aux spécifications

Ce que vous pouvez construire

Développeur Web créant des visuels interactifs

Construisez des shaders personnalisés pour les projets Three.js, y compris des arrière-plans animés, des systèmes de particules et des effets de post-traitement pour les sites web.

Développeur de jeu implémentant des effets personnalisés

Écrivez des shaders pour Unity ou Unreal Engine afin de créer des styles visuels uniques, la génération de terrain et des effets d'éclairage en temps réel.

Codeur créatif explorant l'art génératif

Expérimentez avec la génération procédurale utilisant les SDF, le raymarching et les techniques de fragment shader pour les installations d'art numérique.

Essayez ces prompts

Configuration de base d'un fragment shader 
Aidez-moi à écrire un fragment shader GLSL de base qui crée un dégradé de couleur basé sur les coordonnées UV pour une utilisation dans Three.js.
Vertex Shader avec transformation 
Générez un vertex shader qui applique une déformation en vague à un maillage en utilisant un uniform de temps et les fonctions sin/cos.
Scène raymarching SDF 
Créez un fragment shader raymarching avec plusieurs formes SDF (sphère et boîte) combinées utilisant des opérations d'union lisses.
Effet de post-traitement 
Écrivez un shader de post-traitement bloom qui extrait les pixels lumineux, applique un flou gaussien et compose sur l'image originale.

Bonnes pratiques

  • Utilisez mix() pour l'interpolation et step()/smoothstep() pour les seuils au lieu des branchements if-else
  • Précalculez les valeurs constantes sur le CPU et transmettez-les en tant qu'uniformes plutôt que de les calculer dans le shader
  • Regroupsez les données liées dans un vec4 pour minimiser la bande passante mémoire et exploiter les unités vectorielles GPU

Éviter

  • Les branchements conditionnels lourds à l'intérieur des boucles réduisent le parallélisme GPU et provoquent une divergence des threads
  • Calculer des valeurs statiques par fragment au lieu de transmettre des uniformes précalculés depuis le CPU
  • Une précision inutile (utiliser highp alors que mediump suffit) gaspille la bande passante et l'énergie sur mobile

Foire aux questions

Quelle est la différence entre les vertex shaders et les fragment shaders ?
Les vertex shaders transforment les positions des sommets 3D en coordonnées écran 2D. Les fragment shaders déterminent la couleur finale de chaque pixel. Les vertex shaders s'exécutent une fois par sommet ; les fragment shaders s'exécutent une fois par pixel.
Pourquoi mon shader affiche-t-il un écran noir ?
Vérifiez que gl_Position.w est égal à 1.0, vérifiez que les uniformes sont définis depuis votre application hôte, asegurez-vous que les coordonnées UV sont dans la plage 0-1, et confirmez que votre shader s'est compilé sans erreurs.
Que signifie le swizzling en GLSL ?
Le swizzling vous permet de réordonner ou de sélectionner des composants de vecteur en utilisant des suffixes comme .xyzw, .rgba ou .stpq. Par exemple, color.zyx inverse les canaux RGB d'un vec3.
Comment passer des données du vertex shader au fragment shader ?
Utilisez le mot-clé varying. Déclarez un varying dans les deux shaders, assignez-le dans le vertex shader et lisez-le dans le fragment shader. Les valeurs sont interpolées sur la primitive.
Qu'est-ce que le raymarching et quand dois-je l'utiliser ?
Le raymarching rend les scènes 3D en progressant le long des rayons en utilisant des fonctions de distance signées. Utilisez-le pour la géométrie procédurale, les formes organiques et les effets difficiles avec la rastérisation traditionnelle.
Comment puis-je améliorer les performances des shaders sur les appareils mobiles ?
Utilisez la précision mediump autant que possible, minimisez les recherches de texture, réduisez les itérations de boucle, évitez les branchements dynamiques, et précalculez les calculs complexes sur le CPU.

Détails du développeur

Auteur

sickn33

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/shader-programming-glsl

Réf

main

Structure de fichiers

📄 SKILL.md