Vidéo Autodesk® Platform Services (APS) présentée par Kean Walmsley, axée sur l’amélioration des applications APS basées sur un navigateur en utilisant WebAssembly (WASM). La présentation explique comment compiler du code C++ provenant de bibliothèques comme VASA et Sidevs en packages WASM via l’outil Emscripten pour les charger comme extensions dans Autodesk® Forma. L’auteur détaille les aspects techniques de la compilation, y compris les options d’Emscripten et la création de liaisons (bindings) pour exposer les fonctionnalités C++ à JavaScript. Enfin, l’exposé illustre trois scénarios d’intégration spécifiques dans Forma : l’analyse spatiale en temps réel, le calcul de métriques hors ligne, et la simulation multi-agents, soulignant l’efficacité de l’utilisation de WASM pour les tâches gourmandes en performance au sein des applications de navigateur.
WebAssembly et C++ : La Puissance du Code Natif dans votre Navigateur
Introduction : Le Défi de la Performance sur le Web
JavaScript est le langage qui a construit le web interactif que nous connaissons aujourd’hui. Il est flexible, dynamique et omniprésent. Cependant, certaines applications extrêmement performantes, comme les logiciels de CAO (par exemple, AutoCAD®), les moteurs de jeu complexes (Unreal Engine) ou les outils d’analyse scientifique, sont historiquement écrites dans des langages comme le C++. Ces langages offrent un contrôle fin de la mémoire et des performances proches du matériel, indispensables pour des calculs intensifs.
Cela pose une question fondamentale : comment pouvons-nous faire fonctionner ce code C++ puissant et existant, représentant des décennies de développement, directement dans un navigateur web sans tout réécrire ? C’est précisément le défi que WebAssembly vient résoudre.
1. Qu’est-ce que WebAssembly (Wasm) ? Une Définition Simple
Pour démystifier WebAssembly, il est utile de commencer par une analogie simple et directe.
…a web assembly package is like a DLL that you can use inside a browser based application.
En termes plus techniques, WebAssembly (souvent abrégé en Wasm) est un format d’instruction binaire conçu pour être une cible de compilation portable. Des langages comme le C++, le C ou le Rust, qui gèrent manuellement la mémoire, peuvent être compilés en Wasm pour être exécutés sur le web.
Ses avantages clés peuvent être résumés ainsi :
- Performance : Wasm est conçu pour une exécution à une vitesse quasi-native. Il permet à des calculs complexes comme la recherche de chemin en temps réel, l’analyse de visibilité, et même des simulations multi-agents de s’exécuter de manière fluide, des tâches auparavant impossibles à réaliser avec ce niveau de réactivité dans le navigateur.
- Portabilité : Un module Wasm fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), offrant un support exceptionnellement large sans nécessiter de code spécifique à chaque plateforme.
- Écosystème : Il permet aux développeurs web de réutiliser des bibliothèques C/C++ existantes, éprouvées et hautement optimisées, directement dans leurs projets, qu’il s’agisse de moteurs de simulation physique, de bibliothèques d’analyse géométrique ou d’autres systèmes complexes.
2. Emscripten : Le Pont entre le C++ et le Navigateur
Si WebAssembly est la destination, Emscripten est le véhicule qui nous y amène. C’est l’outil clé qui rend cette transformation possible.
Emscripten est un compilateur basé sur la chaîne d’outils LLVM. Son rôle est de prendre du code source C ou C++ et de le transformer en un paquet WebAssembly exécutable dans un environnement web.
Historiquement, avant l’avènement de WebAssembly, Emscripten ciblait ASM.js, un sous-ensemble de JavaScript hautement optimisable. Cependant, depuis 2017, WebAssembly est devenu sa cible principale et privilégiée, bien qu’ASM.js soit parfois encore utilisé comme solution de repli (fallback) par certaines applications.
Le parcours d’Autodesk® illustre parfaitement cette évolution technologique. L’entreprise a commencé à utiliser Emscripten vers 2015-2016 en ciblant ASM.js pour créer une visionneuse DWG™. En 2017, ils sont passés à l’utilisation du code de Real DWG™, toujours avec ASM.js. Le véritable tournant a eu lieu en 2018, avec la sortie de la première version d’AutoCAD® pour le web, cette fois basée sur WebAssembly, démontrant la maturité et la puissance de cette nouvelle technologie pour des applications de calibre industriel.
3. Le Processus de Compilation : De C++ à Wasm
Transformer du code C++ en un module WebAssembly fonctionnel implique plusieurs étapes coordonnées par Emscripten. Voici une vue d’ensemble conceptuelle du processus.
3.1. Les Ingrédients Clés
Pour compiler notre projet, nous avons besoin de trois éléments essentiels :
- Le code source C++ : C’est la logique applicative que l’on souhaite porter sur le web. Il peut s’agir d’une bibliothèque d’analyse, d’un moteur de calcul, etc.
- Le compilateur Emscripten (
EMCC) : C’est l’exécutable en ligne de commande qui orchestre toute la compilation. Il prend le code C++ en entrée et génère les fichiers Wasm et JavaScript. - Le fichier de « Bindings » (liaisons) : Il s’agit d’un fichier source crucial qui agit comme un contrat d’interface. Il indique explicitement à Emscripten quelles parties du code C++ doivent être rendues accessibles depuis JavaScript.
3.2. La Magie des « Bindings » : L’API de votre Code C++
C’est dans le fichier de bindings que « la magie opère ». Il ne suffit pas de compiler le code C++ ; il faut aussi déclarer une « interface publique » pour que le monde JavaScript puisse l’utiliser. Ce fichier permet d’exposer sélectivement :
- Des fonctions spécifiques (par exemple,
calculatePath()) - Des classes entières avec leurs constructeurs et méthodes
- Des types de données personnalisés pour qu’ils puissent être échangés entre JavaScript et C++
Une nuance technique importante illustre bien cette interaction : si une classe C++ possède plusieurs constructeurs (des méthodes pour créer un objet), ils doivent avoir un nombre d’arguments différent pour être exposés. C’est une contrainte liée au fait qu’en JavaScript, les fonctions sont différenciées par leur nom et le nombre d’arguments, et non par le type de ces derniers.
3.2.1 Gérer les Spécificités du C++
Le travail de liaison expose certaines différences fondamentales entre C++ et JavaScript. Voici deux défis courants et leurs solutions avec Emscripten :
- Gérer la surcharge de fonctions : En C++, vous pouvez avoir plusieurs fonctions avec le même nom mais des types de paramètres différents (ex:
maFonction(int)etmaFonction(string)). JavaScript ne peut pas faire cette distinction. La solution est d’utiliserselect_overloaddans les bindings pour « épingler » explicitement la version de la fonction que vous souhaitez exposer. - Exposer des templates de classes : Emscripten ne peut pas exposer un template générique comme
MaClasse<T>. Vous devez exposer une implémentation spécifique en « épinglant le template » à un type concret, par exempleMaClasse<bool>. C’est un excellent exemple de la manière dont les bindings servent de pont entre le typage statique du C++ et le typage dynamique de JavaScript.
3.3. Les Fichiers de Sortie : Votre Paquet Prêt à l’Emploi
Une fois la compilation avec EMCC terminée, Emscripten génère généralement un ensemble de fichiers prêts à être intégrés dans une application web.
| Fichier généré | Rôle principal |
|---|---|
mon_projet.wasm |
Le module binaire. C’est le code C++ compilé, une représentation compacte et optimisée pour une exécution quasi-native par la machine virtuelle du navigateur. |
mon_projet.js |
Le « chargeur » JavaScript. Ce fichier contient tout le code « colle » (glue code) nécessaire pour charger, initialiser et interagir avec le module .wasm. |
mon_projet.html |
Un fichier de test optionnel. Il fournit un environnement simple pour vérifier que le module se charge et fonctionne correctement, avant de l’intégrer dans une application plus complexe. |
4. Intégration : Charger et Utiliser le Module Wasm
Une fois le paquet (.wasm + .js) généré, son utilisation dans une page web est remarquablement simple.
- Chargement du module : Le développeur inclut le fichier JavaScript « chargeur » (par exemple,
mon_projet.js) dans sa page HTML via une balise<script>. - Initialisation : Le chargeur JavaScript expose une méthode de rappel (un callback), comme
onRuntimeInitialized. Cette fonction est automatiquement appelée lorsque le module.wasma fini de se charger en mémoire et est prêt à être utilisé. C’est le signal que l’on peut commencer à interagir avec le code C++. - Appel depuis JavaScript : Une fois le module initialisé, on peut stocker une référence à celui-ci (par exemple, dans l’objet global
window) et commencer à l’utiliser. On peut alors appeler les fonctions C++ exposées ou créer des instances de classes C++ directement depuis le code JavaScript, presque comme s’il s’agissait d’objets JavaScript natifs.
5. Conclusion : Une Nouvelle Ère pour les Applications Web
WebAssembly ne se contente pas d’ajouter une nouvelle fonctionnalité au web ; il représente un changement de paradigme. Il transforme le navigateur en une véritable plateforme de calcul haute performance, capable d’exécuter des applications de classe « bureau » qui étaient auparavant inimaginables sur le web.
- Réutilisation du Patrimoine Logiciel : Des décennies de code C++ performant, testé et éprouvé, comme celui d’AutoCAD®, peuvent être portées sur le web. Cela évite de devoir réécrire des algorithmes complexes et permet aux entreprises de capitaliser sur leurs investissements logiciels existants.
- Performance Inégalée dans le Navigateur : WebAssembly ouvre la porte à une nouvelle génération d’applications web complexes et réactives qui étaient auparavant réservées aux logiciels de bureau : calculs analytiques, simulations physiques, rendu 3D en temps réel, et bien plus encore.
- Au-delà du C++ : Bien que cet exemple se concentre sur le C++, l’écosystème WebAssembly est en pleine expansion. Des outils similaires existent pour d’autres langages performants comme Rust et des projets émergent même pour des langages comme Python. Cela montre que Wasm n’est pas une simple technologie de niche, mais une tendance de fond pour l’avenir des plateformes web.