Occlusione di oggetti del mondo reale usando three.js

Question

Sto usando three.js in un browser sperimentale di realtà aumentata. (Il browser si chiama Argon. In sostanza, Argon utilizza Vuforia AR SDK di Qualcomm per tracciare immagini e oggetti nella fotocamera del telefono. Argon invia le informazioni di tracciamento in Javascript, dove utilizza pagine web trasparenti con three.js per creare grafica 3D in cima a il feed video del telefono.) La mia domanda riguarda invece three.js.

I dati che Argon invia nella pagina Web mi consentono di allineare la fotocamera 3D con la fotocamera del telefono fisico e di disegnare grafica 3D in modo tale che sembrano allineati con il mondo reale come previsto. Mi piacerebbe anche che alcune delle cose nel mondo fisico occludessero la grafica 3D (ho modelli 3D degli oggetti fisici, perché ho impostato la scena o perché sono stati preparati oggetti come scatole che vengono monitorati da Vuforia).

Mi chiedo se la gente abbia suggerimenti sul modo migliore per realizzare questa occlusione con three.js. Grazie.

Answer 1

MODIFICA: sembra che la prossima versione di three.js (R71) avrà un modo più semplice per farlo, quindi se puoi usare il ramo dev (o semplicemente aspettare), puoi farlo molto più facilmente. Vedi questo post: three.js transparent object occlusion

---

mia risposta iniziale (senza utilizzare le nuove funzionalità di R71):

Penso che il modo migliore per farlo è (per evitare lavoro extra con la creazione di nuovo il rendering passa per esempio) per modificare il renderer WebGL (src/renderers/WebGLRenderer.js) e aggiungere il supporto per un nuovo tipo di oggetto, magari chiamandoli "occlusionObjects".

Se si guarda nel renderer, verranno visualizzati due elenchi di oggetti correnti, opaqueObjects e transparentObjects. Il renderer ordina gli oggetti renderizzabili in questi due elenchi, in modo che possa eseguire il rendering degli oggetti opachi per primi e quindi degli oggetti trasparenti dopo di essi. Quello che devi fare è archiviare tutti i tuoi nuovi oggetti nell'elenco di OcclusionObjects piuttosto che questi due. Vedrai che gli oggetti opachi e trasparenti sono ordinati in base alle loro proprietà materiali. Penso che qui potresti voler aggiungere una proprietà a un oggetto che vuoi essere un occlusore ("myObject.occluder = true", forse), e tirare fuori quegli oggetti.

Una volta visualizzate le tre liste, osservare cosa fa la funzione render() con questi elenchi di oggetti. Vedrete un paio di posti con le chiamate di rendering come questo:

renderObjects(opaqueObjects, camera, lights, fog, true, material); 

aggiungere qualcosa di simile prima che la linea, per spegnere la scrittura in buffer del colore, rendono gli oggetti di occlusione nel buffer di profondità unica, e quindi attiva nuovamente il buffer dei colori prima di eseguire il rendering degli oggetti rimanenti.

context.colorMask(false, false, false, false); 
renderObjects(occluderObjects, camera, lights, fog, true, material); 
context.colorMask(true, true, true, true); 

Avrete bisogno di farlo in un paio di posti, ma dovrebbe funzionare.

Ora è possibile contrassegnare qualsiasi oggetto nella scena come "occluder = true" e verranno visualizzati solo nel buffer di profondità, consentendo al video di mostrare e occludere qualsiasi oggetto opaco o trasparente reso dietro di essi.