Jump to content

Tweening in render loop


Recommended Posts

Hi there!

I'm still fighting with my labels :) Now they follow around nicely, but I'd like them to not just linearly move but tween continuously. (similar to this: http://codepen.io/grayghostvisuals/pen/kepDb/)

I've tried animating from current position to new position in the update loop but it stacks up a million animations and does nothing. I had a look at blended animation too with no success.


var tweenLabel = new BABYLON.Animation("tweenLabel", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);

// Animation keys
var keys = [];
    frame: 0,
    value: label.position

    frame: 100,
    value: newPosition

scene.beginAnimation(label, 0, 100, false);

What's the trick? :D



Link to comment
Share on other sites

Hey Adam, thanks hehe but I know it works outside the loop :)  My problem is specifically about constantly tweening a position (to follow the camera for instance, or the mouse pointer etc etc). Maybe I shouldn't use the animate function and just += the position manually in the render loop?

Link to comment
Share on other sites

Numa,  You want to just set the position of something in a beforeRender.  Forget starting an animation, the before render IS the animation.

I did something similar, not sprites or in a before render, but label meshes & in a registerAfterworldMatrixUpdate.  It kept a label above a mesh.  The part that would be similar to your before render is:

	label.position.x = cloth.position.x;
	label.position.y = cloth.position.y + 5;
	label.position.z = cloth.position.z;

Here is an old scene I did.

Link to comment
Share on other sites

I ended up doing it manually as you guys suggested. I used an old "chase" behavior I had lying around somewhere, works perfectly :)

scene.registerBeforeRender(function () {
    var targetDirection = newPosition.subtract(label.position);

    var speed = 0.005;
    var moveDistance = speed * deltaTime;

    // Move towards target until we're really close
    if (targetDirection.length() > moveDistance / 10)
        // Here I don't use the normalized targetDirection vector so that the object
        // slows down before reaching the target. Similar to an ease-out tween.
    // If we're too close just jump to target position to avoid overshooting
        label.position = newPosition;

Thanks again!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...