Nova est une expérience web utilisant React et THREE.JS.
Le but de cette expérience est de proposer à l’utilisateur de concevoir sa vision de la beauté à travers la création d’une planète en fonction des choix et des interactions qu’il découvrira tout au long d’un récit, raconté par un enfant narrateur.
Afin de rendre Nova facilement accessible et à la portée de tous, le choix d’un support web desktop est venu naturellement face au nombre et au moyen d’interagir avec l’expérience.
Introduction:
L'expérience commencera par une courte introduction. Un loader indiquera la durée estimée de l'expérience et sera suivi d’une introduction permettant d’introduire l’enfant narrateur qui l'accompagnera.
Partie 1 - La construction de sa planète:
L’utilisateur se retrouve avec l’enfant dans un univers 3D devant une planète vide. L’enfant l’invite au travers de questions naïves à créer sa planète. Durant cette étape au coeur de l'expérience l’utilisateur créera son relief, des plantes des habitants…
Partie 2 - La contemplation de l’univers:
Après avoir créé sa planète l’utilisateur découvrira une galaxie de planètes et pourra visiter les planètes des autres utilisateurs.
L’expérience est divisée en 3 étapes :
- Découverte de l’histoire
- Conception de la planète
- Découverte des planètes conçues par d’autres utilisateurs
Scope fonctionnel (UML)
Scope technique (UML)
La contemplation de l’univers dépendant des précédentes générations de planètes conçues par d’autres visiteurs du site, nous avons mis en place un système de persistance des planètes.
Ce système repose sur une architecture serverless. Les requêtes sont traitées par des micro-services (Lambdas functions - AWS) fournies par notre hébergeur (Netlify) et les informations sont stockées sur une base de données type NoSQL (DynamoDB - AWS).
Ainsi, nous n’avons aucune architecture serveur à mettre en place et le nombre de requêtes traitées par ces services dans l’offre gratuite sont amplement suffisantes lors du lancement de ce projet. Enfin, ce système est entièrement scalable, ce qui nous permet de ne pas nous inquiéter d’éventuels pics de trafic qui pourraient surcharger le back-end.
React est un framework front-end extrêment utilisé et dont la communauté est très active. Il va nous permettre de gérer la partie DOM simplement et rapidement et de lier celle-ci à l’expérience WebGL gérée en THREE.js.
ThreeJS est une librairie WebGL très utilisée, développée depuis l’aube du WebGL sur les navigateurs web et dont la communauté est tout aussi active que celle de React. Sa simplification de la conception de scènes complexes en WebGL ainsi que les nombreuses fonctions et helpers incluent permettent d’accélérer le développement.
GSAP (GreenSock Animation Platform) est une libraire d'animation JavaScript conçue pour gérer des animations en Javascript de manière simple. Elle permet aussi de profiter de l’accélération matérielle (prise en charge par le GPU).
Utiliser rematch comme store va nous permettre de simplifier la transaction de données et d'événements entre le DOM et l’expérience WebGL. Le stockage persistant est ainsi simplifié, toutes les données du store sont enregistrées et permettent de reconstituer une planète importée de la base de donnée.
CannonJS est un moteur physique performant, qui existe depuis quelques années et dont la prise en main facile est assurée.
Babel est un préprocesseur javascript qui nous permet d’utiliser les dernières fonctionnalités Javascript (ES6) qui ne sont pas encore implémentées sur tous les navigateurs. Babel garantit la possibilité de visiter notre expérience même sur d’anciens navigateurs tout en permettant d’écrire du code plus moderne et agréable.
SASS est un préprocesseur CSS qui permet d’écrire des feuilles de style de manière dynamique, tout en apportant plus de flexibilité et de cohérence dans le code.
Pour notre projet, yarn sera notre dependency manager. L’avantage de yarn est qu’il se base sur l’immense librairies de modules dispensée par NPM tout en améliorant l’utilisation du cache et certaines syntaxes dans l’outil de CLI qu’il propose.
Webpack sera notre module bundler, il nous permettre de développer en utilisant des fichiers séparés, puis de les compiler sous la forme de “chunks” qui seront chargées de manière asynchrone et dynamique en fonction du chemin de l’utilisateur.
- Export de spritesheets au format .jpg ou .png pour les assets 2D
- Export des assets 3D sous format .glb (ou .gltf pour les assets animés)
- Unwrapping UV et texture backées
- Export des textures en puissance de 2 (128x128, 256x256…)
- Maquettes réalisées sur photoshop et versionnées sur le Google Drive
- Utilisation d’un compresseur d’image sans perte afin d’optimiser les images sans perdre en qualité
- Limitations dans le nombre de vertices
- Respect de l’échelle (1=1m)
- Réalisation d’une guideline pour les tailles et typographies des différents textes
Afin d’uniformiser le code, différentes configurations et style guides ont été mis en place :
- Utilisation de Prettier
- Mise en place d’un eslint: extends de la configuration de base de
react-app - Workflow git :
master: branche stable en production (les hotfix sont commits dans master)staging: branche en cours de développementfeature/xxx: fonctionnalité importante qui sera mergée sur staginginit/xxx: au tout début du projet, les fonctionnalitées de bases sont commit dans init et non pas dans feature