Visite 3D photoréaliste d'une maison avec PlayCanvas

Une capture phone de 5 minutes + un projet PlayCanvas gratuit donnent à l'acheteur une visite photoréaliste depuis son canapé.

Une visite Gaussian splat, c'est une promenade photoréaliste embedded dans un browser, sur une vraie maison. L'acheteur ouvre l'annonce, parcourt les pièces, regarde les reflets dans la marbre du plan de travail, voit la vraie lumière qui tombe sur le vrai parquet. Capture phone en 5 minutes. Rendu browser. Pas d'app à installer.

PlayCanvas, c'est le moteur. Il a ajouté le rendu Gaussian splat natif en 2024, en même temps que SuperSplat — un éditeur de splats gratuit et open source. Three.js peut rendre des splats avec gsplat.js, mais tu passes une semaine à construire l'outillage que PlayCanvas livre déjà.

Il te faut de la vidéo qui couvre chaque angle de chaque pièce. Trois apps qui marchent :

Règles de capture qui font la différence

• →Marche lentement. Environ 1 pas par seconde. Plus rapide = frames floutées qui dégradent l'entraînement.
• →Couvre chaque angle. Le splat est moche depuis les angles que t'as jamais filmés. Parcours chaque pièce deux fois — une fois à hauteur de poitrine, une fois à hauteur de genoux.
• →Évite tout ce qui bouge. Personnes, rideaux dans le vent, reflets sur l'eau — tout ça crée des floaters.
• →Lumière homogène = ami. Plein soleil à midi est plus dur qu'un après-midi nuageux (les ombres dures perturbent l'optimiseur).

Les splats bruts contiennent du déchet. Des floaters dans l'air, des splats à l'extérieur de la maison, des bords flous. SuperSplat est un éditeur browser gratuit qui règle ça en 5 minutes.

Ouvre superspl.at/editor. Drag ton .ply dedans. Les outils que tu vas utiliser :

• →Le bounding box crop. Drag la box autour de la maison, supprime tout ce qui est en dehors.
• →Le lasso. Sélectionne les floaters qui flottent dans l'air (les nuages wispy au-dessus du plafond), supprime.
• →L'export compressed. File > Export > Compressed .ply. Un splat brut de 200 MB tombe à 35 MB sans perte visible.

Sauvegarde le fichier nettoyé et compressé. C'est celui-là que tu vas charger dans PlayCanvas.

Inscris-toi sur playcanvas.com (gratuit). Nouveau projet, template vide. L'éditeur ouvre dans ton browser.

Assets panel > Upload > drop ton house.compressed.ply

PlayCanvas auto-détecte le format splat. Drag l'asset importé dans la hierarchy de scène comme Gaussian Splat entity. Il charge à l'origine. Rotate 90° si le sol n'est pas plat.

Tu n'as pas besoin d'éclairage. Le splat a la lumière bakée depuis la capture originale. Supprime la directional light par défaut. Skip l'étape HDRI entièrement. C'est un des gros wins par rapport aux pipelines mesh-based.

PlayCanvas a un template first-person maintenu qui fonctionne avec les splats out of the box.

Dans l'éditeur, fais + Entity > Template > First Person Controller. Ça drop un rig caméra avec déplacement WASD et mouse-look déjà câblés. Règle la hauteur de caméra à 1,7 m (hauteur des yeux d'un adulte moyen). Vitesse de déplacement à 2,5 m/s — un pas de marche normal, pas un sprint Quake.

Pour le mobile, ajoute le plugin Touch Input depuis le store PlayCanvas. Joystick virtuel main gauche, drag-to-look main droite. Install en 5 minutes.

Teste dans l'éditeur : le splat doit s'afficher en temps réel quand tu bouges la caméra. Si le framerate est mauvais, t'as zappé l'étape 2 de compression. Reviens en arrière.

C'est le seul endroit où les splats sont chiants. Ce sont des nuages de points, pas de la géométrie. Y a rien contre quoi cogner.

Le fix : construire un proxy mesh low-poly invisible et l'utiliser pour la collision. L'acheteur ne le voit jamais.

Deux façons de faire le proxy

Sur l'entité First Person Controller, le template inclut déjà une collision Capsule et un kinematic rigidbody. Tu dois juste activer la physique dans Settings > Physics > Enabled.

C'est la vue dollhouse qui vend la maison. L'acheteur veut voir « cuisine : 12 m², parquet chêne, plaque induction » sans avoir à y marcher.

Ajoute une Entity au centre de chaque pièce. Attache un script Hotspot.js :

var Hotspot = pc.createScript('hotspot');
Hotspot.attributes.add('label', { type: 'string' });
Hotspot.attributes.add('details', { type: 'string' });

Hotspot.prototype.initialize = function() {
    this.entity.element.on('click', () => {
        document.getElementById('popup-label').innerText = this.label;
        document.getElementById('popup-details').innerText = this.details;
        document.getElementById('popup').style.display = 'block';
    });
};

Ajoute un composant Element à l'entity, type Image, avec une petite texture icône. Layer en UI pour qu'il s'affiche toujours par-dessus. Remplis le label (« Cuisine ») et les details (« 12 m², parquet chêne, plaque induction, fenêtre nord ») dans l'inspecteur.

Le popup lui-même est du HTML/CSS pur posé par-dessus le canvas. N'essaie pas de le construire dans le UI system de PlayCanvas. Plus lent et plus moche.

Les splats sont GPU-bound, pas bandwidth-bound. Un splat compressé de 35 MB se télécharge vite mais rend lentement sur un Android de 3 ans.

Trois changements qui se cumulent

• →Réduit le splat count cap. Settings > Rendering > Gaussian Splat Limit = 1 000 000 (par défaut illimité). Au-dessus d'1 M, le mid-range mobile crache. La différence visuelle est petite.
• →Active Settings > Rendering > Anti-aliasing > FXAA. Moins cher que MSAA, rendu 90 % aussi bon.
• →Bascule en WebGPU rendering dans Settings (vs WebGL2 par défaut). 30 à 50 % plus rapide sur Chrome et Safari 18+. Fallback automatique sur WebGL2 pour les vieux browsers.

Hit Publish dans l'éditeur PlayCanvas. T'obtiens une URL hostée du type playcanv.as/p/abc123. Gratuit si le projet est public.

Si tu veux un projet privé

• →Paie un plan Personal ($15/mois) pour garder la source privée.
• →Ou self-host le build publié. Publish > Download .zip, puis dépose-le dans n'importe quel host statique (Vercel, Netlify, Cloudflare Pages).

Embed sur Squarespace, Wix ou Webflow

<iframe
  src="https://playcanv.as/p/abc123/"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen; xr-spatial-tracking">
</iframe>

La permission xr-spatial-tracking débloque WebXR si l'acheteur a un Quest. Les splats rendent incroyablement en VR. 10 caractères en plus, upside gratuit.

C'est là que la désintermédiation devient chirurgicale. Tu veux savoir quel acheteur a passé 8 minutes dans la chambre parentale et 30 secondes dans la salle de bain. Ce sont tes vrais leads.

Drop le snippet PostHog dans la page iframe, puis ajoute un script de tracking dans PlayCanvas :

var Tracker = pc.createScript('tracker');
Tracker.prototype.initialize = function() {
    this.currentRoom = null;
    this.roomEnterTime = 0;
};

Tracker.prototype.update = function() {
    var room = this.detectRoomFromPosition(this.entity.getPosition());
    if (room !== this.currentRoom) {
        if (this.currentRoom) {
            var dwellSec = (Date.now() - this.roomEnterTime) / 1000;
            window.posthog.capture('room_exited', {
                room: this.currentRoom,
                dwell_seconds: dwellSec
            });
        }
        this.currentRoom = room;
        this.roomEnterTime = Date.now();
    }
};

detectRoomFromPosition est juste un set de bounding boxes hardcodées par pièce. Cinq lignes de math.

Maintenant ton dashboard PostHog affiche le dwell time par acheteur, par pièce. Le vendeur voit quelles pièces retiennent l'attention, lesquelles tombent à plat. Trie par temps de visite total — les 5 du dessus, c'est qui tu appelles.

T'as maintenant tout ce qu'il faut pour livrer une visite 3D photoréaliste, embeddable n'importe où, qui tourne sur le téléphone d'un acheteur à 23 h. Plus besoin de l'agent pour faire le tour de la maison.

Si ce guide t'a aidé, viens sur Instagram @kingarms.ai — j'y partage des combos d'outils et workflows IA qui changent vraiment ce que tu peux produire en un après-midi.

Créé par @kingarms.ai

Suis-moi sur Instagram pour plus de contenu IA

Guide inspiré de @nicnonac