Créations graphiques
Design de shader de galaxie de particules
Trois bras spiraux discrets évoluent sur un canevas WebGL2 sombre, sous une typographie fixe, avec des nombres de points et d’appels de dessin définis dans le code source et un affichage local des FPS.
Cas d’usage de la galaxie de particules
- Expérimentation WebGLÉtudiez la composition de particules pilotée par le GPU et le mouvement piloté par shader.
- Identité visuelle animéeCréez des scènes d’accueil atmosphériques autour d’une forme unique en évolution.
- Présentation de creative codingAssociez contraintes techniques et typographie éditoriale sobre.
Points forts de la galaxie procédurale
- Champ de particules en spiraleDes points vert et bleu discrets forment trois larges bras spiraux.
- Bloc de contexte de renduPoints, appel de dessin et FPS sont regroupés en haut à droite.
- Typographie éditorialeUne grande phrase ancre la composition sous l’illustration.
- Focalisation sur un seul canevasLe champ visuel porte l’expérience sans commandes visibles.
Trois moments de la galaxie de particules
1 / 3
Trois bras spiraux, un seul appel de dessin de points
Particle Galaxy est un exemple officiel OpenDesign centré sur un canevas sombre, presque vide, et un vaste champ de particules discrètes. Le titre d’origine, « Fifty thousand points, one draw call. », fait de la prémisse technique une part de l’identité visuelle au lieu de la cacher derrière l’interface.
Le champ de particules et le titre fixe en bas à gauche partagent un même viewport ; le titre n’est pas une section distincte sous la ligne de flottaison. Des points verts, bleus et pâles, discrets, laissent de larges zones sombres entre les trois bras. Le compromis visuel est net : le champ sobre paraît calme à côté du texte lumineux, mais son faible contraste demande un examen attentif de l’image en pleine taille.
Où ce design trouve sa place
Ce design convient à une scène d’accueil de creative coding, à une vitrine technologique interactive ou à une étude WebGL à direction artistique. Sa valeur est maximale quand le visuel est le sujet et que le texte d’appui peut rester court.
L’absence de commandes statiques maintient l’attention sur le champ de particules changeant. Cette retenue limite aussi la découvrabilité : le balisage fourni ne montre aucune commande d’origine, de sorte que le design communique par le mouvement, la typographie et le bloc compact de statistiques plutôt que par des indices d’interaction explicites.
Vitrine de creative coding
Utilisez le vaste champ de particules pour introduire une expérience de rendu avant d’en expliquer la technique.
Scène d’accueil WebGL
Adaptez le canevas sombre comme ouverture visuelle d’une expérience numérique à vocation technique.
Éditorial centré sur le mouvement
Laissez une forme à l’évolution lente retenir l’attention pendant qu’un texte concis pose le contexte.
Comment fonctionne la composition
Le bloc en haut à droite affiche 50,000 POINTS, 1 DRAW CALL et une estimation de FPS changeante. Le vertex shader dérive les positions des points de gl_VertexID, les répartit entre trois bras et fait varier leur vitesse angulaire pour que les points intérieurs tournent plus vite. Une inclinaison fixe et une rotation d’ensemble lentement variable donnent sa perspective au disque. Des sprites de points doux et un mélange additif donnent leur halo aux particules vertes, cyan et pâles.
Les statistiques utilisent de grands chiffres blancs et de plus petits libellés espacés, tandis que l’illustration emploie des particules vertes, bleues et pâles bien moins contrastées. Cette séparation rend les métadonnées faciles à parcourir sans concurrencer la galaxie. Elle crée aussi un compromis perceptif : le bloc de performance est immédiatement lisible, alors que les bras de particules exigent un regard plus long et un contraste d’affichage adapté.
Les captures montrent des valeurs de FPS affichées différentes tout en gardant les mêmes libellés de nombre de points et d’appel de dessin. Cette variation fait lire le champ FPS comme un état d’affichage local changeant, et non comme une affirmation stable sur la performance selon les appareils.
Prémisse technique
Le titre relie l’idée du nombre de particules et de l’appel de dessin au visuel, au lieu de les présenter comme des métadonnées sans lien.
Densité visuelle
Les larges bras spiraux restent clairsemés sur le noir, ce qui préserve l’espace négatif autour du titre et des statistiques.
Variation d’état
Les captures conservent 50000 points et un appel de dessin tout en montrant des valeurs de FPS différentes, ce qui sépare les libellés fixes de l’état d’affichage changeant.
Limites des capacités
Le code source WebGL2 définit N = 50000 et appelle gl.drawArrays avec POINTS une fois par image rendue. Les positions des particules sont calculées dans le vertex shader plutôt que mises à jour via un tampon de positions côté CPU. Le fil principal gère toujours la configuration, les uniforms de temps, le redimensionnement et le dessin. Il n’y a aucune commande de pointeur, de clavier, de pilotage de caméra ou de paramètres. Il s’agit d’un visuel procédural évoquant une galaxie, non d’une simulation gravitationnelle scientifique.
Les commentaires du code revendiquent 60fps, mais des captures isolées et le compteur de FPS local n’établissent pas une performance garantie. Elles ne prouvent pas non plus un déploiement en production, des services connectés ni un processus de génération historique. Les nombres de points et d’appels de dessin sont des faits issus du code ; la valeur de fréquence d’images est une observation dépendant de l’environnement.
Ce que décrivent les compteurs
L’affichage du nombre de points provient de la valeur N configurée, et le libellé de l’appel de dessin correspond à l’unique appel POINTS de la boucle de rendu. La valeur de FPS estime la cadence de requestAnimationFrame sur des fenêtres d’environ une demi-seconde. Garder ces significations séparées préserve un contexte technique utile sans transformer l’illustration en référence de performance non étayée.
Comment créer un design de shader de galaxie de particules dans OpenDesign
Établir la composition du canevas
Commencez par un champ sombre occupant tout le canevas, un petit groupe de statistiques en haut à droite et une typographie fixe en bas à gauche. Gardez l’étiquette verte du sujet, la grande phrase et le paragraphe explicatif dans le même viewport, sans ajouter de seconde section sous l’illustration.
Façonner le champ de particules
Construisez trois bras spiraux discrets à partir de points dérivés de l’identifiant de sommet, avec un mouvement angulaire plus rapide près du centre et des sprites de points doux en mode additif. Conservez les zones sombres et la typographie fixe. Considérez la galaxie comme un motif visuel, et non comme un modèle astronomique validé physiquement.
Vérifier les libellés et les limites des capacités
Gardez Points, Draw Call et FPS visuellement distincts, et veillez à présenter les valeurs de FPS changeantes comme un état d’affichage local, et non comme une référence de performance universelle. Vérifiez que le mouvement et le redimensionnement restent limités au canevas rendu.
Invite suggéréeCrée une galaxie de particules WebGL2 animée automatiquement, avec 50000 points positionnés à partir de gl_VertexID et rendus en un seul appel POINTS par image. Dispose-les en trois larges bras spiraux avec un mouvement angulaire plus rapide vers le centre, une inclinaison fixe et une lente rotation d’ensemble. Utilise des sprites de points additifs vert et cyan doux, la typographie fixe en bas à gauche « Fifty thousand points, one draw call. », et en haut à droite des libellés de points et d’appel de dessin définis dans le code source, avec une estimation locale des FPS. N’ajoute ni commandes utilisateur, ni simulation physique de galaxie, ni services connectés, ni stockage, ni garantie de performance universelle.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques