Atelier N°20 — Design d'Interaction AR

Occlusion

L'occlusion — le fait qu'un objet en cache un autre — est l'indice de profondeur le plus puissant. En AR, un z-buffer correct permet aux objets virtuels de disparaitre derriere des objets reels, renforçant le realisme. Faites glisser pour tourner la scene et observez le tri de profondeur.

Drag to rotate

WebGL non disponible

Votre navigateur ne supporte pas Three.js

Rotation auto

Voir le code

// Z-buffer / depth testing in Three.js
const renderer = new THREE.WebGLRenderer();
      (document.querySelector('.fallback')||{style:{}}).style.display='none';

// Enable/disable depth test to see the difference
objects.forEach(obj => {
  obj.material.depthTest = zBufferEnabled;
  obj.material.depthWrite = zBufferEnabled;
});

// Without depth test, render order = draw order
// With depth test, GPU compares per-pixel depth
// and only renders the closest fragment

// In AR: occluder meshes (invisible geometry matching
// real surfaces) write to depth buffer only:
const occluder = new THREE.Mesh(realWorldGeo,
  new THREE.MeshBasicMaterial({
    colorWrite: false,  // invisible
    depthWrite: true    // blocks virtual objects
  })
);

Defi

Desactivez le Z-Buffer et observez le chaos visuel. Imaginez ensuite un scenario AR ou un personnage virtuel doit passer derriere un meuble reel. Comment implementeriez-vous un occluder invisible ?

Prendre rendez-vous