Présentation

Le projet Safe Sand est une démonstration visuelle construite avec WebGL2 et JavaScript. L’utilisateur peut pousser les grains de sable avec le doigt, incliner l’appareil pour les faire glisser ou secouer le dispositif pour les disperser. Le même comportement est disponible sur smartphones, tablettes et ordinateurs de bureau, ce qui montre la portabilité du code HTML5.

Architecture technique

WebGL2, version 2 de l’API graphique du Web, fournit un accès direct aux shaders de vertex et de fragment ainsi qu’à des tampons de transformation. En s’appuyant sur ces primitives, le simulateur représente chaque grain comme un point ou un petit sprite traité par le GPU. Le rendu s’effectue entièrement côté client, sans appel serveur, ce qui explique la réactivité instantanée décrite dans la source.

Le moteur de logique repose sur JavaScript. Les événements tactiles (touchstart, touchmove) détectent la pression du doigt et transmettent les coordonnées aux shaders, qui ajustent la position des grains. L’inclinaison du téléphone utilise l’API DeviceOrientationEvent, qui fournit les angles d’accélération gravitationnelle ; ces valeurs sont converties en vecteurs de déplacement appliqués aux particules. Le secouage s’appuie sur l’API DeviceMotionEvent, qui délivre les accélérations linéaires, déclenchant une impulsion aléatoire sur chaque grain.

Le choix de WebGL2 permet d’exploiter le pipeline de rendu parallèle du GPU, essentiel pour gérer plusieurs milliers de grains à 60 fps. Les calculs de physique restent simples (intégration d’Euler, friction basique) afin de limiter la charge CPU et de préserver la fluidité sur les appareils mobiles, dont la puissance de calcul et la bande passante mémoire sont plus restreintes que sur les postes de travail.

Performances et limites

Le fait que le démonstrateur fonctionne sur tous les navigateurs compatibles WebGL2 indique que le code évite les extensions propriétaires. Cependant, la densité maximale de grains dépend de la capacité du GPU à gérer les appels de dessin et la taille des tampons. Sur les smartphones anciens, la mémoire vidéo disponible peut contraindre le nombre de particules affichées simultanément, entraînant une réduction de la résolution ou du taux de rafraîchissement.

Le modèle de physique, limité à la gravité et à la friction, ne reproduit pas les interactions inter‑granulaires complexes (cohésion, angle de repos). Cette simplification est justifiée par la contrainte de maintenir une interactivité en temps réel, mais elle représente une limite pour les simulations scientifiques où la précision des contacts est cruciale.

Enfin, l’utilisation exclusive du navigateur implique que la précision des capteurs (orientation, mouvement) dépend du matériel et du système d’exploitation. Les variations entre appareils peuvent donc affecter la cohérence du comportement du sable, un point à considérer pour toute application qui s’appuie sur ces entrées pour des interactions critiques.