One-frame off / delay when modifying object position from EVENT_MOUSEMOVE

Help & Support
1

I’m dealing with an issue where the mouse movement and object positional update do not happen on the same frame.

One of the official PlayCanvas tutorials also deals with this issue, see below:

https://developer.playcanvas.com/en/tutorials/mouse-input/
mouseinputlag2
mouseinputlag
(and here’s two frames of movement to better show how the cube is one frame off from the mouse)

I imagine you would update the cube’s position in a different update loop (eg. update cube to mouse position before the frame renders), but I’m still super new to PlayCanvas and am not really sure how to approach that.

The tutorial simply changes the position when the EVENT_MOUSEMOVE event fires, resulting in a 1 frame delay. I assume this below logic runs after the frame was already rendered, resulting in the cube changing position one frame too late:


Mouse.prototype.onMouseMove = function (event) {
    // Use the camera component's screenToWorld function to convert the
    // position of the mouse into a position in 3D space
    var depth = 10;
    var cameraEntity = this.app.root.findByName('Camera');
    cameraEntity.camera.screenToWorld(event.x, event.y, depth, this.pos);

    // Finally update the cube's world-space position
    this.entity.setPosition(this.pos);
};

How could this be solved?

Thanks!

2

Found these two GitHub issues related to this:

Seems like this is an unfixable engine issue? :frowning:

3

I think you’re spot on … the reason is that the input update being handled after the script update. I’m not sure if there’s any workaround apart from fixing it in the engine, I don’t see one.

1 Like
4

The issue we have is that the browser doesn’t fire the events until AFTER we render. I’m not sure if it is fixiable at the Engine level unfortunately as we are dependent on the order of events for ‘frame update’.

More info: Application Lifecycle | Learn PlayCanvas

1 Like
5

Yeah after doing a bunch of research into this, seems almost completely impossible to eliminate the 1-frame-delay with mouse movement, as it is a fundamental browser limitation.

Not sure if inputs are browser-limited as well, but that’s probably of negligible importance compared to mouse movement

1 Like