WebGL et React Three Fiber : créer des expériences 3D performantes sur le web

React Three Fiber (R3F) est une bibliothèque React qui permet de créer des scènes Three.js déclarativement, avec la puissance des hooks et de l’écosystème React. Résultat : des expériences 3D interactives directement dans le navigateur, sans plugin. Les sites avec des expériences 3D immersives convertissent en moyenne 2,4× mieux que les sites statiques comparables (Source : Awwwards Research, 2024).

Qu’est-ce que WebGL et pourquoi l’utiliser sur le web ?

WebGL (Web Graphics Library) est une API JavaScript qui permet de rendre des graphiques 3D et 2D accélérés GPU directement dans le navigateur, sans plugin. Disponible nativement dans tous les navigateurs modernes, WebGL s’appuie sur OpenGL ES pour exploiter la carte graphique de l’utilisateur.

Cas d’usage de WebGL en production :

• Configurateurs de produits 3D (meubles, voitures, équipements)
• Visualisations de données immersives
• Portfolios et sites vitrine à fort impact visuel
• Expériences interactives et jeux web légers
• Modélisation architecturale en temps réel

Pourquoi choisir React Three Fiber plutôt que Three.js natif ?

Three.js natif nécessite une gestion impérative des objets, du render loop et des mises à jour d’état — ce qui produit rapidement du code difficile à maintenir. React Three Fiber résout ce problème en exposant Three.js comme des composants React.

// Avec Three.js natif (impératif)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: '#e7b366' });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Avec React Three Fiber (déclaratif)
<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="#e7b366" />
</mesh>

Avantages de React Three Fiber :

• Réactivité native : l’état React met à jour la scène automatiquement
• Composition : scènes modulaires avec des composants réutilisables
• Écosystème @react-three/drei : caméras, contrôles, textes 3D, loaders prêts à l’emploi
• Post-processing simplifié via @react-three/postprocessing (Bloom, SSAO, Vignette…)

Comment optimiser les performances d’une scène WebGL ?

Les performances sont le défi principal du 3D web. Un site avec une scène mal optimisée peut tomber à 12 FPS sur mobile contre 60 FPS sur desktop — ruinant l’expérience utilisateur.

Réduire le nombre de draw calls

Chaque mesh est un draw call. Utilisez InstancedMesh pour rendre des milliers d’objets identiques en un seul appel GPU :

// 10 000 sphères en 1 draw call
<instancedMesh ref={ref} args={[null, null, 10000]}>
  <sphereGeometry args={[0.1, 8, 8]} />
  <meshStandardMaterial />
</instancedMesh>

Optimiser les géométries

• Draco compression : réduit la taille des fichiers GLTF de 80 à 95 %
• LOD (Level of Detail) : afficher des géométries moins détaillées à distance
• Frustum culling : ne pas rendre ce qui est hors du champ de la caméra (activé par défaut dans Three.js)

Gérer le pixel ratio

Sur les écrans Retina, le pixel ratio par défaut est 2 (voire 3). Limitez-le pour économiser la puissance GPU :

<Canvas dpr={Math.min(window.devicePixelRatio, 2)}>

Post-processing : Bloom et Vignette

Le post-processing est visuellement impactant mais coûteux. Groupez tous les effets dans un seul EffectComposer :

import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';

<EffectComposer>
  <Bloom luminanceThreshold={0.9} intensity={0.5} />
  <Vignette eskil={false} offset={0.1} darkness={0.8} />
</EffectComposer>

Intégrer le scroll dans une scène 3D

Lier l’animation 3D au scroll crée des expériences particulièrement engageantes. Avec Lenis (smooth scroll) et Nanostores, vous pouvez synchroniser la progression du scroll avec des animations Three.js :

// Store Lenis (Nanostores)
$lenis.get().on('scroll', (e) => {
  $scroll.set(e.progress); // 0 → 1
});

// Dans le composant R3F
useFrame(() => {
  const progress = $scroll.get();
  meshRef.current.rotation.y = progress * Math.PI * 2;
});

Cette architecture est celle que nous utilisons sur pixila.net pour synchroniser les scènes 3D du hero et des sections avec le défilement de la page.

Quels sont les résultats concrets ?

Les projets Pixila réalisés avec WebGL + React Three Fiber ont tous obtenu des récompenses internationales :

• Sébastien Lempens Portfolio : Site of the Day Awwwards, FWA of the Day
• Studio San Rita : Site of the Day Awwwards, CSS Design Awards, FWA

Ces reconnaissances attestent que la qualité technique et la créativité des expériences WebGL peuvent hisser un site parmi les meilleurs au monde.

Vous souhaitez intégrer une expérience 3D à votre site ?

Pixila conçoit des expériences WebGL sur mesure depuis plus de 20 ans. Que ce soit un configurateur produit, un portfolio immersif ou une landing page à fort impact visuel, nous adaptons la complexité 3D aux objectifs de votre projet et aux contraintes de performance mobile.

Démarrez un nouveau projet?