Rechercher

Pages, expertises, articles et outils. Essayez un sujet ou un besoin.

Chargement de la recherche…

Expériences du labo

Animation 3D : mesurer le coût des particules

Comparez trois densités de notre sculpture avec neuf passages mesurés. Cadence et temps CPU sont relevés dans votre navigateur, sans score universel.

Par Cyril Croze · Directeur clientèle chez Upto1
Publié le · Mis à jour le

MATIÈRE LIBRE / 01Votre espace de création
IMAGINE

Survolez pour déplacer les points. Glissez pour tourner.Glissez horizontalement pour tourner.

Une infinité de compositions
À vous de créer

Donnez forme
à votre idée.

Personnaliser la sculpture

Jusqu’à 16 caractères. Essayez un mot qui vous inspire.

7 200
La forme
L’atmosphère

L’atelier se prépare…

Un mot devient matière.

Votre texte et votre image restent dans votre navigateur. Aucun compte, aucun envoi automatique.

Le geste fait l’expérience

Explorez. Transformez. Recommencez.

Commencez par un prénom, puis passez à la sphère ou à l’anneau. Les mêmes points changent de place pour créer une nouvelle forme. Une fois la matière dispersée, « Rassembler » lui redonne sa silhouette.

Une création à emporter.

Choisissez une atmosphère, ajustez l’angle et enregistrez votre composition en PNG. Le bouton Pause fige le mouvement. Toutes les commandes sont accessibles au clavier et l’animation démarre en pause si vous préférez réduire les mouvements.

Imaginer une expérience pour votre site ↗

Refaire l’expérience dans votre navigateur

Observation du 25 septembre 2026

600 particules : 120.0 callbacks/s · 7200 particules : 120.0 callbacks/s · 14400 particules : 120.0 callbacks/s. Cadence du navigateur, pas mesure GPU.

Résultats de la session publiée
ParticulesCadence médiane (callbacks/s)Soumission CPU médiane (ms)
600120.00.000
7200120.00.100
14400120.00.000

Sur cette session (ordinateur, fenêtre de 762 × 897 pixels, profil de densités ordinateur), les densités testées ne produisent pas de baisse notable de cadence. Cela ne permet pas de les déclarer équivalentes en coût GPU ou en énergie. Une durée CPU affichée à zéro correspond à la précision de l’horloge, pas à un travail gratuit.

Mesure locale dans le navigateur de contrôle sur ordinateur. Elle ne représente pas les appareils de tous les visiteurs.

Télécharger la mesure publiée (JSON) ↓

Le test démarre uniquement à votre demande. Les résultats restent dans cette page. Vous pouvez les télécharger.

Prêt à mesurer.

Données détaillées de mon exécution
01 / Expériences du labo

Une sculpture, trois densités et neuf passages

Le test utilise le moteur WebGL de la sculpture du labo, la forme sphère et une caméra fixe. Le profil ordinateur compare 600, 7 200 et 14 400 particules. Le profil allégé compare 600, 4 200 et 8 400 particules. Le choix automatique utilise le profil allégé sous 781 pixels, mais vous pouvez sélectionner le profil à comparer. Trois passages sont réalisés pour chaque densité, avec 800 millisecondes de stabilisation puis 2,4 secondes de mesure.

L’ordre des densités change à chaque série pour réduire l’effet d’un ordre toujours identique. La taille du canevas et le ratio de pixels sont enregistrés. Gardez la page active jusqu’à la fin : un changement d’onglet ou de taille interrompt le protocole au lieu de produire un résultat comparable en apparence.

02 / Expériences du labo

Ce que mesurent la cadence et le temps CPU

La cadence est calculée à partir des intervalles entre les callbacks requestAnimationFrame pendant le dessin. Elle dépend aussi de l’écran et de la planification du navigateur. Le temps CPU mesure la soumission des commandes de dessin. Il n’inclut pas l’exécution complète du travail sur la carte graphique.

Les médianes résument les passages sans cacher les observations individuelles, disponibles dans le fichier JSON. Une cadence stable ne signifie pas que la consommation d’énergie ou la charge graphique sont identiques. Le test ne mesure ni batterie, ni Core Web Vitals, ni temps de chargement depuis Internet.

03 / Expériences du labo

Choisir une densité adaptée au contexte

Le curseur de la sculpture sert à confronter la densité visuelle au comportement observé sur votre appareil. Une expérience courte dans un navigateur de bureau ne suffit pas à décider pour tous les visiteurs. Un affichage étroit reste une fenêtre de bureau tant qu’aucun téléphone réel n’a été utilisé.

L’atelier conserve un aperçu statique si WebGL manque et respecte la préférence de réduction des mouvements au démarrage. Le benchmark ne démarre que sur une action explicite, puis restitue les paramètres de la sculpture.

On parle de votre projet ?

Expliquez-moi ce que vous voulez améliorer. Nous verrons ensemble par où commencer et quelles équipes Upto1 faire intervenir.

En parler avec Cyril ↗