Okluzja obiektów rzeczywistych przy użyciu pliku three.js

Question

Używam pliku three.js w eksperymentalnej przeglądarce rozszerzonej rzeczywistości. (Argon jest nazywany Argon - Argon używa ARF Qualcomma AR SDK do śledzenia obrazów i obiektów w kamerze telefonicznej Argon przesyła informacje o śledzeniu do Javascript, gdzie używa przezroczystych stron internetowych z t3.js do tworzenia grafiki 3D na wierzchu wideo z telefonu.) Moje pytanie dotyczy jednak pliku three.js.

Dane wysyłane przez Argon na stronę internetową pozwalają mi wyrównać kamerę 3D z fizyczną kamerą telefoniczną i narysować grafikę 3D tak, aby wyglądały jak najbardziej zgodne z oczekiwaniami. Chciałbym również, aby niektóre rzeczy w świecie fizycznym zatykowały grafikę 3D (mam modele 3D obiektów fizycznych, ponieważ ustawiłem scenę lub ponieważ są to obiekty przygotowane, takie jak pola, które są śledzone przez Vuforia).

Zastanawiam się, czy ludzie mają sugestie na temat najlepszego sposobu wykonania tej okluzji za pomocą pliku three.js. Dzięki.

Answer 1

EDYCJA: wydaje się, że następna wersja pliku three.js (R71) będzie miała prostszy sposób, aby to zrobić, więc jeśli możesz użyć gałęzi dev (lub po prostu poczekać), możesz to zrobić znacznie łatwiej. Zobacz ten post: three.js transparent object occlusion

---

mój oryginalny odpowiedź (bez korzystania z nowych funkcji w R71):

Myślę, że najlepszym sposobem, aby to zrobić (w celu uniknięcia dodatkowej pracy poprzez tworzenie nowych rendering przechodzi na przykład) do modyfikowania renderera WebGL (src/renderers/WebGLRenderer.js) i dodania obsługi nowego obiektu, nazywaj go "occlusionObjects".

Jeśli zajrzysz do renderera, zobaczysz dwie bieżące listy obiektów, opaqueObjects i transparentObjects. Moduł renderowania sortuje obiekty renderowalne na tych dwóch listach, aby najpierw renderować nieprzezroczyste obiekty, a następnie obiekty przezroczyste. To, co musisz zrobić, to zapisać wszystkie nowe obiekty w liście occlusionObjects, a nie w tych dwóch. Zobaczysz, że nieprzezroczyste i przezroczyste obiekty są sortowane na podstawie ich właściwości materiałowych. Myślę, że tutaj, możesz chcieć dodać właściwość do obiektu, który chcesz być okluderem (może być "myObject.occluder = true") i po prostu wyciągnąć te obiekty.

Po wyświetleniu trzech list sprawdź, jak działa funkcja render() z tymi listami obiektów. Zobaczysz kilka miejsc z wyprawą połączeń tak:

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

dodać coś takiego przed tą linią, aby wyłączyć zapis do buforów kolorów, renderowania obiektów zgryzu do bufora głębokości tylko, a następnie włącz bufor koloru zapisuje z powrotem przed renderowaniem pozostałych obiektów.

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

Będziesz musiał to zrobić w kilku miejscach, ale powinno działać.

Teraz możesz po prostu oznaczyć dowolne obiekty w scenie jako "occluder = true", a one będą renderować tylko do bufora głębi, umożliwiając wyświetlanie i ukrywanie nieprzezroczystych lub przezroczystych obiektów za nimi.