Créer des applications 3D avec Flutter : Premier pas avec flutter_scene et Flame 3D

Jusqu’ici, lorsque l’on souhaitait ajouter un rendu 3D dans une application Flutter, il fallait utiliser une librairie tierce qui, le plus souvent, embarquait une webview dédiée à l’affichage du modèle désiré.Cependant, Flutter fait un pas de plus vers la création d’expériences immersives en introduisant de nouveaux outils natifs au framework pour le rendu3D. Dans cet article, nous vous guidons à travers les premières étapes pour intégrer des scènes 3D dans vos applications Flutter en utilisant flutter_sceneet en explorant les possibilités offertes par Flame 3D pour la gestion de la caméra et des interactions tactiles.

‍

1. Démarrer avec flutter_scene : Une approche simple etefficace

L’une des manières les plus directes d’ajouter des scènes 3D à vos applications Flutter est d’utiliser flutter_scene. Cette librairie permet d’intégrer des rendus 3D de manière fluide tout en restant compatible avec l’écosystème Flutter.

Pour commencer, il est nécessaire de basculer sur le channel main de Flutter, qui correspond à la branche de développement principale. Cela vous permet d’accéder aux dernières fonctionnalités et aux mises à jour les plus récentes, incluant le support de rendu 3D natif Flutter.

Exécutez la commande suivante pour passer sur le channel main :

flutter channel main
flutter upgrade

‍

2. Activer les native-assets pour la gestion des ressources 3D

flutter_scene exploite les native-assets pour charger des ressources complexes comme des modèles 3D et des textures.Cette fonctionnalité reste expérimentale et n’est pour le moment pas activée par défaut, et doit donc être explicitement configurée.

Pour l’activer, exécutez la commande suivante :

flutter config --enable-native-assets

Cette option vous permettra de manipuler et d’importer des fichiers 3D dans vos projets Flutter simplement.

‍

3. Ajout de la librairie de chargement de scènes 3D

Pour afficher des objets 3D, vous devrez intégrer des dépendances spécifiques. Le format .glb (binaire du format GLTF) est l’un des plus courants pour le rendu de scènes 3D.

Voici un exemple d’ajout de dépendances dans votre fichier pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter
  flutter_scene: ^0.1.0

Vous devrez ensuite convertir vos modèles 3D au format .glb en objets utilisables par Flutter. Des outils tiers comme flutter_scene_importer peuvent vous aider. Notez cependant qu’ils ne sont pour le moment compatibles qu’avec MacOS.

L’import du modèle pourra se faire à l’aide de la commande suivante :

dart --enable-experiment=native-assets run flutter_scene_importer:import --
input "votre_fichier.glb" --output "votre_fichier.model"

‍

4. Impeller : Le moteur graphique derrière le rendu 3D

Flutter utilise Impeller pour le rendu graphique 3D. Ce moteur est activé par défaut sur Android et iOS, offrant des performances optimisées. Cependant, il n’est pas encore compatible avec le web, une limitation temporaire qui pourrait être levée dans les futures versions de Flutter.

Pour vérifier que Impeller est bien activé :

flutter doctor -v

‍

5. Afficher le modèle 3D

Avec les librairies installées et le projet configuré, et une fois que vous aurez votre modèle prend à l’emploi, le rendu pourra se faire simplement comme suit.

import 'dart:math';  
import 'package:flutter/material.dart';  
import 'package:flutter_scene/scene.dart';  
import 'package:vector_math/vector_math.dart';  
void main() {  
  runApp(const MyApp());  
}  
class MyApp extends StatefulWidget {  
  const MyApp({super.key});  
  @override   
  MyAppState createState() => MyAppState();  
}  
class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {  
  double elapsedSeconds = 0;  
  // scène permettant d'embarquer l'objet 3D  
  Scene scene = Scene();    
  @override    
  void initState() {      
    // permet de tenir le compte du temps passé pour le déplacement de la caméra  
    createTicker((elapsed) {        
      setState(() {          
        elapsedSeconds = elapsed.inMilliseconds.toDouble() / 1000;        
      });      
    }).start();      
    // chargement du modèle dans la scène  
    Node.fromAsset('assets/mim.model').then((model) {        
      model.name = 'mim';        
      scene.add(model);      
    });      
    super.initState();    
  }    
  @override    
  Widget build(BuildContext context) {      
    final painter = ScenePainter(        
      scene: scene,        
      camera: PerspectiveCamera(          
        position: Vector3(sin(elapsedSeconds) * 3, 2, cos(elapsedSeconds) * 3),          
        target: Vector3(0, 0, 0),        
      ),      
    );     
    return MaterialApp(        
      title: 'My 3D app',        
      home: CustomPaint(painter: painter),      
    );    
  }  
}  
// objet appliquant une caméra à une scène, permettant le rendu à l'écran de cette dernière  
class ScenePainter extends CustomPainter {    
  ScenePainter({required this.scene, required this.camera});    
  Scene scene;    
  Camera camera;    
  @override    
  void paint(Canvas canvas, Size size) {      
    scene.render(camera, canvas, viewport: Offset.zero & size);    
  }    
  @override    
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;  
}  

‍

6. Intégrer le suivi de la caméra et les interactions tactiles avec Flame 3D

Une des fonctionnalités les plusattendues pour la 3D est le suivi de la caméra au toucher. Cela permet à l’utilisateur de naviguer de manière interactive dans une scène 3D.

Flame 3D,une extension du moteur de jeu Flame pour Flutter, est actuellement encours de développement et vise à simplifier ces interactions. Bien que toujoursen version alpha, il montre des progrès significatifs pour la gestion de lacaméra et des gestes tactiles.

Pour commencer avec Flame 3D, ajoutez-leà vos dépendances :

dependencies:
  flame: ^1.0.0
  flame_3d: ^0.0.1-alpha

‍

Conclusion: Un POC prometteur en pleine évolution

Bien que le support de la 3D avec Flutter soit encore en phase alpha, les outils comme flutter_scene et Flame 3D ouvrent la voie à des expériences immersives.

Cependant, nous avons pu en une après midi afficher un modèle 3D et même intéragir avec celui-ci. Nous avons hâte de voir comment tout cela va évoluer.

‍

Simon Bernardin - Développeur Mobile Confirmé

Fabien Dhermy – Développeur Mobile Confirmé

Charlotte Picois – Développeuse Mobile Confirmée

Maxime Toublanc – Développeur Mobile