Esperienza interattiva - 2026

New Element

Una stanza wireframe al neon che guidi senza toccare niente: muovendo la testa ruoti la scena, avvicinando e allontanando due dita fai crescere o restringere l'elemento al centro. Il tracciamento di volto e mani gira sul flusso della webcam, dentro il browser, e un suono generato in codice risponde a ogni gesto.

Ruolo: Concept, sviluppo 3D e front-end engineering
Anno: 2026
Categoria: Esperienza interattiva
Online: Visita il sito

In breve

Gira tutto nel browser: nessun fotogramma lascia mai il tuo computer.

01La sfida

Due modelli di tracciamento condividono un solo flusso della webcam e un solo budget per fotogramma: il volto guida la vista, le mani guidano la sfera, e nessuno dei due può bloccare una scena che sta già renderizzando ogni fotogramma. La parte più difficile è essere onesti con chi la usa. Il tracciamento fallisce di continuo - luce scarsa, un volto fuori inquadratura, mani appoggiate sotto la scrivania - e un'interfaccia che si blocca quando ti perde di vista non si distingue da una che è andata in crash.

02L'approccio

Niente parte da solo: una schermata d'ingresso spiega i due gesti - la testa per esplorare, le dita per dare forma - e lascia entrare con la webcam oppure con mouse e tocco. La webcam viene chiesta solo dopo quella scelta. Un indicatore segue l'avvio reale, calibrazione compresa, poi la sfera si carica ed esplode in un'onda d'urto, a tempo con un suono di accensione. Da lì la testa fa ruotare la stanza, e la distanza fra pollice e indice fa crescere o restringere la sfera. Gli indicatori dicono cosa il tracker vede davvero - volto, mani, o niente - e un overlay disegna la mano trovata, così quando un gesto non funziona si capisce perché, invece di riprovare alla cieca. Senza una webcam utilizzabile, gli stessi comandi passano a mouse e tocco: cambia l'input, lo schermo non resta mai vuoto.

03Note tecniche

React monta l'interfaccia, Three.js governa il canvas e il ciclo di rendering. La sfera è un wireframe disegnato in uno shader GLSL a partire da coordinate baricentriche, così ogni spigolo resta dello stesso spessore su una superficie curva; un passaggio di Unreal Bloom dà al neon il suo bagliore. Il suono è procedurale, costruito con la Web Audio API senza scaricare niente: l'accensione, un tono d'energia che segue la sfera, brevi segnali quando una mano viene trovata o persa. Il motore 3D sta in un chunk a parte, così una modifica all'interazione non costringe il browser a riscaricare Three.js. E il video resta sulla macchina: MediaPipe gira nel browser in WebAssembly, e nessun fotogramma viene mai inviato online.