I’m quite new to three.js but I’m absolutely loving it so far!
Now, I’m trying to achieve a certain type of effect that’s giving me headaches, and I’d love it if anyone could point me to the right direction!
This is a followup to a StackOverflow question I posted a few days ago. As you can see, I’m trying to have a “window to the world’ type of effect where an object of a scene is a mask to another scene.
Here’s a CodePen with what I’ve tried so far. I’m using a RenderTarget to generate a texture of the next scene, which I apply to the object that is supposed to be the mask in the current scene. I’m using the same camera because I want the perspectives and sizes of both scene to match. But once the generated texture is applied to the mesh, well… They obviously don’t.
Is there a way to make the generated texture match the global scene, or should I forget about using a single camera? I’ve thought about using multiple cameras, but then I’d have to somehow counter their respective perspectives to avoid distortion, and I’ve got to admit that I have no idea as to how to do that.
Or maybe using a RenderTarget isn’t the right approach and there’s a simpler way?
I’m quite lost as to how to move forward with that effect, and any guidance would be truly appreciated!
Thanks!
I ended up using the EffectComposer() and nested RenderPass() and MaskPass() in order to achieve the wanted result with a single camera! I’m not sure how it will hold up performance-wise when I add complexity to the scenes, but it’s a start!
I’m actually starting to understand the EffectComposer and its magic.
That is an exciting project. I suggest using a second camera and investigating the setViewOffset method: three.js docs
(Related: Head tracking with WebRTC | Audun M Øygard (Not all of it, but scroll down to the drawing nearest the reference to setViewOffset.))
Basically, you want the second camera to have the same position and base FOV as the primary camera, orientation along the plane normal of the “portal”, and a view offset centered at the center of the portal and exactly encompassing the portal in width and height. (At least that is what I think.) You would update the camera and render target texture in the render loop before the main render, where the texture is mapped onto the portal plane geometry.
I haven’t had the chance to investigate the setViewOffset() method yet, but I’ll definitely give it a look!
In the meantime, I’ve taken a different approach and tried relying on the EffectComposer, and it works quite well I must say! Here’s a new CodePen with the result.
It works well with a single portal. However, I’m running into a bit of a conundrum when I try to have multiple nested portals. Here’s what I tried. Basically, it seems like every pass is superposed and no mask is applied.
Now, I must admit I’m really tired and I’ve been sitting at my desk for far too long, so it’s possible I’m missing something obvious here. It certainly does feel like I’m getting closer, but at the moment I just can’t focus anymore. Maybe I should render these passes in reverse?
I suggest using a second camera and investigating the 
Maybe I should render these passes in reverse?