# Fang Studio · Développement 3D

> Une scène 3D calculée en direct dans le navigateur, au cœur de la page : un produit à faire tourner, un lieu à parcourir, une idée abstraite qui devient tangible.

## Utilité

La 3D donne au visiteur la main sur ce qu'il regarde : il tourne, approche, explore, et comprend un objet ou un espace comme il le ferait en vrai.

Deux craintes reviennent quand il est question de 3D sur un site : qu'elle le ralentisse, et qu'elle fasse gadget. Une 3D lente est une 3D mal fabriquée : modèles trop détaillés, lumière recalculée à chaque image, scène qui tourne encore hors de l'écran. Bien dosée, elle se fait discrète : une matière qui réagit à la souris, un fond en relief, un détail animé au coin d'une page.

J'écarte ces deux écueils dès la conception. Chaque modèle est allégé dans Blender là où l'œil ne voit pas la différence, la lumière est calculée une fois pour toutes et figée dans les textures, et la scène se met en pause dès qu'elle sort de l'écran. Chaque scène reçoit aussi un rôle avant d'être modélisée : montrer un produit, guider la lecture, rendre une idée concrète. Avant la mise en ligne, je la teste sur un téléphone d'entrée de gamme. Pendant la visite, l'expérience passe en premier : si l'appareil ralentit, la scène réduit sa résolution et ses effets, jusqu'à céder la place à une image fixe.

Je suis de près l'évolution de la 3D dans le navigateur, en particulier [WebGPU](https://web.dev/blog/webgpu-supported-major-browsers?hl=fr), le successeur de WebGL : des effets plus riches sur les appareils récents, la même scène affichée sur les autres.

## Déroulé

1. **Cas d'usage** : Je vérifie d'abord que la 3D sert votre propos, pour montrer un produit sous tous ses angles ou rendre concret ce qui est abstrait. Si une image suffit, je vous le dis. Ensuite, je définis ce que la scène doit faire comprendre et la place qu'elle occupe : en ouverture de page, à côté d'une section ou en simple détail. Ce choix fixe son budget, en poids comme en temps de développement.
2. **Modélisation** : Les objets sont modélisés dans Blender, à partir de vos fichiers 3D s'ils existent (fichiers de conception, plans), ou d'après photos et mesures. Je les simplifie là où l'œil ne voit pas la différence, je dimensionne géométrie et textures pour le web, puis je compresse le tout pour qu'il pèse le moins possible.
3. **Lumière et matières** : Quand la scène s'y prête, l'éclairage et les ombres sont calculés une fois pour toutes, en amont (c'est le « baking »), puis figés dans les textures. La scène garde la qualité d'une image de synthèse et reste légère à afficher. Les matières sont réglées pour réagir à la lumière comme leurs équivalents réels : métal, verre, tissu, pierre.
4. **Intégration** : La scène est développée avec Three.js dans le site React. Elle tourne sur WebGPU quand le navigateur le permet et sur WebGL sinon, avec des effets écrits une seule fois pour les deux. Reliée au défilement ou à la souris et animée avec GSAP, elle suit les gestes du visiteur avec fluidité.
5. **Performance et repli** : La scène se charge après le contenu principal, si bien que le texte de la page se lit immédiatement. Son rendu s'interrompt dès qu'elle sort de l'écran, et une image fixe la remplace sur mobile et pour les visiteurs qui limitent les animations. Je mesure ensuite son coût sur des appareils modestes et j'adapte la qualité à la puissance de chaque appareil.

## En pratique

- **Un produit à montrer sous tous ses angles** : Le visiteur le fait tourner lui-même. Une galerie de photos n'en montrerait que quelques vues.
- **Un téléphone d'entrée de gamme** : Une image remplace la scène : la page reste rapide et le propos complet.
- **Un navigateur qui ne gère pas encore WebGPU** : La même scène s'affiche en WebGL. Il n'y a qu'une version à développer, donc un seul travail à financer.
- **Un visiteur qui limite les animations** : Son réglage système est respecté : la scène reste immobile et ne bouge qu'à ses gestes.
- **Ce site** : La page d'accueil et la page Contact montrent mon travail en 3D : modélisation, lumière précalculée, intégration au défilement.

## Questions fréquentes

**La 3D est-elle indispensable ?**
Non. Elle convient pourtant à tout type de site. Sur un site qui doit d'abord informer, elle se limite à un détail (une matière, un fond, un objet) qui accompagne la lecture.

**Qu'apporte WebGPU par rapport à WebGL ?**
WebGPU est la nouvelle génération de 3D dans le navigateur. Il exploite mieux la carte graphique et permet des scènes plus riches (particules, matières, lumière) pour le même effort de l'appareil. Mes effets sont écrits pour les deux, et s'affichent en WebGL là où WebGPU n'est pas encore disponible.

**Ralentit-elle le site ?**
Elle a un coût, et je le mesure. La scène se charge après le contenu principal et s'arrête hors de l'écran, si bien que le texte de la page se lit avant qu'elle n'apparaisse.

**Combien de temps, et à quel prix ?**
Sur devis, après un premier échange. Le coût dépend de la scène : modélisation, interactions, nombre d'objets.

## Démarrer

Contact : contact@fangstudio.fr · /contact