Étude de cas · Poseidon

Le permis bateau, autrement.

Observer une situation, agir, puis comprendre la règle. Avec Poseidon, j’explore une nouvelle approche pédagogique du permis bateau, portée par des apps natives sur iPhone, iPad, Apple TV et Apple Vision Pro. Environ 90 % de leur code est commun.

Alcyon · rendu du moteur Metal natif
Alcyon · rendu du moteur Metal natif
Client
Projet indépendant
Périmètre
Pédagogie interactive · Apps Apple natives · Architecture partagée
Clément
Clément SauvageProduct Engineer & Technical Lead
Rôle
Conception de l’expérience pédagogique, design produit et développement des apps natives multiplateformes.
Technologie
Swift · SwiftUI · Metal

Comprendre une situation avant de choisir une réponse.

Préparer le permis bateau demande de relier des règles à ce qui se passe sur l’eau. Un feu dépend de l’angle sous lequel on regarde le navire. Une marée change la profondeur disponible. Un mouillage oblige à tenir compte du fond et de la place autour du bateau.

Le pari de Poseidon est de faire de ces situations le point de départ de l’apprentissage. L’élève explore une scène, modifie un paramètre et observe ce qui change, puis retrouve l’explication et les questions associées. La 3D sert à rendre la règle observable et à donner du sens à la réponse.

La majorité du contenu de Poseidon se débloque via des achats intégrés à l’application.

Observer. Manipuler. Vérifier.

01

Observer les repères

Identifier les feux, les marques de jour, le balisage et la ligne d’eau. La scène donne des indices concrets auxquels rattacher la leçon.

02

Changer de point de vue

Tourner autour du navire, prendre du recul ou regarder sous la surface. Un autre angle révèle les relations que masque une image fixe.

03

Faire varier la situation

Déplacer l’heure de marée ou comparer le jour et la nuit. Observer ce qui change permet de distinguer les conditions de la règle elle-même.

04

Relier l’action à la règle

Manipuler la VHF ou examiner un mouillage, puis retrouver l’explication associée. Le geste et son effet donnent un contexte à la consigne.

05

Vérifier son raisonnement

Répondre aux questions et consulter leur correction. L’explication permet de comprendre le choix attendu et de repérer les indices qui ont été négligés.

06

S’entraîner à nouveau

Reprendre une notion dans les exercices et les examens blancs. L’objectif est de retrouver la règle dans une autre situation et de pouvoir expliquer son choix.

La 3D pour rendre visibles les relations.

Un schéma fixe choisit un point de vue à la place de l’élève. Une scène interactive lui permet de poser une question : que verrais-je de l’autre côté du bateau ? Que reste-t-il sous la coque quand l’eau descend ? Où se trouve le chenal par rapport à mon approche ? Le déplacement de la caméra devient un outil pour raisonner dans l’espace.

Je construis ces scènes autour de ce qui doit être compris. Les secteurs des feux, les marques de jour, les reliefs et la ligne d’eau servent de repères. La vue en coupe révèle le fond ; le passage du jour à la nuit change les indices disponibles. L’enjeu est de conserver une relation cohérente entre l’objet, l’environnement et la règle étudiée.

Le travail visuel porte aussi sur la lecture : silhouettes reconnaissables, contrastes, matière de l’eau et cadrages. Le réalisme soutient l’observation, avec des simplifications assumées pour isoler une notion. Ces scènes sont des supports d’apprentissage ; elles ne constituent pas un simulateur de navigation validé.

Du geste au pixel, avec Metal.

Metal est l’API graphique et de calcul d’Apple : elle permet à l’application de préparer directement le travail du processeur graphique, le GPU. Dans Poseidon, Swift gère l’état de l’exercice et les interactions ; Metal calcule les scènes à partir de cet état. Déplacer la caméra ou changer les conditions modifie les données envoyées au rendu, puis l’image suivante.

Les principales scènes maritimes utilisent un rendu procédural. Un triangle recouvre l’écran et son shader reconstruit la scène pour chaque fragment. Depuis la caméra, un rayon avance dans des formes décrites par des fonctions de distance jusqu’à rencontrer une surface : c’est le ray marching. Le moteur calcule ensuite la matière, l’éclairage, les reflets ou la réfraction de l’eau. Le relief, les navires et la mer peuvent ainsi répondre aux mêmes paramètres de scène.

L’intérêt de Metal est ce contrôle précis : choisir les calculs, les ressources et la résolution, tout en réutilisant les shaders sur les plateformes Apple. Ce choix implique aussi de construire et d’entretenir le moteur, de surveiller son coût et de l’adapter aux appareils. La fluidité dépend du travail effectué dans chaque image, pas du seul choix de l’API.

Les grands concepts, dans une image.

Pour comprendre le moteur, on peut suivre le trajet d’une action jusqu’à l’écran. Chaque notion a un rôle précis dans cette chaîne.

01

CPU & GPU · organiser et calculer

Le CPU (Central Processing Unit) est le processeur principal de l’appareil : il fait fonctionner l’application et réagit à vos actions. Le GPU (Graphics Processing Unit) est son processeur graphique : il effectue de nombreux calculs en même temps pour produire les images. Dans Poseidon, lorsque vous tournez autour d’un bateau, le CPU met à jour le point de vue ; le GPU recalcule le bateau, l’eau et les reflets pour afficher la nouvelle vue.

02

Buffers & textures · transporter les données

Un buffer est un espace de mémoire où l’application range les informations nécessaires au processeur graphique : position du bateau, point de vue ou éclairage. On peut le voir comme une fiche de données que le processeur consulte pour dessiner la scène. Une texture conserve des informations sous forme d’image. Dans Poseidon, elle peut notamment garder le résultat d’une première étape de dessin avant de composer l’image finale.

03

Shaders · donner forme à l’image

Un shader est un petit programme exécuté par le processeur graphique. Il lui indique comment calculer une partie de l’image : les formes, les couleurs, la lumière ou les reflets. Dans Poseidon, ces programmes calculent par exemple l’apparence de la coque et les reflets sur l’eau. Quand vous changez de point de vue, ils refont les calculs pour que la scène réagisse à votre mouvement.

04

Pipeline · préparer la recette

Un pipeline est un ensemble de programmes et de réglages préparés pour fabriquer une image. On peut le comparer à une recette : il précise quels shaders utiliser et comment combiner leur travail. Poseidon prépare plusieurs recettes, adaptées à la mer, à la météo ou à la sécurité, puis choisit celle de la scène. La même recette peut ainsi être réutilisée à chaque nouvelle image.

05

Commandes & passes · ordonner le travail

Un command buffer regroupe le travail envoyé au GPU. Un encodeur y inscrit les opérations d’une passe de rendu ; une file de commandes organise leur exécution. Certaines scènes passent par une texture intermédiaire avant de composer l’image finale.

06

Drawable · présenter l’image

Le drawable est la surface destinée à l’écran. MetalKit facilite sa gestion dans les vues classiques ; SwiftUI porte les panneaux et commandes autour de la scène. Sur Vision Pro, le rendu spatial utilise Compositor Services et adapte la projection à chaque œil.

La fluidité se mesure, image par image.

Un rendu calculé par pixel devient plus coûteux quand la résolution augmente. Le moteur mesure le temps réellement passé sur le GPU et le compare au budget de l’image. Si le calcul prend trop de temps, il réduit la résolution de la scène et peut abaisser la cadence visée. Quand une marge suffisante revient, la qualité peut remonter. Les textes et commandes restent portés par l’interface native.

Le moteur limite aussi les images en attente pour éviter d’accumuler du retard sur les gestes, et suspend la boucle de rendu lorsque la vue passe en arrière-plan. Ces arbitrages cherchent un équilibre entre lisibilité, réactivité et charge de calcul. Les cadences configurées sont des objectifs : elles ne remplacent pas des mesures sur chaque appareil.

Quatre plateformes. Environ 90 % de code commun.

Les versions iOS, iPadOS, tvOS et visionOS reposent sur une même base de code native. Les modèles de contenu, les règles et la logique des exercices sont partagés. SwiftUI porte les composants d’interface communs ; Metal est utilisé pour les scènes pédagogiques.

Cette architecture vise à faire évoluer la pédagogie au même endroit. Une règle corrigée ou une leçon enrichie profite au socle des quatre versions. Les adaptations spécifiques se concentrent sur la présentation, les commandes et l’intégration à chaque système. Le code partagé reste à vérifier dans le contexte de chaque appareil.

Un même apprentissage, des usages différents.

Partager le code laisse de la place aux particularités de chaque écran et de chaque mode d’interaction.

01

iPhone

Explorer au toucher et réviser dans un format compact. Un panneau dépliable relie la scène, les explications et les exercices.

02

iPad

Profiter du grand écran pour garder la scène et la leçon côte à côte, avec des commandes tactiles et une mise en page adaptée à l’orientation.

03

Apple TV

Observer sur grand écran et parcourir les exercices à la télécommande. La navigation par focus et la lisibilité à distance guident les adaptations.

04

Apple Vision Pro

Retrouver les contenus et les scènes dans visionOS, avec une présentation et des interactions adaptées à l’environnement spatial.

Une approche pédagogique à éprouver.

L’ambition est d’aider l’élève à expliquer son choix face à une situation, puis à retrouver la règle quand les conditions changent. Les leçons, l’exploration et les examens blancs sont les différentes étapes de cette démarche.

C’est une expérimentation de produit et de pédagogie. Une meilleure compréhension ou un meilleur taux de réussite restent à évaluer auprès des apprenants. Le code commun facilite les itérations sur cette expérience tout en conservant des usages propres à chaque plateforme.

Repères techniques dans la documentation Apple : Metal · Resource fundamentals · Setting up a command structure.

Un peu de fun

Les balises prennent vie, les crabes deviennent capitaines et les expressions marines se glissent dans les conversations. Voici une sélection des stickers de Poseidon, pour prolonger l’univers de l’app avec un peu d’humour.

Sticker Poseidon : « Garde le nord ! »
Sticker Poseidon : « Bien reçu ! »
Sticker Poseidon : « Cap sur le week-end ! »
Sticker Poseidon : « Salut, matelot ! »
Sticker Poseidon : « Je perds le nord »
Sticker Poseidon : « Je rame… »
Sticker Poseidon : « Ça tangue »
Sticker Poseidon : « Tu es mon phare »
Sticker Poseidon : « Permis en poche ! »
Sticker Poseidon : « Je fais le point. »
Sticker Poseidon : « Un compas dans l’œil. »
Sticker Poseidon : « Alfa, bravo… bravo ! »