Loading
Le rendu n'est pas décoratif. Il rend lisibles distance, mouvement, relations et défaillances sans modifier la physique.
Lancer la simulation
0404 / 09Le moteur physique ignore que les particules brillent. Il connaît des tableaux de positions, vitesses et types ; rien du bloom, des traînées ou de la grille.
Cette séparation est volontaire. Le rendu peut rendre l'état lisible, jamais le rendre plus intéressant en modifiant la physique. Une traînée trop longue peut transformer une dérive aléatoire en mouvement intentionnel ; un bloom excessif peut fusionner des points qui ne forment aucune structure.
Les lignes sont renforcées ici pour rendre leur règle lisible.
Les connexions sont toujours dérivées : même type, distance écran directe ≤30 px, une ligne par paire, plafond global de 8 192. Les traînées sont trois images à 0,30, 0,10 et 0,03, désactivées automatiquement au-dessus de 1,5×.
WebGPU et WebGL2 implémentent la même interface : rendre une vue, redimensionner, régler la taille, activer les traînées, signaler une perte et détruire les ressources. La boucle leur transmet les mêmes positions, types et segments.
WebGPU est essayé en premier. Si l'adaptateur manque ou échoue, WebGL2 prend le relais. La technique visuelle peut se dégrader ; le comportement reste identique.
WebGL2 sait dessiner des GL_POINTS. WGSL ne fournit pas de taille de point programmable équivalente. Chaque particule WebGPU est donc une instance d'un quadrilatère de six sommets. Le vertex shader l'étend autour de la position ; le fragment shader découpe un cercle et calcule la lueur radiale.
L'instanciation garde le dessin compact : une géométrie répétée pour toutes les particules, sans construire un maillage côté CPU.
Le repli WebGL2 omet le bloom multipasse
Lignes, traînées éventuelles et particules vivantes construisent d’abord une scène HDR. Le bloom en dérive au quart de résolution. La passe finale trace la grille puis additionne scène nette et bloom. WebGL2 garde lignes, traînées, lueur et grille, sans bloom multipasse.
Lignes, fantômes de traînée et particules vivantes sont d'abord dessinés dans une texture HDR. La scène est réduite au quart de la résolution pour le bloom, floutée horizontalement puis verticalement, et enfin recomposée avec la scène nette et une grille procédurale.
Le quart de résolution réduit le flou à un seizième des pixels. La scène nette conserve la position ; le bloom communique densité et énergie.
Un anneau de quatre buffers conserve l'image courante et trois images précédentes, rendues à 0.3, 0.1 et 0.03. C'est une courte mémoire visuelle, pas un mouvement inventé à partir de la vitesse.
Au-dessus de 1.5×, les traînées disparaissent : les échantillons deviennent trop éloignés pour décrire honnêtement un chemin.
Les particules du même type à moins de trente pixels peuvent être reliées. Chaque paire apparaît une fois et la sortie est plafonnée à 8 192 segments. Les paires proches uniquement à travers la jointure toroïdale sont ignorées afin de ne pas tracer une ligne traversant tout l'écran.
Le repli utilise GL_POINTS, les mêmes couleurs, l'addition, les traînées et les connexions. Il ne reproduit pas tout le bloom multipasse, mais conserve la hiérarchie de l'information.
Lors d'une perte GPU, un canvas WebGPU ne peut devenir WebGL2. React monte un canvas neuf et y rattache la boucle existante. Positions, vitesses, matrice, graine et temps survivent ; seule la vue change.
Les coordonnées du monde restent en pixels CSS, chaque backend appliquant le ratio de densité. Les buffers grandissent uniquement lorsque la capacité augmente et sont libérés à la navigation.
Ouvrez la simulation et montez la vitesse au-delà de 1.5×. La physique ne change pas soudainement ; le renderer cesse simplement de faire une affirmation visuelle qu'il ne peut plus soutenir.
La partie 5 demande comment mesurer un motif une fois qu'il semble vivant.
Plus à lire
Temps fixe, graines déterministes, monde toroïdal et hachage spatial : ce qui permet à deux mille particules de rester une expérience.
Un beau motif est une invitation à chercher, pas un résultat. Le projet avait besoin de mesures capables de contredire mes yeux.
La matrice n'est ni une palette ni un panneau de commande. C'est un langage directionnel pour l'attraction, la répulsion, la poursuite et la structure.
