THREE.js personnalisé vr/effet de carton

Question

J'essaie de créer un visionneuse de panorama VR personnalisé en utilisant THREE.js. J'ai réussi à créer:

• 2 scènes,
• 2 matériaux et mailles (images différentes chargées pour l'œil gauche et à droite),
• avec des ciseaux (renderer 2 caméras en perspective).

Le résultat ressemble à ceci:

Tout semble bien pour moi, mais je voudrais ajouter une sorte de « cadre en carton vr noir » pour les deux caméras. Je ne suis pas tranquille sûr de savoir comment cet effet est appelé, mais voici quelques exemples:

Pouvez-vous s'il vous plaît me donner quelques conseils?

Answer 1

Le mot que vous recherchez est "barrel distortion". Vous pouvez voir une implémentation de travail dans le WebVR-polyfill here. Selon la façon dont vous comprenez le webgl brut qui pourrait être un peu difficile à lire cependant.

Voici donc les étapes de base d'une approche très polyvalent en utilisant deux désamorcent passes:

• qui a divisé l'image que vous avez déjà est rendu dans un framebuffer (see here pour un exemple) au lieu de rendre à l'écran . Ce framebuffer sera utilisé comme texture dans le second renderpass.
• Configurez une autre scène et une autre caméra pour la deuxième passe de rendu. La caméra doit être une caméra orthographique allant de -1 à 1 sur l'axe des x (quelque chose like this).
• Configurez deux maillages (basés sur un PlaneBufferGeometry) pour les deux fenêtres et attribuez les coordonnées UV de sorte que le maillage gauche utilise la moitié gauche du tampon d'image comme texture et le maillage droit utilise la moitié droite.
• Ajoutez les maillages à la seconde instance de scène, placez-les les uns à côté des autres.
• appliquer la distorsion en barillet aux sommets des mailles. C'est essentiellement ce qui est fait dans le code from the WebVRPolyfill.
• render la seconde scène à l'écran