Craft et technique
Comment charger progressivement une scène 3D sans interrompre l’expérience ?
Le chargement progressif d’une scène 3D consiste à rendre le site utile par étapes, sans attendre que toutes les ressources soient prêtes. Le contenu, une image de présentation et les commandes peuvent exister avant la scène. Une première représentation peut ensuite apparaître, puis recevoir les détails nécessaires à l’exploration.
L'essentiel.
Charger une scène progressivement demande de préparer plusieurs niveaux de disponibilité. Le texte et les commandes peuvent être présents avant la 3D ; une première vue peut précéder les détails. Cette organisation se décide dans les ressources et le parcours.
- Rendre les informations et les actions utiles disponibles indépendamment de la scène.
- Séparer la première représentation des détails qui ne sont pas immédiatement nécessaires.
- Décrire l’avancement sans confondre fichiers reçus, ressources décodées et rendu prêt.
- Tester les échecs, les changements de page et les connexions irrégulières.
Cette progression ne résulte pas automatiquement d’un fichier compressé ou d’un indicateur de pourcentage. Elle demande de préparer les ressources selon les moments du parcours, de gérer leurs dépendances et de prévoir ce qui reste affiché lorsqu’une étape échoue. La conception du chargement fait donc partie de l’expérience.
Organiser les ressources autour des besoins du visiteur
Commencez par le premier moment réellement utile. Pour un produit, il peut s’agir d’une vue générale avec son nom et ses caractéristiques. Les textures de très près, les variantes rarement consultées et les scènes suivantes ne sont pas forcément nécessaires à cette première étape.
Un découpage cohérent permet de différer ces éléments. Cela peut demander plusieurs ressources, des niveaux de détail ou une représentation initiale simplifiée préparée à l’avance. Il ne faut pas supposer qu’un unique fichier volumineux deviendra progressivement utilisable parce qu’une barre de chargement est affichée.
| Moment du parcours | Ressources nécessaires | Ce qui peut attendre |
|---|---|---|
| Comprendre la page | Texte, commandes, image de présentation | Moteur et détails de la scène |
| Découvrir l’objet | Géométrie et apparence initiales | Variantes non sélectionnées |
| Examiner un détail | Ressources du détail choisi | Autres vues spécialisées |
| Passer au chapitre suivant | Ressources du prochain contenu | Scènes plus éloignées du parcours |
Ce tableau doit être adapté au récit. Une scène qui nécessite une composition complète peut demander un autre découpage, mais la page peut toujours donner du contexte pendant sa préparation.
Distinguer téléchargement, préparation et affichage
La documentation de GLTFLoader décrit le chargement des ressources glTF, leurs événements et l’intégration de certains décodeurs. Le LoadingManager de Three.js suit les éléments chargés ou en attente. Ces mécanismes aident à coordonner les ressources ; ils ne définissent pas à eux seuls un état « prêt à être utilisé » pertinent pour le visiteur.
Le projet doit établir cet état. Un objet peut être reçu mais attendre une texture. Une ressource peut être disponible, alors que sa première présentation demande encore du travail de préparation. La scène ne devrait apparaître comme interactive que lorsque les commandes peuvent effectivement répondre.
Un message d’étape peut être plus honnête qu’un pourcentage artificiel : présentation disponible, préparation de la vue interactive, détails en cours. Si un pourcentage est utilisé, sa signification doit être claire et ne pas masquer une attente indéfinie après l’arrivée à cent.
Exemple pédagogique : une visite de lieu par zones
Imaginons un lieu culturel fictif avec trois espaces à explorer. Le chargement initial présente une vue du lieu, le sommaire et les informations pratiques. La première zone interactive dispose de ses propres ressources ; les autres ne sont préparées que lorsqu’elles deviennent pertinentes dans le parcours.
Le passage vers une nouvelle zone conserve un repère stable. Si cette zone n’est pas encore prête, une image et sa description permettent d’en comprendre le contenu. Le visiteur peut revenir ou consulter les informations sans rester bloqué devant une animation d’attente.
Devenir utile par étapes
- Page disponibleLe contexte, les informations et le sommaire se consultent immédiatement.
- Première scèneLa zone initiale devient interactive lorsque ses ressources sont prêtes.
- Détails demandésLes vues et textures utiles suivent les choix du visiteur.
- Alternative maintenueUne image et une description restent disponibles si une étape échoue.
Le test pédagogique coupe une ressource de la deuxième zone. Le site doit afficher l’alternative prévue et conserver la navigation. On vérifie aussi qu’un retour vers la première zone ne provoque pas un nouveau chargement inutile ni l’empilement de plusieurs scènes invisibles.
Définir une politique de chargement et d’abandon
Précharger peut rendre une transition plus agréable, mais consomme aussi des ressources pour une scène qui ne sera peut-être jamais visitée. La décision dépend du parcours probable, du poids des éléments et des conditions constatées. Elle doit être mesurée sur le projet, sans appliquer le même comportement à toutes les pages.
Lorsque le visiteur change de destination, le système doit savoir quelles ressources restent utiles et lesquelles peuvent être abandonnées ou libérées. Les possibilités d’annulation dépendent des chargeurs utilisés ; il faut vérifier leur comportement au lieu de supposer qu’une requête interrompue annule toute préparation déjà engagée.
La recette comprend un premier chargement sans cache, une seconde visite, une interruption réseau et une navigation rapide entre plusieurs zones. On observe la lisibilité des messages, le temps jusqu’à la première action utile et les ressources conservées après la sortie.
Ces observations permettent d’arbitrer la finesse du découpage. Trop de petits lots peuvent complexifier la coordination. Un lot trop large retarde tout le parcours. Le bon découpage correspond aux unités de sens et aux actions de l’expérience.
Questions fréquentes
Compresser un fichier 3D suffit-il pour le rendre progressif ?
Non. La compression réduit certains transferts, mais ne crée pas automatiquement des étapes d’utilisation. Il faut prévoir comment les ressources sont séparées, décodées et présentées. Un modèle plus petit peut encore bloquer l’entrée dans l’expérience si toute la page attend sa préparation.
Faut-il lancer la 3D dès l’ouverture de la page ?
Cela dépend de son rôle. Si elle constitue le cœur immédiat de l’expérience, son démarrage peut être prioritaire. Si elle complète une démonstration, une activation volontaire peut être pertinente. Dans les deux cas, le contexte et les actions importantes doivent rester compréhensibles pendant la préparation.
Comment éviter l’apparition brutale de détails supplémentaires ?
Préparez des étapes visuellement compatibles et choisissez le bon moment pour remplacer une ressource. Il faut éviter qu’une modification tardive change la compréhension de l’objet ou déplace une commande. Une transition discrète peut aider, mais elle doit également fonctionner dans la variante de mouvement réduit.
Sources
LVX : concevoir le chargement comme une progression
LVX peut définir avec l’équipe technique les moments où l’expérience devient utile, puis organiser les médias et les scènes autour de cette progression. La direction artistique prévoit les vues d’attente, les premiers états et les alternatives, afin que le site garde son caractère lorsque les ressources arrivent progressivement. Les tests portent ensuite sur la capacité à comprendre et à agir dans plusieurs conditions de connexion. Cette démarche rend les arbitrages de chargement visibles et discutables dès la conception. Découvrir notre approche.
