Using OrbitControls with manual object transformation causes a wobbling object

Questions
1

I have implemented a technique to keep a quad positioned behind all scene objects. This is achieved by manually transforming screen filling quad. I have implemented this algorithm elsewhere - an iOS app using both MetalKit and GLKit.

In this video I am using an instance of OrbitControls to fly the camera around a stationary foreground object. As I do this the quad jiggles and wobbles and basically cannot sit still.

Is there any way to synchronize the camera transform with the quad transform and then render the results? It seems here there is no synchronization and rendering is happening at the wrong time.

2

Do you mind demonstrating the issue with a live example? It might be easier to detect the delay when debugging the application.

3

Yep. I’ll put the project on github.

1 Like
4

Here is a live example https://turner.github.io/cameraplane/

Notes:

  • Source code https://github.com/turner/cameraplane
  • An instance of PlaneBufferGeometry is used as the backdrop
  • matrixAutoUpdate = false
  • In main.js refer to functions setup() and renderLoop().
5

Can you please try to add the following line after orbitControl.update(); in your render loop:

camera.updateMatrixWorld();

Does this solve the problem?

6

Boom! Fixed. You sir, are a genius! Thanks a million.

7

Fantastic^^! One minor thing. It’s good for performance if you avoid object creation in your render loop. So instead of doing this…

const A = matrix4Factory.clone();

…it’s better to create matrices A, B, C and D once and reuse them.

8

Yep. For sure.

BTW, I was thinking of writing this up in a Medium post since I get into lots of matrix manipulation which most folks find challenging. What do you think?

9

If you think that existing resources do not sufficiently explain those topics, why not^^.