Transformer le moteur Godot en un Powerpoint en 3D

Publié le 2025-08-28

Bonjour, bonjour. Aujourd’hui, je vais vous présenter un projet qui a consisté à ajouter les fonctionnalités de PowerPoint dans le moteur de jeu Godot. Transformant ainsi ce moteur de jeu en un outil de création de présentations 3D interactif.

Exemple de diapositive comportant des éléments 2D (à gauche) et 3D (à droite)

Mais pourquoi faire une chose pareille ?

Ce projet est fondamentalement relié à mon projet de fin d’année de deuxième année d’école d’ingénieur au Cnam. J’ai réalisé un état de l’art sur un sujet que j’avais choisi : Les techniques de rendu des aspects de la lumière dans le jeu vidéo 3D et leurs évolutions jusqu’à nos jours. Le sujet est très vaste, très technique. Je me suis concentré sur 3 aspects majeurs du sujet pour mes recherches :

La surface des objets et les matériaux
Les ombres portées
La lumière environnementale (illumination globale/ occlusion ambiante)

Le document que j’ai réalisé faisait une longueur de 177 pages (annexe comprise).

J’avais également pour objectif de présenter mes recherches à la fin de l’année durant une présentation qui allait durer une vingtaine de minutes. Il fallait donc qu’elle soit la plus imagée possible pour permettre au public présent de comprendre intuitivement les concepts présentés. La manière la plus efficace de vulgariser la simulation de lumière était donc d’effectuer beaucoup de visualisations.

Exemple de diapositive de visualisation d'algorithmes en 3D

Le problème de PowerPoint

PowerPoint est un logiciel de présentation très complet. Il permet de créer des diapositives aisément. Il a beaucoup de fonctionnalités d’animation et de transitions. Il contient un mode présentateur qui permet de voir ses notes de chaque diapositive durrant les présentations. Et, techniquement, PowerPoint peut importer des modèles 3D et les animer de manière rudimentaire.

Mais, le logiciel devient complexe à utiliser quand le contenu principal est composé d’images et de vidéos. Il demande beaucoup de travail manuel pour placer correctement les images, les objets finissent par être sélectionnés par accident et les transitions entre slides qui comportent des vidéos sont souvent abruptes. De plus, il est quasiment impossible de synchroniser deux vidéos sur deux slides différentes.

Étant donné la quantité de visualisations que j’allais devoir intégrer dans ma présentation, l’option d’utiliser un logiciel de présentation classique est vite devenue impensable.

Les approches alternatives

Il existe des options alternatives de création de présentation qui fonctionnent très bien pour la visualisation. Certains logiciels permettent de créer des présentations / animations en utilisant du code, par exemple :

Librairies Manim, React Flow et MotionCanvas

Ces deux librairies permettent d’effectuer des visualisations avancées avec un grand contrôle. Manim a par exemple des fonctionnalités de rendu 3D de base. Mais, aucune de ces librairies ne contient un moteur de rendu 3D réaliste avec des ombres portées, des matériaux PBR ou de l’illumination globale. J’aurais donc dû développer un système de rendu avancé en utilisant WebGL ou ThreeJS ce qui aurait demandé plus de travail que je ne pouvais fournir dans la durée avant la présentation.

Je me suis donc tourné vers des moteurs de jeux plus classiques qui me donnaient accès à leurs renderer, à l’édition de scènes 3D, à l’édition de scènes 2D et à la création d’interface utilisateur :

Unreal Engine
Unity Engine
Godot Engine

J’avais de l’expérience sur ces trois moteurs et après quelques tests, je me suis tourné vers Godot. Le moteur comportait toutes les combinaisons de fonctionnalités dont j’avais besoin pour faire un moteur de présentations :

Moteur de rendu assez avancé et dynamiquement modifiable - Possibilité de changer les paramètres de rendu très facilement
Système de réflexion - Le moteur permet d’accéder à chaque propriété de chaque node sans besoin de créer des interfaces spécifiques
Système de tweening flexible - Possibilité d’animer presque toutes les propriétés des nodes des scènes grâce au système de réflexion
Système de création d’interface drag and drop pour la gestion du texte - Très pratique pour remplacer le workflow des logiciels classiques

Éditeur de Godot dans une scène utilisant le sytème de slides

Développement du projet

J’ai commencé la création de la librairie le 5 février 2024 pour une présentation prévue le 25 avril 2024. J’ai développé le projet entièrement sur mon temps libre durant ces deux mois. Pour tester le fonctionnement de ma librairie, j’avais également prévu de l’utiliser pour une petite présentation sur mon parcours à l’IUT du Puy-en-Velay le 22 février 2024.

Pour la présentation de février, la librairie était assez rudimentaire. Elle comprenait les bases importantes pour un logiciel de présentation : système de keyframes, de transitions et des interfaces de slides et de contrôle de la présentation.

J’ai incorporé des éléments 2D et 3D pour tester le fonctionnement du moteur et les résultats étaient très prometteurs.

Slide utilisant la version MVP de la librairie

J’ai ensuite continué le développement de la librairie pour ajouter les fonctionnalités manquantes pour la présentation d’avril et faire un gros travail de refactor des fonctionnalités existantes.

Fonctionnalités de la librairie

Le système de slides reprend beaucoup de fonctionnalités de logiciels de présentations tout en étant fait pour garder la plus grande flexibilité dans le moteur :

Système de keyframes qui peut animer les propriétés présentes dans le moteur - Tweening des propriétés des objets de la scène - Position, rotation, échelle, couleur, luminosité, matériaux, post-processing - Contrôle des timelines des AnimationPlayers
Scène templates de texte de diapositives avec des automatisations - Introduction, bullet points, texte, etc.
Contrôle des slides via le clavier ou la souris - Interface spécifique
Mode présentateur avec une seconde fenêtre contenant des notes et une preview - Possibilité de l’afficher sur un second écran
Système d’affichages de formes 2D dans l’espace 3D - Flèches, lignes, polygones, wireframes, etc.

Système d’animation en keyframes

Le système d’animation est basé sur une hiérarchie de nodes placés dans la scène. La plus importante est la node Timeline qui contrôle le système d’animation. Elle contient des nodes Keyframe. Pour pouvoir animer plusieurs propriétés simultanément, les nodes Keyframe peuvent contenir elles-mêmes d’autres nodes Keyframes qui sont jouées simultanément que leures parent.

Hiérarchie d’une timeline dans une scène :

 ○ Root
 └── ○ Timeline
     ├── ○ Keyframe 1
     │   ├── ○ SubKeyframe 1.1
     │   ├── ○ SubKeyframe 1.2
     │   ├── ○ SubKeyframe 1.3
     │   └── ○ SubKeyframe 1.4
     ├── ○ Keyframe 2
     │   ├── ○ SubKeyframe 2.1
     │   ├── ○ SubKeyframe 2.2
     │   └── ○ SubKeyframe 2.3
     ├── ○ Keyframe 3
     │   └── ○ SubKeyframe 3.1
     └── ○ Keyframe 4

txt

Cette hiérarchie correspond à une présentation avec 4 slides avec des transitions plus ou moins complexes.

Exemple de hiérarchie de Keyframes pour une présentation plus longue dans l'éditeur Godot

Les keyframes sont des nodes qui ont un script attaché qui hérite de la classe PropertyKeyframe. Cette classe contient les données de base pour effectuer une transition :

Référence à la node et à la propriété à modifier
Hérite d’une classe de gestion de tweening
Référence à l’ancienne et la prochaine Keyframe si elles existent

class_name PropertyKeyframe
extends Keyframe

@export_category("Reference")
@export var node : Node
@export var property : String

@export_category("Tweening")
@export var duration: float = .5
@export var delay: float = 0
@export var transition = Tween.TRANS_SINE
@export var ease = Tween.EASE_IN_OUT

@export_category("Misc")
@export var make_visible_at_launch: bool = true

@onready var _default_value
@onready var _end_value

var _is_valid = true
var _is_previous_enabled = true

var _previous_keyframe: PropertyKeyframe
var _next_keyframe: PropertyKeyframe

# Region functions
...

Pour animer des propriétés spécifiques, j’ai mis en place des classes spécialisées qui ont des paramètres spécifiques : ColorPropertyKeyframe, Vector3PropertyKeyframe, Vector2PropertyKeyframe, BoolPropertyKeyframe

Exemple de ColorPropertyKeyframe :

extends PropertyKeyframe

@export var end_value : Color = Color.WHITE

func _ready() -> void:
_end_value = end_value
super()

Keyframe de vector 3 dans l'inspecteur de Godot

Les Keyframes sont contrôlées par le script Timeline. Ce script contrôle l’exécution des animations et la gestion des keyframes :

extends Node

signal frame_changed(new_frame: int, frame_count: int)

var _frames: Array[KeyframeCollection]
var _current_frame: int = 0

# Setup
func _ready() -> void:
  _frames = get_all_keyframes(self)
  setup_property_keyframes(_frames)
  ...

func _process(_delta: float) -> void:
  handle_input()
  ...

# Get all main keyframes in hierachy
func get_all_keyframes(node) -> Array[KeyframeCollection]:
  ...

# Get all sub frames for a given keyframe
func get_all_subkeyframes(node) -> Array[Keyframe]:
  ...

# Setup each keyframe behaviors and link them to their previous and next keyframes
func setup_property_keyframes() -> void:
  ...

func handle_input() -> void:
  ...

func go_to_next_frame() -> void:
  ...

func go_to_previous_frame() -> void:
  ...

# Go to a specified frame by going previous/next iteratively
func go_to_frame(new_frame: int) -> void:
  ...

Templates de diapositives

Pour faciliter l’utilisation de la librairie, j’ai créé quelques scènes d’UI qui me servent de templates de diapositives. Ces templates me servent de base pour les diapositives classiques : introduction, résumé, bullet points, etc. Ces scènes ont leurs propriétés modifiables depuis le details panel de Godot.

J’ai ajouté des scripts @toolqui me permettent de mettre à jour ces templates quand on change leurs propriétés. Par exemple, modifier le titre, le nombre de bullet points ou le numéro de section actualise la scène dans l’éditeur.

Schéma de la connexion effectuée par les scripts pour les templates de slides

Navigation

La navigation se fait au clavier et à la souris. La librairie comporte un widget de contrôle qui contient un bouton retour, une sélection de slide et un bouton avancer. La navigation au clavier se fait avec les touches classiques.

Le widget de navigation communique au reste du système via le système de signaux de Godot.

Mode présentateur

J’ai ajouté un mode présentateur à la librairie. Celui-ci permet d’avoir une seconde fenêtre qui peut être placée sur un second écran si besoin. Il permet d’afficher les notes de la slide actuelle ainsi qu’une preview du rendu de la présentation. Pour aider à la gestion du temps, la fenêtre affiche également la durée actuelle de la présentation et le numéro de la slide actuelle.

Présentation à gauche et fenêtre de notes à droite

Voici une démo du mode présentateur :

Overlay de formes en 2D

Pour aider à la visualisation, j’ai développé un système me permettant d’afficher des formes 2D dans l’espace 3D. Ce système permet d’afficher des lignes ayant une épaisseur constante où qu’elles soient dans l’environnement. En utilisant plusieurs ligne il est possible d’afficher des formes plus complexes comme des flèches, des outlines ou des wireframes.

Outline le la zone ombragée d'une sphère

Pour cela, le système utilise une node2D et utilise les fonctions draw_line() . Il référence des points dans l’espace 3D et les projette dans l’espace de la caméra.

Scène de test du système d’affichage :

Comme le système fonctionne sur un modèle hybride, il permet d’effectuer la transition entre un contexte 3D et un contexte 2D isométrique. Par exemple, dans cet extrait, on passe d’une vue à l’intérieur d’une pièce 3D classique à une vue _2D schématique. La scène reste en 2D, mais le système anime le FOV de la caméra et le post-processing de la scène pour donner une apparence 2D.

Transition d’un environement 3D à une vue 2D qui utilise le système d’affichage de lignes:

Démos

Voici à quoi ressemble le système pour une présentation complexe :

Slide d’introduction sur la lumière dans le jeu vidéo :

Slide d'introduction sur les méthodes de rendu 3D

Slide d’introduction de l’illumination globale avec activation dans le moteur :

Après avoir effectué quelques petites modifications, j’ai pu ajouter l’export web des présentations. En voilà une faite spécifiquement pour cet article.

La librairie a été conçue pour être utilisée dans un contexte d’application native sur desktop. Il est donc possible que la démo ait des problèmes de fonctionnement qui sont absents sur la version complète. J’ai pu constater que le chargement des Shaders fasse des petits freezes à l’affichage des nouveaux modèles. Cela vient du fait que l’export web de Godot 4.3 soit mono-thread par défaut pour des questions de compatibilité.

Appuyez sur le bouton pour lancer la présentation :

Conclusion

Ce projet a été très intense et très intéressant. J’ai beaucoup appris sur les spécificités internes de Godot et sur les problématiques des systèmes d’animations. J’ai pu faire ma présentation pour mon état de l’art en temps et en heure. Je l’ai également présentée au bureau et ai eu des retours très positifs.

La librairie n’est pas finale, elle contient quelques bugs et elle mériterait d’avoir une nouvelle passe pour son ergonomie et sa stabilité. J’aimerais beaucoup revenir sur ce projet et régler ces derniers bugs et problèmes pour pouvoir en faire une vraie librairie utile pour d’autres personnes. Si la librairie intéresse quelqu’un dans son état actuel, il est possible que je la rende disponible.