Tween.js Update Steps are different on mobile devices

Help & Support
#1

If you look at my project here:

  1. on desktop, earth starts zoomed in and zooms out until max distance is reached over 2 seconds (as desired)
  2. on mobile, earths starts zoomed in, zooms out for 2 seconds, does not reach the max distance in that time, and then snaps to the max distance.

It seems like the tween.js update function behaves differently on mobile devices OR the camera distance behaves differently on mobile devices. Any advice on this?

#2

How does the zoom tween logic set? Is it purely a single value that defines the distance? Or is there some extra logic in place?

#3 
OrbitCamera.prototype.zoomTween = function () {   
    var self = this;
    var start = this.distanceMin;
    var dest =  this.distanceMax;

    var position = this.entity.getPosition();

    // create an object to tween its properties
    var p = {
        from: start,
        to: dest
    };

    var tween = this.app
        .tween(p)
        .to({from: dest}, this.duration, pc.Linear);

    tween.on('update', function() {
        var pos =  new pc.Vec3(0, 0, p.from);
           this.entity.setLocalPosition(pos);
        }.bind(this));

    tween.on('complete', function () {
        self.hasZoomed = true;
        self.initializeOrbit();
    });

    tween.start();
};

In project:
distanceMin = 250
distanceMax = 500
duration = 2

self.initializeOrbit(); then sets the distance to 500 in case it did not reach it after the duration, which is the case on mobile.

#4

When does zoomTween get called? Maybe try to call it later in the process to see what happens?

#5

it gets called in OrbitCamera.prototype.initialize(); which happens as the project loads. I don’t see how calling it later will solve anything.

#6

It’s also possible that there is a clamp on delta time in tween.js if the framerate on the mobile is low. What’s the source code for tween.js?

I’m wondering if anything at the beginning of the app is causing there to be a large dt between the call for starting and the first update call.

ie
tween.start() -> large delta time -> first tween update

So calling it later after everything is created and loaded may ‘work’ and narrow down the cause.

#7

That was also a theory I had about the dt.

It’s the standard tween.js that Playcanvas supplies? https://github.com/playcanvas/playcanvas-tween

I am not sure how dt works in it.

#8

With a quick look, the TweenManager gets dt from the engine which has a max dt of 0.1. I can’t see how this would affect it not finishing as the time elapsed is based on that dt.

#9

This seems to be a bug in Playcanvas, it even does it when using the mobile simulator in Chrome.

dt seems to be different on a mobile device, any devs care to weigh in?

@yaustar do you work for Playcanvas?

Tween smoothness issues
#10

Nope. Sorry.

20 characters

#11

Do you have the source project link handy?