<p>The magic phrases for what I'm trying to achieve are &quot;oblique frustum&quot;, &quot;asymmetric projection&quot;, or &quot;off-axis camera&quot;. I haven't implemented it in three.js but achieved the right effect with this unity plugin. But the general concept is to use the more esoteric fields in the projection matrix to create a skewed view volume.</p>
<ul>
<li><a href="https://docs.unity3d.com/Manual/ObliqueFrustum.html" rel="nofollow noreferrer">https://docs.unity3d.com/Manual/ObliqueFrustum.html</a></li>
<li><a href="https://jsantell.com/portals-with-asymmetric-projection/" rel="nofollow noreferrer">https://jsantell.com/portals-with-asymmetric-projection/</a></li>
<li><a href="https://assetstore.unity.com/packages/tools/camera/offaxiscamera-98991" rel="nofollow noreferrer">https://assetstore.unity.com/packages/tools/camera/offaxiscamera-98991</a></li>
</ul>

CC BY-SA 4.0
2022-07-24T22:58:30.847Z
2022-07-24T22:58:30.847Z
Andrew Chatham
<p>I want to render as if someone is looking at a landscape through a window, adjusting for the viewer's head position. The landscape is easy enough (just a distant plane), but I'm not sure how to approach the window frame.</p>
<p>It seems like I want perspective <em>within</em> the window frame but for the frame itself to be fixed to the four corners of the viewport.  I'm not sure what I want matches a frustum model, because the view I want isn't rectangular? Or maybe at really far distances and low FOV it'll get close?</p>
<p>Here's an example of rendering from a distan camera with a small FOV, one head-on and one from a side view. The head-on is fine, but in the side-view the frame has depth but is no longer aligned with the viewport.</p>
<p><a href="https://i.sstatic.net/OZuRi.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/OZuRi.jpg" alt="window square to the viewport, head-on" /></a>
<a href="https://i.sstatic.net/FlikD.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/FlikD.jpg" alt="window viewed from the side" /></a></p>
<p>I'm using three.js but not tied to that and can rewrite the shaders if need be. I have a <a href="https://jsfiddle.net/achatham/3okmbaun/32/" rel="nofollow noreferrer">demonstration of a stylized frame</a> with a distant camera, high zoom, and exaggerated lateral movement, which sort of gets what I'm after, but I'm not confident in the approach.</p>

<perspective><camera-matrix>
Camera model for rendering the viewport as a window frame?
Andrew Chatham
# Camera model for rendering the viewport as a window frame?

(Asked by: username_0 on 2022-07-18)

I want to render as if someone is looking at a landscape through a window, adjusting for the viewer's head position. The landscape is easy enough (just a distant plane), but I'm not sure how to approach the window frame.

It seems like I want perspective *within* the window frame but for the frame itself to be fixed to the four corners of the viewport. I'm not sure what I want matches a frustum model, because the view I want isn't rectangular? Or maybe at really far distances and low FOV it'll get close?

Here's an example of rendering from a distan camera with a small FOV, one head-on and one from a side view. The head-on is fine, but in the side-view the frame has depth but is no longer aligned with the viewport.

[![window square to the viewport, head-on](https://i.sstatic.net/OZuRi.jpg)](https://i.sstatic.net/OZuRi.jpg)
[![window viewed from the side](https://i.sstatic.net/FlikD.jpg)](https://i.sstatic.net/FlikD.jpg)

I'm using three.js but not tied to that and can rewrite the shaders if need be. I have a [demonstration of a stylized frame](https://jsfiddle.net/achatham/3okmbaun/32/) with a distant camera, high zoom, and exaggerated lateral movement, which sort of gets what I'm after, but I'm not confident in the approach.

**Tags:** perspective, camera-matrix


---

## 1 answers

### Answer by username_0 on 2022-07-24. Score: 1

The magic phrases for what I'm trying to achieve are "oblique frustum", "asymmetric projection", or "off-axis camera". I haven't implemented it in three.js but achieved the right effect with this unity plugin. But the general concept is to use the more esoteric fields in the projection matrix to create a skewed view volume.

* <https://docs.unity3d.com/Manual/ObliqueFrustum.html>
* <https://jsantell.com/portals-with-asymmetric-projection/>
* <https://assetstore.unity.com/packages/tools/camera/offaxiscamera-98991>


---

