BabylonJS : de la vision à l'optimisation

16 février 2016   by Michel Rousseau
Back
Cet article a été rédigé par Michel Rousseau, artiste 3D au sein de l'équipe du moteur  Babylon.js (Microsoft France).


On ne le dira jamais assez, on peut vous mettre entre les mains la plus belle des technologies, le plus complet des outils, vous n’en tirerez pas la quintessence si vous ne vous reposez pas sur une vision particulière qui fera de votre livrable un petit exploit original, une gageure de performances, ou un succès multi-planétaire, pour les plus costauds (ou chanceux). C’est animé de cet esprit, que nous avons décidé, l’équipe de Babylonjs et votre serviteur, de faire parler de notre moteur Open-source BabylonJS au travers d’une démo technique un peu à part, un peu décalée… 'MANSION'.


Un évènement mystérieux…

Je m’en souviens encore de cette première évocation. David Catuhe m’appelle un soir pour me dire qu’il avait un projet : proposer une démo en 3D du moteur BabylonJS pour la keynote d’un mystérieux évènement aux US. Nous sommes à ce moment-là en octobre 2014, on sait qu’un show technique se prépare pour fin janvier, et que si on saute dans le bain, on s’engage à livrer pour fin novembre, plus un mois de stabilisation et de corrections, une démo stable, fonctionnelle et surtout qui mette en valeur BabylonJS dans le cadre de la refonte du navigateur internet de Microsoft… Programme alléchant, s’il en est. Tout de suite, la roadmap de notre moteur 3D converge avec celui de ce qui s’appelle encore Project Spartan : le son spatialisé et le support de Web Audio. Notre démo, même si elle doit arracher un œil, devra porter sur le son.

Alors, on commence à échafauder des hypothèses de travail : un démonstrateur de grand-huit ? Un parc animalier peuplé de dinosaures? Oui, ok, ce sont de bons sujets intrinsèquement. Mais est-ce original ? Après tout, ces sujets avaient déjà été traités au préalable par d’autres. Et puis nous n’avions qu’un mois. J’avais bien un budget pour financer la partie « assets & design » de la démo, mais trouver un partenaire en urgence sur un secteur comme la conception 3D, pour le faire travailler sur un projet ultrasecret, impliquant forcément de la discrétion sur les technologies du prochain navigateur Web de Windows, cela était un chalenge un peu trop compliqué. Nous devions trouver notre propre voie. La réflexion nous poussa donc vers un manoir hanté, avec une ambiance inquiétante et mystérieuse, comme l’évènement pour lequel cette démo était construite…


Un peu de DA

DA comme Direction Artistique, bien entendu. C’est là que tout se décide. C’est la pierre de Rosette qui permet d’unifier de décrypter tout le travail suivant. C’est un travail au long court, portant sur l’ensemble du projet, des premières réflexions aux arrangements et améliorations de fin de production. C’est le liant artistique de la démo. Une fois le sujet défini, je commence donc par un peu de DA : c’est quoi l’ambiance ? Jour maussade et chutes de pluie ou nuit noire et oppressante ? C’est quoi le lieu ? Château Ecossais perdu au fond d’un Loch, ou vieille bicoque à l’abandon ?
Ma méthode consiste dans pareille situation à… chercher sur Internet. Le but est de nourrir mon imagination. Je collecte donc de la documentation, je fouille, je change mes mots clefs, je rebondis sur un terme, je le cherche en allemand, etc. Assez vite, je me retrouve avec une bibliothèque d’une centaine d’images que je réduis à 10 en supprimant tout ce qui est hors contexte ou pas dans le ton original (maison hollandaise type Amityville, par exemple). Puis, je supprime tout ce qui n’est pas faisable dans le temps de production.





Une fois le référentiel d’inspiration solidifié, on peut commencer à créer un peu et je passe alors un certain temps à étayer certaines idées en les dessinant. C’est la phase de story-board. Cela permet de présenter les premiers concepts aux américains qui financent le projet, mais aussi de me faire une première idée de la volumétrie de la scène 3D à produire et de son coût en temps de réalisation. Je rappelle ici que pour tout ce qui touche à BabylonJS, l’équipe travaille sur son temps libre. Donc, avec la phase de sketchs, je me fais une idée du nombre de soirées que va me prendre ce projet…

J’ai des soucis avec ma lune…

Comme on peut le voir dans les images en insert, les esquisses portent assez vite sur la pertinence du son. Tel son près de l’étang, tel autre près des arbres. On saisit déjà bien que la 3D, donc le visuel, est le support d’un autre sens, l’ouïe. C’était aussi mon intention de départ que d’équilibrer les sources sonores, de telle manière qu’un aveugle pourrait avancer dans la scène et reconstruire la démo par les bruits et sensations sonores que l’on rencontre aux différents endroits de la scène. Donc, assez vite, j’ai contacté Cédric Pons Polo, un créateur de contenu sonore toulousain, afin qu’il puisse me créer ces assets particuliers, et notamment la musique d’ambiance.

Dans un autre registre, on notera également qu’initialement, la maquette 3D devait comporter un extérieur et un intérieur. Trop long, trop couteux en soirées, nous avons dû revoir un peu l’ambition de la production et nous réserver à l’extérieur-nuit de la visite virtuelle. 

Mes premiers essais ne furent pas vraiment fructueux. Pour tout dire, j’ai mal commencé. Et pour être tout à fait franc, j’avais une autre esquisse dans lequel le manoir était posé dans un jardin à la française. Tout ceci, en plus d’être compliqué à produire (long, beaucoup de détails, beaucoup de sons à produire pour rendre la scène intéressante), était aussi un peu ennuyeux : jardin plat, peu de lignes de vision, pas mal de répétitions d’objets et de textures. Bref, ça ne me convenait pas. Pas plus que l’orientation artistique. La nuit, par exemple, devait-elle être noire d’encre, au risque d’être très sombre, ou plutôt de type « Nuit américaine », plutôt claire, au risque de ne pas être très réaliste ? Toutes ces hésitations se sont cristallisées le soir où je me suis focalisé sur la Lune. Il me fallait une source forte d’éclairage pour mon manoir, mais comment rendre cette lumière ? Une grosse lune verte et malsaine comme dans la série de jeu Batman du studio Rock Steady? Ou petite et isolée dans un ciel de cauchemar ? Au final, c’est la solution intermédiaire qui s’est imposée : une grosse lune pâle, qui allait de surcroit nous servir à illustrer plus tard un effet particulier.




La production

Un artiste 3D subit aussi l’angoisse de la page blanche. Mais dans ce cas, sauter dans l’eau fut assez facile. J’ai commencé par les murs de mon manoir, en partant d’un plan simple tracé au sol, puis je suis monté jusqu’au toit, en ajoutant progressivement du détail, comme les créneaux, les briques manquantes, …. Le fait d’avoir un solide dossier d’images de référence et quelques ébauches dessinées aide bien lors de cette phase. Toutefois, le sujet était copieux et très vite, certaines limitations du modèle de développement (Javascript monothreadé) m’ont obligé à optimiser. Ainsi, tous les murs contenant des briques ne sont qu’un seul et même objet. Pareil en ce qui concerne les fenêtres. Après quelques soirées, le manoir était modélisé et commençait donc à se parer de nobles matériaux (pierres, briques, ardoises,…)

Mais le véritable défi ne se trouvait pas dans le manoir en lui-même : le danger de cette démo se cachait dans le règne végétal et dans notre ambition. Car nous voulions une scène aux standards actuels, nonobstant la technologie d’affichage. Donc, il nous fallait des arbres, de l’herbe, des ajoncs, des buissons, etc… Et pour continuer dans la franchise, notre volonté initiale était de faire des arbres perpétuellement tordus et déformés par le vent. Tout ceci coute déjà assez cher, juste à afficher, en terme de performances. Alors si en plus, il faut l’animer… J’ai bien fait quelques tests, mais la dépense d’images par seconde était telle avec nos méthodes (essentiellement du vertex blending) que nous avons bien vite reculé. Nous aurions pu toutefois contourner l’obstacle (animation par des shaders, par exemple), mais le facteur temps commençait à nous poser des questions d’organisation.

Pas d’astuce particulière en terme de production, si ce n’est de s’en tenir à la Direction Artistique choisie et tester fréquemment afin de conserver un ratio visuel/performance cohérent. Par exemple, il fallait éviter d’avoir des bordures nettes entre l’allée en gravier et les gazons à l’abandon. Pour cela, on aurait pu passer par du blending de textures (on mélange deux textures via une troisième en niveau de gris), mais cela se révélait un peu gourmand. J’ai opté pour une couture en géométries entre l’herbe et le gravier disposant de sa propre texture allant de l’herbe au gravier. Il a fallu également jouer beaucoup avec les opacités pour obtenir un ciel nuageux, sombre et tourmenté.



Comme la ressource est en ligne, il faut aussi s’assurer de la compacité des assets graphiques, bien que dans le cadre d’une démo évènementielle, nous étions moins regardant sur cette notion spécifique. Ceci dit, nous en avons profité avec David Rousset pour incorporer dans le plugin BabylonJS pour 3d Studio Max d’Autodesk toutes les entrées nécessaires pour câbler les fichiers sons avec les objets qui les déclenchent. C’est aussi une partie du travail que de tester en production les solutions techniques encore en devenir. Et tant que nous y étions, nous avons également commencé à intégrer notre futur moteur nodal d’interactions, afin que je puisse, sans aucune ligne de code, ajouter des comportements à mes objets (comme de lancer des sons sur un clic, par exemple).


Le son, c’est bon

C’est dans cette phase, donc après la modélisation (créer les objets), la texturation (habiller les objets) et les animations, que j’ai ajouté les fichiers sons de Cédric. Des orages lointains, des bruits d’insectes, du vent dans les branches, des cris d’épouvantes, des chaines rouillées qui s’entrechoquent….Tout ceci participe à l’ambiance particulière de cette maquette 3D. Jusqu’au glas sinistre qui accompagne avec humour une action particulière de l’utilisateur. Avec encore une fois cette volonté délibérée de proposer une visite équilibrée en répartissant judicieusement les sources sonores.


Retour à la DA

Oui, parce que nous avions tout de même poussé le bouchon parfois un peu loin : nous avions par exemple disposé un cimetière dans la scène (en suivant la DA d’origine) mais nous voulions aussi un peu d’humour. Pour cela, j’avais positionné les tombes du Professeur Xavier, de Batman, et de Mini-Me en attendant mieux. Mais dans une démo Microsoft, on ne peut assurément pas faire mourir de tels personnages. C’est ainsi qu’au final, seul Clippy (notre pittoresque assistant-trombone), le chat de Schrödinger et Hamlett se sont retrouvés six pieds sous le sol virtuel. Et IE6, aussi. Oui, on pratique aussi à l’envie l’ironie et l’auto-flagellation, dans l’équipe.

Sur une idée de Pierre Lagarde, j’ai également ajouté en dernière minute une pièce intérieure, accessible par une fenêtre, où l’on peut apercevoir Patrick, notre squelette-zombie, jouer du piano sur une partition toute personnelle. Une sorte de retour à la DA d’origine, si l’on veut.



Le 21 janvier et les quelques jours précédant…

Finalement, nous avons appris fin décembre que nous postulions pour la keynote d’un évènement considérable : il ne s’agissait de rien de moins que du reveal international de Windows 10 ainsi que de celui de HoloLens. Nous entrâmes alors dans la phase de stabilisation de la maquette et de la poursuite des dernières images par seconde nécessaires quand le comité éditorial de Microsoft nous a annoncé la nouvelle : notre démo n’aurait pas les honneurs de la Keynote. Pour diverses raisons : un programme trop chargé, beaucoup de contenus 3D premium (avec HoloLens) et un sujet un peu sombre pour ce type d’évènement.



Passé la déception évidente, nous avons alors transformé notre infortune en succès, en faisant de cette maquette virtuelle le plat de résistance de la keynote du premier jour des Techdays français, avec à la clef, la présence de David Catuhe sur la scène avec nous. D’une pierre deux coups, puisque nous en profitâmes pour montrer en exclusivité mondiale Project Spartan, la version béta de Microsoft Edge, successeur d’Internet Explorer. Nous n’avons pas perdu au change. De plus, cette scène s’est faite remarquer de nombreuses fois et nous a permis de témoigner, lors de nombreux events et rendez-vous techniques de la qualité de Microsoft Edge et des initiatives Open Sources de Microsoft.
Quand on vous donne de bons outils, de bonnes surprises ne sont pas à écarter…


Plus sur BabylonJS : www.babylonjs.com

- Michel Rousseau
Artiste 3D de BabylonJS

logo ultranoir
logo ultranoir