Qu'est-ce que Terrain de jeu WebGL Shader ?

Écrivez des shaders GLSL de sommet et de fragment et voyez le résultat rendu instantanément via WebGL. Aucune configuration locale nécessaire. Utilisez-le pour apprendre la programmation de shaders, prototyper des effets ou tester des graphiques accélérés par GPU.

Les uniforms intégrés sont `u_time` pour l'animation, `u_resolution` pour la taille du canvas, `u_mouse` pour la position du curseur, `u_frame` pour le nombre d'images rendues et une texture de bruit tuilable `sampler2D u_noise` prête à l'emploi. Importez n'importe quelle image pour la lier à `sampler2D u_texture` et l'échantillonner directement dans le fragment shader. Dix préréglages (gradient wave, plasma, circle SDF, noise tunnel, Mandelbrot, ray march sphere, metaballs, voronoi, starfield, worley cells), un curseur de vitesse d'animation, un compteur d'IPS en direct, un interrupteur d'auto-compilation, une commande de pause qui fige la timeline, un lien partageable qui embarque tout le code source et un export PNG de l'image courante complètent l'outil.

Comment utiliser

1. Rédigez ou collez le code de votre shader GLSL de fragment dans l'éditeur. Un shader par défaut est déjà chargé.
2. L'aperçu en direct se met à jour au fur et à mesure que vous tapez. Les uniformes intégrés incluent le temps, la résolution et la position de la souris.
3. Exportez votre shader en capture d'écran PNG ou copiez le code pour l'utiliser dans vos propres projets WebGL.

Quand l'utiliser

• Apprendre GLSL sans installer un projet C++ ou Three.js en local.
• Prototyper un effet de fragment shader avant de le porter dans un moteur de jeu ou un site.
• Produire des captures de fonds animés pour un portfolio, des slides ou des posts sociaux.

Résultat

Un développeur de jeux prototypant un effet de ride d'eau écrit un shader de fragment avec des ondes sinusoïdales et l'uniforme de temps. Le panneau d'aperçu affiche le résultat animé se mettant à jour en direct.

FAQ

Faut-il connaître C ou la programmation graphique pour l'utiliser ?

GLSL est un petit langage de type C : boucles, conditions, maths en flottants. Quiconque a touché à C, Java ou JavaScript s'y retrouvera. Les shaders préréglés sont commentés, donc modifier des valeurs suffit en général à débuter sans expérience GPU préalable.

Mon shader compile mais l'aperçu reste noir, pourquoi ?

Causes fréquentes : écrire dans `gl_FragColor` hors de la fonction main, renvoyer un `vec3` au lieu d'un `vec4`, ou diviser par zéro dans une fonction de bruit. Ouvrez la console du navigateur : WebGL imprime des avertissements utiles même quand la compilation paraît réussie.

Puis-je échantillonner une texture ou injecter ma propre image ?

Oui. Cliquez sur Importer une image dans la barre de prévisualisation pour lier n'importe quel PNG ou JPG à `sampler2D u_texture`. Un float compagnon, `u_hasTexture`, passe à 1.0 dès que l'image est prête, ce qui permet au shader de tester la présence d'une texture, sur le même modèle que les channel inputs de Shadertoy.

Quelle version de WebGL est utilisée ?

WebGL 1 avec GLSL ES 1.0. Cela veut dire `varying` plutôt que `in/out`, `gl_FragColor` plutôt qu'une sortie nommée, et pas de textures entières. Les shaders écrits pour WebGL 2 ou OpenGL 3+ bureau ont besoin de petits ajustements de syntaxe pour tourner ici.

Quelque chose est-il envoyé vers un serveur ?

Non. La compilation et le rendu ont lieu sur votre GPU via le navigateur. Le code du shader ne quitte pas la page ; si vous fermez l'onglet sans le copier, il disparaît.

Outils similaires