Créer une application de réalité augmentée avec React Native : le guide complet

React Native : créer une application de réalité augmentée responsable

Créer une expérience de réalité augmentée (AR) en React Native n’est plus réservé aux géants de la tech. Grâce à des librairies modernes comme ViroReact ou Three.js, il est aujourd’hui possible de superposer des objets 3D légers dans la caméra, ancrer des éléments virtuels dans l’espace et offrir une expérience immersive tout en respectant les principes du numérique responsable.

Chez Codyweb, nous croyons qu’une innovation n’a de sens que si elle reste utile, performante et sobre. Chaque ligne de code, chaque modèle 3D et chaque ressource doivent être pensés pour limiter la consommation énergétique et l’empreinte carbone globale de l’application.

Est-ce possible en React Native ?

Oui, totalement. React Native gère l’interface et la logique JavaScript, tandis que les capacités AR reposent sur des moteurs natifs :

• ARKit (iOS)
• ARCore (Android)

Ces moteurs sont reliés à React Native via des bridges qui exposent les fonctions AR sans dupliquer le code natif. L’objectif : un développement unifié et allégé, donc plus économe en ressources.

Un code mutualisé entre Android et iOS, c’est aussi moins de maintenance, moins de build et donc une empreinte numérique réduite.

Choisir sa librairie AR

Les principales options

• ViroReact (ViroCommunity) — AR/VR tout-en-un, open source et réutilisable.
• react-native-arkit — idéal pour un projet iOS hautes performances.
• react-native-arcore — alternative Android légère.
• Three.js + Expo — rendu 3D fin via WebGL, excellent pour des objets légers et optimisés.

Comparatif éco-responsable

Tutoriel complet : ta première scène AR

1. Crée ton projet

  npx react-native init MyARApp

  cd MyARApp
  

2. Installe la librairie

npm install @viro-community/react-viro

ou avec Yarn :

yarn add @viro-community/react-viro

3. Crée la scène de base

Crée un fichier HelloAR.js et affiche un texte et un cube 3D :

  import React from 'react';

  import { ViroARScene, ViroText, ViroBox } from '@viro-community/react-viro';


  export default function HelloAR() {

    return (

      <ViroARScene>

        <ViroText

          text="Bienvenue dans une AR responsable !"

          position={[0, 0, -1]}

          style={{ fontSize: 20, color: '#ffffff' }}

        />

        <ViroBox

          position={[0, -0.2, -1]}

          scale={[0.3, 0.3, 0.3]}

          materials={['grid']}

        />

      </ViroARScene>

    );

  }
  

4. Relie la scène à ton App.js

  import React from 'react';

  import { ViroARSceneNavigator } from '@viro-community/react-viro';

  import HelloAR from './HelloAR';


  export default function App() {

    return (<ViroARSceneNavigator initialScene={{ scene: HelloAR }} />);

  }
  

5. Lance ton app sur appareil réel

  npx react-native run-android

  npx react-native run-ios
  

Bravo ! Tu viens d’afficher ton premier objet 3D en réalité augmentée — le tout avec une empreinte minimale.

Rendre la 3D plus réaliste et éco-optimisée

Formats recommandés

• GLTF / GLB : léger, textures PBR, parfait pour le mobile.
• OBJ / MTL : simple et rapide à charger.

Charger un modèle 3D

  <Viro3DObject

    source={require('./assets/chair.gltf')}

    position={[0, -0.3, -1]}

    scale={[0.25, 0.25, 0.25]}

    type="GLTF"

  />
  

Ajouter de la lumière

  <ViroAmbientLight color="#FFFFFF" intensity={150} />

  <ViroDirectionalLight color="#FFFFFF" direction={[0, -1, -0.5]} intensity={300} />
  

• Utilise des lumières modérées pour réduire les calculs GPU.
• Pré-bake l’éclairage dans tes textures pour alléger le rendu.
• Évite les shaders complexes qui augmentent la consommation d’énergie.

Optimisation numérique responsable

• Réduis les modèles à moins de 50 000 polygones.
• Compresse les textures (WebP ou PNG 512x512 max).
• Charge uniquement les ressources nécessaires à la scène active.
• Prévois un mode basse consommation (moins d’effets, moins de lumière).

Tests et durabilité

• Teste sur plusieurs appareils pour ajuster la charge CPU/GPU.
• Vérifie le comportement en conditions de batterie faible.
• Surveille les FPS et la température du téléphone.
• Mesure la consommation réseau lors du chargement des modèles.

Cas d’usage concrets

• E-commerce responsable : visualiser un produit avant achat pour réduire les retours.
• Éducation : apprendre autrement sans impression ni déplacement.
• Immobilier : limiter les visites physiques grâce à la prévisualisation AR.

Checklist de sobriété numérique

• Limiter le poids total de l’app < 50 Mo.
• Héberger les modèles sur un CDN vert ou mutualisé.
• Surveiller la consommation d’énergie via Android Profiler / Xcode Instruments.
• Favoriser les librairies open source communautaires plutôt que propriétaires.

L’approche Codyweb

Chez Codyweb, nous allions innovation technologique et éthique numérique. Chaque projet est conçu pour durer : moins de code, moins de serveurs, plus d’impact positif. Nous auditons systématiquement la performance et la consommation énergétique des applications que nous développons.

“Créer une app AR responsable, c’est offrir une expérience immersive sans faire exploser la consommation énergétique.” — L’équipe Codyweb