Autore: Theodore
Provalo dal vivo Su questo progetto
I sei pannelli sono vera geometria WebGL all'interno della scena — hanno spessore e curvatura, occludono il personaggio e ne sono occlusi, mentre il loro ordine di profondità rimane corretto da qualsiasi angolazione. Non sono schede DOM sospese sopra un canvas.
L'intera interazione si basa su una divisione dei compiti: il 3D serve all'esplorazione, il 2D al controllo. I pannelli gestiscono la navigazione e la selezione, fluttuando attorno al personaggio e ruotando con i gesti dell'utente; il controllo effettivo della riproduzione appartiene all'interfaccia stabile nello spazio dello schermo, in basso. Selezionare un brano non è un cambio di stato, ma un passaggio continuo — il pannello stesso vola verso il basso e diventa il lettore e, quando viene scelta un'altra traccia, quello precedente torna al proprio slot 3D originale.
Punti salienti
- Trascina lo spazio vuoto e le schede musicali ruotano attorno al personaggio, proseguendo per inerzia al rilascio; trascina il personaggio e ruoterà soltanto quest'ultimo, senza muovere camera e pannelli. I due elementi derivano lentamente in direzioni opposte — è questo moto contrario a far percepire il gruppo come un corpo orbitante anziché come uno sfondo
- Fai clic su un pannello: questo esce dallo spazio 3D, passa davanti al personaggio e si dispiega in basso come lettore orizzontale; selezionandone un altro, due pannelli si trovano contemporaneamente in volo — quello precedente si ripiega esattamente nella posizione originale mentre il nuovo avanza
- La rotellina sposta la camera in dolly tra 4.6 e 16 unità del mondo: avvicinandosi, i pannelli in primo piano escono dall'inquadratura; allontanandosi, l'intero spazio si raccoglie in un'unica costellazione musicale vista dall'alto
- La cornice a quattro angoli del cursore personalizzato si aggancia al quad realmente proiettato di ogni pannello — le parentesi si posano sui veri angoli prospettici e ruotano seguendo l'inclinazione del pannello
Analisi tecnica
Asset 3D · L'esportazione Tripo intatta
Artist.glb viene distribuito esattamente come esportato da Tripo: 59 MB, 1.02M vertici, una mappa colore di base 8192² — nessuna decimazione, nessun ridimensionamento, tutti i dettagli originali. Il costo è messo in conto (~350 MB di VRAM dopo la generazione dei mipmap, un milione di vertici ridisegnati a ogni frame) e due decisioni lo mantengono gestibile: la mesh pesante viene esclusa dal raycasting — un milione di triangoli a ogni movimento del puntatore bloccherebbe il main thread — e sostituita da una capsula invisibile dimensionata sui limiti del modello; inoltre, poiché l'esportazione non contiene clip di animazione, il personaggio riceve un'animazione idle a livello di gruppo (una lenta oscillazione e un millimetro di respiro) anziché uno scheletro inventato.
Una pipeline meshopt in scripts/ porta lo stesso file a 2.9 MB; il modello viene misurato e normalizzato durante il caricamento, quindi sostituire le build non richiede modifiche al codice.
Materiali · Semplificare il materiale volumetrico nelle esportazioni Tripo
Le esportazioni Tripo contrassegnano la mesh con KHR_materials_volume, che in three.js diventa un MeshPhysicalMaterial con un percorso transmission/thickness di cui questa scena non ha bisogno e che non può permettersi. Durante il caricamento, ogni materiale viene convertito in MeshStandardMaterial mantenendo l'intero set di mappe PBR — stesso aspetto, costo eliminato.
Gli ShaderMaterial personalizzati includono esplicitamente colorspace_fragment: senza di esso scrivono valori lineari direttamente in un framebuffer sRGB e vengono renderizzati quasi neri.
Pannelli musicali · Geometria reale su una curva
Ogni pannello combina quattro tipi di geometria — una superficie frontale, una fascia perimetrale estrusa per creare uno spessore reale, una piastra posteriore traslucida e hit quad invisibili — che condividono un unico set di buffer in cache; per ogni scheda cambia soltanto la trasformazione del gruppo. Tutto viene creato in piano e avvolto su un grande cilindro verticale: la scanalatura di avanzamento e l'orologio sono incorporati nella stessa curva anziché esserne figli, mentre il riempimento dell'avanzamento è un cutoff UV iniettato in un MeshBasicMaterial — ridimensionare una mesh solleverebbe dalla curva la sua estremità più lontana.
La grafica dei pannelli viene suddivisa fra tre canvas in base alla frequenza di aggiornamento: la superficie 1320×680 viene disegnata una sola volta, la fascia del tempo quando cambia il secondo visualizzato e l'icona soltanto quando cambia lo stato di riproduzione — nessuna operazione costosa entra nel render loop. Tutti e sei i pannelli trasparenti disattivano i depth write e ricevono a ogni frame un renderOrder a fasce basato sulla distanza dalla camera, così l'occlusione rimane corretta da qualsiasi angolazione.
Passaggio dal 3D al 2D · Una scheda atterra come lettore
Una mesh WebGL non può diventare un nodo DOM, quindi la continuità viene costruita a partire da tre elementi: a ogni frame, un proiettore mantiene aggiornato il riquadro di ogni scheda nello spazio dello schermo — incluse quelle nascoste, perché il volo di ritorno deve sapere dove atterrare; nel primo frame del pannello DOM compare la stessa bitmap del canvas già dipinta per la texture WebGL della scheda, non una ricostruzione HTML che non combacerebbe mai alla perfezione; e la scheda viene nascosta nello stesso frame — due elementi nello stesso punto, uno invisibile.
L'allargamento inizia solo quando il volo è completato per ~35% — trasformare a metà percorso una scheda 2:1 in una barra 11:1 impasterebbe l'immagine — e la traiettoria segue una curva di Bézier quadratica incurvata lateralmente, così una scheda in arrivo dall'angolo superiore sinistro passa attorno all'artista. La destinazione viene riletta a ogni frame: la costellazione è ancora in movimento e un rect campionato al decollo farebbe atterrare il pannello accanto alla propria scheda.
