Change camera dynamically

[tommasoturchi]

Hi,
Can someone please point me to the best way I could swap an orthographic camera with a perspective one dynamically? I'm managing it myself with setDefaultCamera, but can't figure out how to swap between the two. Thank you!

[drcmda]

https://codesandbox.io/s/switching-between-cameras-2jod7

export default function App() {
  const [ortho, set] = useState(false)
  useEffect(() => {
    const interval = setInterval(() => set((state) => !state), 1000)
    return () => clearInterval(interval)
  }, [])
  return (
    <Canvas>
      <PerspectiveCamera position={[0, 0, 2.5]} fov={100} makeDefault={!ortho} />
      <OrthographicCamera position={[0, 0, 5]} zoom={170} makeDefault={ortho} />

[looeee]

Note that while this works, in practice I've found that in a real app swapping perspective -> orthographic causes problems with systems like controls and postprocessing.
In the end, the only way I've been able to get a smooth transition without weird flashing (from post) and jumps (from controls) is to create a proxy orthographic camera and when I want to swap, do:

perspectiveCamera.projectionMatrix.copy(proxyOrthographicCamera.projectionMatrix). 

(actually I'm lerping between the matrices to give a smooth transition but the end result is the same).

... although note that this comes with it's own set of problems, notably you now need to make sure that perspectiveCamera.updateProjectionMatrix() never gets called when you are in ortho mode, and you will have to handle resizing yourself.

In short, swapping perspective -> orthographic on the fly is a pain in three.js and r3f for anything except for simple apps.

[drcmda]

could you make a repro that shows this kind of flicker? i can image that things like field of view will cause a glitch but haven't seen anything really bad so far (our app at work switches them with a button).

ps. now that controls also have a makeDefault i think drei cameras should call update on it when they render. that should also help a lot.

[looeee]

Yeah the controls issue is the lesser problem I think.
For post the issue I had is with the SSAO pass - it causes an ugly dark frame to be rendered on transition. Might be a problem for other passes too.
I'll make a repro when I have time over the next few days.

This could also possibly be solved by having two sets of passes, one for each camera (possibly two effect composers as well) and switching these when you switch camera.

In any case, for my app I need to transition smoothly between the two views so I'll still need to lerp the matrices. I was just hoping to be able to switch over to the ortho cam once the transition finished as then I don't need to worry about resizing.

[looeee]

@drcmda apologies that it took me so long to get around to this.

Here's a sandbox that will switch from ortho -> perspective on keypress. EDIT: updated the sandbox and these problems are now fixed, thanks @drcmda.

The issues with OrbitControls that I mentioned above seem to be ok now. However, when using postprocessing there are two problems.

1. First, I thought there was a green frame flashing during the switch but after a few tries I managed to hit print screen at just the right moment and it's actually the normals being rendered for some reason - I think just for a single frame.

2. Next, if you switch between views a few times, it turns out that new WebGL contexts are being generated on each switch, and eventually you'll get a crash with these errors:

WARNING: Too many active WebGL contexts. Oldest context will be lost.

Uncaught TypeError: Cannot read properties of null (reading 'alpha')
    at EffectComposer.createBuffer (postprocessing.esm.js:3216)
    at new EffectComposer (postprocessing.esm.js:3138)
    
....

THREE.WebGLRenderer: Context Lost.

Actually I seem to remember having this problem before when trying to switch effects on regress. I thought we had solved it though? 🤔

EDIT: Yup, I already raised an issue for the crash here:

pmndrs/react-postprocessing#97

Created another issue here
pmndrs/react-postprocessing#107

[looeee]

Here's a newer version that animated the transition between cameras

https://codesandbox.io/s/r3f-camera-perspective-ortho-animated-transition-v1-forked-8uvue

[Irev-Dev]

Hey @looeee,

Wondering if I could could lend a pointer or two.
I'd like transition between two cameras, a pers and orth camera like you've got here, with the exception is that I'd like to keep the position and target the same between the two cameras, i.e.

Screen.Recording.2022-04-28.at.11.32.15.am.mov

I thought it would be a pretty straight forward change, but I've not had much success. Do you have any broad stroke guidance of what you'd change in ControlledCameras.tsx to get this effect.?

[looeee]

You can comment out these lines as a starting point. That might be enough as long as you're not setting the target and position programmatically anywhere

        // Transition the position and target
        // if (mode === "perspective") {
        //   await controls.setLookAt(...persPos, ...persTarget, true);
        // } else if (mode === "orthographic") {
        //   await controls.setLookAt(...orthoPos, ...orthoTarget, true);
        // }

[Irev-Dev]

Thanks @looeee,

I ended up taking a different path, commenting out that section did work but I was struggling to make the zoom/dolly match when changing cameras, as I wanted the view to stay the same as much as possible, just with and without perspective.

Your animation is really nice but decide I would try something with only the bare basics.
This is what I've got https://codesandbox.io/s/polished-silence-ec6v6d?file=/src/App.js:2010-2013

Definitely not without bugs, when switching camera's it seems to render one bad frame sometimes, I'm guessing that's because of the setTimeout that I'm using, but changes didn't seem to take effect without it 🤷 .

(Most of the magic is in the useLayoutEffect in the Cams component)

[looeee]

Cool, yeah if you don't need to store the position and target and you don't need to lerp between the two camera projections then my example if complete overkill :)

[nickyvanurk]

I had trouble getting a seamless transition between a perspective and an orthographic camera myself. After some work I finally got it working. For future reference see https://gist.github.com/nickyvanurk/9ac33a6aff7dd7bd5cd5b8a20d4db0dc for a working implementation in r3f and vanilla three.js.

[talkingtab]

The code sandboxes are very helpful. My need was a little different - to modify the "Views" example: https://codesandbox.io/s/bp6tmc
to have one View using a perspective camera while another view uses an OrthographicCamera. Works GREAT!!!
thanks