Stutter and lag when using lookAt function

Hi guys,
I am using the lookAt function to keep my player looking at an object constantly. However when I move around this object while using lookAt, it keeps lagging, or studder.
The build to my project is:

When you choose “Auto Gallery Tour”. It will move to the picture. Then try using AWSD to move around and you will see that it keeps studdering. I am just using lookAt function to get the player keep looking at the picture, so I am not sure why it is lagging. Any insights into this would be greatly appreciated.

Thank you!

Hi @dongqtm,

That’s a very nice project!

Testing it on Chrome/Windows camera seems to be smooth, I can’t see any visible stuttering. Unless you are talking about the inertia that allow the camera to smoothly come to a stop when you release the keys.

If you aren’t doing it already, move your camera positioning code to the postUpdate(), instead of update(). Usually that’s enough to solve this kind of issues.

If you keep getting it, can you post a video recorded as close as possible to 60fps that demonstrates the issue?

PS Quick advice to solve thin lines on your images, select your image assets and on the inspector change the UV address to Clamp to texture. This will solve issues like this:

image

2 Likes

Hi Leonidas,

Thank you for your insights!
You can see in the video below what I meant by the lag:

I read the manual that postUpdate run after all scripts have run. But in my case I am just using lookAt function for the player to look at the picture constantly and there are no other scripts, so I am not sure if I understand the postUpdate correctly, could you explain what it does in this scenario please?

Thank you so much for the texture tip! I am going to change it in my project

Thanks

Ideally the lookAt function should be called after the camera has been moved during each frame.

If the lookAt function is called before the camera movement, it will look slightly offset and can cause the issue that you are seeing in the video.

Imagine if you look at an object in the room and did a side step. You will no longer be looking at the object.

If the code for moving the camera is in a separate script to the lookAt, then one way to help this issue is to call lookAt in the postUpdate function as that will get called after all the scripts update functions have been called.

2 Likes

I tried that and it works!! Thank you so much guys for your help you guys are awesome!

Just another quick question if you guys don’t mind, when you try playing the game on your mobile phone, you can see the words in the UI are really small and seem to be in lower resolution than the desktop. Would you have any tips to improve this aspect of the game?

Thank you!

Hi @dongqtm,

You can easily fix that on your UI screen component, by changing your reference resolution and playing with the scale factor.

Take a look at this page from the manual, it contains a lot of examples on how to setup this:

https://developer.playcanvas.com/en/user-manual/user-interface/screens/

Awesome i will check it out, thanks Leonidas!

1 Like