Catégories
Unity

Application WebGL avec Unity

logo WebGL
WebGL avec Unity

Construire une application WebGL avec Unity permet de la publier sur le web. Elle est donc facilement exécutable par quiconque possède un navigateur récent.

Ajouter le module WebGL depuis Unity Hub

Avant de pouvoir construire une application WebGL avec Unity, il faut installer le module correspondant avec Unity Hub.

Sélectionner la plateforme de publication dans Unity et faire le premier build

  • Menu File -> Build Settings
  • Sélectionner WebGL et cliquer Switch Platform.
  • Cliquer Build and Run
  • Créer un dossier « Build » dans le dossier du projet (à coté du dossier Assets)
  • Donner un nom à l’application

Résultat obtenu

Unity crée un dossier avec un fichier .html et des sous-dossiers.

Le dossier qui est dans le dossier « Build » contient l’application WebGL.

Unity démarre un serveur local et ouvre le fichier dans le navigateur. Il faut profiter de bien tester l’application à ce moment-là, car ensuite il sera plus difficile de le faire, voir plus bas. Il est toujours possible de refaire un « Build and Run » pour tester à nouveau, mais le build est long.

Que faire avec ?

Exécution locale

Normalement ouvrir un fichier .html en local en double cliquant dessus ouvre le fichier avec une adresse file://… et le fichier s’affiche. Avec les versions récentes des navigateurs, les paramètres de sécurité empêchent désormais l’application WebGL de charger les fichiers nécessaires.

Pour contourner cette limitation avec Firefox:

  • tapez about:config dans la barre d’adresse d’un nouvel onglet
  • cherchez: file_unique_origin
  • double clic sur la ligne pour changer la valeur à: false
  • laissez l’onglet ouvert pour la dernière étape
  • maintenant l’application WebGL doit fonctionner dans Firefox
  • remettez la valeur à: true une fois que vous avez fini, par sécurité.

Serveur local

Il y a plusieurs solutions qui permettent d’avoir un serveur local. Exemples: MAMP, WAMP, node.js, etc.. Les développeurs web utilisent généralement l’un ou l’autre de ces outils, mais l’installation et l’utilisation est inutilement compliquée pour un simple test.

Brackets

Astuce avec l’éditeur de texte Brackets qui possède un serveur local intégré.

  • Installer Brackets si nécessaire, puis le démarrer
  • Menu Fichier > Ouvrir un dossier
  • Sélectionner le dossier du build WebGL
  • Menu Fichier > Aperçu en direct
  • Si ça ne fonctionne pas, essayer d’activer l’option Fichier > Activer la version expérimentale d’aperçu en direct et relancer l’aperçu.
  • Brackets démarre un serveur local dans le dossier et l’application WebGL s’ouvre dans Chrome ou le navigateur par défaut selon l’option expérimentale choisie.

En ligne

Mettez le dossier quelque part en ligne et publier l’adresse pour que l’application soit visible par quiconque.

Compresser le dossier

Compressez le dossier pour le transmettre par un autre moyen. Une fois décompressé, le fichier .html peut être ouvert dans un navigateur pour voir l’application. Avec les limitations décrite ci-dessus pour l’exécution locale.

Intégration

Le fichier .html contient du code HTML, CSS et JavaScript pour charger l’application. Vous pouvez récupérer ces éléments pour les intégrer dans une autre page. Les détails ne sont pas expliqués ici.