Occlusion d'objets du monde réel à l'aide de three.js

Question

J'utilise three.js dans un navigateur Web expérimental à réalité augmentée. (Le navigateur s'appelle Argon.) Argon utilise Vuforia AR SDK de Qualcomm pour suivre les images et les objets dans la caméra du téléphone Argon envoie les informations de suivi dans Javascript, où il utilise des pages web transparentes avec three.js pour créer des graphiques 3D sur le dessus. le fil vidéo du téléphone.) Ma question concerne trois.js, cependant. Les données que l'Argon envoie dans la page Web me permettent d'aligner la caméra 3D avec la caméra du téléphone physique et de dessiner des graphiques 3D de sorte qu'ils semblent alignés avec le monde réel comme prévu. J'aimerais aussi que certaines choses dans le monde physique occluent les graphiques 3D (j'ai des modèles 3D des objets physiques, parce que j'ai mis en scène ou parce qu'ils sont des objets préparés comme des boîtes qui sont suivies par Vuforia).

Je me demande si les gens ont des suggestions sur la meilleure façon d'accomplir cette occlusion avec three.js. Merci.

Answer 1

EDIT: il semble que la prochaine version de three.js (R71) aura une façon plus simple de le faire, donc si vous pouvez utiliser la branche dev (ou simplement attendre), vous pouvez le faire beaucoup plus facilement. Voir ce post: three.js transparent object occlusion

---

ma première réponse (sans utiliser les nouvelles fonctionnalités R71):

Je pense que la meilleure façon de le faire est (pour éviter un surcroît de travail en créant de nouveaux rendu passe par exemple) pour modifier le rendu WebGL (src/renderers/WebGLRenderer.js) et ajouter un support pour un nouveau type d'objet, peut-être les appeler "occlusionObjects".

Si vous regardez dans le moteur de rendu, vous verrez deux listes d'objets en cours, opaqueObjects et transparentObjects. Le moteur de rendu trie les objets affichables dans ces deux listes, de sorte qu'il peut d'abord rendre les objets opaques, puis les objets transparents qui les suivent. Ce que vous devez faire est de stocker tous vos nouveaux objets dans la liste occlusionObjects plutôt que les deux. Vous verrez que les objets opaques et transparents sont triés en fonction de leurs propriétés matérielles. Je pense ici, vous pouvez ajouter une propriété à un objet que vous voulez être un occluder ("myObject.occluder = true", peut-être), et juste sortir ces objets. Une fois que vous avez les trois listes, regardez ce que fait la fonction render() avec ces listes d'objets. Vous verrez quelques endroits avec un rendu des appels comme celui-ci:

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

Ajouter quelque chose comme ça avant cette ligne, pour désactiver l'écriture dans les tampons de couleur, rendent les objets d'occlusion dans la mémoire tampon de profondeur seulement, puis réactiver le tampon de couleur avant de restituer les objets restants.

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

Vous aurez besoin de faire cela à quelques endroits, mais cela devrait fonctionner. Maintenant, vous pouvez simplement marquer les objets de votre scène comme "occluder = true" et ils ne rendront dans le tampon de profondeur, permettant à la vidéo de montrer et d'occlure tous les objets opaques ou transparents rendus derrière eux.