Erstellen von Portalen mit ThreeJS

Question

Ich versuche Portale mit ThreeJS zu machen. Ich habe diese Seite gefunden Mini-Portals Das erklärt, wie man Portale mit OpenGL macht. Also habe ich versucht, die Portalansicht in TJS zu replizieren. Nun ist dies mein Ergebnis:

Die linke Portal (rechte Kamera) ist normal Kamera und rechts Portal (linke Kamera) wird die Ansicht Matrix aus Tutorial bekommen. Wie Sie sehen können, ist die Portalansicht auf der rechten Seite ziemlich komisch.

Das Hauptproblem hier ist, dass die Skalierung der Bilder alle falsch ist und der Winkel, der die Bilder im Portal sieht, falsch ist. Derzeit ist es flach und zeigen, wo ich die Kamera zeigte, aber was ich will, ist Portal, wo die Skalierung korrekt ist (Bild auf Portal ist der gleiche Maßstab wie die Welt selbst) und was im Portal zu sehen ist, hängt von dem Winkel ab, wo ich zusehe.

Was mache ich falsch und was soll ich tun, um es zu beheben?

Answer 1

Seine schon eine Weile. Aber ich habe einen Weg gefunden, zu tun, was ich brauchte. Der 4. Parameter wird nicht benötigt. Grundsätzlich sende ich Kamera und meine 2 Portalobjekte (Meshes) an meine Funktion. Anstatt die Matrixmultiplikation zu benutzen (funktioniert nicht in ThreeJS, weil ThreeJS ein paar komische Sachen damit macht) teile ich die Matrizen in Stücke. Berechnen Sie dann manuell die neue Position und Rotation und konstruieren Sie daraus die neue Matrix. Und ich setze diese neue Matrix als meine Kameras worldMatrix. Voila ein funktionierendes Portal. Der nächste Schritt ist die Schrägansicht fusrum, weil wir wollen, dass unsere Nearplane das Portal ist, ansonsten können wir einige Objekte zwischen der Kamera und dem Portal haben.

Und die Rendering-Prozedur selbst verwendet Stencil-Puffer, um die Portale korrekt zu rendern. Wenn jemand braucht, wird diese Ihnen helfen: https://th0mas.nl/2013/05/19/rendering-recursive-portals-with-opengl/

function portal_view(camera, src_portal, dst_portal, kordaja) { 
       src_portal.updateMatrixWorld() 
       dst_portal.updateMatrixWorld() 
       camera.updateMatrixWorld() 

       var camerapos = new THREE.Vector3(); 
       var camerarot = new THREE.Quaternion(); 
       var camerascale = new THREE.Vector3(); 
       camera.matrix.decompose(camerapos,camerarot,camerascale); 

       var srcpos = new THREE.Vector3(); 
       var srcquat = new THREE.Quaternion(); 
       var srcscale = new THREE.Vector3(); 
       src_portal.matrix.decompose(srcpos, srcquat, srcscale); 

       var destquat = new THREE.Quaternion(); 
       var destpos = new THREE.Vector3(); 
       var destscale = new THREE.Vector3(); 
       dst_portal.matrix.decompose(destpos,destquat,destscale); 

       var diff = camerapos.clone().sub(srcpos); 

       var ydiff = src_portal.rotation.y - dst_portal.rotation.y - Math.PI; 
       diff.applyAxisAngle(new THREE.Vector3(0,1,0),-ydiff); 
       var newcampos = diff.add(destpos); 
       var yrotvec = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0),-ydiff); 
       console.log(yrotvec) 
       srcquat = srcquat.multiply(destquat.inverse()); 

       camerarot = camerarot.multiply(yrotvec); 

       var inverse_view_to_source = new THREE.Matrix4(); 
       inverse_view_to_source.compose(newcampos,camerarot,camerascale); 

       return inverse_view_to_source; 
      } 

HINWEIS: zog ich meine Antwort auf die Antworten, so dass ich eine Antwort markieren.

Answer 2

Für Menschen, die ein großes Portal-System mit Three.js wollen: https://github.com/markotaht/Portals