PlayCanvas, la pépite cachée des éditeurs WebGL

De bons outils pour faire travailler ensemble les équipes graphiques et développement a toujours été important pour offrir une expérience numérique géniale ! À l’époque, Macromedia/Adobe Flash était un outil 2D qui réunissait artistes et développeurs, et c’est pour ça qu’il était si puissant et populaire. Plus tard, Unity et Unreal Engine ont fait de même pour la 3D. Mais ces géants sont trop lourds pour une expérience web optimisée et le workflow de build est long.

De l’autre côté, le web lui-même, avec des standards qui évoluent, est plus puissant que jamais : des animations SVG complexes ? Salut lottie. Le framework Electron, via Chromium, permet à des logiciels comme VS Code, Slack, etc. d’exister sur le web. Alors pourquoi ne pas avoir un éditeur puissant directement dans le navigateur et ciblant le web ? Voici PlayCanvas.

Pour commencer, jetons un œil à l’état de l’art des frameworks 3D :

Unity

Unity est l’un des outils les plus populaires pour les développeurs indépendants, du projet solo aux équipes AA. Sa grande force est évidemment son éditeur, qui offre aux artistes et aux développeurs un outil commun. Concernant le support WebGL, il est activé depuis un moment mais officiellement “les appareils mobiles ne sont pas supportés par Unity WebGL”. De plus, si vous avez beaucoup de code de développement spécifique au web à faire, comme vous connecter à un Learning Management System, ou simplement essayer différentes configurations pour voir comment évoluent les performances, le temps de build va vous déprimer.

Voici donc le projet Tiny ! Malheureusement, ce n’est pas une priorité pour Unity : plus de trois ans après son annonce, il est loin d’être stable. Unity réécrit son moteur, et Tiny utilise de nouveaux paradigmes comme DOTS, donc le chemin ne sera pas simple. Personnellement, je m’éloigne du hype Unity, en attendant que tout soit connecté et fonctionne correctement.

Three.js

Three.js est là depuis un moment maintenant et c’est un gros morceau :

Open source, porté par la communauté… génial !! Mais il manque un véritable éditeur, comme Unity. Il existe quelques outils : - comme son éditeur simple mais vous ne ferez pas un projet sérieux avec.

- AFrame, un framework pour écrire du contenu 3D en HTML pur, s’appuie sur Three.js. Il est sur la bonne voie, proposant même un éditeur mais trop limité.

- et enfin il existe des outils pour utiliser Unity comme level builder / éditeur et exporter les données vers three.js, par exemple UnityToThreeExporter.

Babylon.js

Babylon.js est un véritable concurrent de Three.js et est développé par Microsoft. Il va encore plus loin : c’est un framework de jeu intégrant un moteur physique, du pathfinding, etc. Et une documentation exceptionnelle !! Il existe plusieurs Éditeurs : GUI, node material, particules, sprite, texture, squelette… Malheureusement, ils ne sont pas réunis dans un seul éditeur.

Cependant, notez que la communauté est active avec deux projets : - un Éditeur réalisé avec Electron et utilisant les sous-éditeurs, bien plus avancé que celui de Three.js mais encore insuffisant pour un projet conséquent. - comme pour three.js, un exportateur Unity (officiel). - également vraiment intéressant à noter : Babylon Native.

PlayCanvas

PlayCanvas existe depuis un moment. Il a démarré en 2011 et le moteur est passé open source en 2014. La force de PlayCanvas, c’est son éditeur. Bien qu’il soit à code fermé, de nombreuses parties ont été rendues open source : bibliothèque de composants UI, bibliothèque de graphes basée sur des nœuds… Côté tarifs, c’est gratuit pour les projets publics et des abonnements sont proposés pour les projets privés.

N’est-ce pas magnifique ? Vous pouvez avoir des scènes 3D complexes et l’éditeur reste extrêmement réactif.

L’éditeur PlayCanvas est accessible depuis n’importe quel navigateur, et tout est sauvegardé dans le cloud. Ainsi, l’éditeur PlayCanvas offre un moyen génial de partager des exemples / démos ou de demander de l’aide sur un projet : voici un exemple simple. Vous pouvez facilement forker un projet ou copier/coller des assets et des entités !

Comment l’éditeur PlayCanvas se compare-t-il à l’éditeur Unity ?

Eh bien, la première chose à noter, c’est que PlayCanvas permet la mise à jour en direct de plusieurs personnes sur la même scène !! Comme c’est basé sur le web, la collaboration est intégrée nativement. Sur une même scène, plusieurs personnes peuvent travailler sur le level design en temps réel. Tout est synchronisé, et vous disposez d’un système de contrôle de version intégré pour créer des checkpoints.

Il y a ensuite la grande différence avec la conception d’Unity. Dans Unity, une fois que vous appuyez sur Play, vous pouvez ajuster des valeurs mais elles ne seront pas sauvegardées. Dans PlayCanvas, vous êtes toujours synchronisé avec les différentes instances, donc vous pouvez tester le script de votre character controller et voir le level design se construire en temps réel par d’autres personnes sur la même scène. Cette collaboration en temps réel peut devenir délicate si certains scripts plantent ou s’il y a beaucoup de tâches en cours. Heureusement, on peut créer des branches pour travailler dessus.

Mon retour d’expérience sur l’éditeur PlayCanvas :

• Il lui manque cruellement un outil de debug de hiérarchie en runtime. Pouvoir modifier des valeurs en direct, c’est vraiment sympa, mais comment connaître par exemple les valeurs actuelles d’un script ? Difficile à déboguer, et si vous générez tout de façon procédurale, c’est un cauchemar comparé au mode Play d’Unity. C’est quand même mieux que rien, il existe une extension Chrome, même si elle manque de véritable support. Notez que Babylon dispose d’un puissant inspecteur en direct intégré.
• Les shaders basés sur des nœuds arrivent bientôt.
• L’affichage de la hiérarchie des modèles est désormais supporté, c’était une fonctionnalité qui manquait cruellement !
• Le code et les démos écrits dans l’éditeur PlayCanvas utilisent du vieux code ES5. Vous pouvez utiliser une version ES plus récente, mais elle n’est pas transpilée. De nos jours, ça n’a plus vraiment de sens d’écrire du ES5… pouvoir écrire directement du TypeScript serait génial. PlayCanvas propose une solution de synchronisation en temps réel des fichiers entre PlayCanvas et votre machine locale qui permet l’utilisation de TypeScript. Pas encore testé.
• Le Template PlayCanvas = le prefab Unity.
• PlayCanvas utilise la compression de texture Basis, fini le PVRTC, le DXT… prends ça, Unity !
• Comme dans Unity, vous pouvez ajouter des propriétés publiques à vos scripts et les voir dans l’éditeur, mais il n’y a pas d’équivalent au ScriptableObject.
• Une API d’éditeur, pas encore testée.
• Avoir tout dans le navigateur fonctionne bien, mais vous ne pourrez pas travailler hors ligne. De plus, vous préférerez peut-être tout avoir sur votre ordinateur et gérer vous-même le contrôle de version ou exécuter un workflow git CI/CD. Peut-être un jour avec une application Electron ?

Après avoir utilisé PlayCanvas pendant plusieurs mois maintenant, j’ai beaucoup apprécié l’expérience. Le produit tout comme la communauté ! Bien que PlayCanvas soit une petite équipe, vous pouvez facilement leur faire part de vos retours et interagir avec eux. Concernant les bugs, ils sont très réactifs, et comme c’est basé sur le web, tout peut être corrigé rapidement et automatiquement, sans gros téléchargement requis ! La puissance du web :)