Creating Portals Using ThreeJS

Question

I am trying to make portals using ThreeJS. I found this page. Mini Portals This explains how to make portals with OpenGL. So I tried to replicate the portal view function in TJS. Now this is my result:

The left portal (right camera) is an ordinary camera, and the right portal (left camera) is a view matrix obtained from the textbook. As you can see, viewing the portal on the right is rather strange.

The main problem here is that the scaling of the images is incorrect and the angle im that sees the images on the portal is incorrect. At present, his apartment and show where I pointed the camera, but I want the portal where the scaling is correct (the image on the portal is the same scale as the world itself), and what is visible on the portal depends on the angle. where am i looking

What am I doing wrong and what should I do to fix this?

Answer 1

It has been a while. But I found a way to do what I need. 4th parameter is not needed. Basically I am sending a camera and my 2 Meshes portals to my function. Instead of using the matrix multiplication method (doesn't work in ThreeJS, because ThreeJS has some weird stuff), I broke the matrices into pieces. Then manually calculate the new position and rotation and build a new matrix from it. And I installed this new matrix as my worldMatrix cameras. Voila - a working portal. The next step is the squint of the furums, because we want our nearest platform to be a portal, otherwise we may have some objects between the camera and the portal.

And the rendering procedure itself uses a stencil buffer to display portals correctly. If someone needs this, it will help you: 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; } 

Note: I have moved my answer to the answers so that I can mark the answer.

Answer 2

For people who want an excellent portal system using Three.js: https://github.com/markotaht/Portals